@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap');

:root{
  --paper:#FAFAF8;
  --ink:#141413;
  --ink-2:#52524D;
  --stone:#8A8A84;
  --soft:#F2F0EB;
  --surface:#FFFFFF;
  --copper:#C06B3E;
  --copper-dark:#9B4D2B;
  --success:#2E7451;
  --danger:#B84B3D;
  --warning:#B57932;
  --line:rgba(20,20,19,.12);
  --line-strong:rgba(20,20,19,.2);
  --shadow:0 24px 70px rgba(20,20,19,.08);
  --shadow-soft:0 12px 38px rgba(20,20,19,.055);
  --radius-xl:28px;
  --radius-lg:20px;
  --radius-md:14px;
  --sidebar:230px;
  --font:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --latin:'Chakra Petch','Segoe UI',sans-serif;
}

*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:var(--font);scroll-behavior:smooth}
body{margin:0;min-width:320px;min-height:100vh;background:var(--paper)}
button,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(192,107,62,.2);outline-offset:2px}
button:disabled{cursor:not-allowed;opacity:.48}
img{display:block;max-width:100%}
svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.svg-sprite{position:absolute;width:0;height:0;overflow:hidden}
[hidden]{display:none!important}

.primary-button,.secondary-button,.ghost-button{
  min-height:44px;border-radius:12px;padding:0 18px;border:1px solid transparent;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;transition:.2s ease;background:none
}
.primary-button{background:var(--copper);color:#fff;border-color:var(--copper);box-shadow:0 12px 26px rgba(192,107,62,.18)}
.primary-button:hover{background:var(--copper-dark);border-color:var(--copper-dark);transform:translateY(-1px)}
.secondary-button{background:#fff;border-color:var(--line);color:var(--ink)}
.secondary-button:hover{border-color:rgba(192,107,62,.45);background:#fffaf7}
.ghost-button{border-color:transparent;color:var(--ink-2)}
.ghost-button:hover{background:var(--soft)}
.compact{min-height:36px;padding:0 13px;border-radius:10px;font-size:13px}
.text-button{border:0;background:none;color:var(--copper-dark);padding:0;font-size:13px}
.tool-button{width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:#fff;display:grid;place-items:center;transition:.2s ease}
.tool-button:hover{border-color:rgba(192,107,62,.4);color:var(--copper-dark)}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--copper-dark)}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--success);margin-left:5px;box-shadow:0 0 0 4px rgba(46,116,81,.08)}
.toast{position:fixed;z-index:100;bottom:26px;left:26px;max-width:360px;padding:13px 18px;border-radius:13px;background:var(--ink);color:#fff;box-shadow:var(--shadow);opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s ease;font-size:14px}
.toast.is-visible{opacity:1;transform:translateY(0)}

/* Login */
.login-view{min-height:100vh;display:grid;grid-template-columns:1fr 1.12fr;direction:ltr;position:relative;overflow:hidden;background:var(--paper)}
.login-view::before,.login-view::after{content:"";position:absolute;pointer-events:none;border:1px solid rgba(20,20,19,.08);transform:rotate(45deg)}
.login-view::before{width:560px;height:560px;left:-280px;top:-340px}
.login-view::after{width:700px;height:700px;right:-530px;bottom:-560px}
.login-brand,.login-panel{direction:rtl;position:relative;z-index:1}
.login-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:72px;background:linear-gradient(150deg,#fdfdfb 0%,#f8f7f3 100%);border-right:1px solid var(--line)}
.login-brand::before,.login-brand::after{content:"";position:absolute;width:22px;height:22px;background:var(--copper)}
.login-brand::before{right:12%;top:18%}
.login-brand::after{left:12%;bottom:12%}
.login-lockup{width:min(390px,70%)}
.brand-divider{width:230px;height:26px;display:flex;align-items:center;justify-content:center;margin:28px 0 24px;position:relative}
.brand-divider::before,.brand-divider::after{content:"";height:1px;background:var(--line-strong);flex:1}
.brand-divider i{width:10px;height:10px;background:var(--copper);transform:rotate(45deg);margin:0 18px}
.login-brand h1{font-size:clamp(34px,3.5vw,62px);font-weight:500;line-height:1.45;text-align:center;margin:0;letter-spacing:-.045em}
.login-brand p{max-width:480px;color:var(--ink-2);font-size:17px;text-align:center;margin:18px 0 0;line-height:1.8}
.login-panel{display:grid;place-items:center;padding:58px;background:#fff}
.login-card{width:min(480px,100%);padding:46px;border:1px solid var(--line);border-radius:var(--radius-xl);box-shadow:var(--shadow);background:rgba(255,255,255,.92)}
.mobile-logo{display:none}
.login-card h2{font-size:40px;line-height:1.25;margin:8px 0 5px;letter-spacing:-.045em}
.login-card>p{color:var(--stone);margin:0 0 30px}
.field-label{display:block;font-size:13px;font-weight:600;margin:17px 0 8px}
.password-row{display:flex;align-items:center;justify-content:space-between;margin-top:17px}
.password-row .field-label{margin:0 0 8px}
.input-shell{height:52px;display:flex;align-items:center;gap:10px;padding:0 14px;border:1px solid var(--line);border-radius:13px;background:var(--paper);transition:.2s ease}
.input-shell:focus-within{border-color:var(--copper);box-shadow:0 0 0 4px rgba(192,107,62,.08);background:#fff}
.input-shell svg{color:var(--stone);width:18px}
.input-shell input{flex:1;min-width:0;border:0;outline:0;background:none;direction:ltr;text-align:right}
.password-dot{color:var(--stone);letter-spacing:2px}
.remember{display:flex;align-items:center;gap:8px;margin:18px 0;color:var(--ink-2);font-size:13px}
.remember input{accent-color:var(--copper);width:16px;height:16px}
.login-button,.login-card>.secondary-button{width:100%;margin-bottom:10px}
.login-card>small{display:block;text-align:center;color:var(--stone);font-size:11px;line-height:1.7;margin-top:9px}

/* App shell */
.app-shell{min-height:100vh;display:grid;grid-template-columns:minmax(0,1fr) var(--sidebar);direction:ltr;background:var(--paper)}
.side-nav{grid-column:2;direction:rtl;background:linear-gradient(180deg,#151514 0%,#0e0e0d 100%);color:#fff;position:fixed;right:0;top:0;bottom:0;width:var(--sidebar);display:flex;flex-direction:column;z-index:40;border-left:1px solid rgba(255,255,255,.05)}
.side-brand{height:152px;padding:38px 30px;border-bottom:1px solid rgba(255,255,255,.08);display:grid;place-items:center}
.side-brand img{width:168px}
.side-nav nav{display:grid;gap:7px;padding:28px 12px}
.nav-item{height:54px;border:0;border-right:3px solid transparent;border-radius:10px 0 0 10px;background:none;color:rgba(255,255,255,.72);display:flex;align-items:center;gap:13px;padding:0 18px;text-align:right;transition:.2s ease}
.nav-item:hover{background:rgba(255,255,255,.05);color:#fff}
.nav-item.is-active{background:linear-gradient(90deg,rgba(192,107,62,.72),rgba(192,107,62,.96));border-right-color:#f0a37c;color:#fff;box-shadow:0 10px 25px rgba(0,0,0,.2)}
.nav-item svg{width:22px;height:22px}
.nav-item span{flex:1;font-size:15px;font-weight:600}
.nav-badge{min-width:22px;height:22px;border-radius:999px;background:rgba(255,255,255,.14);display:grid;place-items:center;font:600 11px/1 var(--latin);font-style:normal}
.side-bottom{margin-top:auto;height:80px;display:flex;align-items:center;justify-content:center;gap:9px;border-top:1px solid rgba(255,255,255,.08)}
.icon-nav{width:39px;height:39px;display:grid;place-items:center;border:0;background:none;color:rgba(255,255,255,.7);position:relative}
.icon-nav:hover{color:#fff;background:rgba(255,255,255,.05);border-radius:10px}
.icon-nav i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--copper);top:7px;right:7px}
.workspace{grid-column:1;direction:rtl;min-width:0;min-height:100vh}
.product-view{display:none;min-height:100vh;position:relative}
.product-view.is-active{display:block}
.screen-head{height:110px;border-bottom:1px solid var(--line);padding:24px 36px;background:rgba(250,250,248,.92);backdrop-filter:blur(15px);position:sticky;top:0;z-index:10}
.centered-head{text-align:center;display:grid;place-items:center}
.screen-head h1{font-size:28px;margin:0;letter-spacing:-.035em}
.screen-head p{color:var(--stone);font-size:12px;margin:4px 0 0}
.mobile-nav-button{display:none}
.panel-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft);min-width:0}
.scroll-area{scrollbar-width:thin;scrollbar-color:rgba(20,20,19,.2) transparent}

/* Company brain */
#brainView{padding-bottom:164px}
.brain-thread{width:min(1120px,calc(100% - 56px));margin:0 auto;padding:30px 0 10px;display:flex;flex-direction:column;gap:17px}
.date-chip{align-self:center;border-radius:999px;background:var(--soft);color:var(--stone);font-size:11px;padding:6px 12px}
.chat-row{display:flex;gap:12px;align-items:flex-start;width:100%}
/* dir="rtl": flex-end is the LEFT edge. The assistant sits left, the owner right. */
.ai-row{justify-content:flex-end}
.owner-row{justify-content:flex-start}
/* Sized to its content. It used to stretch to a fixed 720px, so a five-word reply
   occupied the same slab as a paragraph. */
.bubble{width:fit-content;max-width:min(560px,76%);border-radius:16px;padding:12px 15px;
  box-shadow:0 8px 24px rgba(20,20,19,.035)}
.bubble p{margin:0;line-height:1.7;font-size:14px}
.bubble time{display:block;margin-top:7px;color:var(--stone);font:500 10px/1 var(--latin)}
.ai-bubble{background:#fff;border:1px solid var(--line);border-top-left-radius:5px}
.owner-bubble{background:#ECE9E3;border-bottom-right-radius:5px}
/* Sized to what it holds, like every other bubble. Forcing 75% made a pasted link
   -- twenty-six characters and one chip -- take three quarters of the thread. */
.attachment-bubble{width:fit-content;max-width:min(620px,80%)}
/* One chip is one chip wide. A fixed five-column grid stretched a single pasted
   link across five tracks of empty space. */
.attachment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:7px;margin:11px 0 0}
.attachment-grid>span{min-width:0;background:#fff;border:1px solid var(--line);border-radius:11px;padding:10px;display:grid;grid-template-columns:30px 1fr;column-gap:8px;align-items:center}
.attachment-grid strong,.attachment-grid small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attachment-grid strong{font-size:11px}
.attachment-grid small{font-size:9px;color:var(--stone);grid-column:2}
.attachment-grid svg{width:24px;height:24px;color:var(--copper-dark);grid-row:1/3}
.file-type{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:#fff;font:600 8px/1 var(--latin);grid-row:1/3}
.file-type.pdf{background:#c63e33}.file-type.xls{background:var(--success)}.file-type.img{background:var(--copper)}
.inline-card{width:100%;border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;padding:19px;box-shadow:var(--shadow-soft)}
.card-title{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:16px}
.card-title h3{font-size:17px;margin:4px 0 0}
.confidence{font:600 12px/1 var(--latin);padding:8px 10px;border-radius:999px;background:rgba(46,116,81,.08);color:var(--success);white-space:nowrap}
.analysis-columns{display:grid;grid-template-columns:1.1fr .9fr .75fr;gap:10px}
.analysis-block,.source-block{border:1px solid var(--line);border-radius:14px;padding:13px;background:var(--paper)}
.analysis-block h4,.source-block h4{display:flex;align-items:center;gap:7px;font-size:13px;margin:0 0 9px}
.analysis-block h4 svg{width:17px;height:17px}
.analysis-block ul{margin:0;padding:0 17px 0 0;font-size:11px;line-height:1.9;color:var(--ink-2)}
.conflict-block{background:#fff9f7;border-color:rgba(184,75,61,.2)}
.conflict-block h4{color:var(--danger)}
.conflict-block p{font-size:11px;line-height:1.8;margin:0;color:var(--ink-2)}
.success-block h4{color:var(--success)}
.source-block{display:flex;flex-direction:column;gap:5px}
.source-block button{border:0;background:#fff;border-radius:8px;min-height:30px;text-align:right;padding:0 8px;font-size:10px;display:flex;align-items:center;justify-content:space-between}
.source-block button b{width:18px;height:18px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font:600 9px/1 var(--latin)}
.confidence-line{height:5px;background:var(--soft);border-radius:99px;margin-top:14px;overflow:hidden}
.confidence-line span{display:block;width:var(--value);height:100%;background:var(--success);border-radius:inherit}
.brain-progress-card{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;padding:16px 18px;display:grid;grid-template-columns:72px 1fr 1.25fr auto;align-items:center;gap:18px;box-shadow:var(--shadow-soft)}
.progress-ring{--size:64px;width:var(--size);height:var(--size);border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--copper) calc(var(--progress)*1%),var(--soft) 0);position:relative}
.progress-ring::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#fff}
.progress-ring span{position:relative;z-index:1;font:600 12px/1 var(--latin)}
.brain-progress-card h3{font-size:16px;margin:2px 0}
.brain-progress-card p{font-size:11px;color:var(--stone);margin:0}
.progress-items{display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:11px}
.progress-items span::before{content:"•";color:var(--stone);margin-left:7px}
.progress-items .done::before{content:"✓";color:var(--success)}
.brain-composer{position:fixed;z-index:20;bottom:22px;right:calc(var(--sidebar) + (100vw - var(--sidebar) - min(1120px,calc(100vw - var(--sidebar) - 56px)))/2);width:min(1120px,calc(100vw - var(--sidebar) - 56px));min-height:112px;background:rgba(255,255,255,.95);backdrop-filter:blur(18px);border:1px solid var(--line-strong);border-radius:22px;padding:15px 17px;box-shadow:0 20px 55px rgba(20,20,19,.14)}
.brain-composer textarea{width:100%;max-height:130px;resize:none;border:0;outline:0;background:none;font-size:15px;padding:2px;line-height:1.8}
.composer-actions{display:flex;align-items:center;justify-content:space-between;margin-top:7px}
.composer-actions>div{display:flex;gap:5px}
.send-button{width:43px;height:43px;border:0;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:.2s ease}
.send-button:hover{background:var(--copper);transform:translateY(-1px)}
.send-button svg{width:18px}
.attachment-preview{padding:8px 10px;border-radius:10px;background:var(--soft);font-size:11px;color:var(--ink-2);margin-top:5px}
.dynamic-message{animation:messageIn .3s ease both}
@keyframes messageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Conversations */
.conversation-layout{height:100vh;padding:14px;display:grid;grid-template-columns:270px minmax(420px,1fr) 320px;gap:12px;direction:ltr;background:var(--soft)}
.conversation-layout>*{direction:rtl;overflow:hidden}
.customer-context,.inbox-panel{padding:17px;overflow:auto}
.panel-heading,.inbox-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.panel-heading h2,.inbox-head h1{margin:0;font-size:20px}
.customer-identity{padding:18px 0;border-bottom:1px solid var(--line);display:flex;gap:12px;align-items:center}
.avatar{width:43px;height:43px;border-radius:13px;display:grid;place-items:center;color:#fff;font-weight:700;flex:none}
.avatar.copper{background:var(--copper)}.avatar.ink{background:var(--ink)}.avatar.green{background:var(--success)}.avatar.soft{background:#908a80}
.customer-identity h3{font-size:15px;margin:0 0 2px}
.customer-identity p{font:400 10px/1.65 var(--font);color:var(--stone);margin:0;direction:ltr;text-align:right}
.customer-context section{padding-top:17px}
.customer-context section h4{font-size:13px;margin:0 0 10px}
.customer-context dl{margin:0}
.customer-context dl div{height:34px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:11px}
.customer-context dt{color:var(--stone)}
.customer-context dd{margin:0;font-weight:600}
.interaction-row{width:100%;border:1px solid var(--line);border-radius:10px;background:#fff;padding:9px;margin-bottom:6px;text-align:right;display:flex;justify-content:space-between;gap:5px;font-size:10px}
.interaction-row small{color:var(--stone);white-space:nowrap}
.context-note{background:var(--paper);padding:12px!important;border-radius:12px;margin-top:12px}
.context-note p{font-size:11px;line-height:1.8;color:var(--ink-2);margin:0}
.active-conversation{display:grid;grid-template-rows:auto 1fr auto}
.conversation-head{min-height:72px;padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}
.conversation-head h1{font-size:17px;margin:0}
.conversation-head p{display:flex;align-items:center;gap:5px;color:var(--stone);font-size:10px;margin:4px 0 0}
.conversation-head p svg{width:15px;height:15px}
.head-actions{display:flex;gap:6px}
.message-stream{padding:18px;overflow:auto;background:linear-gradient(180deg,rgba(242,240,235,.34),rgba(255,255,255,.2));display:flex;flex-direction:column;gap:9px}
.message{max-width:74%;padding:11px 13px;border-radius:14px;font-size:11px;line-height:1.8;box-shadow:0 5px 17px rgba(20,20,19,.03)}
.message b{font-size:10px}.message p{margin:3px 0}.message time{display:block;color:var(--stone);font:500 8px/1 var(--latin)}
.customer-message{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.agent-message{align-self:flex-end;background:#EEE8E1;border-bottom-right-radius:4px}
.ai-draft-card{width:100%;display:grid;grid-template-columns:1.5fr .75fr;gap:8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 0}
.draft-main,.handoff-card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:13px}
.draft-main{border-color:rgba(192,107,62,.25);background:#fffaf7}
.draft-main h3{font-size:13px;margin:3px 0 6px}.draft-main p{font-size:11px;line-height:1.7;margin:0}.draft-main ul{font-size:9px;color:var(--stone);padding-right:16px;margin:7px 0 10px}
.handoff-card h4{font-size:12px;margin:5px 0}.handoff-card p{font-size:10px;line-height:1.65;color:var(--ink-2);margin:0 0 10px}
.internal-note{align-self:center;width:82%;padding:10px 12px;border-radius:11px;background:#fff8df;border:1px dashed rgba(181,121,50,.35);font-size:10px;display:flex;gap:8px;justify-content:center}
.internal-note b{color:var(--warning)}
.reply-composer{margin:0 14px 14px;border:1px solid var(--line);border-radius:15px;background:#fff;padding:10px}
.reply-composer textarea{width:100%;resize:none;border:0;outline:0;background:none;font-size:12px;line-height:1.7}
.reply-composer>div{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:8px}
.reply-composer .primary-button svg{width:15px}
.composer-tools-inline{display:flex;gap:3px}
.composer-tools-inline button{height:28px;border:0;background:none;border-radius:7px;color:var(--stone);font-size:10px}
.composer-tools-inline button:hover{background:var(--soft);color:var(--ink)}
.inbox-head{position:relative;margin-bottom:13px}
.inbox-head p{color:var(--stone);font-size:10px;margin:1px 0 0}
.channel-menu-wrap{position:relative}
.channel-popover{position:absolute;z-index:30;top:43px;left:0;width:220px;border:1px solid var(--line);border-radius:13px;background:#fff;padding:7px;box-shadow:var(--shadow);direction:rtl}
.channel-popover span,.channel-popover button{min-height:37px;padding:0 8px;display:flex;align-items:center;gap:8px;font-size:10px;border-radius:8px}
.channel-popover span svg{width:16px}.channel-popover span b{margin-right:auto;color:var(--success);font-size:9px}.channel-popover button{width:100%;border:0;background:#fff7f2;color:var(--copper-dark);font-weight:600}
.telegram-mark{width:17px;height:17px!important;min-height:0!important;padding:0!important;border-radius:50%!important;background:#3c87bc;color:#fff;display:grid!important;place-items:center;font:600 8px/1 var(--latin)!important}
.search-shell{height:38px;border:1px solid var(--line);border-radius:10px;display:flex;align-items:center;gap:7px;padding:0 10px;background:var(--paper)}
.search-shell svg{width:15px;color:var(--stone)}
.search-shell input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:10px}
.inbox-filters{display:flex;gap:4px;margin:10px 0}
.inbox-filters button,.timeline-filters button{border:0;background:none;border-radius:999px;padding:6px 9px;color:var(--stone);font-size:9px}
.inbox-filters button.is-active,.timeline-filters button.is-active{background:var(--ink);color:#fff}
.inbox-filters b{font:600 8px/1 var(--latin)}
.inbox-list{display:grid}
.inbox-item{min-height:80px;border:0;border-bottom:1px solid var(--line);background:#fff;padding:11px 4px;display:grid;grid-template-columns:43px 1fr auto;gap:9px;text-align:right;position:relative}
.inbox-item:hover{background:var(--paper)}
.inbox-item.is-active{background:#fff8f4;border:1px solid rgba(192,107,62,.35);border-radius:12px;padding:10px;margin-bottom:4px}
.inbox-item div{min-width:0}.inbox-item b{font-size:12px}.inbox-item p{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:4px 0;color:var(--ink-2)}.inbox-item small{font-size:9px;color:var(--stone)}.inbox-item time{font:500 8px/1 var(--latin);color:var(--stone)}.inbox-item>i{position:absolute;left:5px;bottom:12px;min-width:18px;height:18px;padding:0 4px;border-radius:50%;background:var(--copper);color:#fff;font:600 8px/18px var(--latin);font-style:normal;text-align:center}

/* Customers */
.customers-layout{height:100vh;padding:14px;display:grid;grid-template-columns:300px minmax(520px,1fr) 270px;gap:12px;direction:ltr;background:var(--soft)}
.customers-layout>*{direction:rtl;overflow:auto}
.followup-panel,.memory-panel,.customer-list-panel{padding:17px}
.followup-title{display:flex;align-items:center;gap:8px;margin-bottom:20px}.followup-title h2{font-size:19px;margin:0}.sparkle{color:var(--copper);font-size:20px}
/* The auto-send switch. It sits at the head of the card because it governs everything
   under it: with it on, the message below leaves on its own. */
.auto-switch{margin-inline-start:auto;display:inline-flex;align-items:center;gap:7px;
  border:0;background:none;padding:0;cursor:pointer;font:inherit;color:var(--stone)}
.auto-switch small{font-size:10px;letter-spacing:.01em;white-space:nowrap}
.auto-switch .track{position:relative;width:34px;height:19px;border-radius:999px;
  background:var(--line);transition:background .18s ease;flex:none}
.auto-switch .track::after{content:"";position:absolute;top:2px;inset-inline-end:2px;
  width:15px;height:15px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .18s ease}
.auto-switch[aria-checked="true"]{color:var(--copper)}
.auto-switch[aria-checked="true"] .track{background:var(--copper)}
.auto-switch[aria-checked="true"] .track::after{transform:translateX(-15px)}
.auto-switch:disabled{opacity:.5;cursor:default}
.auto-switch:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  .auto-switch .track,.auto-switch .track::after{transition:none}}
.auto-note{font-size:10px;line-height:1.8;color:var(--stone);margin:-12px 0 14px}
/* A deadline, not a footnote: the door it names shuts on its own. */
.window-note{color:var(--copper);font-weight:600;margin:-8px 0 14px}
.followup-panel>h3{font-size:18px;margin:5px 0 14px}.followup-panel>p{font-size:12px;line-height:1.9;color:var(--ink-2);margin:5px 0 16px}
.followup-meta{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:14px}
.followup-meta>div{padding:12px 0}.followup-meta>div+div{border-right:1px solid var(--line);padding-right:10px}.followup-meta span{display:block;font-size:9px;color:var(--stone)}.followup-meta b{font-size:11px}
.followup-panel label{display:block;font-size:11px;font-weight:600;margin-bottom:7px}
.followup-panel textarea{width:100%;height:164px;resize:none;border:1px solid var(--line);border-radius:13px;background:var(--paper);padding:12px;font-size:11px;line-height:1.9;outline:none}
.followup-panel textarea:not([readonly]){background:#fff;border-color:var(--copper)}
.consent-chip{display:flex;align-items:center;gap:7px;margin:12px 0;padding:9px 10px;border-radius:10px;background:rgba(46,116,81,.07);color:var(--success);font-size:10px}.consent-chip svg{width:16px}
.followup-panel>.primary-button,.followup-panel>.secondary-button,.followup-panel>.ghost-button{width:100%;margin-top:7px}.followup-panel>.secondary-button,.followup-panel>.ghost-button{min-height:38px;font-size:11px}
.memory-panel{padding:23px}
.memory-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.memory-head h1{font-size:27px;margin:2px 0}.memory-head p{font-size:10px;color:var(--stone);margin:0}.identity-actions{display:flex;gap:5px}
.relationship-summary{padding:15px 0}.relationship-summary h3{font-size:13px;margin:0 0 5px}.relationship-summary p{font-size:12px;line-height:1.8;color:var(--ink-2);margin:0}
.known-facts{border-top:1px solid var(--line);padding-top:12px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:7px}.section-title h3{font-size:14px;margin:0}.section-title>span{font-size:9px;color:var(--stone)}
.fact-row{min-height:40px;display:grid;grid-template-columns:minmax(180px,1fr) 180px 44px 28px;align-items:center;gap:8px;border-bottom:1px solid var(--line);font-size:10px}.fact-row p{margin:0}.fact-row span{color:var(--stone)}.fact-row b{font:600 10px/1 var(--latin);color:var(--success)}.fact-row button{border:0;background:none;color:var(--stone);padding:4px}.fact-row svg{width:14px}
.memory-tags{display:grid;grid-template-columns:1.3fr 1.3fr .8fr .9fr 1.1fr;gap:6px;margin:14px 0}.memory-tags span{padding:9px;border-radius:10px;background:var(--paper);font-size:10px}.memory-tags small{display:block;color:var(--stone);font-size:8px;margin-bottom:3px}.memory-tags .consent{color:var(--success);background:rgba(46,116,81,.07)}
.timeline-section{border-top:1px solid var(--line);padding-top:13px}.timeline-filters{display:flex;gap:2px}.timeline{position:relative}.timeline::before{content:"";position:absolute;right:8px;top:7px;bottom:7px;width:1px;background:var(--line)}
.timeline article{min-height:54px;display:grid;grid-template-columns:17px 1fr auto;gap:10px;align-items:center;padding:5px 0}.timeline article>i{width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--copper);z-index:1;margin-right:4px}.timeline article b{font-size:11px}.timeline article p{font-size:9px;color:var(--ink-2);margin:2px 0}.timeline article time{font:500 8px/1 var(--latin);color:var(--stone)}.timeline .mail-dot{border-color:#7e6b5b}.timeline .telegram-dot{border-color:#3c87bc}
.customer-list-panel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.customer-list-panel header h1{font-size:20px;margin:0}.customer-list-panel .search-shell{margin-bottom:10px}
.customer-list{display:grid;gap:7px}.customer-list-item{min-height:78px;border:1px solid var(--line);border-radius:13px;background:#fff;padding:11px;display:flex;gap:10px;text-align:right}.customer-list-item:hover{background:var(--paper)}.customer-list-item.is-active{border-color:var(--copper);background:#fff8f4;box-shadow:0 8px 22px rgba(192,107,62,.08)}.customer-list-item div{min-width:0}.customer-list-item b{font-size:12px}.customer-list-item p{font-size:10px;color:var(--ink-2);margin:2px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.customer-list-item small{font-size:8px;color:var(--stone)}

/* Responsive */
@media (max-width:1250px){
  :root{--sidebar:205px}
  .conversation-layout{grid-template-columns:minmax(400px,1fr) 300px}
  .customer-context{display:none}
  .customers-layout{grid-template-columns:280px minmax(480px,1fr)}
  .customer-list-panel{display:none}
  .attachment-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:920px){
  :root{--sidebar:76px}
  .side-brand{height:96px;padding:20px 14px}.side-brand img{content:url('/assets/nilesoft-mark-light.svg');width:38px}
  .nav-item{justify-content:center;padding:0;border-radius:10px;border-right-width:0}.nav-item span,.nav-badge{display:none}
  .side-nav nav{padding:18px 10px}.side-bottom{flex-direction:column;height:auto;padding:12px 0}.icon-nav{width:42px}
  .brain-progress-card{grid-template-columns:64px 1fr auto}.progress-items{display:none}
  .brain-composer{right:calc(var(--sidebar) + 22px);width:calc(100vw - var(--sidebar) - 44px)}
  .conversation-layout,.customers-layout{grid-template-columns:minmax(0,1fr) 280px}
  .followup-panel{display:none}
  .analysis-columns{grid-template-columns:1fr 1fr}.source-block{grid-column:1/-1}
}

@media (max-width:720px){
  :root{--sidebar:0px}
  .login-view{grid-template-columns:1fr}.login-brand{display:none}.login-panel{padding:20px}.login-card{padding:28px 22px}.mobile-logo{display:block;width:155px;margin-bottom:24px}.login-card h2{font-size:31px}
  .app-shell{display:block;padding-bottom:66px}.side-nav{position:fixed;top:auto;left:0;right:0;bottom:0;width:100%;height:66px;display:block;background:var(--ink);z-index:50}.side-brand,.side-bottom{display:none}.side-nav nav{height:100%;padding:5px 8px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;direction:rtl}.nav-item{height:56px;flex-direction:column;gap:2px;border-radius:10px!important}.nav-item span{display:block;font-size:9px}.nav-item svg{width:19px;height:19px}
  .screen-head{height:82px;padding:16px 18px;text-align:right;place-items:center start}.screen-head h1{font-size:22px}.mobile-nav-button{display:none}
  #brainView{padding-bottom:142px}.brain-thread{width:calc(100% - 24px);padding-top:16px;gap:12px}.bubble{max-width:88%;padding:11px 13px}.chat-row{gap:7px}.attachment-bubble{width:88%}.attachment-grid{grid-template-columns:1fr 1fr}.inline-card{width:100%;padding:12px}.analysis-columns{grid-template-columns:1fr}.source-block{grid-column:auto}.brain-progress-card{grid-template-columns:54px 1fr;padding:12px}.brain-progress-card>.secondary-button{grid-column:1/-1}.progress-ring{--size:52px}.brain-composer{right:12px;bottom:78px;width:calc(100vw - 24px);min-height:96px;padding:12px}.tool-button{width:34px;height:34px}
  .conversation-layout,.customers-layout{height:auto;min-height:calc(100vh - 66px);padding:0;display:block;background:#fff}.inbox-panel,.customer-list-panel,.customer-context,.followup-panel{display:none}.active-conversation,.memory-panel{border:0;border-radius:0;box-shadow:none;min-height:calc(100vh - 66px)}.active-conversation{grid-template-rows:auto 1fr auto}.message-stream{min-height:calc(100vh - 260px)}.ai-draft-card{grid-template-columns:1fr}.memory-panel{padding:16px}.memory-head h1{font-size:23px}.fact-row{grid-template-columns:1fr 95px 38px 24px}.fact-row span{font-size:8px}.memory-tags{grid-template-columns:1fr 1fr}.timeline article{grid-template-columns:17px 1fr}.timeline article time{grid-column:2}.toast{left:12px;right:12px;bottom:82px;max-width:none}
}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* ============================================================
   Live Company Brain — styles for the elements the backend
   renders: fact actions, the review panel and the brand preview.
   Uses the existing tokens only; nothing new is introduced.
   ============================================================ */

.login-error{
  margin:0 0 4px;padding:10px 12px;border-radius:12px;font-size:12px;line-height:1.7;
  background:rgba(184,75,61,.08);border:1px solid rgba(184,75,61,.24);color:var(--danger)
}

.analysis-card.is-loading h3{color:var(--stone)}
.analysis-card.is-loading .confidence{background:var(--soft);color:var(--stone)}
.analysis-card.is-loading .confidence-line span{
  display:block;width:35%;height:100%;border-radius:inherit;background:var(--stone);
  animation:brain-scan 1.15s ease-in-out infinite alternate
}
@keyframes brain-scan{from{transform:translateX(0)}to{transform:translateX(190%)}}

.ai-bubble.is-system{background:var(--soft);border-style:dashed}
.ai-bubble.is-system p{color:var(--ink-2);font-size:12px}

.fact-action{
  border:1px solid var(--line);background:#fff;border-radius:999px;
  padding:3px 11px;margin-inline-start:6px;font-size:10px;font-weight:600;line-height:1.9;color:var(--ink)
}
.fact-action:hover{border-color:rgba(192,107,62,.45);background:#fffaf7}
.fact-action.ghost{background:transparent;color:var(--stone);border-color:transparent}
.fact-action.ghost:hover{color:var(--ink);border-color:var(--line)}

.needs-confirm{
  font-style:normal;font-size:9px;font-weight:600;margin-inline-start:7px;
  padding:2px 7px;border-radius:999px;background:rgba(181,121,50,.12);color:var(--warning)
}
.conflict-choices{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.conflict-choices .fact-action{margin-inline-start:0;border-color:rgba(184,75,61,.3)}

.attachment-grid span[data-status="failed"]{opacity:.62}
.attachment-grid small.is-failed{color:var(--danger)}
.attachment-grid span[data-href]{cursor:pointer}
.attachment-grid span[data-href]:hover{border-color:rgba(192,107,62,.45)}

.progress-items span[data-state="conflicted"]::before{content:"!";color:var(--danger)}
.progress-items span[data-state="pending"]::before{content:"◦";color:var(--warning)}
.progress-items span[data-sensitive="true"]{font-weight:600}

/* --- review panel ------------------------------------------------------- */
.brain-review-panel{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.review-card,.version-card{
  width:100%;margin:0;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:#fff;padding:19px;box-shadow:var(--shadow-soft)
}
.review-sections{display:grid;gap:12px;margin-top:14px}
.review-section{border:1px solid var(--line);border-radius:14px;padding:13px;background:var(--paper)}
.review-section h4{margin:0 0 9px;font-size:13px;display:flex;align-items:center;gap:8px}
.sensitive-flag{
  font-style:normal;font-size:9px;font-weight:600;padding:2px 7px;border-radius:999px;
  background:rgba(184,75,61,.1);color:var(--danger)
}
.review-section ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.review-section li{
  font-size:12px;line-height:1.85;color:var(--ink);
  border-bottom:1px solid var(--line);padding-bottom:9px
}
.review-section li:last-child{border-bottom:0;padding-bottom:0}
.review-section li[data-status="proposed"]{color:var(--ink-2)}
.answer-meta{display:block;font-size:10px;color:var(--stone);margin-top:3px;font-family:var(--latin)}
.review-actions{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}

.version-card h4{margin:0 0 11px;font-size:13px}
.version-card ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.version-card li{font-size:12px;display:grid;gap:2px;border-bottom:1px solid var(--line);padding-bottom:9px}
.version-card li:last-child{border-bottom:0;padding-bottom:0}
.version-card small{color:var(--stone);font-size:10px;font-family:var(--latin)}

/* --- brand preview ------------------------------------------------------
   The preview CSS the server sends is scoped to [data-brand-preview], so an
   unpublished identity can only ever repaint inside this block.            */
.brand-preview{
  margin-top:16px;border:1px solid var(--line);border-radius:14px;
  padding:14px;background:var(--paper);display:grid;gap:11px
}
.brand-preview h4{margin:0;font-size:13px}
.brand-logo-preview{max-height:44px;width:auto;background:#fff;border-radius:10px;padding:8px}
.brand-swatches{display:flex;flex-wrap:wrap;gap:9px}
.brand-swatch{
  display:grid;gap:2px;padding:9px 11px;border-radius:12px;background:#fff;
  border:1px solid var(--line);min-width:150px
}
.brand-swatch i{display:block;width:100%;height:22px;border-radius:7px;background:var(--swatch)}
.brand-swatch b{font:600 11px/1.6 var(--latin)}
.brand-swatch small{font-size:9px;color:var(--stone);line-height:1.6}
.brand-typography{margin:0;font-size:11px;color:var(--ink-2);line-height:1.8}
.brand-warnings{margin:0;padding:0 16px 0 0;font-size:10px;color:var(--warning);line-height:1.9}

@media (max-width:860px){
  .review-card,.version-card{padding:15px}
  .brand-swatch{min-width:120px}
  .review-actions .primary-button,.review-actions .secondary-button{flex:1}
}

.analysis-card.is-failed{border-color:rgba(184,75,61,.28);background:#fff9f7}
.analysis-card.is-failed .eyebrow{color:var(--danger)}
.analysis-card.is-failed h3{font-size:14px}
.failure-detail{margin:8px 0 0;font:400 10px/1.7 var(--latin);color:var(--stone);word-break:break-word}
.failure-hint{margin:6px 0 0;font-size:11px;color:var(--ink-2)}

/* --- the assistant turn: a reply, the next question, and a folded analysis ------ */
.ai-bubble .next-question{
  margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);
  font-weight:600;line-height:1.9
}
.ai-bubble .next-question[data-reason="conflict"]{color:var(--danger)}

/* The machine's working-out collapses to one line. It is supporting detail, not the
   reply, so it must not push the conversation off the screen. */
.analysis-disclosure{
  width:100%;margin:12px 0 0;padding:0;border-radius:14px;box-shadow:none;
  background:var(--paper);overflow:hidden
}
.analysis-disclosure > summary{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 12px;cursor:pointer;list-style:none;user-select:none
}
.analysis-disclosure > summary::-webkit-details-marker{display:none}
.analysis-disclosure > summary::after{
  content:"⌄";font-size:14px;color:var(--stone);transition:transform .18s ease;margin-inline-start:auto
}
.analysis-disclosure[open] > summary::after{transform:rotate(180deg)}
.analysis-disclosure > summary:hover{background:var(--soft)}
.analysis-disclosure > summary > div{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.analysis-disclosure > summary b{font-size:11px;font-weight:600}
.analysis-disclosure > summary .eyebrow{font-size:9px}
.analysis-disclosure > summary .confidence{padding:5px 8px;font-size:10px}
.analysis-body{padding:0 12px 12px;border-top:1px solid var(--line)}
.analysis-summary{margin:11px 0;font-size:12px;line-height:1.85;color:var(--ink-2)}
.analysis-disclosure .analysis-columns{margin-top:0}

/* The "working" line: the mark drawing itself, beside one sentence that advances --
   in place of a card-sized paragraph that never changed. */
.thinking-line{
  display:inline-flex;align-items:center;gap:10px;
  padding:6px 2px;min-height:28px;font-size:13px;color:var(--stone);
}
.brand-loader{
  width:26px;height:auto;flex:none;overflow:visible;
}
.brand-loader rect,.brand-loader path{
  fill:var(--ink);
  animation:mark-draw 1.9s ease-in-out infinite;
}
/* The copper square keeps the brand accent instead of inheriting the ink. */
.brand-loader .mark-accent{fill:var(--copper)}

.thinking-text{
  /* The stage text changes underneath; a slow sweep says "still working" without the
     jitter of a spinner. */
  background:linear-gradient(90deg,var(--stone) 0%,var(--ink) 45%,var(--stone) 90%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:thinking-sweep 2.4s linear infinite;
}

@keyframes mark-draw{
  0%,100%{opacity:.18}
  35%{opacity:1}
}
@keyframes thinking-sweep{from{background-position:220% 0}to{background-position:-20% 0}}

@media (prefers-reduced-motion:reduce){
  .thinking-text{animation:none;-webkit-text-fill-color:var(--stone);color:var(--stone)}
  .brand-loader rect,.brand-loader path{animation:none;opacity:.55}
}

/* The end-of-interview note: the interview closing is a state change, so it reads as
   one, rather than as another sentence in the reply. */
.completion-card{
  margin-top:12px;border:1px solid rgba(192,107,62,.32);
  background:linear-gradient(180deg,rgba(192,107,62,.07),rgba(192,107,62,.02));
}
.completion-card .eyebrow{color:var(--copper-dark)}
.completion-card p{margin:4px 0 0;font-size:13px;line-height:1.75;color:var(--ink)}

/* Past the point where the work is plainly slower than usual, the line stops reading
   like narration and reads like a status. */
.thinking-line.is-slow .thinking-text{
  animation:none;-webkit-text-fill-color:var(--copper-dark);color:var(--copper-dark);
}

/* The queue has no consumer: this is a fault, not slowness, and it reads as one. */
.thinking-line.is-stalled .thinking-text{
  animation:none;-webkit-text-fill-color:var(--danger);color:var(--danger);font-weight:600;
}
.thinking-line.is-stalled .brand-loader{animation:none;opacity:.35}
.thinking-line.is-stalled .brand-loader rect,
.thinking-line.is-stalled .brand-loader path{animation:none}

/* The checklist becomes the interview plan once one is derived: more items, wrapping,
   and a skipped point reads as set aside rather than done. */
.progress-items[data-planned="true"]{
  max-height:132px;overflow-y:auto;column-gap:18px;
}
.progress-items[data-planned="true"] span{font-size:11.5px}
.progress-items span[data-state="skipped"]{color:var(--stone);text-decoration:line-through}

/* The fact being corrected, held in front of the composer so the owner can see what
   his next message is about. */
.correction-chip{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:0 0 8px;padding:7px 11px;border-radius:11px;
  background:rgba(192,107,62,.08);border:1px solid rgba(192,107,62,.3);
  font-size:12px;color:var(--ink);
}
.correction-chip b{color:var(--copper-dark);font-weight:700;flex:none}
.correction-chip span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.correction-chip button{
  flex:none;border:0;background:none;color:var(--stone);font-size:11px;cursor:pointer;
  padding:2px 6px;border-radius:7px;
}
.correction-chip button:hover{background:rgba(20,20,19,.06);color:var(--ink)}

/* Said plainly on the review card: what customers get is the published version, not
   whatever was added after it. */
.review-note{
  margin:10px 0 0;padding:9px 12px;border-radius:10px;
  background:rgba(192,107,62,.07);border:1px solid rgba(192,107,62,.24);
  font-size:12px;line-height:1.7;color:var(--ink-2);
}

/* The catalogue: one card per thing the company sells, with the picture that was
   sitting beside it on the source page. */
.catalog-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px;margin-top:14px;
}
.catalog-card{
  border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;
  overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-soft);
}
.catalog-card img{width:100%;height:132px;object-fit:cover;display:block;background:var(--soft)}
.catalog-body{padding:13px;display:flex;flex-direction:column;gap:6px;flex:1}
.catalog-body h4{margin:0;font-size:14px;line-height:1.5}
.catalog-price{margin:0;font:600 12px/1.5 var(--latin);color:var(--copper-dark)}
.catalog-summary{margin:0;font-size:12px;line-height:1.7;color:var(--ink-2)}
.catalog-body ul{margin:2px 0 0;padding-inline-start:16px;font-size:11.5px;line-height:1.8;color:var(--stone)}
.catalog-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:9px}
.catalog-flag{font-size:10.5px;font-weight:700;color:var(--copper-dark)}
.catalog-flag.is-ok{color:var(--success)}
.catalog-foot button{border:0;background:none;color:var(--stone);font-size:11px;cursor:pointer;padding:3px 7px;border-radius:7px}
.catalog-foot button:hover{background:rgba(184,75,61,.09);color:var(--danger)}

.catalog-form{margin-top:14px}
.catalog-form h4{margin:0 0 11px;font-size:13px}
.catalog-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:11px}
.catalog-form label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--ink-2)}
.catalog-form input,.catalog-form textarea{
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;font:inherit;font-size:13px;
  background:#fff;color:var(--ink);width:100%;
}
.catalog-form textarea{margin-top:11px;resize:vertical}
.catalog-form .primary-button{margin-top:12px}
@media (max-width:720px){.catalog-grid{grid-template-columns:1fr 1fr}}

/* Two docks floating over the thread, in opposite corners: progress on one side, the
   catalogue on the other. The status used to be a full card in the scroll, so it
   drifted out of view exactly when the owner wanted to check it. */
.brain-dock{
  position:fixed;bottom:190px;z-index:40;
  width:62px;height:62px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;
  background:#fff;border:1px solid var(--line);
  box-shadow:0 14px 34px rgba(20,20,19,.14);
  transition:transform .16s ease, box-shadow .16s ease;
}
.brain-dock:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(20,20,19,.2)}
.brain-dock:active{transform:translateY(0)}
/* dir=rtl: inset-inline-END is the LEFT edge. Both docks stack on the left, clear of
   the composer, so the reading column keeps its right margin. */
.brain-dock-start{inset-inline-end:26px;bottom:190px}
.brain-dock-end{inset-inline-end:26px;bottom:268px}

.dock-ring{--size:54px;margin:0}
.dock-ring span{font-size:11px}

.dock-icon{width:30px;height:30px;display:grid;place-items:center}
.dock-icon img{width:26px;height:26px}
.dock-count{
  position:absolute;top:-3px;inset-inline-end:-3px;min-width:21px;height:21px;
  border-radius:11px;background:var(--copper);color:#fff;
  font:700 11px/21px var(--latin);text-align:center;padding:0 5px;
}

/*
 * Connecting a channel is a short errand, not a screen.
 *
 * These used to open as a full window covering the work behind them, which is the weight
 * of a document rather than of a form with two fields. They now arrive as a narrow sheet
 * from the edge the popover itself sits on, so the list the owner just clicked stays
 * where he left it and the trip back is the same motion reversed.
 */
.channel-sheet:not([hidden]){
  position:fixed;inset-block:0;inset-inline-start:0;z-index:70;
  width:min(340px,92vw);inset-inline-end:auto;
  display:flex;flex-direction:column;gap:12px;
  overflow-y:auto;padding:18px 16px 24px;
  background:var(--paper);border:0;border-inline-end:1px solid var(--line);
  border-radius:0;box-shadow:0 0 60px rgba(20,20,19,.20);
  transform:translateX(var(--sheet-out));opacity:0;
  transition:transform .26s cubic-bezier(.22,.61,.36,1),opacity .18s ease;
}
/* RTL puts the sheet on the right, so "away" is to the right; LTR mirrors it. */
.channel-sheet{--sheet-out:100%}
[dir="ltr"] .channel-sheet{--sheet-out:-100%}
.channel-sheet.is-open{transform:translateX(0);opacity:1}

/* The scrim is what makes it a sheet rather than a floating box: one tap anywhere
   outside closes it, which is how every panel of this shape behaves. */
.sheet-scrim{position:fixed;inset:0;z-index:69;background:rgba(20,20,19,.28);
  opacity:0;transition:opacity .22s ease}
.sheet-scrim.is-open{opacity:1}

/* Back, not close: he came from the channel list and that is where he returns. */
/* Three short steps, numbered, because "paste your bot token" assumes he knows what
   one is. */
/* Said before the button, not after: the cost and the phone-number rule are the two
   things an owner should know while he can still decide. */
.channel-note{border:1px solid var(--line);border-radius:12px;background:#fff;padding:12px 13px;margin-bottom:14px}
.channel-note b{display:block;font-size:11px;margin-bottom:6px;color:var(--copper-dark)}
.channel-note p{margin:0 0 7px;font-size:11px;line-height:1.9;color:var(--ink-2)}
.channel-note p:last-child{margin-bottom:0}
.channel-steps{margin:0 0 16px;padding-inline-start:18px;font-size:11.5px;line-height:2;color:var(--ink-2)}
.channel-steps li{margin-bottom:2px}

.panel-back{
  align-self:flex-start;display:grid;place-items:center;
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);cursor:pointer;flex:none;
}
.panel-back:hover{border-color:var(--copper);color:var(--copper-dark)}
.panel-back svg{width:15px;height:15px}

@media (prefers-reduced-motion:reduce){
  .channel-sheet:not([hidden]),.sheet-scrim{transition:none}
}

/* Opened from a dock, these are windows rather than cards in the flow. */
.brain-review-panel:not([hidden]){
  position:fixed;inset:56px 4vw 92px;z-index:60;
  overflow-y:auto;padding:22px;
  background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius-lg);box-shadow:0 30px 80px rgba(20,20,19,.26);
}
.panel-close{
  position:sticky;top:0;margin-inline-start:auto;display:block;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--ink);font-size:17px;line-height:1;cursor:pointer;
}
@media (max-width:720px){
  .brain-dock{width:54px;height:54px;bottom:158px}
  .brain-dock-start{inset-inline-end:14px;bottom:158px}
  .brain-dock-end{inset-inline-end:14px;bottom:226px}
  .dock-ring{--size:46px}
  .brain-review-panel:not([hidden]){inset:44px 10px 84px;padding:14px}
}

/* Live inbox and customer screens: a few additions to the mock-up's classes. */
.empty-note{margin:10px 0;font-size:12px;color:var(--stone);line-height:1.7}
.handoff-flag{display:block;margin-top:5px;font-size:10.5px;font-weight:700;color:var(--copper-dark)}
.timeline{margin-top:16px}
.timeline h3{margin:0 0 9px;font-size:13px}
.timeline-row{display:grid;grid-template-columns:64px 1fr;gap:9px;padding:7px 0;
  border-top:1px solid var(--line);font-size:12px;line-height:1.7}
.timeline-row time{color:var(--stone);font:500 10.5px/1.9 var(--latin)}
.timeline-row.is-memory span{color:var(--copper-dark)}
.timeline-row.is-follow_up span{color:var(--ink-2);font-style:italic}
.fact-row{display:flex;align-items:baseline;gap:9px;padding:8px 0;border-top:1px solid var(--line)}
.fact-row b{flex:none;font-size:11px;color:var(--copper-dark)}
.fact-row span{flex:1;font-size:12.5px;line-height:1.7}
.fact-row button{border:0;background:none;color:var(--stone);font-size:11px;cursor:pointer;
  padding:3px 7px;border-radius:7px}
.fact-row button:hover{background:rgba(184,75,61,.09);color:var(--danger)}

/* Media inside a conversation. Capped rather than full-width: a tall screenshot must not
   push the rest of the thread off the screen. */
.message-image{display:block;max-width:100%;max-height:260px;width:auto;border-radius:10px;
  border:1px solid var(--line);margin:4px 0 6px;object-fit:contain;background:var(--paper)}
.image-read{display:block;font-size:10.5px;line-height:1.8;color:var(--stone);
  margin:-2px 0 7px;padding-inline-start:2px}
.message-file{display:inline-block;font-size:12px;color:var(--copper);text-decoration:none;
  border:1px solid var(--line);border-radius:9px;padding:5px 9px;margin:4px 0 6px}
.message-file:hover{border-color:var(--copper)}
.attach-button{border:1px solid var(--line);background:var(--paper);border-radius:10px;
  padding:0 11px;font-size:15px;line-height:1;cursor:pointer;color:var(--ink-2)}
.attach-button:hover{border-color:var(--copper)}
.attach-button:disabled{opacity:.5;cursor:default}

/* Why a fact is on the record. Quiet by default; the band only tints the marker, because
   the sentence is the point and the colour is a hint. */
.fact-why{display:block;font-size:10.5px;line-height:1.75;color:var(--stone);
  margin:3px 0 2px;padding-inline-start:9px;border-inline-start:2px solid var(--line)}
.fact-why.band-verified{border-inline-start-color:#3F7D58}
.fact-why.band-probable{border-inline-start-color:var(--copper)}
.fact-why.band-possible{border-inline-start-color:var(--line)}

/* Nothing extracted is not a low score, it is an absence. */
.confidence.muted{color:var(--stone);background:none;border-color:var(--line)}

/* Channels: the popover rows are buttons now, because each one opens something. */
.channel-row{display:flex;align-items:center;gap:9px;width:100%;text-align:start;
  border:0;background:none;padding:8px 6px;border-radius:9px;cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--ink)}
.channel-row:hover:not(:disabled){background:var(--sand)}
.channel-row:disabled{cursor:default;color:var(--stone)}
.channel-row svg{width:15px;height:15px}
/* A brand glyph is a filled shape, not a traced outline, and it carries its own
   colour so the row is recognised before it is read. `evenodd` is what cuts the f
   out of Facebook's disc -- without it the two subpaths merge into a blue blob. */
.brand-mark{fill:currentColor;fill-rule:evenodd;stroke:none}
.brand-facebook{color:#0866FF}.brand-instagram{color:#E1306C}.brand-telegram{color:#29A9EB}
.brand-whatsapp{color:#25D366}
.channel-row b{margin-inline-start:auto;font-size:11px;font-weight:600}
.channel-row.good b{color:#3F7D58}
.channel-row.bad b{color:#B4472F}
.channel-row.idle b{color:var(--stone)}
.channel-row small{flex-basis:100%;padding-inline-start:24px;font-size:10.5px;color:var(--stone)}

/* The mailbox window, in the shape the review and catalogue panels already use. */
.panel-head .eyebrow{display:block}
.panel-head h2{font-size:19px;margin:4px 0 6px}
.panel-head p{font-size:12.5px;line-height:1.9;color:var(--ink-2);margin:0 0 16px;max-width:60ch}
.channel-form{display:flex;flex-direction:column;gap:12px;max-width:520px}
.channel-field{display:flex;flex-direction:column;gap:5px}
.channel-field span{font-size:11.5px;color:var(--ink-2)}
.channel-field input{border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font:13px var(--font);background:var(--paper);color:var(--ink)}
.channel-field input:focus{outline:none;border-color:var(--copper)}
.channel-field small{font-size:10.5px;line-height:1.8;color:var(--stone)}
.channel-advanced summary{font-size:12px;color:var(--ink-2);cursor:pointer;padding:4px 0}
.channel-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:8px}
.channel-actions{display:flex;gap:9px;flex-wrap:wrap;padding-top:4px}
.channel-result{display:flex;flex-direction:column;gap:4px;font-size:12px;
  border-inline-start:3px solid var(--line);padding:8px 11px;border-radius:8px;background:var(--sand)}
.channel-result.good{border-inline-start-color:#3F7D58}
.channel-result.bad{border-inline-start-color:#B4472F}
.channel-result .ok{color:#3F7D58}
.channel-result .no{color:#B4472F}
.channel-foot{padding-top:14px;font-size:11.5px;color:var(--stone)}
.channel-error{color:#B4472F}
#emailChannelPanel:not([hidden]){z-index:70}
@media (max-width:720px){ .channel-grid{grid-template-columns:1fr} }
.telegram-mark.mark-facebook{background:#1877F2;color:#fff}
#facebookChannelPanel:not([hidden]){z-index:70}