/* Kwork ассистент — мини-приложение Telegram. Только тёмная тема (по макетам «макеты вебаппа/тёмная тема»). */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
  --bg:#0e1621; --surface:#17212b; --surface-2:#1f2c3a; --surface-3:#26374a;
  --header:#17212b; --tabbar:#17212b;
  --line:rgba(255,255,255,.07);
  --text:#f1f4f7; --hint:#8094a8; --muted:#5d6f82;
  --accent:#5eb5f7; --accent-bg:rgba(94,181,247,.15);
  --btn:#3d8ff0; --on-btn:#fff;
  --green:#4cd18b; --teal:#3cc9b4; --amber:#f2b34c; --orange:#f2884a; --red:#f0625d; --violet:#a98bf5;
  --bubble-in:#182533; --bubble-out:#2b5278; --bubble-out-text:#fff; --tick-out:#8fd3ff;
  --seg-bg:#17212b; --seg-on:#2b3a4b;
  --term:#0a0e13;
  --shadow:0 1px 0 rgba(0,0,0,.2);
  --safe-bottom:max(var(--tg-safe-area-inset-bottom,0px),var(--tg-content-safe-area-inset-bottom,0px),env(safe-area-inset-bottom,0px));
  color-scheme:dark;
}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font);font-size:15px;-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{overflow:hidden}
button,input,textarea{font:inherit;color:inherit;background:none;border:0;outline:0}
button{cursor:pointer}
svg{flex:none}

#app{height:var(--tg-viewport-height,100dvh);display:flex;flex-direction:column;position:relative;overflow:hidden}
#view{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.content{padding:14px 16px 20px;display:flex;flex-direction:column;gap:12px}
#bottom{flex:none}
#bottom:empty{display:none}

/* ---------- нижние разделы ---------- */
.tabbar{display:flex;justify-content:space-around;align-items:flex-start;background:var(--tabbar);border-top:1px solid var(--line);padding:7px 6px calc(6px + var(--safe-bottom))}
.tab{flex:1;max-width:96px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--hint);font-size:11px;font-weight:500;position:relative;padding-bottom:2px}
.tab .ico{width:58px;height:30px;display:grid;place-items:center;position:relative}
.tab svg{width:24px;height:24px;stroke-width:1.9}
.tab.on{color:var(--accent);font-weight:600}
.tab.on svg{stroke-width:2.2}
.tab .badge{position:absolute;top:-3px;left:33px;min-width:19px;height:19px;padding:0 5px;border-radius:10px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;box-shadow:0 0 0 2.5px var(--tabbar)}
.tab .badge.blue{background:var(--btn)}

/* ---------- общие ---------- */
.row{display:flex;align-items:center;gap:10px}
.between{display:flex;align-items:center;justify-content:space-between;gap:10px}
.h1{font-size:28px;font-weight:700;letter-spacing:-.025em}
.hint{color:var(--hint)}
.card{background:var(--surface);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:13px;font-weight:600;white-space:nowrap}
.pill svg{width:15px;height:15px}
.pill.green{background:color-mix(in srgb,var(--green) 16%,transparent);color:var(--green)}
.pill.red{background:color-mix(in srgb,var(--red) 15%,transparent);color:var(--red)}
.pill.amber{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}
.pill.gray{background:var(--surface-2);color:var(--hint)}
.pill.accent{background:var(--accent-bg);color:var(--accent)}
.live{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 25%,transparent);flex:none}
.live.red{background:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 25%,transparent)}
.iconbtn{width:36px;height:36px;border-radius:50%;background:var(--surface);display:grid;place-items:center;color:var(--accent);box-shadow:var(--shadow);flex:none}
.iconbtn svg{width:19px;height:19px}
.iconbtn.spin svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;display:inline-block;flex:none}

