:root{
  --bg:#050707;--panel:#0b0e0f;--panel-2:#121719;--line:rgba(155,190,192,.13);--line-strong:rgba(155,210,213,.25);
  --text:#edf5f5;--muted:#a0b2b4;--dim:#7e9396;--cyan:#20e0e8;--green:#69dab1;--amber:#edc16d;--red:#ff8397;
  --accent:#20d4dc;--accent-2:#6cc9b8;--field:#080c0d;--header:rgba(5,8,9,.95);--soft:rgba(32,224,232,.045);
  --glow:rgba(32,224,232,.095);--shadow:0 10px 34px rgba(0,0,0,.24);--button-bg:#b6f4f2;--button-text:#072122;
}
:root[data-theme="light"]{
  color-scheme:light;--bg:#f3f5fa;--panel:#ffffff;--panel-2:#edf1f8;--line:rgba(48,65,99,.15);--line-strong:rgba(48,65,99,.28);
  --text:#202c43;--muted:#53627a;--dim:#65748c;--cyan:#087f83;--green:#147657;--amber:#906015;--red:#bb354d;
  --accent:#405fc6;--accent-2:#7854b7;--field:#f7f9fd;--header:rgba(255,255,255,.95);--soft:rgba(64,95,198,.065);
  --glow:rgba(64,95,198,.055);--shadow:0 10px 34px rgba(40,59,94,.065);--button-bg:#405fc6;--button-text:#ffffff;
}
body,.page-shell{background:radial-gradient(ellipse at 12% 0%,var(--soft),transparent 42%),var(--bg);color:var(--text)}
body{font-family:Inter,"Segoe UI",system-ui,sans-serif;line-height:1.55}
.mono,.role-badge,.invite-link{font-family:Inter,"Segoe UI",system-ui,sans-serif;letter-spacing:.015em}
::selection{background:var(--accent);color:var(--bg)}
::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--line-strong)}
.topbar{background:var(--header)}.brand-mark{transform:none;border-radius:12px;border-color:var(--line-strong);background:var(--soft)}
.page-shell .topbar{min-height:64px;padding:12px 18px;flex-wrap:wrap}
.brand-mark::after{width:10px;height:10px;border-radius:50%;box-shadow:0 0 14px var(--cyan)}
.brand-name{letter-spacing:.035em}.brand-sub,.side-label,.eyebrow,.field-label,.admin-field label{color:var(--dim);letter-spacing:.045em}
.sidebar{background:var(--bg);gap:25px}.sidebar .side-button{border-radius:12px;padding-top:11px;padding-bottom:11px}
.side-button,.nav-button,.logout-button,.icon-button,.btn-secondary,.file-button,.action.secondary{color:var(--muted);background:var(--panel);border-color:var(--line);border-radius:11px}
.side-button{background:transparent}.side-button.active,.nav-button.active{background:var(--soft);border-color:var(--line-strong);color:var(--text)}
.side-button>span:first-child{color:var(--accent);font-size:15px}.side-count{color:var(--dim)}
.panel,.org-chip,.auth-panel{background:var(--panel)}.org-chip{border-radius:12px}.org-chip strong{color:var(--text)}.org-chip span{color:var(--muted)}
.panel{transition:box-shadow .24s,border-color .24s}.panel:hover{box-shadow:inset 0 0 0 1px var(--line-strong)}
.admin-card,.knowledge-list-card,.knowledge-editor-card,.message-card,.setup-card,.invite-card,.message-file{
  background-color:var(--panel)!important;background-image:radial-gradient(240px circle at var(--glow-x,50%) var(--glow-y,0%),var(--glow),transparent 75%);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease;
}
.admin-card,.knowledge-list-card,.knowledge-editor-card{padding:24px}.message-card{padding:20px;color:var(--text)}
.message-card.outbound{background-color:var(--soft)!important;border-color:var(--line-strong)!important}
.message-file{border-radius:13px;box-shadow:none}.message-file-name{color:var(--text)}
.conversation-header,.reply-composer,.copilot-actions{background:var(--panel);border-color:var(--line)}
.customer-name,.panel-title,.team-name,.knowledge-title{color:var(--text)}
.customer-email,.team-email,.knowledge-meta,.original-message,.message-file p,.attachment-controls span,.composer-footer span{color:var(--muted)}
.admin-card>p,.page-head p,.auth-card>p,.auth-visual p,.invite-card p,.empty p,.knowledge-empty,.setup-copy,.setup-card p,.setup-card span{color:var(--muted)}
.auth-field label,.auth-footer,.auth-footer a,.inline-status,.permission-note,.copilot-state p{color:var(--muted)}
.inline-status.success,.auth-message.success{color:var(--green)}.inline-status.error,.auth-message.error{color:var(--red)}
.auth-visual{background:radial-gradient(ellipse at 20% 20%,var(--soft),transparent 70%),var(--bg)}
.auth-message,.invite-link,.permission-note,.copilot-state{background:var(--soft);border-color:var(--line);border-radius:13px}
.auth-input,.admin-input,.admin-textarea,.draft,.search-box{background:var(--field);color:var(--text);border-color:var(--line);border-radius:12px;transition:border-color .2s,box-shadow .2s}
.search-box input{color:var(--text)}input::placeholder,textarea::placeholder{color:var(--dim);opacity:1}
.admin-input:focus,.admin-textarea:focus,.draft:focus,.auth-input:focus,.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft)}
.btn-primary,.auth-submit,.action.primary{background:var(--button-bg);border:1px solid transparent;color:var(--button-text);border-radius:12px;font-weight:650}
.btn-primary:hover,.auth-submit:hover,.action.primary:hover{background:var(--button-bg);filter:brightness(1.06)}
.btn-danger{border-radius:12px;color:var(--red)}
.ticket-row,.team-row,.knowledge-row{background-color:var(--panel);border-color:var(--line);border-radius:13px;transition:background .22s,transform .22s,border-color .22s,box-shadow .22s}
.ticket-row.active,.knowledge-row.active{background:var(--soft);border-color:var(--accent)}
.ticket-name,.ticket-customer,.ticket-subject{color:var(--text)}.ticket-time,.ticket-age,.ticket-preview,.ticket-meta{color:var(--muted)}
.search-box input::placeholder{color:var(--dim)}.search-area{border-color:var(--line)}.side-count{font-family:Inter,sans-serif}
.empty-symbol{transform:none;border-color:var(--line-strong);border-radius:14px}.empty-symbol::after{border-radius:50%}
.avatar,.meta-pill{background:var(--panel-2);color:var(--muted);border-color:var(--line);border-radius:10px}
.meta-pill{font-family:Inter,sans-serif;font-size:9px}.status-dot{background:var(--green)}
.role-badge{border-radius:7px;color:var(--muted)}.role-badge.admin{color:var(--cyan)}.pending-badge{color:var(--amber)}
.access-card{margin-top:auto;padding:12px;border:1px solid var(--line);border-radius:13px;background:var(--panel);color:var(--muted);font-size:11px;line-height:1.7}
.workspace-settings .side-button{width:100%;text-align:left;font:inherit;font-size:12px}
.workspace-settings .side-label{margin-bottom:8px}.settings-hint{margin:8px 10px 0;font-size:10px;color:var(--dim)}
.workspace-dialog,.attachment-dialog{background:var(--panel);color:var(--text);border:1px solid var(--line-strong);border-radius:22px;padding:26px;width:min(520px,calc(100vw - 32px));max-height:85dvh;overflow:auto;box-shadow:0 24px 100px rgba(0,0,0,.3)}
.workspace-dialog::backdrop,.attachment-dialog::backdrop{background:rgba(8,13,25,.5);backdrop-filter:blur(5px)}
.attachment-dialog{width:min(900px,94vw)}
.dialog-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}.dialog-heading h2{font-size:24px;letter-spacing:-.025em;margin:5px 0 0}
.dialog-heading .icon-button{width:34px;height:34px;flex-shrink:0;font-size:22px}.dialog-copy{color:var(--muted);font-size:13px;margin:16px 0 22px}
.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}.theme-option{text-align:left;border:1px solid var(--line);background:var(--field);color:var(--text);border-radius:16px;padding:12px;transition:border-color .2s,transform .2s}
.theme-option[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--soft)}.theme-option strong,.theme-option>span:last-child{display:block}.theme-option strong{font-size:14px;margin-top:10px}.theme-option>span:last-child{font-size:11px;color:var(--muted);margin-top:2px}
.theme-swatch{height:90px;border-radius:10px;display:grid;grid-template-columns:25% 1fr;gap:7px;padding:10px}.swatch-dark{background:#070a0b}.swatch-light{background:#e8edf8}
.theme-swatch i{display:block;border-radius:7px}.swatch-dark i{background:#142023}.swatch-light i{background:#fff}.theme-swatch i:first-child{border-bottom:3px solid #20d4dc}
.motion-control{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.motion-control strong,.motion-control small{display:block}.motion-control strong{font-size:13px}.motion-control small{font-size:11px;color:var(--muted);margin-top:3px}.motion-control input{accent-color:var(--accent);width:20px;height:20px}
.appearance-shortcut{position:fixed;right:16px;bottom:16px;border:1px solid var(--line-strong);border-radius:999px;padding:9px 14px;background:var(--panel);color:var(--muted);font-size:11px;box-shadow:var(--shadow);z-index:35}.mobile-appearance{display:none}
.txt-dropzone{border:1px dashed var(--line-strong);border-radius:17px;padding:22px;text-align:center;background:var(--soft);color:var(--text);transition:border-color .2s,box-shadow .2s,transform .2s}
.txt-dropzone strong{display:block;font-size:15px}.txt-dropzone p{font-size:12px;color:var(--muted);margin:6px 0 14px}.txt-dropzone.drag-over{border-color:var(--accent);box-shadow:0 0 0 4px var(--soft)}
[data-knowledge-drop].drag-over{border-color:var(--accent);box-shadow:0 0 0 3px var(--soft);background:var(--soft)}
.upload-file-list{list-style:none;padding:0;margin:18px 0;max-height:200px;overflow:auto}.upload-file-list li{padding:9px 0;border-bottom:1px solid var(--line);font-size:12px;overflow-wrap:anywhere}.upload-file-list small{color:var(--muted);display:block}
.upload-status{font-size:12px;color:var(--muted);min-height:20px;white-space:pre-wrap}.upload-status.error{color:var(--red)}.upload-status.success{color:var(--green)}
.workspace-dialog .admin-actions{justify-content:flex-end}.knowledge-toolbar .admin-actions{margin:0}.knowledge-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;align-items:center}
#synvio-auth-veil{background:var(--bg)!important;color:var(--muted)!important}#synvio-inline-toast{background:var(--panel)!important;color:var(--text)!important;border-color:var(--line-strong)!important}
button,a,input,select,textarea{touch-action:manipulation}button,a{transition:background-color .2s,border-color .2s,box-shadow .2s,color .2s,transform .2s}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(hover:hover) and (pointer:fine){
  .admin-card:hover,.knowledge-list-card:hover,.knowledge-editor-card:hover,.message-card:hover,.message-file:hover,.setup-card:hover,.invite-card:hover{border-color:var(--line-strong);transform:none;box-shadow:var(--shadow),0 0 22px var(--soft)}
  .ticket-row:hover,.knowledge-row:hover,.theme-option:hover{transform:translateY(-1px);border-color:var(--accent);background-color:var(--soft)}
  .side-button:hover,.nav-button:hover,.logout-button:hover,.icon-button:hover,.btn-secondary:hover,.file-button:hover{color:var(--text);background:var(--soft);border-color:var(--line-strong);transform:translateY(-1px)}
}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(8px) scale(.99)}to{opacity:1;transform:none}}
.workspace-dialog[open],.attachment-dialog[open]{animation:dialog-arrive .22s ease-out}
:root[data-motion="off"] *,:root[data-motion="off"] *::before,:root[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
:root[data-motion="off"] :is(.admin-card,.knowledge-list-card,.knowledge-editor-card,.message-card,.message-file,.setup-card,.invite-card,.ticket-row,.knowledge-row,.theme-option,button,a):hover{transform:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}:is(.admin-card,.knowledge-list-card,.knowledge-editor-card,.message-card,.message-file,.setup-card,.invite-card,.ticket-row,.knowledge-row,.theme-option,button,a):hover{transform:none!important}}
@media(max-width:700px){.mobile-appearance{display:block;top:12px;right:12px;bottom:auto}.app-shell .topbar{padding-right:95px}.workspace-dialog{padding:20px}.admin-card,.knowledge-list-card,.knowledge-editor-card{padding:18px}.message-card{padding:16px}.theme-swatch{height:72px}.appearance-shortcut{font-size:10px;padding:8px 10px}}

.brand-mark{border-width:2px;border-radius:7px;transition:transform .65s cubic-bezier(.2,.7,.25,1),border-color .3s,box-shadow .3s}
.brand-mark::after{animation:brand-light 4.5s ease-in-out infinite}
.brand-name{transform-origin:left center;transition:transform .4s ease}
@keyframes brand-light{0%,100%{box-shadow:0 0 5px var(--cyan);opacity:.65}50%{box-shadow:0 0 16px var(--cyan);opacity:1}}
@media(hover:hover) and (pointer:fine){.brand:hover .brand-mark{transform:rotate(90deg) scale(1.08);border-color:var(--cyan);box-shadow:0 0 15px var(--soft)}.brand:hover .brand-name{transform:scale(1.035)}}
:root[data-motion="off"] .brand-mark,:root[data-motion="off"] .brand-name{transform:none!important}
@media(prefers-reduced-motion:reduce){.brand-mark,.brand-name{transform:none!important}.brand-mark::after{animation:none!important}}