:root {
  --bg: #f4f6fb; --card: #fff; --line: #e3e8f2; --text: #1c2333; --muted: #6b7690;
  --blue: #1f6fd6; --blue-dark: #174ea6; --blue-soft: #dbe9fb; --green: #2f9e44; --red: #d6336c; --amber: #f59f00; --purple: #6f2cf5;
}
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1 { font-size: 20px; margin: 0 0 6px; } h2 { font-size: 16px; margin: 0 0 8px; } h3 { font-size: 14px; margin: 0 0 6px; }
.muted { color: var(--muted); } .small { font-size: 12px; } .right { text-align: right; } .grow { flex: 1; min-width: 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .col { display: flex; flex-direction: column; gap: 8px; }
.wrap { max-width: 1500px; margin: 0 auto; padding: 14px 18px 40px; }

.btn { border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 6px 12px; }
.btn:hover { border-color: #b9c4da; } .btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; } .btn.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn.red { background: var(--red); border-color: var(--red); color: #fff; } .btn.purple { background: var(--purple); border-color: var(--purple); color: #fff; }
.btn.dark { background: #2b3350; border-color: #2b3350; color: #fff; } .btn.sm { padding: 3px 8px; font-size: 12px; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=month], input[type=search], select, textarea {
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 9px; background: #fff; max-width: 100%; }
textarea { width: 100%; resize: vertical; min-height: 70px; }
label.f, div.f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
label.f > *, div.f > * { font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text); }

.brand { display: flex; align-items: center; gap: 11px; } .brand b { font-size: 24px; letter-spacing: -.02em; white-space: nowrap; } .brand span { display: block; font-size: 10px; letter-spacing: .18em; color: var(--muted); }
.brand-mark { width: 40px; height: 40px; flex: 0 0 auto; display: block; }
.logo { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, #6f2cf5, #1f6fd6); display: grid; place-items: center; color: #fff; font-size: 22px; }
.nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 6px; margin: 12px 0 8px; }
.nav button { background: var(--blue); color: #fff; border: 0; border-radius: 4px; padding: 9px 6px; font-weight: 600; font-size: 13px; }
.nav button.on { background: var(--blue-dark); } .nav button.logout { background: #6b7280; }
.badge { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; background: #e9edf5; color: #3b455e; white-space: nowrap; }
.badge.ok { background: #d3f3db; color: #1c6b31; } .badge.warn { background: #fff0c9; color: #8a5a00; } .badge.bad { background: #ffdbe6; color: #a01747; } .badge.blue { background: var(--blue-soft); color: var(--blue-dark); }
.setup { background: #dfe9f8; border-radius: 8px; text-align: center; padding: 26px 16px; margin: 10px 0; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }

/* chats */
.chat-title { font-size: 17px; font-weight: 700; margin: 12px 0 8px; }
.chat-grid { display: grid; grid-template-columns: 250px minmax(0, 1fr) auto 64px; gap: 10px; height: calc(100vh - 250px); min-height: 430px; }
.inbox { display: flex; flex-direction: column; min-height: 0; } .inbox-list { overflow: auto; flex: 1; margin-top: 8px; }
.ci { display: block; width: 100%; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 8px; padding: 8px 10px; margin-bottom: 6px; }
.ci.on { background: var(--blue-soft); border-color: #a9c8f3; } .ci .resp { border-left: 3px solid #9aa6c2; padding-left: 6px; margin-top: 5px; font-size: 10px; letter-spacing: .06em; color: var(--muted); }
.ci .dot { display: inline-block; min-width: 17px; text-align: center; border-radius: 9px; background: var(--red); color: #fff; font-size: 10px; padding: 0 4px; }
.conv { display: flex; flex-direction: column; min-height: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; position: relative; }
.conv-head { padding: 8px 12px; border-bottom: 1px solid var(--line); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.kv b { display: block; font-size: 10px; letter-spacing: .08em; color: var(--muted); font-weight: 600; }
.notes-bar { background: #fff8e1; border-left: 4px solid var(--amber); padding: 6px 12px; font-size: 12px; display: flex; gap: 10px; align-items: center; }
.msgs { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 62%; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; background: #fff; position: relative; overflow-wrap: anywhere; }
.msg .txt { white-space: pre-wrap; }
.msg.out { align-self: flex-end; background: var(--blue-soft); border-color: #c3d9f5; } .msg.in { align-self: flex-start; }
.msg .meta { font-size: 10.5px; color: var(--muted); margin-bottom: 3px; } .msg .quote { border-left: 3px solid #9aa6c2; padding-left: 7px; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.msg .acts { position: absolute; top: -12px; right: 6px; display: none; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 1px 5px; white-space: nowrap; }
.msg:hover .acts { display: block; } .msg .acts button { border: 0; background: none; padding: 1px 3px; }
.msg img, .msg video { max-width: 220px; max-height: 220px; border-radius: 6px; display: block; margin-top: 4px; } .msg audio { max-width: 240px; margin-top: 4px; }
.ticks { float: right; margin-left: 8px; font-size: 11px; color: var(--blue); }
.latest { position: absolute; right: 16px; bottom: 96px; border-radius: 999px; }
.sup { padding: 7px 12px; border-top: 1px solid var(--line); font-size: 12.5px; } .sup a { color: var(--blue-dark); font-weight: 700; cursor: pointer; text-decoration: underline; }
.composer { border-top: 1px solid var(--line); padding: 8px 10px; display: flex; gap: 8px; align-items: flex-end; } .composer textarea { min-height: 42px; height: 42px; }
.reply-to { padding: 5px 12px; font-size: 12px; background: #f1f4fa; border-top: 1px solid var(--line); }
.rail { display: flex; flex-direction: column; gap: 6px; }
.rail button { border: 1px solid transparent; background: none; border-radius: 8px; padding: 6px 2px; font-size: 10px; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.rail button i { font-style: normal; font-size: 22px; } .rail button.on { background: var(--blue-soft); border-color: #a9c8f3; }
.tool { width: 340px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px; } .tool.full { position: fixed; inset: 20px; width: auto; z-index: 20; box-shadow: 0 10px 50px #0005; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { border: 1px solid var(--line); background: #f1f4fa; border-radius: 999px; padding: 3px 11px; font-size: 12px; }
.chip.on { background: var(--blue); color: #fff; border-color: var(--blue); } .chip.cat { border-left-width: 4px; }
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden; border: 3px solid transparent; background: #dde3ef; padding: 0; }
.thumb.sel { border-color: var(--blue); } .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb span { position: absolute; right: 4px; bottom: 4px; background: #000a; color: #fff; font-size: 10px; border-radius: 4px; padding: 0 4px; }
.noimg { display: grid; place-items: center; width: 100%; height: 100%; font-size: 26px; }
.warnbox { background: #ffe3ec; border: 1px solid #f7b4c8; color: #8f1640; border-radius: 8px; padding: 9px 11px; } .infobox { background: #eef3fb; border-radius: 8px; padding: 9px 11px; font-size: 12.5px; }

/* tables, stats */
table { width: 100%; border-collapse: collapse; background: #fff; } th { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 9px 8px; border-bottom: 1px solid var(--line); }
td { padding: 9px 8px; border-bottom: 1px solid var(--line); vertical-align: top; } .scroll-x { overflow-x: auto; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 10px 0; }
.kpi b { display: block; font-size: 10.5px; letter-spacing: .08em; color: var(--muted); text-transform: uppercase; } .kpi strong { display: block; font-size: 22px; margin: 6px 0; } .kpi.hl { border: 2px solid #2f9e44; background: #f0faf2; }
.two { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 10px; } .three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.seg button { border: 0; background: none; padding: 5px 9px; border-radius: 5px; font-weight: 600; } .seg button.on { background: #2b3350; color: #fff; }
.bar { height: 5px; border-radius: 3px; background: #2a8a7a; } .li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.media-prev { width: 86px; height: 86px; object-fit: cover; border-radius: 6px; background: #dde3ef; display: block; }
.media-preview-content { display:flex; align-items:center; justify-content:center; min-width:0; }
.media-preview-content img,.media-preview-content video { display:block; max-width:100%; max-height:65vh; object-fit:contain; border-radius:8px; }
.media-preview-content audio { width:100%; }
.media-download { display:inline-flex; align-items:center; justify-content:center; color:inherit; text-decoration:none; }
.toggle { display: inline-flex; flex-direction: column; gap: 3px; } .toggle button { border: 1px solid var(--line); border-radius: 999px; font-size: 10px; padding: 1px 8px; background: #fff; } .toggle button.on { background: var(--blue); color: #fff; }
.login { max-width: 340px; margin: 12vh auto; } .modal-bg { position: fixed; inset: 0; background: #0006; display: grid; place-items: center; z-index: 30; padding: 16px; } .modal { background: #fff; border-radius: 10px; padding: 18px; width: min(640px, 100%); max-height: 90vh; overflow: auto; }
#toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 6px; z-index: 50; } .toast { background: #1c2333; color: #fff; padding: 9px 14px; border-radius: 8px; max-width: 360px; } .toast.err { background: #a01747; }
@media (max-width: 1000px) { .chat-grid { grid-template-columns: 1fr; height: auto; } .inbox-list { max-height: 260px; } .conv { height: 70vh; } .rail { flex-direction: row; flex-wrap: wrap; } .tool { width: auto; } .two, .three { grid-template-columns: 1fr; } .msg { max-width: 88%; } }
/* Studio design system — local fonts, no external assets. */
:root{--bg:#f3f7fb;--card:#fff;--line:#e1e9f0;--text:#20354a;--muted:#6b7f90;--blue:#087fb5;--blue-dark:#096a96;--blue-soft:#e6f3fb;--green:#41735d;--red:#b64444;--amber:#b07d28;--purple:#625975}
body{font-family: 'Segoe UI',Arial,sans-serif;font-size:13px;line-height:1.55}
h1{font-size:28px;font-weight:600;letter-spacing:-1px;margin-bottom:12px}
h2{font-size:17px;letter-spacing:-.3px}
h3{font-size:14px}
button,a,input,select,textarea{transition:background .15s,border-color .15s,box-shadow .15s}
/* The focus stroke overlaps the existing border: one contour, without an outer halo. */
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:-2px;box-shadow:none}
input:focus,textarea:focus,select:focus{outline:2px solid var(--blue);outline-offset:-2px;border-color:var(--blue);box-shadow:none}
svg[aria-hidden="true"]{width:19px;height:19px;flex-shrink:0}
.workspace{display:flex;min-height:100vh}
.sidebar{width:228px;flex-shrink:0;background:#172d40;color:#e0edf7;position:fixed;inset:0 auto 0 0;display:flex;flex-direction:column;padding:28px 18px 16px;z-index:10;overflow-y:auto}
.main{margin-left:228px;min-width:0;flex:1}
.brand{gap:11px}
.brand b{font-size:22px;letter-spacing:-.4px;font-weight:650;white-space:nowrap}
.brand>div>span{font-size:9px;letter-spacing:1.8px;color:#94afc5;text-transform:uppercase;white-space:nowrap}
.brand .brand-period{display:inline;color:#39b3ee;font-size:29px;letter-spacing:-1.5px}
.brand .brand-accent{color:#39b3ee}
.login-optional{font-weight:400;letter-spacing:0;text-transform:none;color:#9aa6c2}
.login-foot a{color:#8eacc3;text-decoration:none}
.login-foot a:hover{color:#e8f3fa}
.login .infobox{background:#e4f3e9;color:#1c6b31;font-size:12.5px;line-height:1.5}
.login textarea{padding:11px 13px;min-height:68px}
/* Separateur « ou » et bouton du fournisseur externe. Le bouton garde la hauteur et le rayon
   des boutons du formulaire : c'est une troisieme action du meme ecran, pas un encart colle. */
.login-or{display:flex;align-items:center;gap:10px;margin:2px 0;color:#8eacc3;font-size:11px;letter-spacing:1px;text-transform:uppercase}
.login-or::before,.login-or::after{content:"";height:1px;flex:1;background:#2a4a60}
.google-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:11px 13px;background:#fff;color:#1f2d3d;border:1px solid #d7e3ee;font-weight:600;font-size:13px}
.google-btn:hover{background:#f3f8fc;border-color:#b9cede}
.google-btn svg{flex:none}
.login-security a{color:#2aabee;font-weight:600;text-decoration:none}
.login-security a:hover{text-decoration:underline}
.logo{background:#2aabee;border-radius:9px;width:37px;height:40px;font-size:30px;font-weight:600;letter-spacing:-3px;line-height:1}
.logo span{display:inline;color:#172d40;font-size:30px;letter-spacing:0}
.workspace-label{display:flex;align-items:center;gap:9px;font-size:11px;border:1px solid #324e64;border-radius:7px;padding:10px 8px;margin:30px 0 12px}
.workspace-mark{display:grid;place-items:center;width:23px;height:23px;background:#28475f;border-radius:4px}
.workspace-label .badge{background:#28475f;color:#bdd6e8;font-size:8px;padding:2px 5px;margin-left:auto}
.nav{display:flex;flex-direction:column;gap:4px;margin:0}
.nav-label{font-size:9px;letter-spacing:1.5px;color:#8cacc5;padding:20px 12px 8px}
.nav button{display:flex;align-items:center;gap:12px;text-align:left;border-radius:6px;background:transparent;color:#bdd2e2;padding:11px 12px;font-weight:500;font-size:12px}
.nav button:hover{background:#203e55;color:white}
.nav button.on{background:#087fb5;color:#fff}
.nav-dot{width:5px;height:5px;border-radius:50%;background:#a6e3ff;margin-left:auto}
.sidebar-bottom{margin-top:auto;padding-top:32px}
.connection{font-size:10px;display:flex;gap:8px;align-items:center;padding:12px 3px;border-bottom:1px solid #304a60}
.status-dot{display:inline-block;width:6px;height:6px;background:#b8a07a;border-radius:50%;flex-shrink:0}
.status-dot.online{background:#88ad81}
.demo-label{font-size:8px;color:#bfa582;margin-left:auto}
.profile{display:flex;gap:9px;align-items:center;padding-top:17px}
.avatar{display:grid;place-items:center;background:#c9eaff;color:#146b97;border-radius:50%;width:33px;height:33px;font-weight:600}
.profile b{font-size:11px}
.profile .grow>span{display:block;color:#94b2c8;font-size:10px;text-transform:capitalize}
.logout{border:0;background:none;color:#aac6da;padding:5px}
.logout:hover{color:white}
.topbar{height:73px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-bottom:1px solid var(--line);background:#f8fbfd;gap:12px}
.breadcrumb{color:var(--muted);font-size:12px}
.breadcrumb span{margin:0 13px;color:#b1c4d2}
.breadcrumb b{color:var(--text);font-weight:500}
.availability{display:flex;align-items:center;gap:7px;font-size:11px}
#clock{font-size:10px;margin-left:16px}
.wrap{max-width:1800px;padding:24px 30px 20px}
.workspace-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);margin-top:25px;padding-top:14px;font-size:8px;letter-spacing:1.8px;color:#7890a4}
.workspace-footer span{letter-spacing:.1px;font-size:10px}
.btn{border-radius:6px;padding:8px 13px;font-weight:500;font-size:12px;box-shadow:0 1px 2px #20354a06}
.btn:hover{background:#f1f7fc;border-color:#b9cede}
.btn.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark)}
.btn.green:hover{background:#335f4c}
.btn.red:hover{background:#983737}
.btn.purple:hover{background:#504863}
.btn.dark{background:#1c4e70;border-color:#1c4e70}
.btn.sm{font-size:11px;padding:5px 9px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=date],input[type=month],input[type=search],select,textarea{padding:9px 11px;border-radius:6px;font-size:12px}
label.f,div.f{font-size:9px;letter-spacing:1px;gap:6px}
label.f>*,div.f>*{font-size:12px}
.card{border-radius:9px;padding:20px;box-shadow:0 2px 4px #20354a03}
.badge{font-size:9px;font-weight:500;padding:3px 7px;background:#eef3f7;color:#60778b}
.badge.ok{background:#e9f0e7;color:#416640}
.badge.warn{background:#f6eedc;color:#8b692f}
.badge.bad{background:#f8e7e3;color:#a24738}
.badge.blue{background:#e6f3fb;color:#096a96}
.setup{background:#eaf5fc;text-align:left;padding:24px;border:1px solid #c8e4f6}
.chat-title{font-size:25px;font-weight:600;letter-spacing:-.8px;margin:0 0 20px}
.chat-title .small{font-weight:400;letter-spacing:0;margin-left:12px}
.chat-grid{grid-template-columns:278px minmax(0,1fr) auto 62px;gap:14px;height:calc(100vh - 200px);min-height:520px}
.inbox{background:#fff;border:1px solid var(--line);border-radius:9px;padding:16px 10px}
.inbox-heading{font-weight:600;padding:0 4px 15px;display:flex;justify-content:space-between;align-items:center}
.inbox-heading .small{font-size:10px;font-weight:400}
.inbox> .row{gap:5px}
.inbox input{width:100px}
.inbox-list{margin-top:13px}
.ci{padding:14px 10px;border:0;border-bottom:1px solid #e9eff5;border-radius:6px;margin-bottom:3px}
.ci:hover{background:#f4f9fd}
.ci.on{background:#e6f3fb;border-color:transparent;box-shadow:inset 3px 0 #087fb5}
.contact-name{display:flex;gap:8px;align-items:center;min-width:0}
.contact-name b{font-size:12px;overflow-wrap:anywhere}
.contact-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#ddecf9;color:#357aab;flex-shrink:0;font-family:Georgia,serif;font-size:16px}
.ci:nth-child(3n+2) .contact-avatar{background:#dceff3;color:#437a89}
.ci:nth-child(3n) .contact-avatar{background:#e5e8ee;color:#677187}
.ci>.small{font-size:10px;margin-top:5px}
.ci .resp{border:0;font-size:8px;letter-spacing:.4px;padding:7px 0 0;color:#7d94a6}
.ci .resp b{color:#57758c;font-weight:500}
.ci .dot{background:#087fb5}
.conv{border-radius:9px;overflow:hidden}
.conv-head{padding:8px 14px;gap:8px;align-items:center;flex-shrink:0}
.conv-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px;min-width:0;flex:1}
.conv-head .kv{display:flex;flex-direction:column;align-items:flex-start;gap:5px}
.conv-head .kv>b{margin:0;font-size:10px;letter-spacing:.06em;color:#526a7c}
.conv-value{min-height:38px;display:flex;align-items:center}
.conv-controls>.chip,.conv-controls .select-trigger{height:38px;min-height:38px}
.conv-controls>.chip{min-width:38px;display:inline-flex;align-items:center;justify-content:center}
.conv-controls>.conversation-vip{display:inline-flex;align-items:center;gap:4px;justify-content:center;flex-shrink:0;min-width:46px;height:34px;min-height:34px;padding:5px 10px;border:1px solid var(--line);border-radius:6px;font-size:11px;font-weight:800;line-height:16px;letter-spacing:.04em}
.conversation-vip>svg{width:14px;height:14px;flex-shrink:0;stroke-width:2}
.conv-controls>.conversation-vip.on{color:#623507;background:#fbbf24;border-color:#e8a30b}
.conv-controls>button.conversation-vip.on:hover{background:#f2b51b;border-color:#cf9009}
.conv-controls>.badge{font-size:11px;line-height:1.4;white-space:normal;overflow-wrap:anywhere}
.conv-total{display:inline-flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:12px;color:#526a7c}
.conv-total b{font-size:14px;color:var(--text);white-space:nowrap}
.conv-language{font-size:13px;color:#526a7c}
.conversation-details{flex:0 0 auto;margin-left:auto;min-width:0}
.conversation-details>summary{display:flex;align-items:center;gap:8px;width:fit-content;margin-left:auto;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-size:12px;font-weight:600;color:#455d6e;background:#f8fbfd;cursor:pointer;list-style:none}
.conversation-details>summary::-webkit-details-marker,.notes-bar>summary::-webkit-details-marker{display:none}
.conversation-details>summary::after,.notes-bar>summary::after{content:'';flex:0 0 auto;width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 2px 3px 4px}
.conversation-details[open]{flex-basis:100%;margin-left:0;padding-top:8px;border-top:1px solid var(--line)}
.conversation-details[open]>summary::after,.notes-bar[open]>summary::after{transform:rotate(225deg);margin-top:5px}
.conversation-details-body{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:8px;padding:10px 12px;background:#f8fbfd;border-radius:6px;max-height:260px;overflow:auto}
.conversation-details-body .kv{min-width:0;max-width:100%}
.kv b{font-size:8px;margin-bottom:5px}
.notes-bar{display:block;flex-shrink:0;min-width:0;background:#f8f4e9;border-left:3px solid #c3a66b;padding:7px 14px;font-size:13px;line-height:1.5}
.notes-bar>summary{display:flex;align-items:center;gap:10px;min-width:0;min-height:24px;cursor:pointer;list-style:none;color:#756136}
.notes-bar>summary>b{flex-shrink:0;font-size:12px;font-weight:600}
.notes-preview{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#66573e}
.notes-bar[open] .notes-preview{visibility:hidden}
.notes-content{display:flex;align-items:flex-start;gap:12px;padding-top:10px;max-height:160px;overflow:auto}
.notes-text{flex:1;min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.notes-content>.btn{flex-shrink:0}
.msgs{background:#f8fbfd;padding:24px;gap:17px}
.msg{padding:12px 15px;border-radius:10px 10px 10px 2px;max-width:76%;font-size:15px;line-height:1.6;box-shadow:0 1px 2px #20354a05}
.msg.out{background:#e3f2fc;border-color:#cfe6f7;border-radius:10px 10px 2px 10px}
.msg .meta{font-size:12px;line-height:1.45;margin-bottom:7px;color:#526a7c}
.msg:focus-within .acts{display:block}
.conversation-compose{position:relative;flex-shrink:0;min-width:0}
.composer{padding:14px;background:white;align-items:center}
.composer textarea{height:46px;min-height:46px;background:#f4f8fb;font-size:15px;line-height:1.5}
.composer .btn{height:42px}
.latest{bottom:84px;box-shadow:0 2px 8px #20354a15}
.sup{padding:12px 18px}
.conversation-handling{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;min-width:0}
.conversation-handling-state{font-size:12px;font-weight:600;color:#526a7c}
.conversation-handling-state.is-handling{color:#216844}
.conversation-handling .conversation-handle{min-height:42px;padding:10px 16px;font-size:14px;font-weight:700;white-space:normal}
.conversation-handling .conversation-handle.primary{background:#0877a8;border-color:#0877a8;color:#fff;box-shadow:0 3px 8px #0877a826}
.conversation-handling .conversation-handle.primary:hover{background:#075c82;border-color:#075c82}
.conv>.conversation-handling{padding:12px 18px;border-bottom:1px solid var(--line);background:#f8fcff}
.rail{padding-top:6px;gap:9px}
.rail button{font-size:9px;padding:9px 2px}
.rail button:hover{background:#eaf3fa}
.rail button.on{border-color:#b9ddf4;background:#e6f3fb}
.rail button i{font-size:18px}
.tool{width:310px;border-radius:9px;padding:18px}
.tool .col{gap:12px}
.conversation-empty{margin:auto;padding:30px;text-align:center}
.empty-symbol{background:#e9f5fc;border:1px solid #cce6f7;border-radius:18px;display:grid;place-items:center;width:72px;height:72px;margin:0 auto 28px;transform:rotate(-7deg);color:#299ed5}
.empty-symbol svg{width:30px;height:30px;transform:rotate(7deg)}
.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:#267ea8}
.conversation-empty h2{font-family:Georgia,serif;font-size:28px;font-weight:400;letter-spacing:-.7px;margin:13px 0}
.conversation-empty p{font-size:12px;color:var(--muted);line-height:1.9}
.chips{gap:7px;margin:8px 0}
.chip{background:#f8fbfd;border-radius:5px;padding:6px 10px;font-size:11px}
.chip:hover{border-color:#a7cfe8}
.chip.on{background:#1c4e70;border-color:#1c4e70}
.grid3{gap:10px}
.thumb{border-radius:6px;background:#eaf1f7}
.warnbox{background:#faeee9;border-color:#e7c7ba;color:#9e4f3b}
.infobox{background:#edf6fc;padding:13px;border:1px solid #d7e9f5}
th{background:#f4f8fb;font-size:9px;padding:13px 12px;letter-spacing:.7px}
td{padding:15px 12px;font-size:12px}
tbody tr:hover{background:#f8fbfe}
.scroll-x{border-radius:7px}
.kpis{gap:15px;margin:20px 0}
.kpi{padding:22px}
.kpi b{font-size:9px;letter-spacing:1px}
.kpi strong{font-size:30px;letter-spacing:-1px;font-weight:600;margin:12px 0}
.kpi.hl{border:1px solid #b9def4;background:#edf7fd}
.two,.three{gap:18px}
.seg{background:#e9f1f7;border-radius:6px;padding:4px}
.seg button{font-size:11px;padding:7px 11px}
.seg button.on{background:#1c4e70}
.bar{background:#2aabee;height:6px}
.li{padding:12px 0}
.toggle button.on{background:#087fb5}
.modal-bg{background:#142c4277;backdrop-filter:blur(3px)}
.modal{border-radius:12px;padding:28px;box-shadow:0 20px 80px #172d4033}
.toast{background:#1c4e70;border-radius:7px;padding:14px 18px;box-shadow:0 4px 20px #17365020}
.login-screen{min-height:100vh;display:grid;grid-template-columns:1fr}
.login-story{background:#172d40;color:#e8f3fa;padding:44px 52px;display:flex;flex-direction:column;min-height:100vh;position:relative;overflow:hidden}
.login-editorial{margin:auto 0;padding:75px 0}
.login-editorial .eyebrow{color:#72cef7}
.login-editorial h1{font-family:Georgia,serif;font-weight:400;font-size:clamp(38px,4.2vw,68px);line-height:1.15;letter-spacing:-2px;margin:30px 0}
.login-editorial p{color:#adc5d8;font-size:14px;max-width:330px;line-height:1.9}
.editorial-rule{width:70px;height:2px;background:#2aabee;margin:35px 0}
.login-editorial>span{font-size:9px;letter-spacing:2px;color:#8eacc3}
.login-foot{color:#8eacc3;font-size:11px}
.login-panel{display:flex;align-items:center;justify-content:center;padding:40px;position:relative}
.login-langs{position:absolute;top:22px;right:24px;display:flex;gap:2px;padding:3px;border-radius:8px;background:#eef3fb}
.login-langs a{border-radius:6px;padding:4px 9px;font-size:11px;font-weight:700;letter-spacing:.5px;color:#7890a4;text-decoration:none}
.login-langs a:hover{color:#1c2333}
.login-langs a.on{background:#172d40;color:#fff}
.login{width:350px;max-width:100%;margin:0;gap:20px}
.login h1{font-size:34px;margin:0;letter-spacing:-1.2px}
.login p{margin:-10px 0 14px;font-size:12px}
.login .btn{display:flex;justify-content:space-between;padding:13px 16px;margin-top:7px}
.login input{padding:13px}
.login-security{text-align:center;font-size:10px;color:#7890a4;margin-top:8px}
.login-simple{background:radial-gradient(ellipse at top,#e7f4ff 0,transparent 58%),#f5f7fb}
.login-simple .login-panel{flex-direction:column;gap:12px;padding:40px 24px}
.login-simple .login-langs{position:static;flex-shrink:0}
.login-simple .login{width:440px;background:#fff;padding:36px;border:1px solid #dce5ef;border-radius:20px;box-shadow:0 18px 60px #1736500b;gap:20px}
.login-brand .brand{padding:0;margin:0 0 8px;color:var(--ink,#172d40)}
.login-brand .brand-accent{display:inline;font:inherit;letter-spacing:inherit}
.login-simple .login h1{font-size:30px;line-height:1.2}
.login-simple .login p{margin:0;line-height:1.65;font-size:13px}
.login-simple .login .btn{justify-content:center;gap:10px}
.invite-fields{border:0;padding:0;margin:0;min-width:0;display:grid;gap:18px}
.invite-fields .f small{font-size:11px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted);line-height:1.5}
.invite-fields input[readonly]{border:1px solid var(--line);border-radius:6px;background:#f5f7fb;color:var(--muted);max-width:100%}
.login-simple .login-panel:has(.invitation-entry){padding:24px}
.login-simple .login.invitation-entry{width:500px;padding:24px;gap:12px}
.invitation-entry>.eyebrow{display:none}
.invitation-entry .login-brand .brand{margin:0}
.invitation-entry .brand-mark{width:32px;height:32px}
.login-simple .invitation-entry h1{font-size:28px;line-height:1.2}
.login-simple .invitation-entry p{line-height:1.5}
.invitation-entry .invite-fields{gap:12px}
.invitation-entry .invite-fields .f{gap:4px}
.invitation-entry .invite-fields input:not([type=checkbox]){padding:10px 12px;font-size:14px}
.invitation-entry .invite-fields .btn{margin-top:0;padding:11px 16px}
@media(max-width:520px){.login-simple .login{padding:26px 22px;border-radius:16px}.login-simple .login-panel{padding:24px 16px}}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:#c7d9e7;border-radius:5px}
@media(min-width:1500px){.chat-grid{grid-template-columns:310px minmax(0,1fr) auto 68px}
.tool{width:350px}}
@media(max-width:1200px){#clock{display:none}
.wrap{padding:22px 20px}
.topbar{padding:0 20px}
.sidebar{width:200px;padding:25px 13px 16px}
.main{margin-left:200px}
.chat-grid{grid-template-columns:230px minmax(0,1fr) auto 55px;gap:10px}
.tool{width:260px}}
@media(max-width:1000px){.chat-grid{grid-template-columns:1fr;height:auto;min-height:0}
.inbox-list{max-height:280px}
.conv{height:65vh;min-height:430px}
.tool{width:auto}
.rail{flex-direction:row;flex-wrap:wrap}
.rail button{min-width:65px}
.two,.three{grid-template-columns:1fr}
.msg{max-width:88%}}
@media(max-width:700px){.workspace{display:block}
.sidebar{position:static;width:auto;padding:18px;overflow:visible}
.sidebar>.brand{margin-bottom:15px}
.workspace-label,.nav-label,.sidebar-bottom{display:none}
.nav{flex-direction:row;overflow:auto;gap:5px}
.nav button{white-space:nowrap;padding:9px;font-size:11px;flex-shrink:0}
.nav button svg{width:15px;height:15px}
.nav-dot{display:none}
.main{margin:0}
.topbar{height:62px;padding:0 16px}
.breadcrumb{font-size:11px}
.breadcrumb span{margin:0 6px}
.wrap{padding:20px 14px}
.chat-title{font-size:21px}
.card{padding:16px}
.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpi strong{font-size:24px}
.login-screen{grid-template-columns:1fr}
.login-story{min-height:0;padding:25px}
.login-editorial{padding:32px 0 0}
.login-editorial h1{font-size:38px;margin:16px 0}
.login-editorial p,.editorial-rule,.login-editorial>span,.login-foot{display:none}
.login-panel{padding:35px 25px}
.login{gap:17px}
.tool.full{inset:10px}
.workspace-footer{margin-top:20px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

.media-actions { align-items: flex-end; }
.media-actions > .btn, .media-actions select { height: 38px; }
.media-tags-heading { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:6px 0; }
.btn.media-edit-tags { display:inline-flex; align-items:center; gap:5px; min-height:28px; padding:4px 8px; border-color:#cce5f5; background:#edf7fe; color:#127cad; font-size:11px; line-height:1.3; box-shadow:none; }
.media-edit-tags svg { width:13px; height:13px; flex-shrink:0; }
.btn.media-edit-tags:hover { background:#dcefff; border-color:#9bcfeb; color:#075f8e; }
.btn.media-edit-tags:focus-visible { outline:2px solid #159bd6; outline-offset:-2px; }
.btn.media-price { display:inline-flex; align-items:center; justify-content:space-between; gap:10px; min-width:100px; white-space:nowrap; color:#096a96; background:#edf7fe; border-color:#cce5f5; font-variant-numeric:tabular-nums; }
.media-price svg { width:13px; height:13px; flex-shrink:0; }
.btn.media-price.is-unset { background:#fff; border-style:dashed; color:var(--muted); }
.btn.media-price:hover { background:#dcefff; border-color:#9bcfeb; color:#075f8e; }
.btn.media-price:focus-visible { outline:2px solid #159bd6; outline-offset:-2px; }
.ppv-media-total { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:9px 10px; border-radius:6px; background:#edf7fe; color:#17688c; }
.media-price-error { color:#b83f35; }

/* Shared dropdowns */
.select-control { position: relative; display: inline-flex; min-width: 0; max-width: 100%; vertical-align: middle; }
.select-source { position: absolute; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; padding: 0 !important; border: 0 !important; }
.select-trigger { width: 100%; min-height: 38px; display: block; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 9px 34px 9px 12px; font-size: 12px; font-weight: 400; letter-spacing: 0; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-control::after { content: ''; position: absolute; right: 13px; top: 50%; width: 6px; height: 6px; border-right: 1.5px solid #6e8aa0; border-bottom: 1.5px solid #6e8aa0; transform: translateY(-65%) rotate(45deg); pointer-events: none; }
.select-trigger:hover { border-color: #a7c9df; background: #f6fbfe; }
.select-trigger:focus-visible, .select-trigger[aria-expanded=true] { outline: 2px solid var(--blue); outline-offset: -2px; border-color: var(--blue); box-shadow: none; }
.select-trigger:disabled { opacity: .5; cursor: not-allowed; }
label.f > .select-control { width: 100%; }
.select-menu { position: fixed; z-index: 100; background: #fff; border: 1px solid #dce8f1; border-radius: 9px; box-shadow: 0 8px 28px #20354a1a, 0 2px 6px #20354a08; padding: 5px; overflow-y: auto; overscroll-behavior: contain; }
.select-option { position: relative; padding: 9px 30px 9px 11px; border-radius: 5px; font-size: 12px; line-height: 1.5; color: var(--text); cursor: pointer; overflow-wrap: anywhere; }
.select-option:hover, .select-option.focused { background: #eef6fc; }
.select-option[aria-selected=true] { background: #e6f3fb; color: #096a96; font-weight: 500; }
.select-option[aria-selected=true]::after { content: '✓'; position: absolute; right: 11px; top: 9px; }
.select-option[aria-disabled=true] { opacity: .4; cursor: not-allowed; }
.media-actions .select-trigger { height: 38px; }

.rail button { gap: 7px; padding: 7px 3px; }
.rail button .tool-emoji { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #00000006; border-radius: 12px; font-style: normal; font-size: 23px; line-height: 1; transition: transform .15s; }
.rail button:hover .tool-emoji { transform: translateY(-2px); }
.tool-emoji-pass { background: #fce5ed; }
.tool-emoji-ppv { background: #fbefc9; }
.tool-emoji-tip { background: #fce3df; }
.tool-emoji-history { background: #f4e7d6; }
.tool-emoji-voice { background: #e9e3f5; }
.tool-emoji-notes { background: #dfeee7; }
.tool-emoji-multi { background: #e0eafa; }

/* Internal team workspace */
.team-heading, .team-section-head, .team-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.team-heading { margin: 5px 0 25px; }
.team-heading h1 { margin: 8px 0; font-size: 31px; }
.team-heading p { margin: 0; }
.team-heading a.btn { color: var(--text); text-decoration: none; background: #fff; }
.team-toolbar { margin-bottom: 18px; }
.team-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.team-kpis strong { font-size: clamp(22px, 2vw, 30px); overflow-wrap: anywhere; }
.team-kpi-unit { font-size: 17px; color: var(--muted); font-weight: 400; }
.team-attention { border-top: 3px solid #d4a354; }
.team-roster, .team-queue, .team-detail { margin-top: 22px; }
.team-section-head { margin-bottom: 18px; }
.team-section-head h2 { margin-bottom: 3px; }
.team-filters { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 20px; }
.team-filters .grow { max-width: 360px; flex-basis: 180px; }
.team-filters > label:not(.grow) { min-width: 145px; }
.team-table { min-width: 920px; }
.team-table td { vertical-align: middle; }
.team-table td > b { font-variant-numeric: tabular-nums; font-weight: 600; }
.team-person { display: flex; align-items: center; gap: 10px; }
.team-status { display: flex; gap: 7px; align-items: center; margin-top: 9px; }
.team-status .small { font-size: 10px; }
.team-selected, .team-selected:hover { background: #f0f8fe; }
.team-waiting { color: #9d681a; }
.team-detail { border-color: #bcdcf1; }
.team-detail-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 32px; }
.team-days { display: flex; align-items: end; gap: 10px; overflow-x: auto; padding: 15px 0 5px; }
.team-day { flex: 1 0 48px; max-width: 95px; text-align: center; }
.team-day > span { display: block; white-space: nowrap; font-size: 10px; }
.team-day-track { position: relative; height: 110px; margin: 8px 7px; background: #edf5fb; border-radius: 5px; overflow: hidden; }
.team-day-track > div { position: absolute; inset: auto 0 0; background: #35a9e2; border-radius: 5px 5px 0 0; }
.team-detail h3 { margin-top: 14px; }
.team-empty { padding: 35px 15px; color: var(--muted); text-align: center; background: #f8fbfd; border-radius: 7px; }
.team-methods { margin-top: 20px; color: var(--muted); font-size: 12px; max-width: 950px; }
.team-methods summary { cursor: pointer; font-weight: 600; color: var(--text); padding: 8px 0; }
.team-methods p { line-height: 1.8; }
@media (max-width: 1100px) { .team-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .team-detail-grid { grid-template-columns: 1fr; gap: 10px; } }
@media (max-width: 500px) { .team-heading h1 { font-size: 26px; } .team-heading .row { width: 100%; } .team-filters > label { flex: 1 1 120px; } .team-filters .grow { max-width: none; flex-basis: 100%; } .team-kpis .kpi { padding: 14px; } .team-kpis strong { font-size: 21px; } .team-queue th, .team-queue td { white-space: nowrap; } }

/* Model permissions */
.new-user-form { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); gap: 16px; }
.model-access { min-width: 0; margin: 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #f8fbfe; }
.model-access > legend { padding: 0 6px; font-size: 12px; font-weight: 600; }
.model-access-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.model-access-choice { display: flex; align-items: flex-start; gap: 10px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.model-access-choice:has(input:checked) { background: #edf7fe; border-color: #91caeb; }
.model-access-choice input { flex-shrink: 0; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--blue); }
.model-access-choice span { min-width: 0; overflow-wrap: anywhere; }
.model-access-choice b { display: block; font-size: 12px; font-weight: 600; }
.model-access-choice small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.model-access-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; min-width: 0; max-height: 260px; overflow-y: auto; margin: 14px 0 0; padding: 8px 0 0; border: 0; }
.model-access-list > legend { padding: 0; color: var(--muted); }
.model-access-list > p { grid-column: 1 / -1; }
.model-access-help { margin: 14px 0 0; line-height: 1.6; }
.model-access-summary { min-width: 155px; }
.model-access-summary > .badge { margin-bottom: 8px; }
.model-access-summary > button, .model-access-summary > .small { display: block; }
.model-access[hidden], .model-access-list[hidden], .access-role-note[hidden] { display: none; }
@media (max-width: 600px) { .model-access-modes, .model-access-list { grid-template-columns: 1fr; } .model-access { padding: 12px; } }

/* Creator reporting portal */
.creator-scope-note { margin: 10px 0 16px; color: var(--muted); line-height: 1.6; }
.model-access-modes.creator-models { grid-template-columns: 1fr; }
.new-user-commission[hidden] { display: none; }
.team-detail-grid.creator-team-detail { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
.team-table.creator-team-table { min-width: 760px; }

/* Creator and chatter communication, scoped to one Telegram team. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.collab-page { max-width: 1380px; margin: 0 auto; }
.collab-private { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); }
.collab-private svg { width: 17px; height: 17px; color: var(--blue); }
.collab-rooms { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.collab-room-choice { display: flex; align-items: center; gap: 11px; max-width: 100%; min-width: 200px; padding: 12px 15px; background: #fff; border: 1px solid var(--line); border-radius: 9px; text-align: left; }
.collab-room-choice.on { border-color: #57acda; background: #eff8fe; }
.collab-room-choice b { display: block; font-size: 13px; overflow-wrap: anywhere; }
.collab-room-choice small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.collab-room-avatar { display: grid; place-items: center; flex: 0 0 36px; height: 36px; border-radius: 10px; background: #ddeffa; color: #157caf; font-weight: 600; font-size: 18px; }
.collab-unread, .collab-nav-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: #168bd2; color: #fff; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.nav button .collab-nav-count { margin-left: auto; background: #fff; color: #137aaf; }
.collab-nav-count[hidden], #collab-latest[hidden] { display: none; }
.collab-context { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.collab-context > div { overflow-wrap: anywhere; }
.collab-grid { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.25fr); align-items: start; gap: 22px; }
.collab-notes-panel, .collab-chat-panel { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.collab-notes-panel { padding: 20px; }
.collab-panel-heading { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.collab-panel-heading > div { display: flex; align-items: center; gap: 10px; }
.collab-panel-heading h2 { margin: 0; font-size: 16px; }
.collab-panel-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 20px; }
.collab-panel-icon.notes { background: #fff2d8; }
.collab-panel-icon.chat { background: #e7f4fd; }
.collab-panel-intro { margin: 10px 0 20px; font-size: 12px; color: var(--muted); }
.collab-note-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 17px; }
.collab-note-filters .chip { font-size: 11px; }
.collab-note { margin-bottom: 12px; padding: 16px; background: #fffcf6; border: 1px solid #ede5d5; border-left: 3px solid #eac983; border-radius: 7px; }
.collab-note.archived { background: #f8fafc; border-color: #e5eaf0; }
.collab-note-heading { display: flex; align-items: start; gap: 12px; justify-content: space-between; }
.collab-note-heading h3 { margin: 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.collab-note-heading > span { flex-shrink: 0; font-size: 10px; }
.collab-note-body { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.8; margin: 10px 0 16px; }
.collab-note-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; font-size: 10px; color: var(--muted); }
.collab-note-meta b { font-weight: 500; }
.collab-note-actions { display: flex; justify-content: end; flex-wrap: wrap; gap: 6px; padding-top: 12px; }
.collab-note-actions .btn { background: transparent; }
.collab-note-actions .btn:hover { background: #fff; }
.collab-note-form { margin: 17px 0; padding: 16px; border-radius: 8px; background: #f2f8fc; border: 1px solid #c9e3f1; }
.collab-note-form fieldset { min-width: 0; padding: 0; margin: 12px 0; border: 0; display: flex; flex-direction: column; gap: 12px; }
.collab-note-form textarea { min-height: 140px; }
.collab-note-form > .btn { margin-bottom: 12px; }
.collab-note-form .warnbox { line-height: 1.6; }
.collab-note-form .row { gap: 8px; }
.collab-notes-more { width: 100%; }
.collab-chat-panel > .collab-panel-heading { padding: 20px 20px 0; }
.collab-chat-panel > .collab-panel-intro { padding: 0 20px; margin-bottom: 16px; }
.collab-chat-panel { display: flex; flex-direction: column; height: min(62dvh, 620px); min-height: 340px; }
.collab-chat-panel > :not(.collab-chat-scroll) { flex-shrink: 0; }
.collab-chat-scroll { display: flex; flex: 1; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 24px; background: #f6f9fc; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); scrollbar-gutter: stable; }
.collab-chat-scroll:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.collab-older { align-self: center; flex-shrink: 0; background: #fff; }
.collab-day { align-self: center; margin: 2px 0 0; padding: 3px 10px; background: #e9f0f6; border-radius: 12px; font-size: 10px; color: #708296; }
.collab-message { display: flex; gap: 9px; max-width: 90%; align-self: flex-start; min-width: 0; }
.collab-message.own { align-self: flex-end; }
.collab-message-avatar { flex: 0 0 27px; display: grid; place-items: center; height: 27px; border-radius: 50%; background: #dfeaf3; color: #58768c; font-size: 11px; margin-top: 2px; }
.collab-message.own .collab-message-avatar { display: none; }
.collab-message-content { min-width: 0; }
.collab-message-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 7px; margin-bottom: 5px; font-size: 10px; color: #658195; }
.collab-message-meta b { font-weight: 600; color: #2f566e; overflow-wrap: anywhere; }
.collab-message-meta time { color: #8596a5; }
.collab-author-role { padding: 0 5px; border-radius: 3px; color: #916c33; background: #f7ecd7; font-size: 9px; }
.collab-message-text { padding: 11px 14px; border: 1px solid #e2eaf1; border-radius: 0 10px 10px; background: #fff; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.65; }
.collab-message.own .collab-message-text { background: #dff0fc; border-color: #cfe5f4; border-radius: 10px 0 10px 10px; }
.collab-message.own .collab-message-meta { justify-content: end; }
.collab-composer { padding: 15px 18px 18px; }
.collab-composer textarea { display: block; min-height: 64px; max-height: min(150px, 18dvh); border-color: #e0e9f1; font-size: 13px; padding: 11px 12px; line-height: 1.5; }
.collab-composer-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.collab-composer-footer > span { font-size: 10px; line-height: 1.7; }
.collab-key-hint { color: #96a5b1; }
.collab-composer-footer > button { flex-shrink: 0; font-size: 12px; }
.collab-latest-wrap { position: relative; text-align: center; height: 0; z-index: 1; }
#collab-latest { transform: translateY(-135%); border-radius: 20px; background: #fff; color: #147fb8; box-shadow: 0 2px 8px #193f5a14; }
#collab-chat-error .warnbox { margin: 0 16px 12px; }
#collab-note-error .warnbox, #collab-error .warnbox { margin-bottom: 16px; }
.collab-empty, .collab-notes-empty, .collab-chat-empty { text-align: center; padding: 35px 18px; color: var(--muted); }
.collab-chat-empty { margin: auto; max-width: 340px; }
.collab-empty { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 65px 20px; }
.collab-empty-icon, .collab-notes-empty > span, .collab-chat-empty > span { display: block; font-size: 30px; margin-bottom: 16px; }
.collab-empty h2, .collab-notes-empty h3, .collab-chat-empty h3 { color: var(--text); font-weight: 500; }
.collab-empty p, .collab-notes-empty p, .collab-chat-empty p { font-size: 12px; line-height: 1.7; margin: 7px 0 0; }
.collab-mobile-tabs { display: none; }
@media (max-width: 1150px) { .collab-grid { gap: 14px; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr); } .collab-notes-panel { padding: 16px; } .collab-note { padding: 12px; } .collab-chat-scroll { padding: 16px 14px; } }
@media (max-width: 900px) { .collab-grid { grid-template-columns: minmax(0, 1fr); } .collab-mobile-tabs { display: flex; gap: 8px; margin: 16px 0; } .collab-mobile-tabs > button { flex: 1; } .collab-grid[data-section="chat"] .collab-notes-panel, .collab-grid[data-section="notes"] .collab-chat-panel { display: none; } .collab-chat-panel { height: min(70dvh, 560px); } .collab-private { display: none; } }
@media (max-width: 500px) { .collab-room-choice { min-width: 0; flex: 1 1 100%; } .collab-context > .small { font-size: 10px; } .collab-chat-panel > .collab-panel-heading { padding: 16px 14px 0; } .collab-chat-panel > .collab-panel-intro { padding: 0 14px; } .collab-composer { padding: 12px; } .collab-message { max-width: 96%; } .collab-message-text { font-size: 12px; padding: 9px 11px; } .collab-composer-footer { align-items: flex-end; } .collab-composer-footer > span { max-width: 160px; } .collab-key-hint { display: none; } }
/* Use the space below the real page header, including the optional welcome banner.
   Only messages and long notes scroll; the send button remains in the viewport. */
@media (min-width: 901px) {
  .main:has(.collab-page) { display:flex; flex-direction:column; height:100dvh; min-height:0; }
  .main:has(.collab-page) > .topbar { flex-shrink:0; }
  .main:has(.collab-page) > .wrap { display:flex; flex-direction:column; flex:1; min-height:0; width:100%; padding-bottom:16px; }
  .main:has(.collab-page) .workspace-footer { display:none; }
  .main:has(.collab-page) .setup, .main:has(.collab-page) #tutorial-welcome { flex-shrink:0; max-height:20dvh; overflow:auto; }
  .main:has(.collab-page) #view { display:flex; flex-direction:column; flex:1; min-height:0; }
  .collab-page { display:flex; flex-direction:column; flex:1; min-height:0; width:100%; }
  .collab-page .team-heading { flex-shrink:0; margin-bottom:16px; }
  .collab-page .team-heading h1 { font-size:27px; margin:6px 0; }
  .collab-rooms { flex-shrink:0; max-height:12dvh; overflow:auto; margin-bottom:14px; }
  #collab-room { display:flex; flex-direction:column; flex:1; min-height:0; }
  .collab-context { flex-shrink:0; margin-bottom:12px; }
  .collab-grid { flex:1; min-height:0; grid-template-rows:minmax(0,1fr); }
  .collab-chat-panel { height:100%; max-height:620px; min-height:0; }
  .collab-notes-panel { max-height:100%; overflow-y:auto; }
  .collab-chat-panel > .collab-panel-heading { padding-top:14px; }
  .collab-chat-panel > .collab-panel-intro { margin-bottom:12px; }
  .collab-composer { padding:12px 16px; }
  .collab-composer-footer { margin-top:8px; }
  #collab-chat-error { max-height:15dvh; overflow:auto; }
}

/* profile photos */
img.avatar{object-fit:cover;padding:0;flex-shrink:0}
.avatar-xs{width:16px!important;height:16px!important;font-size:9px;vertical-align:-3px;display:inline-grid!important}
.avatar-sm{width:26px!important;height:26px!important;font-size:12px}
.avatar-md{width:44px!important;height:44px!important;font-size:18px}
.avatar-lg{width:96px!important;height:96px!important;font-size:38px}
.profile-link{display:flex;gap:9px;align-items:center;flex:1;min-width:0;background:none;border:0;padding:4px;margin:-4px;border-radius:10px;color:inherit;text-align:left;cursor:pointer}
.profile-link:hover,.profile-link.on{background:rgba(255,255,255,.08)}
.profile-link .grow{min-width:0}
.profile-link b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-member{justify-content:flex-start}
.display-name{padding:6px 0}
.suggest{border:1px solid var(--line);border-radius:10px;padding:8px;margin:10px 0;background:var(--card)}
.suggest .thumb span{max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Telegram length limits (lengthHint in app.js): the count from 90 %, red past the limit */
.limit-hint { margin-top: 3px; color: var(--muted); } .limit-hint.over { color: var(--red); font-weight: 600; }
textarea.over-limit, input.over-limit { border-color: var(--red); }

/* --- tunnel d'installation ------------------------------------------------- */
/* Volontairement sans barre latérale : tant que le premier compte Telegram n'est pas en
   ligne, il n'y a rien à naviguer. Montrer une navigation inerte donnerait l'impression
   d'une application cassée plutôt que d'une installation en cours. */
.onboarding { min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.ob-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 28px; background: #172d40; }
.ob-top .brand b { color: #fff; } .ob-top .brand span { color: #8eacc3; }
.ob-top .login-langs { position: static; background: rgba(232,243,250,.08); }
.ob-top .login-langs a { color: #8eacc3; } .ob-top .login-langs a:hover { color: #fff; }
.ob-top .login-langs a.on { background: #e8f3fa; color: #172d40; }
.ob-shell { flex: 1; display: grid; grid-template-columns: 370px minmax(0, 1fr); gap: 34px; max-width: 1340px; width: 100%; margin: 0 auto; padding: 38px 28px 60px; }
.ob-aside h1 { font-family: Georgia, serif; font-weight: 400; font-size: 32px; letter-spacing: -.8px; margin: 10px 0 12px; }
.ob-aside > p.muted { font-size: 13.5px; line-height: 1.65; }
.ob-list { list-style: none; margin: 26px 0 22px; padding: 0; }
.ob-step { display: flex; gap: 13px; padding: 13px 0; border-top: 1px solid var(--line); }
.ob-step .ob-num { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #e9edf5; color: var(--muted); }
.ob-step b { display: block; font-size: 14.5px; }
.ob-step span:not(.ob-num) { display: block; font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 2px; }
.ob-step.done .ob-num { background: #d3f3db; color: #1c6b31; }
.ob-step.active .ob-num { background: var(--blue); color: #fff; box-shadow: 0 0 0 4px var(--blue-soft); }
.ob-step.todo { opacity: .55; }
.ob-hint { font-size: 12.5px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue); border-radius: 8px; padding: 11px 13px; line-height: 1.6; }
.ob-main { min-width: 0; }
.ob-main > .warnbox { margin-bottom: 16px; }
.login-terms { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.login-terms input { margin-top: 2px; flex: 0 0 auto; }
.login-terms a { color: var(--blue-dark); font-weight: 600; }
@media (max-width: 900px) {
  .ob-shell { grid-template-columns: 1fr; gap: 24px; padding: 24px 18px 44px; }
  .ob-aside h1 { font-size: 26px; }
}

/* Photo de profil d'un client. Une image remplace l'initiale au meme emplacement, donc les
   memes dimensions : sans cela la liste saute d'une ligne a l'autre selon qui a une photo. */
img.contact-avatar { object-fit: cover; border-radius: 50%; }
.chat-title-avatar { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; vertical-align: -7px; margin-right: 8px; }

/* Le crayon de renommage, discret a cote du nom : on s'en sert une fois par contact. */
.chat-rename { margin-left: 8px; padding: 1px 7px; vertical-align: 2px; opacity: .45; }
.chat-rename:hover { opacity: 1; }

/* Le pseudo et la presence, sous le nom : une ligne discrete au lieu d'une enfilade sur la
   meme ligne que le titre, qui prenait toute la largeur. */
.chat-sub { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-top: 2px; }

/* Two-step verification (server/mfa.js): the QR code, the key to type, the backup codes, the code prompt. */
.tf-setup .tf-qr { display: block; width: 200px; height: 200px; margin: 4px 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; image-rendering: pixelated; }
.tf-key { display: block; padding: 9px 11px; border-radius: 8px; background: #eef3fb; font: 600 15px/1.5 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .06em; word-break: break-word; }
.tf-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 22px; margin: 4px 0; padding-left: 26px; }
.tf-codes code, .tf-demo b { font: 600 14px/1.5 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; }
@media (max-width: 420px) { .tf-codes { grid-template-columns: 1fr; } }
.tf-prompt { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 16px; background: rgba(20, 26, 40, .45); }
.tf-prompt form { width: min(380px, 100%); background: var(--card); border-radius: 12px; padding: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); }
.tf-status { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- la photo en grand, et le bouton « derniers messages » ------------------------------- */
/* [hidden] seul ne suffit pas quand une regle pose display plus loin : on le dit ici. */
.latest[hidden] { display: none; }
.msg-photo { cursor: zoom-in; }
.msg video.msg-video { width: 260px; max-width: 100%; max-height: 320px; background: #000; }
.lightbox { position: fixed; inset: 0; z-index: 90; background: #0b1a2acc; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px; padding: 24px; }
.lightbox img { max-width: min(96vw, 1400px); max-height: 86vh; border-radius: 8px; box-shadow: 0 8px 40px #0006; background: #fff; }
.lightbox-bar { display: flex; gap: 8px; }
.lightbox-bar .btn { background: #fff; }
@media (max-width: 1000px) { .lightbox { padding: 12px; } .msg video.msg-video { width: 100%; } }

/* ---- la vue unique ---------------------------------------------------------------------- */
.view-once { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 600; }
.view-once input { width: auto; }
.view-once-tag { margin-top: 4px; color: #b25a00; font-weight: 600; }

.msg-file-preview{display:block;width:310px;max-width:100%;height:320px;border:1px solid #dfe5ed;border-radius:10px;background:#f8fafc;margin:6px 0}