.seg{display:flex;background:var(--seg-bg);border-radius:11px;padding:3px;flex:none}
.seg button{flex:1;text-align:center;padding:7px 4px;font-size:13.5px;font-weight:500;color:var(--hint);border-radius:9px;white-space:nowrap}
.seg button.on{background:var(--seg-on);color:var(--text);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.seg button em{font-style:normal;color:var(--hint);font-weight:500;margin-left:3px}
.seg button:disabled{opacity:.45}
.seg.mini button{padding:5px 8px;font-size:12px}
.seg.mini{background:var(--surface-2)}

.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:none}
.tile{background:var(--surface);border-radius:14px;padding:10px 11px;box-shadow:var(--shadow);min-width:0}
.tile small{display:block;color:var(--hint);font-size:11px;font-weight:500;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile b{display:block;font-size:18px;font-weight:700;margin-top:3px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile b span{font-size:13px;color:var(--hint);font-weight:500}

.av{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;color:#fff;font-weight:600;font-size:16px;
  background:linear-gradient(160deg,hsl(var(--h) 75% 64%),hsl(calc(var(--h) + 18) 65% 50%))}
.av.sm{width:40px;height:40px;font-size:14.5px}
.av.lg{width:76px;height:76px;font-size:27px}

.score{width:42px;height:42px;border-radius:13px;flex:none;display:grid;place-items:center;font-weight:700;font-size:19px;letter-spacing:-.02em}
.s-hi{background:color-mix(in srgb,var(--green) 17%,transparent);color:var(--green)}
.s-good{background:color-mix(in srgb,var(--teal) 17%,transparent);color:var(--teal)}
.s-mid{background:color-mix(in srgb,var(--amber) 18%,transparent);color:var(--amber)}
.s-low{background:color-mix(in srgb,var(--orange) 17%,transparent);color:var(--orange)}

.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.ell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pre{white-space:pre-wrap;word-break:break-word}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:40px 20px;color:var(--hint);font-size:14px;line-height:1.45}
.empty svg{width:34px;height:34px;color:var(--muted)}
.loading{display:flex;justify-content:center;padding:48px 0;color:var(--hint)}
.more{align-self:center;padding:7px 14px;border-radius:13px;background:var(--surface);color:var(--accent);font-size:13px;font-weight:600}
.err-line{display:flex;gap:7px;align-items:flex-start;color:var(--red);font-size:13px;line-height:1.4}
.err-line svg{width:15px;height:15px;margin-top:1px}
.warn-line{display:flex;gap:7px;align-items:flex-start;color:var(--amber);font-size:13px;line-height:1.4}
.warn-line svg{width:15px;height:15px;margin-top:1px}
a{color:var(--accent);text-decoration:none}

/* ---------- биржа ---------- */
.proj{display:flex;gap:12px;align-items:flex-start}
.proj-body{flex:1;min-width:0}
.proj-title{font-size:15.5px;font-weight:600;line-height:1.3}
.proj-meta{font-size:12.5px;color:var(--hint);margin-top:3px}
.proj-nums{display:flex;gap:14px;margin-top:9px;font-size:13px;flex-wrap:wrap}
.proj-nums span{display:flex;align-items:center;gap:5px}
.proj-nums svg{width:15px;height:15px;color:var(--hint)}
.proj-nums b{font-weight:600}
.proj-foot{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:13px;min-width:0}
.proj-foot .st{flex:none;white-space:nowrap}
.proj-foot .hint{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st{display:inline-flex;align-items:center;gap:5px;font-weight:600;font-size:12.5px}
.st svg{width:15px;height:15px}
.st.ready{color:var(--accent)} .st.sent{color:var(--green)} .st.wait{color:var(--amber)} .st.muted{color:var(--hint)} .st.bad{color:var(--red)} .st.ai{color:var(--violet)}

.hero{display:flex;gap:14px;align-items:center}
.ring{width:62px;height:62px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--rc) calc(var(--v)*36deg),color-mix(in srgb,var(--rc) 16%,transparent) 0)}
.ring b{width:50px;height:50px;border-radius:50%;background:var(--surface);display:grid;place-items:center;font-size:21px;font-weight:700;color:var(--rc)}
.hero-t{min-width:0}
.hero-t b{font-size:16px;font-weight:700}
.hero-t p{font-size:13px;color:var(--hint);line-height:1.42;margin-top:3px}
.kv{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.kv .tile{padding:8px 11px}
.kv .tile b{font-size:16px}
.file{display:flex;align-items:center;gap:9px;background:var(--surface);box-shadow:var(--shadow);border-radius:11px;padding:8px 10px;font-size:13px;margin-top:8px;width:100%;text-align:left;min-width:0}
.file .fi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);flex:none}
.file svg{width:16px;height:16px}
.file .fn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file .ok{margin-left:auto;color:var(--green);display:flex;align-items:center;gap:4px;font-weight:600;font-size:12px;flex:none}
.file .ok svg{width:14px;height:14px}
.file .no{margin-left:auto;color:var(--hint);font-size:12px;flex:none}
.lbl{font-size:12px;font-weight:600;color:var(--hint);text-transform:uppercase;letter-spacing:.06em}
.fields{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;margin:8px 0}
.field{background:var(--surface-2);border-radius:10px;padding:6px 10px;min-width:0}
.field small{display:block;font-size:10.5px;color:var(--hint);font-weight:500}
.field b{display:block;font-size:13.5px;font-weight:600;margin-top:1px}
.offer-text{font-size:14px;line-height:1.45}
.counter{display:flex;justify-content:space-between;font-size:11.5px;color:var(--hint);margin-top:8px;gap:8px}
.counter .bad{color:var(--red)}
.linkbtn{color:var(--accent);font-size:13px;font-weight:600;margin-top:4px}
.working{display:flex;align-items:center;gap:8px;color:var(--violet);font-size:13px;font-weight:600;padding:4px 0}

