:root[data-theme="dark"]{
  --bg:#1a1a2e; --bg2:#16213e; --bg3:#0f3460; --border:#0f3460;
  --accent:#e94560; --accent2:#90caf9; --text:#e0e0e0; --text-muted:#aaa; --text-dim:#666;
  --input-bg:#0f3460; --input-brd:#1a4d8a; --hover:#0f3460; --card-bg:#16213e;
  --ok:#4caf50; --warn:#ffb300; --err:#f44336; --color-scheme:dark;
  --btn-primary-text:#0a1628;
}
:root[data-theme="light"]{
  --bg:#f0f2f5; --bg2:#ffffff; --bg3:#e3eaf5; --border:#c8d3e6;
  --accent:#c62a47; --accent2:#1565c0; --text:#1a1a2e; --text-muted:#555; --text-dim:#999;
  --input-bg:#f8f9fc; --input-brd:#b0bdd6; --hover:#e3eaf5; --card-bg:#ffffff;
  --ok:#2e7d32; --warn:#e65100; --err:#c62828; --color-scheme:light;
  --btn-primary-text:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font:14px/1.5 'Segoe UI',Arial,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;color-scheme:var(--color-scheme)}
button{cursor:pointer;font:inherit;border:none;border-radius:6px;padding:8px 14px;background:var(--bg3);color:var(--text)}
button.primary,button.danger{color:#fff}
button.primary{background:var(--accent2);color:var(--btn-primary-text)}
button.danger{background:var(--err)}
button.secondary{background:var(--bg3);color:var(--text)}
button.small{padding:4px 10px;font-size:12px}
button.icon-btn{background:none;font-size:18px;padding:4px 8px}
button:hover{filter:brightness(1.1)}
input,select,textarea{font:inherit;background:var(--input-bg);color:var(--text);border:1px solid var(--input-brd);border-radius:6px;padding:7px 10px}
h1{font-size:18px;color:var(--accent)}
h2{font-size:16px;margin-bottom:12px}
h3{font-size:13px;color:var(--accent2);margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}
.dim{color:var(--text-dim)}
.spacer{flex:1}

/* login */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:32px;width:340px;display:flex;flex-direction:column;gap:12px}
.login-card h1{text-align:center;margin-bottom:8px}
.login-btns{display:flex;gap:8px}
.login-btns button{flex:1}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:1500}
.modal-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted)}
.err-msg{color:var(--err);font-size:13px;min-height:18px;text-align:center}