/* панель действий */
.actionbar{background:var(--tabbar);border-top:1px solid var(--line);padding:10px 14px calc(10px + var(--safe-bottom));display:flex;flex-direction:column;gap:10px}
.btnrow{display:flex;gap:8px}
.btn{height:48px;border-radius:13px;background:var(--btn);color:var(--on-btn);display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px;flex:1;padding:0 14px;white-space:nowrap}
.btn svg{width:19px;height:19px}
.btn.sec{background:var(--accent-bg);color:var(--accent);flex:none;padding:0 16px}
.btn.warn{background:var(--amber);color:#1b1305}
.btn.danger{background:color-mix(in srgb,var(--red) 16%,transparent);color:var(--red)}
.btn:disabled{opacity:.5}
.acts{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.act{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;color:var(--hint);font-weight:500;white-space:nowrap}
.act svg{width:44px;height:36px;padding:8px 12px;border-radius:12px;background:var(--surface-2);color:var(--text)}
.act.danger svg{color:var(--red)}
.act:disabled{opacity:.4}

/* ---------- сообщения ---------- */
.list{padding:0;overflow:hidden}
.msg{display:flex;gap:12px;padding:10px 14px;align-items:flex-start;position:relative;width:100%;text-align:left}
.msg + .msg{border-top:1px solid var(--line)}
.msg:active,.cl:active,.gi.tap:active{background:var(--surface-2)}
.msg-body{flex:1;min-width:0}
.msg-top{display:flex;align-items:center;gap:7px;min-width:0}
.msg-top b{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.msg-top time{margin-left:auto;font-size:12.5px;color:var(--hint);flex:none}
.tag{font-size:11px;font-weight:600;padding:2px 7px;border-radius:6px;background:var(--surface-2);color:var(--hint);flex:none}
.tag.order{background:color-mix(in srgb,var(--violet) 15%,transparent);color:var(--violet)}
.tag.support{background:color-mix(in srgb,var(--amber) 15%,transparent);color:var(--amber)}
.msg-text{font-size:14px;line-height:1.38;margin-top:3px;color:var(--text)}
.msg-text.pr{padding-right:28px}
.msg-text .me{color:var(--hint)}
.msg-meta{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:12.5px;color:var(--hint);flex-wrap:wrap}
.msg-meta span{display:inline-flex;align-items:center;gap:4px;min-width:0}
.msg-meta svg{width:14px;height:14px}
.unread{position:absolute;right:14px;top:34px;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--btn);color:#fff;font-size:11.5px;font-weight:700;display:grid;place-items:center}
.from-bid{color:var(--accent)}
.sub-live{font-size:13px;gap:7px;margin-top:-6px}

/* переписка */
.chat{padding:0 12px 14px;display:flex;flex-direction:column;gap:8px}
.who{display:flex;gap:11px;align-items:center;position:sticky;top:0;z-index:5;background:var(--bg);padding:10px 4px 8px;margin:0 -4px}
.who-t{flex:1;min-width:0}
.who-t b{font-size:16.5px;font-weight:600;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-t span{display:block;font-size:12.5px;color:var(--hint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.on-t{color:var(--green);font-weight:600}
.who-t span.on-t,.who-t span .on-t{display:inline;margin:0;font-size:inherit}
.on-t::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);margin:0 5px 1px 0}
.note{display:flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--amber) 12%,transparent);color:var(--text);border-radius:11px;padding:7px 11px;font-size:13px;width:100%;text-align:left}
.note svg{width:15px;height:15px;color:var(--amber);flex:none}
.day{align-self:center;font-size:12px;font-weight:600;color:var(--hint);background:var(--surface);padding:3px 10px;border-radius:10px}
.day.new{color:var(--accent);background:var(--accent-bg)}
.bubble{max-width:84%;padding:8px 12px 7px;border-radius:17px;font-size:14.5px;line-height:1.38;position:relative;word-break:break-word;white-space:pre-wrap}
.bubble.in{background:var(--bubble-in);align-self:flex-start;border-bottom-left-radius:6px;box-shadow:var(--shadow)}
.bubble.out{background:var(--bubble-out);color:var(--bubble-out-text);align-self:flex-end;border-bottom-right-radius:6px}
.bubble.sending{opacity:.6}
.bubble time{float:right;font-size:11px;color:var(--hint);margin:6px 0 -3px 10px;display:inline-flex;align-items:center;gap:2px;white-space:nowrap}
.bubble.out time{color:color-mix(in srgb,var(--bubble-out-text) 60%,transparent)}
.bubble time svg{width:14px;height:14px}
/* ✓ — не прочитано, ✓✓ — прочитано: у сообщений заказчика — мной, у моих — заказчиком */
.bubble time.rd svg{color:var(--accent);stroke-width:2.4}
.bubble.out time.rd svg{color:var(--tick-out)}
.bubble .q{display:block;border-left:2px solid var(--accent);padding:1px 0 1px 8px;margin:0 0 5px;font-size:13px;color:var(--hint);white-space:normal}
.bubble.out .q{border-color:var(--tick-out);color:color-mix(in srgb,var(--bubble-out-text) 70%,transparent)}
.bubble a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.bubble.out a{color:var(--tick-out)}
.bubble .att{display:flex;flex-direction:column;gap:6px;margin:2px 0 4px;white-space:normal}
.bubble .img{display:block;border-radius:12px;overflow:hidden;background:var(--surface-2);min-height:80px;max-height:340px}
.bubble .img img{display:block;width:100%;max-height:340px;object-fit:cover}
.bubble .doc{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.06);border-radius:11px;padding:8px 10px;font-size:13px;text-align:left;width:100%}
.bubble .doc .fi{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent);flex:none}
.bubble .doc svg{width:16px;height:16px}
.bubble .doc span{min-width:0;flex:1}
.bubble .doc b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bubble .doc small{color:var(--hint);font-size:11.5px}
.vid{width:100%;height:150px;border-radius:13px;background:linear-gradient(150deg,#2b3644,#151b23);display:grid;place-items:center;position:relative}
.vid > svg{width:42px;height:42px;padding:10px;border-radius:50%;background:rgba(255,255,255,.18);color:#fff;fill:#fff}
.vid span{position:absolute;right:8px;bottom:7px;font-size:11.5px;font-weight:600;color:#fff;background:rgba(0,0,0,.45);padding:1px 6px;border-radius:6px}
.bubble video{width:100%;max-height:340px;border-radius:13px;background:#000}
.ai-note{display:flex;gap:6px;font-size:12.5px;line-height:1.35;color:var(--hint);padding:2px 2px 0;text-align:left;white-space:normal}
.ai-note svg{width:14px;height:14px;color:var(--violet);flex:none;margin-top:1px}
.ai-note .clamp2{cursor:pointer}
.voice{color:var(--hint);font-style:italic}
.newbar{display:flex;align-items:center;justify-content:center;gap:8px;flex:none;flex-wrap:wrap}
.readbtn{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 11px;border-radius:13px;background:var(--btn);color:var(--on-btn);font-size:12.5px;font-weight:600}
.readbtn svg{width:14px;height:14px}
.mark{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;color:var(--violet);flex:none}
.mark::before,.mark::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--violet) 35%,transparent)}
.mark svg{width:13px;height:13px}

/* поле ответа */
.ab-hint{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--hint);line-height:1.35}
.ab-hint svg{width:15px;height:15px;color:var(--violet);flex:none;margin-top:1px}
.ab-hint b{color:var(--text);font-weight:600}
.ab-hint.err,.ab-hint.err svg{color:var(--red)}
.ab-hint.warn svg{color:var(--amber)}
.ab-hint .spinner{color:var(--violet);margin-top:1px}
.composer{background:var(--surface-2);border:1px solid var(--line);border-radius:20px;padding:10px 10px 8px 14px;display:flex;flex-direction:column;gap:8px}
.composer textarea{font-size:15px;line-height:1.4;min-height:42px;max-height:38vh;resize:none;width:100%;padding-right:4px;display:block}
.composer textarea::placeholder{color:var(--hint)}
.composer textarea:disabled{opacity:.6}
.ai-tag{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;color:var(--violet);margin-bottom:-4px}
.ai-tag svg{width:13px;height:13px}
.cbar{display:flex;align-items:center;gap:8px;margin-left:-4px}
.cbar .sp{flex:1}
.genbtn{height:34px;padding:0 14px;border-radius:17px;background:color-mix(in srgb,var(--violet) 16%,transparent);color:var(--violet);font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.genbtn svg{width:16px;height:16px}
.genbtn:disabled{opacity:.5}
.sendbtn{width:38px;height:38px;border-radius:50%;background:var(--btn);color:var(--on-btn);display:grid;place-items:center}
.sendbtn svg{width:18px;height:18px;margin:1px 2px 0 0}
.sendbtn:disabled{background:var(--surface-3);color:var(--muted)}
.links{display:flex;justify-content:center;gap:28px;font-size:13.5px;font-weight:600;color:var(--accent);flex-wrap:wrap}
.links button{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600}
.links button:disabled{color:var(--hint);font-weight:500}
.links svg{width:16px;height:16px}
.sched{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--amber) 12%,transparent);border-radius:13px;padding:9px 11px;font-size:13px;line-height:1.35}
.sched > svg{width:18px;height:18px;color:var(--amber)}
.sched .t{flex:1;min-width:0}
.sched button{color:var(--accent);font-weight:600;font-size:13px;white-space:nowrap}