/* admin */
.admin-modal-card{width:520px;max-width:92vw;max-height:80vh}
.admin-users-list{display:flex;flex-direction:column;gap:10px;overflow-y:auto;flex:1;max-height:50vh}
.admin-user-row{background:var(--bg3);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.admin-user-row.blocked{opacity:.55}
.admin-user-top{display:flex;align-items:center;gap:8px}
.admin-user-login{font-weight:600;flex:1}
.admin-user-grants{display:flex;flex-wrap:wrap;gap:6px;font-size:12px}
.admin-user-grants label{display:flex;align-items:center;gap:4px;background:var(--bg2);border-radius:6px;padding:2px 6px;cursor:pointer}
.admin-new-user-form{display:flex;gap:8px}
.admin-new-user-form input{flex:1}

/* header + tabs */
header{background:var(--bg2);padding:12px 20px;display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--border)}
#ws-status{font-size:12px;padding:3px 8px;border-radius:10px;background:var(--bg3);color:var(--text-muted);white-space:nowrap;flex-shrink:0}
#ws-status.ok{background:#1a4d2e;color:var(--ok)}
#ws-status.err{background:#4d1a1a;color:var(--err)}
#user-badge{font-size:13px;color:var(--text-muted)}
.mini-gauges{display:flex;gap:14px;margin-left:16px}
.mini-gauge{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-muted)}
.mg-label{font-weight:600;width:28px}
.mg-bar{background:var(--bg3);border-radius:3px;height:6px;width:56px;overflow:hidden}
.mg-bar div{height:100%;width:0;transition:width .4s,background .4s;background:var(--ok)}
.mg-val{width:32px;text-align:right;font-family:monospace}
@media (max-width:900px){.mini-gauges{display:none}}
.header-svcs{display:flex;flex-wrap:wrap;gap:6px;margin-left:6px}
.hsvc-pill{font-size:10px;padding:2px 7px;border-radius:8px;background:var(--bg3);color:var(--text-dim);cursor:default}
.hsvc-pill.ok{color:var(--ok)}
.hsvc-pill.err{color:var(--err)}
@media (max-width:1200px){.header-svcs{display:none}}
.startup-banner{display:flex;align-items:center;gap:14px;padding:12px 20px;background:#3a2a1a;color:#ffb74d;border-bottom:1px solid var(--border)}
.startup-banner .dim{color:#ffcc80}
.spinner{width:20px;height:20px;border-radius:50%;border:3px solid rgba(255,183,77,.3);border-top-color:#ffb74d;animation:spin 0.8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.tabs{display:flex;gap:2px;padding:0 20px;background:var(--bg2);border-bottom:1px solid var(--border)}
.tab{background:none;border-radius:0;padding:12px 18px;color:var(--text-muted);border-bottom:2px solid transparent}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.tab-body{display:none;padding:20px}
.tab-body.active{display:block}
.panel{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:20px;margin-bottom:16px}
.row{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.row>label{min-width:150px;color:var(--text-muted)}
.lang-checks{display:flex;gap:16px}
.lang-checks label{color:var(--text)}
.src-list{display:flex;flex-direction:column;gap:6px;flex:1}
.src-list label{display:flex;align-items:center;gap:8px;color:var(--text)}
.src-item{background:var(--bg3);padding:6px 10px;border-radius:6px}

/* live */
.live-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.rec-dot{width:12px;height:12px;border-radius:50%;background:var(--err);animation:pulse 1.2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
select.inline{padding:4px 8px}
.janna-ind{font-size:12px;padding:3px 10px;border-radius:10px;background:var(--bg3)}
.janna-ind.speaking{background:#1a4d2e;color:var(--ok)}
.janna-ind.thinking{background:#3a2a1a;color:var(--warn)}
.janna-ind.paused{background:#4d1a1a;color:var(--err)}
.live-cols{display:flex;gap:16px;align-items:flex-start}
.transcript-col{flex:2;min-width:0}
.side-col{flex:1;min-width:220px;display:flex;flex-direction:column;gap:16px}
.side-block{background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:14px}
.collapsible-h3{cursor:pointer;user-select:none}
#resume-live-content{max-height:40vh;overflow-y:auto;font-size:13px}
#resume-live-content.collapsed{display:none}
#transcript{display:flex;flex-direction:column;gap:10px;min-height:300px;max-height:60vh;overflow-y:auto}
.utt{background:var(--card-bg);border:1px solid var(--border);border-left:3px solid var(--spk-color,var(--border));border-radius:8px;padding:8px 12px;transition:background .2s}
.utt .spk{font-size:12px;font-weight:600;margin-bottom:2px}
.utt-meta{display:flex;align-items:baseline;gap:8px;margin-bottom:2px}
.utt-meta .spk{margin-bottom:0}
.utt .ts,.utt-meta .ts{font-size:11px;font-weight:400;color:var(--text-dim);font-variant-numeric:tabular-nums}
.utt .txt{color:var(--text)}
.utt.pending .txt{color:var(--text-muted)}
.utt.playing{background:var(--hover);box-shadow:0 0 0 1px var(--accent2)}
.utt.unverified{border-left-color:var(--warn)}
.utt.unverified .txt::after{content:" ⚠";font-size:11px;opacity:.7}
.unverified-text{border-bottom:1px dashed var(--warn)}
.debug-block{margin-top:6px;padding:6px 8px;border-radius:6px;background:var(--bg2);font-family:monospace;font-size:11px;line-height:1.5}
.debug-block b{color:var(--accent2)}
#hist-transcript{display:flex;flex-direction:column;gap:10px}
.hist-speakers{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;max-height:100px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.hist-speakers .speaker-chip{margin-bottom:0}
.retranscribe-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.retranscribe-hint{font-size:12px}
.retranscribe-progress{display:flex;align-items:center;gap:8px}
.retranscribe-progress .progress-bar{width:140px;height:8px;background:var(--bg2);border-radius:4px;overflow:hidden}
.retranscribe-progress .progress-bar>div{height:100%;width:0;background:var(--accent2);transition:width .5s}
.retranscribe-progress span{font-size:12px;white-space:nowrap}
.btn-docx-link{text-decoration:none}
.utt .tr{color:var(--accent2);font-size:13px;font-style:italic;margin-top:4px;border-top:1px dashed var(--border);padding-top:4px}
#partials{margin-top:10px;color:var(--text-dim);font-style:italic;min-height:24px}
.partial-line{margin-top:4px}
.speaker-chip{display:flex;align-items:center;gap:8px;padding:6px;border-radius:6px;cursor:grab;margin-bottom:6px}
.speaker-chip:hover{background:var(--hover)}
.utt.drop-target{outline:2px dashed var(--accent2);outline-offset:2px}
.speaker-chip.drop-target{outline:2px dashed var(--accent2);outline-offset:2px}
.spk-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:13px;flex-shrink:0}
.spk-meta{font-size:12px;color:var(--text-muted)}
.speaker-chip-ai{cursor:default;border:1px dashed var(--accent2);background:var(--hover)}
.spk-icon-ai{background:var(--bg2);font-size:15px}
.ai-badge{font-size:10px;font-weight:700;color:var(--accent2);border:1px solid var(--accent2);border-radius:8px;padding:0 5px;vertical-align:middle;margin-left:2px}
#reco-list{max-height:40vh;overflow-y:auto}
.reco-item{background:var(--bg3);border-radius:6px;padding:8px 10px;margin-bottom:8px;font-size:13px;transition:background 1.5s,box-shadow 1.5s}
.reco-item.fresh{background:color-mix(in srgb, var(--accent2) 18%, var(--bg3));box-shadow:0 0 0 1px var(--accent2);animation:reco-pop .25s ease-out}
@keyframes reco-pop{from{transform:translateY(-6px);opacity:0}to{transform:none;opacity:1}}
.janna-ind.thinking{animation:jn-pulse 1.2s ease-in-out infinite}
@keyframes jn-pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* history */
.hist-wrap{display:flex;gap:16px;align-items:flex-start}
.hist-list-col{flex:1;max-width:320px;display:flex;flex-direction:column;gap:8px}
.hist-search{width:100%}
.hist-list{display:flex;flex-direction:column;gap:8px;
  max-height:calc(100vh - 270px);overflow-y:auto}
.hist-card{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:12px;cursor:pointer}
.hist-card:hover{border-color:var(--accent2)}
.hist-card.active{border-color:var(--accent);background:var(--hover);box-shadow:0 0 0 2px var(--accent) inset}
.hist-card mark,#hist-transcript mark{background:rgba(255,183,77,.45);color:inherit;border-radius:2px;padding:0 1px}
.hist-snippet{font-size:12px;color:var(--text-dim);margin-top:4px;font-style:italic}
.hist-detail{flex:2;background:var(--card-bg);border:1px solid var(--border);border-radius:10px;padding:20px;min-height:300px;display:flex;flex-direction:column;max-height:calc(100vh - 220px)}
.summary-box{background:var(--bg3);border-radius:8px;padding:12px;margin:12px 0}
.summary-box ul{margin-left:18px}

/* calendar */
.cal-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.cal-head b{font-size:16px;min-width:160px;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-weekday{text-align:center;font-size:12px;color:var(--text-dim);padding:4px 0}
.cal-cell{background:var(--card-bg);border:1px solid var(--border);border-radius:8px;
  min-height:90px;padding:6px;display:flex;flex-direction:column;gap:4px}
.cal-cell.cal-empty{background:transparent;border-color:transparent}
.cal-cell.cal-today{border-color:var(--accent)}
.cal-daynum{font-size:12px;color:var(--text-dim)}
.cal-chip{background:var(--bg3);border-radius:5px;padding:2px 6px;font-size:12px;cursor:pointer;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-chip:hover{background:var(--hover);color:var(--accent2)}
.cal-modal-card{width:60vw;max-width:900px;min-height:55vh;max-height:70vh;padding:36px}
.cal-modal-card h1{font-size:24px}
.cal-modal-card .dim{font-size:15px}
.cal-modal-summary{overflow-y:auto;flex:1;white-space:pre-wrap;background:var(--bg3);border-radius:8px;
  padding:18px 22px;font-size:16px;line-height:1.65}
@media (max-width:700px){
  .cal-modal-card{width:92vw;max-height:75vh}
}
@media (max-width:700px){
  .cal-cell{min-height:60px}
  .cal-head b{min-width:120px}
}
.tasks-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.tasks-table th,.tasks-table td{border:1px solid var(--border);padding:6px 10px;text-align:left}
.tasks-table th{background:var(--bg2);color:var(--text-muted);font-weight:600}
.participants-groups{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}
.participants-group{background:var(--bg2);border-radius:8px;padding:8px 12px;min-width:160px}
.participants-group ul{margin:4px 0 0 18px}
.hist-title-row{display:flex;align-items:center;gap:14px;margin-bottom:12px;flex-shrink:0}
.hist-title-row h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}
.hist-title-row audio{flex:1;height:36px}
.editable-title{cursor:pointer;border-bottom:1px dashed transparent}
.editable-title:hover{border-bottom-color:var(--accent2)}
.title-edit-input{font-size:18px;font-weight:700;max-width:40%}
.hist-tabs{display:flex;align-items:center;gap:4px;margin-bottom:12px;flex-shrink:0;border-bottom:1px solid var(--border)}
.hist-subtab{background:none;border-radius:0;padding:8px 14px;color:var(--text-muted);border-bottom:2px solid transparent}
.hist-subtab.active{color:var(--accent);border-bottom-color:var(--accent)}
.hist-pane{display:none;flex:1;min-height:0}
.hist-pane.active{display:block;overflow-y:auto}
#hist-pane-transcript.active{display:flex;flex-direction:column;overflow:hidden}
.hist-speakers{flex-shrink:0}
#hist-transcript{flex:1;overflow-y:auto;min-height:0}

/* персоналии */
.persona-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:12px}
.persona-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.persona-appearance{border-top:1px dashed var(--border);padding:8px 0}
.persona-appearance:first-child{border-top:none;padding-top:0}
.persona-profile{background:var(--bg2);border-left:3px solid var(--accent2);border-radius:6px;padding:10px 12px;margin-bottom:10px}
.persona-chars.collapsed{display:none}
.persona-posorg{cursor:pointer;margin-bottom:10px;font-size:13px}
.persona-posorg:hover{text-decoration:underline}
.persona-posorg-edit{display:flex;gap:8px;margin-bottom:10px}
.persona-posorg-edit input{flex:1}
.persona-name{cursor:pointer}
.persona-name:hover{text-decoration:underline}
.persona-name-edit{font-weight:600}
.persona-appearance-link{cursor:pointer;border-radius:6px;margin:0 -6px;padding:8px 6px}
.persona-appearance-link:hover{background:var(--hover)}

/* термины */
.term-add-row{display:flex;gap:8px;margin-bottom:16px}
.term-add-row input{flex:1}
.term-add-row input.term-new-canonical{flex:0 0 18%}
.term-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:12px}
.term-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.term-canonical{cursor:pointer}
.term-canonical:hover{text-decoration:underline}
.term-canonical-edit{font-weight:600}
.term-variants{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.term-variant-chip{display:flex;align-items:center;gap:6px;background:var(--bg2);border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:13px}
.term-variant-chip .chip-del{cursor:pointer;opacity:.6}
.term-variant-chip .chip-del:hover{opacity:1}
.term-variant-add{display:flex;gap:8px}
.term-variant-add input{flex:1}

/* prompts */
.prompt-wrap{display:flex;gap:16px;align-items:flex-start}
.prompt-tabs{display:flex;flex-direction:column;gap:4px;min-width:200px}
.prompt-tabs button{text-align:left;background:var(--card-bg);border:1px solid var(--border)}
.prompt-tabs button.active{border-color:var(--accent);color:var(--accent)}
.prompt-editor{flex:1;display:flex;flex-direction:column;gap:10px}
.prompt-desc{background:var(--bg3);border-radius:8px;padding:10px 14px;font-size:13px;color:var(--text-muted)}
#prompt-text{width:100%;min-height:340px;font-family:'Cascadia Code',Consolas,monospace;resize:vertical}
.prompt-actions{display:flex;gap:10px;align-items:center}

.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--card-bg);border:1px solid var(--border);border-radius:8px;padding:10px 18px;opacity:0;transition:opacity .3s;pointer-events:none;z-index:2000;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.toast.show{opacity:1}

/* WebView-режим для мобильного приложения: минимум настроек, всё пиктограммами */
.webview-panel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;min-height:70vh}
.wv-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.wv-icon-btn{font-size:30px;background:var(--card-bg);border:2px solid var(--border);border-radius:16px;
  width:64px;height:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0;gap:2px;line-height:1}
.wv-icon-btn span{font-size:10px;color:var(--text-muted)}
.wv-icon-btn.active{border-color:var(--accent2);background:var(--hover);box-shadow:0 0 0 2px var(--accent2) inset}
.wv-start-btn{width:110px;height:110px;border-radius:50%;background:var(--accent2);color:#fff;
  font-size:44px;border:none;box-shadow:0 4px 20px rgba(0,0,0,.35)}
.wv-start-btn:active{transform:scale(.96)}
body.webview-mode header,
body.webview-mode nav.tabs,
body.webview-mode #setup-panel{display:none !important}
/* webview — приложение, а не веб-страница: без зума и без выделения текста
   (кроме реальных полей ввода, где выделение нужно для редактирования) */
body.webview-mode{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.webview-mode input,
body.webview-mode textarea{-webkit-user-select:text;user-select:text}
#webview-panel #resume-block,
#webview-panel #sync-block{width:100%;max-width:420px;text-align:left}
#webview-panel input,
#webview-panel select,
#webview-panel textarea{font-size:16px}

/* WebView: живой диалог — по одной панели за раз (свайп/нижние вкладки),
   крупнее шрифты и кнопки под палец вместо мыши */
.mobile-tabbar{display:none}
body.webview-mode #live-panel{font-size:16px}
body.webview-mode .live-head{flex-wrap:wrap;row-gap:8px}
body.webview-mode .live-head button{min-height:40px}
body.webview-mode #btn-stop{font-size:15px;padding:10px 18px}
body.webview-mode .utt{padding:12px 14px}
body.webview-mode .utt .txt{font-size:16px}
body.webview-mode .speaker-chip{padding:10px}
body.webview-mode #transcript{max-height:none;min-height:0;flex:1}
body.webview-mode .live-cols{flex:1;min-height:0;display:flex}
body.webview-mode .transcript-col{display:flex;flex-direction:column;min-height:0;flex:1}
/* без !important и без display здесь: этим управляет JS (style.display
   'flex'/'none' в webview-режиме) — раньше !important держал панель
   видимой ВСЕГДА, как только у body есть класс webview-mode, даже когда
   встречи не было и JS явно скрывал панель через style.display='none' */
body.webview-mode #live-panel.panel-flex{flex-direction:column;height:calc(100vh - 40px)}
body.webview-mode .mobile-tabbar{display:flex;position:sticky;bottom:0;background:var(--card-bg);
  border-top:1px solid var(--border);border-radius:10px;padding:6px;gap:6px;margin-top:10px;flex-shrink:0}
.mt-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:22px;padding:8px;border-radius:8px;background:none}
.mt-btn span{font-size:11px;color:var(--text-muted)}
.mt-btn.active{background:var(--hover);color:var(--accent2)}
/* Видимость .side-col/.transcript-col/блоков внутри неё в webview-режиме
   управляется напрямую из JS (applyLiveVisibility()) через style.display,
   а не CSS-классами — так надёжнее: одна функция, один источник истины,
   без гонки между переключением вкладки и переключением режима (Помощник/
   Собеседование), которые раньше независимо писали в один и тот же display. */