/* шторка */
#layer{position:fixed;inset:0;z-index:50;pointer-events:none}
.dim{position:absolute;inset:0;background:rgba(0,0,0,.5);opacity:0;transition:opacity .2s;pointer-events:auto}
.sheet{position:absolute;left:0;right:0;bottom:0;background:var(--surface);border-radius:22px 22px 0 0;padding:8px 18px calc(20px + var(--safe-bottom));
  transform:translateY(100%);transition:transform .25s cubic-bezier(.2,.8,.2,1);pointer-events:auto;max-height:92%;overflow-y:auto;overscroll-behavior:contain}
#layer.open .dim{opacity:1}
#layer.open .sheet{transform:none}
.grab{width:38px;height:5px;border-radius:3px;background:var(--muted);margin:0 auto 12px;opacity:.6}
.sheet h3{font-size:19px;font-weight:700;letter-spacing:-.01em}
.sheet .sub{font-size:13px;color:var(--hint);margin-top:3px;line-height:1.4}
.sheet p{font-size:14px;line-height:1.45}
.step{margin-top:16px}
.step-h{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin-bottom:9px}
.step-h svg{width:17px;height:17px;color:var(--violet)}
.step-h .n{width:22px;height:22px;border-radius:50%;background:var(--accent-bg);color:var(--accent);display:grid;place-items:center;font-size:12px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:8px 13px;border-radius:11px;background:var(--surface-2);font-size:14px;font-weight:500}
.chip.on{background:var(--btn);color:#fff;font-weight:600}
.summary{display:flex;gap:10px;align-items:center;margin-top:16px;background:var(--surface-2);border-radius:13px;padding:11px 12px;font-size:13.5px;line-height:1.4}
.summary svg{width:20px;height:20px;color:var(--accent);flex:none}
.summary.ai svg{color:var(--violet)}
.warn{display:flex;gap:7px;font-size:12.5px;color:var(--hint);line-height:1.4;margin:12px 0 14px}
.warn svg{width:15px;height:15px;flex:none;margin-top:1px}
.opts{margin-top:9px;background:var(--surface-2);border-radius:14px;overflow:hidden}
.opt{display:flex;gap:11px;align-items:center;padding:11px 12px;width:100%;text-align:left}
.opt + .opt{border-top:1px solid var(--line)}
.opt b{display:block;font-size:14.5px;font-weight:600}
.opt small{display:block;font-size:12.5px;color:var(--hint);margin-top:1px;line-height:1.3}
.opt .gl{flex:1;min-width:0}
.radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--muted);flex:none;margin:0 5px}
.radio.on{border:7px solid var(--btn)}
.inp{margin-top:14px;background:var(--surface-2);border-radius:14px;padding:11px 13px;font-size:15px;line-height:1.4;width:100%;display:block}
textarea.inp{min-height:84px;resize:none}
textarea.inp.tall{min-height:220px}
.inp::placeholder{color:var(--hint)}
.inp-row{display:flex;gap:8px}
.inp-row .inp{flex:1;min-width:0}
.inp-label{display:block;font-size:12.5px;color:var(--hint);font-weight:600;margin:14px 0 -8px 2px}
.kb-text{margin-top:12px;background:var(--surface-2);border-radius:13px;padding:12px;font-size:12.5px;line-height:1.5;max-height:46vh;overflow:auto;white-space:pre-wrap;word-break:break-word}
.result{margin-top:14px;background:var(--surface-2);border-radius:13px;padding:12px;font-size:13.5px;line-height:1.45;display:flex;flex-direction:column;gap:6px}
.result b{font-size:14.5px}

/* ---------- заказчики ---------- */
.search{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:12px;padding:0 12px;height:40px;color:var(--hint);font-size:15px;flex:none;box-shadow:var(--shadow)}
.search svg{width:18px;height:18px}
.search input{flex:1;min-width:0;height:100%;color:var(--text)}
.search input::placeholder{color:var(--hint)}
.chipline{display:flex;gap:7px;flex:none;overflow-x:auto;scrollbar-width:none}
.chipline::-webkit-scrollbar{display:none}
.fchip{padding:6px 11px;border-radius:999px;background:var(--surface);font-size:13px;font-weight:500;white-space:nowrap;display:flex;gap:5px;align-items:center;box-shadow:var(--shadow)}
.fchip em{font-style:normal;color:var(--hint)}
.fchip.on{background:var(--btn);color:#fff}
.fchip.on em{color:rgba(255,255,255,.75)}
.fchip svg{width:14px;height:14px}
.cl{display:flex;gap:12px;align-items:center;padding:9px 14px;width:100%;text-align:left}
.cl + .cl{border-top:1px solid var(--line)}
.cl-b{flex:1;min-width:0}
.cl-top{display:flex;align-items:center;gap:6px;min-width:0}
.cl-top b{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cl-top svg{width:15px;height:15px}
.cl-top time{margin-left:auto;font-size:12.5px;color:var(--hint);flex:none}
.cl-sub{display:flex;gap:8px;margin-top:2px;font-size:13px;color:var(--hint)}
.cl-sub .ell{flex:1;min-width:0}
.cl-sub em{font-style:normal;flex:none}
.dot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none}
.c-ok{color:var(--green)} .c-rd{color:var(--accent)} .c-unrd{color:var(--hint)} .c-pin{color:var(--accent)} .c-clock{color:var(--amber)}

/* профиль */
.prof{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding-top:2px}
.prof b{font-size:21px;font-weight:700;letter-spacing:-.01em;word-break:break-all}
.prof .hint{font-size:13px}
.box-h{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:var(--hint);margin-bottom:7px}
.box-h svg{width:15px;height:15px}
.box-h .tools{margin-left:auto;display:flex;gap:16px;color:var(--accent);font-weight:500}
.box-h .tools button{color:var(--accent);display:grid;place-items:center}
.box-h .tools svg{width:18px;height:18px}
.box p{font-size:14px;line-height:1.45}
.locked{display:flex;align-items:center;gap:7px;margin-top:7px;font-size:13px;color:var(--hint)}
.locked svg{width:14px;height:14px}
.locked button{margin-left:auto;color:var(--accent);font-weight:600}
.group{background:var(--surface);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);flex:none}
.gi{display:flex;align-items:center;gap:12px;padding:0 14px;min-height:48px;font-size:15px;width:100%;text-align:left}
.gi + .gi{border-top:1px solid var(--line)}
.gi .gic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none}
.gi .gic svg{width:17px;height:17px}
.gi .gl{flex:1;min-width:0;padding:8px 0}
.gi .gl small{display:block;font-size:12px;color:var(--hint);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gi .gr{color:var(--hint);font-size:14px;display:flex;align-items:center;gap:6px;flex:none}
.gi .gr svg{width:17px;height:17px;color:var(--muted)}
.gi.tall{min-height:56px}
.gi.danger{color:var(--red)}
.ok-t{color:var(--green);font-weight:600}
.bad-t{color:var(--red);font-weight:600}
.sec-h{font-size:12.5px;font-weight:600;color:var(--hint);text-transform:uppercase;letter-spacing:.06em;margin:4px 0 -4px 14px;flex:none}
.sw{width:50px;height:30px;border-radius:15px;background:var(--green);position:relative;flex:none;transition:background .15s}
.sw::after{content:"";position:absolute;top:2px;left:22px;width:26px;height:26px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:left .15s}
.sw.off{background:var(--surface-3)}
.sw.off::after{left:2px}
.gfoot{font-size:12.5px;color:var(--hint);line-height:1.4;margin:-4px 14px 2px;flex:none}
.stepper{display:flex;align-items:center;background:var(--surface-2);border-radius:10px;height:32px}
.stepper button{width:34px;height:32px;display:grid;place-items:center;color:var(--accent)}
.stepper button:disabled{color:var(--muted)}
.stepper svg{width:16px;height:16px}
.stepper b{min-width:24px;text-align:center;font-size:15px;font-weight:600;color:var(--text)}
.bg-blue{background:#3d8ff0} .bg-green{background:#34c27a} .bg-orange{background:#f08a3c} .bg-violet{background:#8e6cf0}
.bg-red{background:#ef5350} .bg-gray{background:#8a96a3} .bg-teal{background:#20b2a0} .bg-amber{background:#e8a530}

/* всплывающее и просмотр картинки */
#toast{position:fixed;left:50%;top:14px;transform:translate(-50%,calc(-100% - 40px));transition:transform .25s,visibility .25s;visibility:hidden;z-index:80;max-width:calc(100% - 32px);
  background:#26374a;color:var(--text);padding:10px 14px;border-radius:13px;font-size:14px;line-height:1.35;box-shadow:0 6px 24px rgba(0,0,0,.35);display:flex;gap:8px;align-items:flex-start}
#toast.show{transform:translate(-50%,0);visibility:visible}
#toast.err{background:#4a2326}
#toast svg{width:17px;height:17px;flex:none;margin-top:1px}
.viewer{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.92);display:grid;place-items:center}
.viewer img{max-width:100%;max-height:100%;object-fit:contain}
.viewer button{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;display:grid;place-items:center}
.viewer button svg{width:20px;height:20px}
.gate{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:30px;color:var(--hint);line-height:1.5}
.gate b{color:var(--text);font-size:18px}