/* ===== Базовые стили FBT (мок 30 окт) ===== */
/* Базовые стили FBT (из мока «FBT Режим ИИ», 30 окт, 17:32). Не править — переопределения в app.css */
/* Layout: FBT main page (Figma 8261:126692) + glass "Режим ИИ" entry + near-fullscreen chat modal with inline results only */
:root{
  --brand:#4ebc73; --brand-hover:#45a565; --brand-ink:#2e8452; --brand-light:#edf8f1; --brand-muted:#def2e5;
  --page:#f4f5f5; --surface:#fff; --surface-2:#f7f7f8; --neutral:#eff0f0; --neutral-hover:#e4e6e8; --field:rgba(0,0,0,.04);
  --text:#171717; --text-2:rgba(0,0,0,.56); --text-3:rgba(0,0,0,.4); --content:#2b2b33;
  --line:rgba(0,0,0,.08); --line-2:#eaeced; --line-3:#d4d6dd;
  --info:#007aff; --info-light:#f0f7ff; --neg:#ff3347; --neg-ink:#d42235; --neg-light:#fff3f4; --warn:#e58600; --warn-light:#fff7eb;
  --overlay:rgba(0,0,0,.4); --scrim:rgba(18,20,19,.45);
  --ai-1:#4ebc73; --ai-2:#2fd3c6; --ai-3:#5b8cff; --ai-4:#b56cff; --ai-5:#ff7ab6;
  --shadow:0 1px 2px rgba(16,16,20,.05),0 8px 28px rgba(16,16,20,.08);
  --shadow-lg:0 24px 80px rgba(10,14,12,.28);
  --font:"Inter",Arial,sans-serif; /* как --font-platform-web в b2b-fbt */
  --aur1:rgba(78,188,115,.12); --aur2:rgba(91,140,255,.10); --bot-dk:#2c3858;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--brand:#4ebc73; --brand-hover:#5fca83; --brand-ink:#7fd79c; --brand-light:#15291c; --brand-muted:#1c3a27;
  --page:#0f1112; --surface:#17191b; --surface-2:#1d1f22; --neutral:#26292d; --neutral-hover:#30343a; --field:rgba(255,255,255,.06);
  --text:#f2f3f4; --text-2:rgba(255,255,255,.62); --text-3:rgba(255,255,255,.4); --content:#e9eaee;
  --line:rgba(255,255,255,.08); --line-2:#2a2d31; --line-3:#3a3e44;
  --info:#4da3ff; --info-light:#122236; --neg:#ff5c6c; --neg-ink:#ff7a87; --neg-light:#341619; --warn:#ffaa33; --warn-light:#33240e;
  --overlay:rgba(0,0,0,.55); --scrim:rgba(0,0,0,.6); --aur1:rgba(78,188,115,.16); --aur2:rgba(91,140,255,.14); --bot-dk:#5d6e98;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); --shadow-lg:0 24px 80px rgba(0,0,0,.6); color-scheme:dark;}}
:root[data-theme="dark"]{--brand:#4ebc73; --brand-hover:#5fca83; --brand-ink:#7fd79c; --brand-light:#15291c; --brand-muted:#1c3a27;
  --page:#0f1112; --surface:#17191b; --surface-2:#1d1f22; --neutral:#26292d; --neutral-hover:#30343a; --field:rgba(255,255,255,.06);
  --text:#f2f3f4; --text-2:rgba(255,255,255,.62); --text-3:rgba(255,255,255,.4); --content:#e9eaee;
  --line:rgba(255,255,255,.08); --line-2:#2a2d31; --line-3:#3a3e44;
  --info:#4da3ff; --info-light:#122236; --neg:#ff5c6c; --neg-ink:#ff7a87; --neg-light:#341619; --warn:#ffaa33; --warn-light:#33240e;
  --overlay:rgba(0,0,0,.55); --scrim:rgba(0,0,0,.6); --aur1:rgba(78,188,115,.16); --aur2:rgba(91,140,255,.14); --bot-dk:#5d6e98;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 28px rgba(0,0,0,.35); --shadow-lg:0 24px 80px rgba(0,0,0,.6); color-scheme:dark;}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--surface);color:var(--text);font:400 14px/20px var(--font);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico.sm{width:16px;height:16px}.ico.lg{width:24px;height:24px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--text-2)}.small{font-size:12px}
.wrap{max-width:1312px;margin:0 auto;padding-inline:16px}

/* header */
.hdr{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--surface);border-bottom:1px solid var(--line-2)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px}
.hl{display:flex;align-items:center;gap:32px;min-width:0}
.logo{display:flex;align-items:center;color:var(--text)}
.logo svg{height:22px;width:auto}
.nav{display:flex;gap:28px;font-weight:500}
.nav a{color:var(--text);text-decoration:none;display:flex;align-items:center;gap:6px}
.nav .cnt{background:var(--neg);color:#fff;font-size:12px;border-radius:8px;padding:1px 6px}
.hr{display:flex;gap:8px;align-items:center}
.hbtn{height:36px;border-radius:12px;background:var(--neutral);padding:0 12px;display:flex;align-items:center;gap:6px;font-weight:500;white-space:nowrap}
.hbtn.sel{background:var(--field);border-radius:8px;min-width:240px;justify-content:space-between;font-weight:400}

/* hero */
.hero{position:relative;border-radius:0 0 40px 40px;overflow:hidden;margin-top:0}
.hero-bg{position:absolute;inset:0;background:
  radial-gradient(60% 80% at 82% 18%,rgba(255,236,210,.85),transparent 60%),
  radial-gradient(40% 60% at 15% 85%,rgba(210,224,236,.9),transparent 70%),
  linear-gradient(180deg,#5f93c4 0%,#9fc0dc 45%,#e3d6c4 100%)}
.hero-bg .cloud{position:absolute;border-radius:50%;background:rgba(255,255,255,.75);filter:blur(18px)}
.hero-bg .wing{position:absolute;right:-40px;top:0;width:60%;height:100%}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,30,26,.28),rgba(23,30,26,.42))}
.glass{position:relative;margin:32px;padding:36px 36px 28px;border-radius:32px;background:rgba(255,255,255,.1);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);display:flex;flex-direction:column;gap:24px}
.tabs{display:flex;gap:12px;flex-wrap:wrap}
.tab{display:flex;align-items:center;gap:6px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.1);color:#fff;font-weight:600;font-size:16px;white-space:nowrap}
.tab:hover{background:rgba(255,255,255,.18)}
.tab.on{background:var(--surface);color:var(--text)}
.tab.on .ico{color:var(--brand)}
.srow{display:flex;gap:12px;align-items:stretch}
.fields{flex:1;display:flex;gap:1px;border-radius:16px;overflow:hidden;min-width:0}
.fld{background:var(--surface);height:56px;display:flex;align-items:center;gap:8px;padding:0 16px;flex:1 1 0;min-width:0;position:relative}
.fld input{border:0;outline:0;background:transparent;width:100%;min-width:0;font-size:16px;color:var(--text)}
.fld input::placeholder{color:var(--text-3)}
.fld .ico{color:var(--brand)}
.fld.swap{flex:0 0 auto;padding:0 10px;color:var(--brand)}
.fld.emp{flex:0 0 220px;justify-content:space-between;cursor:pointer;font-size:16px}
.fld.emp .v{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld.emp .v.ph{color:var(--text-3)}
.fld.emp .ico{color:var(--text-2)}
.find{width:80px;height:56px;padding:0;border-radius:16px;background:var(--brand);color:#fff;flex:none;display:grid;place-items:center}
.find svg{width:24px;height:24px}
.find:hover{background:var(--brand-hover)}
.route{display:inline-flex;align-items:center;gap:6px;color:#fff;font-weight:500;font-size:16px}
.under{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap}
.tryline{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.8);font-size:14px;min-width:0;text-align:left}
.tryline .tl-t{color:#fff;font-weight:600;border-bottom:1px dashed rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46ch}
.tryline .caret{width:2px;height:16px;background:#fff;animation:blink 1s steps(1) infinite;margin-left:-6px}
.tryline:hover .tl-t{border-bottom-style:solid}
@media (max-width:640px){.tryline{flex-direction:column;align-items:flex-start;gap:3px;font-size:12px}.tryline .tl-t{white-space:normal;max-width:none;font-size:14px}}
.aibtn .bot{margin:-2px 0}

/* AI mode button */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.aibtn{position:relative;height:56px;padding:0 20px 0 16px;border-radius:16px;flex:none;display:flex;align-items:center;gap:8px;color:#fff;font-weight:600;font-size:16px;white-space:nowrap;
  background:rgba(255,255,255,.18);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);isolation:isolate;transition:background .2s,transform .2s}
.aibtn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--a),var(--ai-1),var(--ai-2),var(--ai-3),var(--ai-4),var(--ai-5),var(--ai-1));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinA 4s linear infinite;pointer-events:none}
.aibtn::after{content:"";position:absolute;inset:-6px;border-radius:22px;z-index:-1;opacity:.55;filter:blur(14px);
  background:conic-gradient(from var(--a),var(--ai-1),var(--ai-2),var(--ai-3),var(--ai-4),var(--ai-5),var(--ai-1));animation:spinA 4s linear infinite;pointer-events:none;
  -webkit-mask:radial-gradient(closest-side,transparent 70%,#000 100%);mask:radial-gradient(closest-side,transparent 70%,#000 100%)}
.aibtn:hover{background:rgba(255,255,255,.28);transform:translateY(-1px)}
.aibtn .hint-dot{position:absolute;top:-7px;right:-7px;background:#fff;color:var(--brand-ink);font-size:10px;font-weight:700;border-radius:999px;padding:2px 6px;box-shadow:0 2px 8px rgba(0,0,0,.15);transform:scale(0);transition:transform .2s}
.aibtn.ready .hint-dot{transform:scale(1)}
@keyframes spinA{to{--a:360deg}}

.empop{position:fixed;z-index:30}

/* sections */
.sec{padding-top:32px;display:flex;flex-direction:column;gap:16px}
.sec-h{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.sec-h h2{font-size:28px;line-height:32px;font-weight:600;margin:0;letter-spacing:-.01em}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 12px;border-radius:12px;font-weight:600;font-size:14px;white-space:nowrap;background:var(--brand);color:#fff}
.btn:hover{background:var(--brand-hover)}
.btn.sec2{background:var(--neutral);color:var(--text)}
.btn.sec2:hover{background:var(--neutral-hover)}
.btn.line{background:var(--surface);border:1px solid var(--line-3);color:var(--text)}
.btn.line:hover{border-color:var(--brand);color:var(--brand-ink)}
.btn.lg{height:44px;padding:0 18px;font-size:16px}
.trips-h{flex-wrap:wrap;row-gap:12px}
.trips-h h2{margin-right:4px}
.trips-tools{display:flex;gap:10px;flex:1;flex-wrap:wrap;align-items:center}
.seg2{display:inline-flex;gap:2px;padding:3px;border-radius:12px;background:var(--neutral)}
.seg2 button{height:32px;padding:0 12px;border-radius:9px;font-weight:600;font-size:14px;color:var(--text-2);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.seg2 button:hover{color:var(--text)}
.seg2 button.on{background:var(--surface);color:var(--text)}
.seg2 .n{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--line-3);color:var(--text);font-size:12px;display:inline-grid;place-items:center}
.seg2 .n.hot{background:var(--neg);color:#fff}
.trips{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4);gap:20px;align-items:stretch;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;scroll-behavior:smooth;padding:2px;margin:-2px}
.trips::-webkit-scrollbar{display:none}
.trips>*{scroll-snap-align:start}
.tnav{display:flex;gap:4px}.tnav[hidden]{display:none}
.tnav .iconbtn{width:36px;height:36px;border-radius:12px;background:var(--neutral);color:var(--text)}
.tnav .iconbtn:disabled{opacity:.35;cursor:default}
@media(max-width:1180px){.trips{grid-auto-columns:calc((100% - 40px)/3)}}
@media(max-width:960px){.trips{grid-auto-columns:calc((100% - 40px)/2.3)}}
.tc{border:1px solid var(--line-2);border-radius:20px;display:flex;flex-direction:column;position:relative;background:var(--surface);text-align:left;overflow:hidden;min-width:0;transition:border-color .15s,opacity .3s,transform .3s}
.tc:hover{border-color:var(--line-3)}
.tc.out{opacity:0;transform:scale(.96)}
.tc .cv{position:relative;height:92px;margin:4px 4px 0;border-radius:16px 16px 6px 6px;overflow:hidden;cursor:pointer;background:var(--neutral)}
.tc .cv svg{display:block;width:100%;height:100%}
.tc .st{position:absolute;left:8px;top:8px;height:24px;padding:4px 8px;border-radius:999px;font-size:12px;line-height:16px;font-weight:600;box-shadow:0 1px 4px rgba(17,24,39,.16)}
.st-info{background:var(--info-light);color:var(--info)}.st-warning{background:var(--warn-light);color:var(--warn)}.st-success{background:var(--brand-light);color:var(--brand-ink)}.st-negative{background:var(--neg-light);color:var(--neg-ink)}
.tc .cd{position:absolute;right:8px;top:8px;height:24px;padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;display:inline-flex;align-items:center;background:rgba(10,14,12,.55);color:#fff;backdrop-filter:blur(6px)}
.tc .b{padding:12px 16px 16px;display:flex;flex-direction:column;gap:12px;flex:1;min-width:0}
.tc .hd{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.tc h3{margin:0;font-size:18px;line-height:24px;font-weight:600;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tc .dates{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap;margin-top:-6px;font-size:14px;line-height:20px;font-weight:500;color:var(--text)}
.tc .dates .ico{width:16px;height:16px;color:var(--text-2);flex:none}
.tc .ppl{display:flex;align-items:center;gap:6px;min-width:0;font-size:14px;line-height:20px;font-weight:500;margin-top:-6px}
.tc .ppl .ico{width:16px;height:16px;color:var(--text-2);flex:none}
.tc .ppl .pl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.tc .ppl em{font-style:normal}
.tc .ppl .plus{flex:none}
.tc .ab{display:flex;flex-direction:column;gap:10px}
.tc .ab.has{padding:10px;border-radius:14px}
.tc .ab.warn{background:var(--warn-light)}.tc .ab.neg{background:var(--neg-light)}.tc .ab.ok{background:var(--brand-light)}
.tc .note{display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:18px;font-weight:500;color:var(--text);padding:0 2px}
.tc .note .ico{width:16px;height:16px;flex:none;margin-top:1px}
.tc .note.warn .ico{color:var(--warn)}.tc .note.neg .ico{color:var(--neg-ink)}.tc .note.ok .ico{color:var(--brand-ink)}
.tc .ft{display:flex;flex-direction:column;gap:10px;margin-top:auto}
.tc .sum{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--text-2);padding-top:10px;border-top:1px solid var(--line-2)}
.tc .sum b{font-size:18px;font-weight:600;color:var(--text);white-space:nowrap}
.tc .act{display:flex;gap:8px}
.tc .act .btn{flex:1;height:40px;font-size:14px}
.tc .act .btn.line{background:var(--surface)}

.tc .cv img{display:block;width:100%;height:100%;object-fit:cover}
.tc .cv .st{top:8px;left:8px}
.tid{display:inline-flex;align-items:center;gap:4px;height:24px;padding:0 6px 0 8px;border-radius:8px;background:var(--neutral);color:var(--text-2);font:500 12px/16px var(--font);flex:none}
.tid:hover{background:var(--neutral-hover);color:var(--text)}
.tid .ico{width:14px;height:14px}
.tid.ok{background:var(--brand-light);color:var(--brand-ink)}
.tc .dates b,.tc .dates .ar,.tc .dates .nn{font:inherit;color:inherit;white-space:nowrap}
.tc .ab.has .btn.line{border-color:transparent}
.tmore{border:1px dashed var(--line-3);border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text-2);font-weight:600;min-height:240px}
.tmore b{font-size:28px;color:var(--text)}
.tmore:hover{border-color:var(--brand);color:var(--brand-ink)}
.tempty{grid-column:1/-1;border:1px dashed var(--line-3);border-radius:20px;padding:32px;text-align:center;color:var(--text-2);display:flex;flex-direction:column;align-items:center;gap:12px}
.tempty b{color:var(--text);font-size:16px}
.banners{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ban{color:#171717;height:180px;border-radius:24px;overflow:hidden;position:relative;padding:24px;display:flex;flex-direction:column;justify-content:space-between}
.ban h3{margin:0;font-size:20px;line-height:24px;font-weight:600;max-width:300px}
.ban p{margin:0;font-size:14px;line-height:18px;max-width:260px}
.ban svg{position:absolute;right:16px;bottom:0;height:100%;width:auto}
.ban.g{background:linear-gradient(0deg,#ddffd5,#d1ffdf)}
.ban.b{background:linear-gradient(180deg,#cde3ff,#defff4)}
.dots{display:flex;gap:12px;justify-content:center;padding:20px 0 48px}
.hbtn.th{width:36px;padding:0;justify-content:center}
.dots i{height:6px;width:25px;border-radius:20px;background:#d6d6d6}.dots i:first-child{width:50px;background:var(--brand)}

/* ---------- modal ---------- */
.scrim{position:fixed;inset:0;z-index:50;background:var(--scrim);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;pointer-events:none;transition:opacity .25s}
.scrim.on{opacity:1;pointer-events:auto}
.modal{position:fixed;inset:calc(24px + env(safe-area-inset-top,0px)) 24px calc(24px + env(safe-area-inset-bottom,0px));z-index:51;background:var(--page);border-radius:28px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;
  opacity:0;transform:scale(.6);pointer-events:none;transition:opacity .22s,transform .42s cubic-bezier(.2,.9,.2,1)}
.modal.on{opacity:1;transform:none;pointer-events:auto}
.modal{background-image:radial-gradient(70% 45% at 50% 0%,var(--aur1),transparent 70%),radial-gradient(45% 35% at 92% 6%,var(--aur2),transparent 70%)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
.msg{animation:rise .35s cubic-bezier(.2,.8,.2,1) both}
.hc,.acard,.scard{animation:rise .4s cubic-bezier(.2,.8,.2,1) both}
.hc:nth-child(2),.acard:nth-child(3),.scard:nth-child(2){animation-delay:.06s}
.hc:nth-child(3),.acard:nth-child(4),.scard:nth-child(3){animation-delay:.12s}
.hc:nth-child(4){animation-delay:.18s}
.m-head{background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px)}
.hello-h{display:flex;flex-direction:column;align-items:center;gap:6px}
.attn{width:100%;display:flex;flex-direction:column;gap:8px;margin-top:22px;text-align:left}
.freq{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;overflow:hidden}
.fq{display:flex;align-items:center;gap:12px;padding:12px 14px;text-align:left;transition:background .15s}
.fq+.fq{border-top:1px solid var(--line-2)}
.fq:hover{background:var(--surface-2)}
.fq .ai{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--brand-light);color:var(--brand-ink)}
.fq .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fq b{font-weight:600;font-size:14px}
.fq .tx span{font-size:12px;color:var(--text-2)}
.fq>.ico{color:var(--text-3);transition:transform .15s,color .15s}
.fq:hover>.ico{color:var(--brand-ink);transform:translateX(2px)}
.acard{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--surface);border:1px solid var(--line-2);border-radius:16px}
.acard .ai{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--neutral);color:var(--text-2)}
.acard .ai.warn{background:var(--warn-light);color:var(--warn)}
.acard .ai.ok{background:var(--brand-light);color:var(--brand-ink)}
.acard .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.acard b{font-weight:600;font-size:14px}
.acard .tx span{font-size:12px;color:var(--text-2)}
.acard .aact{display:flex;gap:6px;flex:none}
.acard .btn{white-space:nowrap;flex-wrap:nowrap}.acard .btn .ico{flex:none}
@container chat (max-width:600px){.acard{flex-wrap:wrap}.acard .aact{width:100%;justify-content:flex-end}}
.mem{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--brand-light);color:var(--brand-ink);font-weight:500}
.chg2{color:var(--brand-ink);font-weight:600;font-size:12px;margin-left:8px}
.chg2:hover{text-decoration:underline}
.m-head{display:flex;align-items:center;gap:12px;padding:14px 16px 14px 20px;background:var(--surface);border-bottom:1px solid var(--line-2)}
/* mascot: зелёный чемодан FBT (Figma 8316:8345) */
.bot{--s:44px;font-size:var(--s);width:1em;height:1.518em;position:relative;flex:none;display:inline-block;transition:transform .3s}
.bot svg{display:block;width:100%;height:100%;overflow:visible}
.bot.sq{height:1.042em}
.bot .eyes{transform:translate(var(--ex,0px),var(--ey,0px));transition:transform .35s cubic-bezier(.3,.7,.3,1)}
.bot .eye{transform-box:fill-box;transform-origin:50% 55%;animation:blinkE 4.2s infinite}
.bot .eye+.eye{animation-delay:.04s}
.bot .e-happy,.bot .e-wow,.bot .e-sleep,.bot .e-wink{display:none}
.bot .hd{transform-box:fill-box;transform-origin:50% 100%;transition:transform .3s}
@keyframes blinkE{0%,44%,48%,92%,100%{transform:scaleY(1)}46%{transform:scaleY(.1)}94%{transform:scaleY(.1)}96%{transform:scaleY(1)}}
@keyframes lookE{0%,100%{transform:translate(0,0)}18%,32%{transform:translate(-80px,-14px)}50%{transform:translate(0,-30px)}68%,82%{transform:translate(80px,-14px)}}
@keyframes bob{50%{transform:translateY(-.03em)}}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-.05em) rotate(-2deg)}70%{transform:translateY(0) rotate(2deg)}}
@keyframes jump{40%{transform:translateY(-.12em)}70%{transform:translateY(.01em)}}
@keyframes shake{20%,60%{transform:translateX(-.03em)}40%,80%{transform:translateX(.03em)}}
@keyframes zz{0%{opacity:0;transform:translate(0,0)}40%{opacity:1}100%{opacity:0;transform:translate(.25em,-.45em)}}
.bot.live{animation:bob 3.2s ease-in-out infinite}
.bot.think{animation:hop .9s ease-in-out infinite}
.bot.think .eyes{animation:lookE 2.2s ease-in-out infinite;transition:none}
.bot.think .eye{animation:blinkE 1.6s infinite}
.bot.think .hd{transform:rotate(-8deg)}
.bot.listen{animation:none;transform:rotate(4deg)}
.bot.happy{animation:jump .55s ease}
.bot.happy .e-open,.bot.surprised .e-open,.bot.sleepy .e-open,.bot.hello .e-open{display:none}
.bot.happy .e-happy,.bot.surprised .e-wow,.bot.sleepy .e-sleep,.bot.hello .e-wink{display:inline}
.bot.surprised{animation:shake .45s ease}
.bot.surprised .hd{transform:translateY(-30px)}
.bot.sleepy{animation:bob 4.5s ease-in-out infinite}
.bot.sleepy::after{content:"z";position:absolute;right:-.14em;top:-.02em;font:700 .24em/1 var(--font);color:var(--text-3);animation:zz 2.2s ease-in-out infinite}
.bot.hello{animation:jump .6s ease}
.bot.sm .eye{animation-duration:5.2s}
.m-head .bot{margin:-4px 0}
.menuwrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:200;min-width:260px;background:var(--surface);border-radius:16px;box-shadow:var(--shadow-lg);padding:6px;display:flex;flex-direction:column}
.menu button{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;text-align:left;font-size:14px;font-weight:500;white-space:nowrap}
.menu button:hover{background:var(--surface-2)}
.menu button .ico{color:var(--text-2)}
.menu .danger,.menu .danger .ico{color:var(--neg-ink)}
.menu hr{border:0;border-top:1px solid var(--line-2);margin:4px 6px}
.hist{display:flex;flex-direction:column}
.hist button{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid var(--line-2);text-align:left}
.hist button:hover{background:var(--surface-2)}
.hist small{color:var(--text-2);white-space:nowrap}
.m-stat{min-width:0;display:flex;flex-direction:column;flex:0 1 auto}
.m-stat b{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;animation:statIn .3s ease}
@keyframes statIn{from{opacity:0;transform:translateY(4px)}}
.m-head.busy .m-stat b::after{content:"";display:inline-block;width:1.1em;text-align:left;animation:dots 1.2s steps(4) infinite}
@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.tchip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:12px;background:var(--neutral);font-size:12px;font-weight:600;white-space:nowrap;min-width:0;max-width:440px}
.tchip:hover{background:var(--neutral-hover)}
.tchip .t{overflow:hidden;text-overflow:ellipsis;min-width:0}
.tchip .t small{font-weight:500;color:var(--text-2);font-size:12px}
.tchip .pgm{display:flex;gap:2px;flex:none}
.tchip .pgm i{width:8px;height:4px;border-radius:2px;background:var(--line-3)}
.tchip .pgm i.on{background:var(--brand)}
.tchip .pgn{font-size:12px;color:var(--text-2);font-weight:600;flex:none}
.tchip .ico{color:var(--brand-ink);flex:none}
.tchip.flash{animation:chipF .9s ease}
@keyframes chipF{30%{background:var(--brand-muted)}}
.w.hl{animation:wHl 1.4s ease}
@keyframes wHl{20%{box-shadow:0 0 0 3px var(--brand)}}
.dock{position:fixed;z-index:45;right:max(20px,calc(env(safe-area-inset-right,0px) + 16px));bottom:calc(20px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;padding:14px 24px 14px 16px;border-radius:999px;background:transparent;color:var(--text);box-shadow:0 12px 32px rgba(10,14,12,.18);isolation:isolate;max-width:min(360px,calc(100vw - 32px));animation:dockIn .35s cubic-bezier(.2,.9,.2,1)}
.dock:hover{transform:translateY(-1px)}
.dock::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;border:1.5px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--a),var(--ai-1),var(--ai-2),var(--ai-3),var(--ai-4),var(--ai-5),var(--ai-1)) border-box;animation:spinA 4s linear infinite;pointer-events:none}
.dock::after{content:"";position:absolute;inset:-4px;border-radius:999px;z-index:-2;opacity:.5;filter:blur(12px);background:conic-gradient(from var(--a),var(--ai-1),var(--ai-2),var(--ai-3),var(--ai-4),var(--ai-5),var(--ai-1));animation:spinA 4s linear infinite;pointer-events:none}
@keyframes dockIn{from{opacity:0;transform:translateY(16px) scale(.9)}}
.dock-tx{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dock-dot{position:absolute;top:11px;left:34px;width:10px;height:10px;border-radius:50%;background:var(--neg);box-shadow:0 0 0 2px var(--surface)}
.m-title b{display:block;font-size:16px;font-weight:600}
.m-title small{color:var(--text-2);font-size:12px}
.m-head .grow{flex:1}
.iconbtn{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:var(--text-2);flex:none}
.iconbtn:hover{background:var(--neutral);color:var(--text)}
.pill{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:12px;background:var(--neutral);font-weight:600;font-size:12px;white-space:nowrap}
.pill:hover{background:var(--neutral-hover)}
.pill .st{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--surface)}

.m-feed{flex:1;overflow:auto;min-height:0;scroll-behavior:smooth}
.m-in{max-width:1040px;margin:0 auto;padding:28px 24px 16px;display:flex;flex-direction:column;gap:24px;container:chat/inline-size;min-height:100%}
.empty{margin:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;padding:24px 0}
.empty .sp{width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow);color:var(--brand)}
.empty h2{font-size:28px;line-height:34px;font-weight:600;margin:6px 0 0;letter-spacing:-.015em;text-wrap:balance}
.empty p{margin:0;color:var(--text-2);font-size:16px;max-width:52ch}
.sgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;width:100%;margin-top:14px;text-align:left}
.scard{text-align:left;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:118px;transition:border-color .15s,transform .15s}
.scard:hover{border-color:var(--brand);transform:translateY(-1px)}
.scard .i{width:40px;height:40px;border-radius:12px;flex:none;background:var(--brand-light);color:var(--brand-ink);display:grid;place-items:center}
.scard b{font-weight:600;font-size:16px}
.scard span{font-size:12px;color:var(--text-2)}
@container chat (max-width:600px){.sgrid{grid-template-columns:1fr}.scard{min-height:0;flex-direction:row;align-items:center}}

.msg{display:flex;gap:12px;min-width:0}
.msg.user{justify-content:flex-end}
.bubble{background:var(--surface);border:1px solid var(--line-2);padding:11px 16px;border-radius:20px 20px 6px 20px;max-width:min(600px,85%);white-space:pre-wrap;font-size:16px}
.ava{flex:none;width:32px;display:flex;justify-content:center;padding-top:1px}
.mb{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px}
.mb p{margin:0;font-size:16px;line-height:1.5;max-width:72ch}
.steps{display:flex;flex-direction:column;gap:4px}
.steps:empty{display:none}
.step{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2)}
.step .si{width:14px;height:14px;border-radius:50%;flex:none;display:grid;place-items:center}
.step.run .si{border:2px solid var(--line-3);border-top-color:var(--brand);animation:spin .7s linear infinite}
.step.done .si{background:var(--brand-muted);color:var(--brand-ink)}
.step.done .si::after{content:"";width:5px;height:3px;border-left:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg) translate(1px,-1px)}
@keyframes spin{to{transform:rotate(360deg)}}
.typing{display:flex;gap:4px;padding:10px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-3);animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{50%{opacity:.25}}
.content{display:flex;flex-direction:column;gap:12px;min-width:0}
.content:empty{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;border:1px solid var(--line-3);background:var(--surface);font-size:14px;font-weight:500;text-align:left}
.chip:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-light)}
.chip.next{border:1.5px solid var(--brand);background:var(--surface);color:var(--brand-ink);font-weight:600;box-shadow:0 1px 2px rgba(16,24,20,.06)}
.chip.next:hover{background:var(--brand-light)}
.chip.next::after{content:"→";margin-left:2px;opacity:.6}
.next-h{font-size:12px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em}
.go{display:inline-flex;align-items:center;gap:6px;color:var(--brand-ink);font-weight:600;font-size:14px}
.go:hover{text-decoration:underline}
.go .ico{width:15px;height:15px}

.badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.b-ok{background:var(--brand-light);color:var(--brand-ink)}
.b-neg{background:var(--neg-light);color:var(--neg-ink)}
.b-warn{background:var(--warn-light);color:var(--warn)}
.b-info{background:var(--info-light);color:var(--info)}
.b-mute{background:var(--neutral);color:var(--text-2)}

.w{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;overflow:hidden;overflow:clip}
.w-h{display:flex;align-items:center;gap:10px;padding:14px 16px;flex-wrap:wrap}
.w-h b{font-weight:600;font-size:16px}
.w-h small{color:var(--text-2)}
.w-h .grow{flex:1}
.w-f{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--line-2);background:var(--surface-2)}
.w-f .grow{flex:1}
.fchips{display:flex;gap:6px;padding:0 16px 12px;overflow-x:auto;scrollbar-width:none}
.fchip{padding:6px 12px;border-radius:999px;background:var(--neutral);font-size:12px;font-weight:500;white-space:nowrap}
.fchip.on{background:var(--text);color:var(--surface)}
.al{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;font-weight:700;font-size:12px;flex:none;background:var(--al)}
.fr{border-top:1px solid var(--line-2)}
.fr.sel{background:var(--brand-light)}
.fr-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px 14px;align-items:center;padding:14px 16px}
.times{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600}
.fline{flex:1;min-width:70px;max-width:160px;display:flex;flex-direction:column;align-items:center;gap:3px}
.fline em{font-style:normal;font-size:12px;color:var(--text-2);font-weight:500;white-space:nowrap}
.fline i{display:block;width:100%;height:1px;background:var(--line-3);position:relative}
.fline i::before,.fline i::after{content:"";position:absolute;top:-2px;width:5px;height:5px;border-radius:50%;background:var(--line-3)}
.fline i::before{left:0}.fline i::after{right:0}
.fsub{font-size:12px;color:var(--text-2);display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;margin-top:3px}
.fpr{text-align:right}
.fpr b{display:block;font-size:18px;white-space:nowrap}
.fpr span{font-size:12px;color:var(--text-2)}
.fact{grid-column:2/-1;display:flex;justify-content:flex-end;gap:8px}
@container chat (min-width:620px){.fr-top{grid-template-columns:auto minmax(0,1fr) auto auto}.fact{grid-column:auto}}
.fares{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px;padding:0 16px 16px}
.fare{border:1px solid var(--line-2);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:6px;background:var(--surface)}
.fare h5{margin:0;font-size:12px;font-weight:600}
.fare ul{margin:0;padding:0;list-style:none;display:grid;gap:3px;font-size:12px;color:var(--text-2)}
.fare li::before{content:"· "}
.fare .btn{margin-top:auto;height:34px}

.carousel{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 6px;scrollbar-width:thin}
.hc{scroll-snap-align:start;background:var(--surface);border:1px solid var(--line-2);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.hc.sel{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.hc .ph{aspect-ratio:16/10;position:relative}
.hc .ph svg{display:block;width:100%;height:100%}
.hc .ph .badge{position:absolute;left:10px;top:10px}
.hc .ph .rt{position:absolute;right:10px;top:10px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px}
.hc .bd{padding:12px 14px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.hc h4{margin:0;font-size:16px;font-weight:600}
.hc .sub{font-size:12px;color:var(--text-2)}
.hc .pr{display:flex;align-items:baseline;gap:4px 6px;margin-top:6px;flex-wrap:wrap}
.hc .pr b{white-space:nowrap}
.hc .pr b{font-size:18px}
.hc .pr span{font-size:12px;color:var(--text-2)}
.hc .act{display:flex;gap:8px;align-items:center;margin-top:10px;justify-content:space-between}
.stars{color:#f5a623;font-size:12px;letter-spacing:1px}

.prog{display:flex;gap:6px;padding:0 16px 14px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding:0 16px}
.prog::-webkit-scrollbar{display:none}
.pg{flex:none;white-space:nowrap}
.pg{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text-3);padding:5px 10px 5px 6px;border-radius:999px;background:var(--surface-2)}
.pg i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--neutral);font-style:normal;font-size:10px;font-weight:700}
.pg.done{color:var(--brand-ink);background:var(--brand-light)}
.pg.done i{background:var(--brand);color:#fff}
.pg.cur{color:var(--text);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line-3)}
.kv{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px 14px;padding:4px 16px 14px;align-items:center;font-size:14px}
.kv .k{color:var(--text-2);display:flex;align-items:center;gap:8px;white-space:nowrap}
.kv .s{text-align:right;font-weight:600;white-space:nowrap}
.tot{display:flex;justify-content:space-between;align-items:baseline;padding:12px 16px;border-top:1px solid var(--line-2);font-weight:600}
.tot b{font-size:20px}
.note{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:14px;font-size:14px}
.note .ico{margin-top:1px}
.note.warn{background:var(--warn-light)}.note.warn .ico{color:var(--warn)}
.note.ok{background:var(--brand-light)}.note.ok .ico{color:var(--brand-ink)}
.note.info{background:var(--info-light)}.note.info .ico{color:var(--info)}

.m-foot{background:var(--surface);border-top:1px solid var(--line-2);padding:12px 16px 16px}
.m-foot-in{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:10px;position:relative}
.ctx{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.ctx .lbl{color:var(--text-2)}
.pax{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 4px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-2);font-weight:500}
.pax .av{width:22px;height:22px;border-radius:50%;background:var(--brand-light);color:var(--brand-ink);display:grid;place-items:center;font-size:10px;font-weight:700}
.ctx .chg{color:var(--brand-ink);font-weight:600;margin-left:2px}
.ctx .pol{margin-left:auto;color:var(--text-2);display:flex;align-items:center;gap:6px}
.box{display:flex;align-items:flex-end;gap:8px;background:var(--surface-2);border:1px solid var(--line-2);border-radius:20px;padding:8px 8px 8px 18px;transition:border-color .15s,background .15s}
.box:focus-within{border-color:var(--brand);background:var(--surface)}
.tawrap{flex:1;min-width:0;display:grid;position:relative}
.tawrap>*{grid-area:1/1}
.box textarea,.mirror{border:0;outline:0;background:transparent;resize:none;max-height:160px;min-height:24px;padding:9px 0;font:inherit;font-size:16px;line-height:1.45;white-space:pre-wrap;overflow-wrap:break-word;letter-spacing:0}
.box textarea{position:relative;z-index:1}
.mirror{color:transparent;pointer-events:none;overflow:hidden}
.mirror mark{background:var(--brand-muted);color:transparent;border-radius:5px;box-shadow:0 0 0 2px var(--brand-muted)}
.tplhint{font-size:12px;color:var(--text-2);display:flex;gap:6px;align-items:center;padding-left:4px}
.tplhint kbd{font:600 12px var(--font);border:1px solid var(--line-3);border-bottom-width:2px;border-radius:5px;padding:0 5px;background:var(--surface)}
.send{width:40px;height:40px;border-radius:13px;background:var(--brand);color:#fff;display:grid;place-items:center;flex:none}
.send:hover{background:var(--brand-hover)}
.mic{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:var(--text-2);flex:none}
.mic:hover{background:var(--neutral)}
.mic .stop{display:none}
.vrec{flex:1;min-width:0;display:none;align-items:center;gap:12px;min-height:42px;font-size:16px;color:var(--text-2)}
.rec-tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rec-tx b{color:var(--text);font-weight:500}
.wave{display:flex;gap:3px;align-items:center;height:22px;flex:none}
.wave i{width:3px;height:6px;border-radius:2px;background:var(--brand);animation:wv .9s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.12s}.wave i:nth-child(3){animation-delay:.24s}.wave i:nth-child(4){animation-delay:.36s}.wave i:nth-child(5){animation-delay:.48s}
@keyframes wv{50%{height:22px}}
.box.recording{border-color:var(--brand);background:var(--surface)}
.box.recording .tawrap{display:none}
.box.recording .vrec{display:flex}
.box.recording .send{display:none}
.box.recording .mic{background:var(--neg);color:#fff}
.box.recording .mic .mi{display:none}.box.recording .mic .stop{display:block}
@keyframes micp{0%{box-shadow:0 0 0 0 rgba(78,188,115,.45)}70%{box-shadow:0 0 0 12px rgba(78,188,115,0)}100%{box-shadow:0 0 0 0 rgba(78,188,115,0)}}
@media (max-width:760px){
  .box{padding:6px 6px 6px 16px;border-radius:26px;align-items:center}
  .box .mic,.box .send{width:46px;height:46px;border-radius:50%}
  .box:not(.has-text):not(.recording) .send{display:none}
  .box:not(.has-text):not(.recording) .mic{background:var(--brand);color:#fff;animation:micp 2.6s ease-out infinite}
  .box:not(.has-text) .mic .ico{width:22px;height:22px}
}
.paxpop{position:absolute;left:0;bottom:calc(100% + 8px);z-index:6}

.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(16px);background:#171717;color:#fff;padding:11px 16px;border-radius:14px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;z-index:80;display:flex;gap:10px;align-items:center;max-width:calc(100% - 32px)}
.toast.on{opacity:1;transform:translateX(-50%)}
.toast code{font:12px var(--font);color:#9be3b3}


/* brief + packages (magic flow) */
.opt{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;border:1px solid var(--line-3);background:var(--surface);font-size:12px;font-weight:500;white-space:nowrap}
.opt:hover{border-color:var(--brand)}
.opt.on{background:var(--brand-light);border-color:var(--brand);color:var(--brand-ink)}
.opt .ico{width:13px;height:13px}
.bin{height:36px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface-2);padding:0 12px;font-size:14px;min-width:0}
.bin:focus{outline:none;border-color:var(--brand);background:var(--surface)}
.brief .w-h small{font-size:12px}
.bf-route{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0 16px;background:var(--line-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden}
.bf-f{display:flex;flex-direction:column;gap:1px;padding:9px 14px 10px;background:var(--surface-2);cursor:text;min-width:0;transition:background .15s}
.bf-f:nth-child(2){padding-left:22px}
.bf-f span{font-size:12px;color:var(--text-3);font-weight:500}
.bf-f input{border:0;outline:0;background:transparent;padding:0;font-size:16px;font-weight:600;color:var(--text);min-width:0;width:100%}
.bf-f:focus-within{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--brand)}
.bf-arr{position:absolute;left:25%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-2);color:var(--brand);z-index:1}
.bf-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;padding:18px 16px 18px}
.bf-row{display:flex;flex-direction:column;gap:7px;min-width:0}
.bf-row.full{grid-column:1/-1}
.bf-row .lb{font-size:12px;color:var(--text-2);font-weight:500;display:flex;align-items:center;gap:8px}
.usual-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--brand-ink);background:var(--brand-light);padding:1px 7px 1px 5px;border-radius:999px}
.usual-tag .ico{width:12px;height:12px}
.bf-who{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.bf-chg{display:inline-flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:999px;color:var(--brand-ink);font-weight:600;font-size:12px}
.bf-chg:hover{background:var(--brand-light)}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;padding:3px;border-radius:12px;background:var(--neutral)}
.seg button{height:34px;border-radius:9px;font-size:14px;font-weight:500;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px;transition:background .15s,color .15s}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 1px 2px rgba(16,24,20,.1),0 0 0 1px var(--line)}
.bf-hot{display:flex;align-items:center;gap:10px;min-height:40px;flex-wrap:wrap}
.bf-hl{font-size:14px;font-weight:500}
.bf-hot .bin{flex:1 1 220px}
.bf-hot:has(.sw:not(.on)) .bin{display:none}
.sw{width:42px;height:26px;border-radius:999px;background:var(--line-3);position:relative;flex:none;transition:background .2s}
.sw i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s}
.sw.on{background:var(--brand)}
.sw.on i{transform:translateX(16px)}
.bf-note{display:flex;gap:6px;align-items:center}
.brief.done{opacity:.72}.brief.done .bf-route,.brief.done .bf-rows,.brief.done .w-f{pointer-events:none}
@container chat (max-width:600px){
  .bf-route{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bf-arr{left:50%;top:25%}
  .bf-f:nth-child(3){padding-left:14px}
  .bf-rows{grid-template-columns:1fr;gap:14px}
  .bf-foot{flex-direction:column-reverse;align-items:stretch}
  .bf-foot .grow{display:none}
  .bf-foot .btn{width:100%;height:42px}
  .bf-note{justify-content:center}
}
.pk-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:stretch}
@container chat (max-width:720px){.pk-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82%,300px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 4px;padding:8px 4px 26px;margin:-8px -4px -16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.pk-grid::-webkit-scrollbar{display:none}.pk{scroll-snap-align:start}.pk.rec{box-shadow:0 0 0 1px var(--brand),0 6px 18px rgba(78,188,115,.16)}}
.pk{background:var(--surface);border:1px solid var(--line-2);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0;animation:rise .45s cubic-bezier(.2,.8,.2,1) both;transition:opacity .25s,transform .25s}
.pk:nth-child(2){animation-delay:.08s}.pk:nth-child(3){animation-delay:.16s}
.pk.rec{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),0 12px 32px rgba(78,188,115,.16)}
.pk.faded{opacity:.45;transform:scale(.98)}
.pk.chosen{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.pk-h{display:flex;justify-content:space-between;align-items:center;gap:6px 8px;flex-wrap:wrap;min-height:24px}
.pk-st{margin-top:8px}
.pk-n{font-weight:600;font-size:16px}
.pk-sum{font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.pk-per{font-size:12px;color:var(--text-2);margin-top:2px}
.pk-segs{display:flex;flex-direction:column;gap:8px;padding:10px 0;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.sg{display:grid;grid-template-columns:18px minmax(0,1fr);gap:0 8px;align-items:start}
.sg .ico{width:16px;height:16px;color:var(--text-2);margin-top:2px}
.sg b{font-weight:600;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg small{font-size:12px;color:var(--text-2);display:block}
.sg.back .ico{transform:scaleX(-1)}
.why{margin:0;padding:0;list-style:none;display:grid;gap:5px;font-size:12px;color:var(--text-2)}
.why li{display:grid;grid-template-columns:14px 1fr;gap:6px}
.why .ico{width:14px;height:14px;color:var(--brand-ink);margin-top:1px}
.pk-cta{margin-top:auto;display:flex;flex-direction:column;gap:8px;align-items:stretch}
.pk-cta .go{align-self:center}
.pk-cta>.btn{width:100%}
.cf{display:flex;flex-direction:column;gap:8px;padding:10px;border-radius:14px;background:var(--surface-2)}
.cf .btn{width:100%}.cf .go{align-self:center}


/* employee picker (compact) */
.epick{display:flex;flex-direction:column;width:min(320px,calc(100vw - 32px));max-height:min(460px,64vh);background:var(--surface);color:var(--text);border:1px solid var(--line-2);border-radius:16px;box-shadow:var(--shadow-lg);overflow:hidden;text-align:left;font-size:12px}
.ep-sec{padding:12px 14px 10px;border-bottom:1px solid var(--line-2)}
.ep-sec b{display:block;font-size:12px;font-weight:600;margin-bottom:8px}
.ep-seg{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ep-seg button{height:32px;border-radius:10px;border:1px solid var(--line-2);font-weight:600;font-size:12px;color:var(--text-2)}
.ep-seg button.on{border-color:var(--brand);background:var(--brand-light);color:var(--brand-ink)}
.ep-chips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px;border-bottom:1px solid var(--line-2)}
.ep-chips:empty{display:none}
.ep-chip{display:inline-flex;align-items:center;gap:0;height:28px;padding:0 2px 0 10px;border:1px solid var(--line-2);border-radius:9px;max-width:142px;font-size:12px}
.ep-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;color:var(--text-2)}
.ep-chip button{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:6px;color:var(--text-2)}
.ep-chip button:hover{background:var(--neutral);color:var(--text)}
.ep-chip .ico{width:13px;height:13px}
.ep-search{position:relative;padding:8px 14px;border-bottom:1px solid var(--line-2)}
.ep-search .ico{position:absolute;left:25px;top:50%;transform:translateY(-50%);color:var(--text-3);width:16px;height:16px}
.ep-search input{width:100%;height:34px;border:0;border-radius:10px;background:var(--field);padding:0 10px 0 32px;font-size:14px;outline:none}
.ep-search input:focus{box-shadow:inset 0 0 0 1.5px var(--brand)}
.ep-list{overflow:auto;flex:1;min-height:0;padding:2px 0}
.ep-row{display:flex;align-items:center;gap:10px;padding:7px 14px;cursor:pointer;position:relative}
.ep-row:hover{background:var(--surface-2)}
.ep-tx{flex:1;min-width:0}
.ep-tx b{display:block;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ep-tx small{display:block;font-size:12px;color:var(--text-2);line-height:1.35}
.ep-tx small.exp{color:var(--neg-ink)}
.ep-row input{position:absolute;opacity:0;pointer-events:none}
.ep-box{width:18px;height:18px;flex:none;border-radius:5px;border:1.5px solid var(--line-3);display:grid;place-items:center;color:#fff;transition:background .15s,border-color .15s}
.ep-box .ico{width:12px;height:12px;stroke-width:2.8;opacity:0}
.ep-row input:checked+.ep-box{background:var(--brand);border-color:var(--brand)}
.ep-row input:checked+.ep-box .ico{opacity:1}
.ep-row input:focus-visible+.ep-box{outline:2px solid var(--brand);outline-offset:2px}
.ep-empty{padding:10px 14px;color:var(--text-2);font-size:12px}
.ep-foot{padding:8px 14px 10px;border-top:1px solid var(--line-2)}
.ep-foot .btn{width:100%;height:34px;font-size:14px}


/* ---------- cabinet: AI Travel Agent ---------- */
.cab{background:var(--page);min-height:calc(100vh - 64px)}
.cab-in{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;padding-block:28px 64px}
.side{display:flex;flex-direction:column;gap:2px;position:sticky;top:88px;align-self:start}
.side .sg-h{font-size:12px;color:var(--text-2);font-weight:500;padding:16px 12px 6px}
.side .sg-h:first-child{padding-top:0}
.side a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none;font-weight:500;font-size:16px}
.side a .ico{color:var(--text-2)}
.side a:hover{background:var(--neutral)}
.side a.on{background:var(--surface)}
.side a.on .ico{color:var(--brand)}
.cab-main{display:flex;flex-direction:column;gap:20px;min-width:0}
.ask{position:relative;border-radius:28px;padding:28px;background:var(--surface);display:flex;flex-direction:column;gap:18px}
.ask-top{display:flex;gap:20px;align-items:center}
.ask-h h1{margin:0;font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.015em;text-wrap:balance}
.ask-h p{margin:6px 0 0;color:var(--text-2);font-size:16px;max-width:60ch}
.ask-box{position:relative;background:var(--surface);border-radius:20px;padding:14px 14px 10px 18px;display:flex;flex-direction:column;gap:8px;isolation:isolate}
.ask-box::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--a),var(--ai-1),var(--ai-2),var(--ai-3),var(--ai-4),var(--ai-5),var(--ai-1));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:spinA 6s linear infinite;pointer-events:none;opacity:.55;transition:opacity .2s}
.ask-box:focus-within::before{opacity:1}
.cab-ta textarea,.cab-ta .mirror{font:inherit;font-size:16px;line-height:1.45;min-height:48px;max-height:180px;padding:2px 0;white-space:pre-wrap;overflow-wrap:break-word}
.cab-ta textarea{position:relative;z-index:1}
#cabHint{margin-top:-8px;padding-left:2px}
.ask-box textarea{border:0;outline:0;background:transparent;resize:none;font:inherit;font-size:16px;line-height:1.45;min-height:48px;max-height:180px;padding:2px 0;color:var(--text)}
.ask-box textarea::placeholder{color:var(--text-3)}
.ask-bar{display:flex;align-items:center;gap:8px}
.ask-bar .grow{flex:1}
a.hbtn{text-decoration:none;color:var(--text)}
.hbtn.cur{background:var(--brand-light);color:var(--brand-ink)}
.nav a.cur{color:var(--brand-ink)}
.ask-who{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;border-radius:10px;background:var(--neutral);font-weight:500;font-size:14px}
.ask-who:hover{background:var(--neutral-hover)}
.ask-who .ico{width:16px;height:16px;color:var(--text-2)}
.ask-bar .btn.lg{height:40px;border-radius:12px}
.ask-bar .btn[disabled]{opacity:.45;cursor:default}
.ask-q{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.qchip{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);font-size:14px;font-weight:500}
.qchip:hover{border-color:var(--brand);color:var(--brand-ink)}
.qchip .ico{width:16px;height:16px;color:var(--text-2);stroke-width:1.7}
.qchip:hover .ico{color:var(--brand-ink)}
.cab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.cbox{background:var(--surface);border-radius:24px;padding:20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.cbox-h{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cbox h2{margin:0;font-size:18px;font-weight:600}
.clist{display:flex;flex-direction:column;margin:0 -8px}
.crow{display:flex;align-items:center;gap:12px;padding:10px 8px;border-radius:14px;text-align:left}
.crow:hover{background:var(--surface-2)}
.crow .ci{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none;background:var(--neutral);color:var(--text-2)}
.crow .ci .ico{width:19px;height:19px}
.crow .ci.ok{background:var(--brand-light);color:var(--brand-ink)}
.crow .ci.warn{background:var(--warn-light);color:var(--warn)}
.crow .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.crow b{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow .tx span{font-size:12px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crow>.ico{color:var(--text-3);flex:none}
.crow:hover>.ico{color:var(--brand-ink)}
.msgr{flex-direction:row;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.msgr-tx p{margin:4px 0 0;font-size:14px}
.msgr-b{display:flex;gap:8px;flex-wrap:wrap}
.faq{gap:0}
.faq .cbox-h{padding-bottom:8px}
.faq details{border-top:1px solid var(--line-2)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;font-weight:500;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:8px;height:8px;border-right:1.8px solid var(--text-2);border-bottom:1.8px solid var(--text-2);transform:rotate(45deg) translateY(-3px);transition:transform .2s;flex:none;margin-right:4px}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.faq details p{margin:0 0 16px;color:var(--text-2);font-size:14px;line-height:1.55;max-width:75ch}
body.v-cab main:not(#cab){display:none}
@media (max-width:1000px){.cab-in{grid-template-columns:1fr}.side{display:none}}
@media (max-width:760px){.cab-grid{grid-template-columns:1fr}.ask{padding:20px 16px;border-radius:24px}.ask-top{align-items:flex-start;gap:14px}.ask-h h1{font-size:24px;line-height:28px}.ask-h p{font-size:14px}.cab-in{padding-block:16px 48px}.cbox{padding:16px;border-radius:20px}.msgr-b .btn{flex:1}.crow .badge{font-size:12px;padding:2px 6px}
  .ask-bar .btn.lg .t{display:none}}
/* responsive */
@media (max-width:1180px){
  .srow{flex-wrap:wrap}
  .fields{flex:1 1 100%;flex-wrap:wrap;gap:1px;background:transparent}
  .fld{flex:1 1 30%}
  .fld.emp{flex:1 1 30%}
  .aibtn{flex:1;justify-content:center}
  .nav{display:none}.hbtn.sel{min-width:0}
}
@media (max-width:760px){
  .glass{margin:16px;padding:20px 16px;border-radius:24px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .fld{flex:1 1 100%}.fld.swap{display:none}.fld.emp{flex:1 1 100%}
  .banners{grid-template-columns:1fr}
  .trips{grid-auto-columns:82%}
  .hr .hbtn.sel,.hr .wal{display:none}
  .modal{inset:env(safe-area-inset-top,0px) 0 0 0;border-radius:0}
  .m-in{padding:20px 16px 12px}
  .msg:not(.user){flex-direction:column;gap:8px}
  .kv{grid-template-columns:minmax(0,1fr) auto;gap:2px 12px}
  .kv .k{grid-column:1/-1;font-size:12px;margin-top:8px}
  .kv .k:first-child{margin-top:0}
  .kv .s{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
  .pk-grid{margin:-8px -16px -16px;padding:8px 16px 26px;scroll-padding:0 16px}
  .msg:not(.user) .ava{width:auto;justify-content:flex-start;padding:0}
  .m-foot{padding:10px 16px 14px}
  .m-head .pill .t{display:none}
  .m-head{flex-wrap:wrap;row-gap:10px;gap:4px;padding:10px 8px 10px 14px}
  .m-head .grow{display:none}
  .m-stat{flex:1 1 0;margin-left:6px}
  .m-stat b{font-size:14px}
  .m-head .iconbtn,.m-head .pill{width:36px;height:36px;padding:0;justify-content:center}
  .m-head .tchip{margin-right:6px}
  .m-head .tchip{order:10;flex:1 1 100%;max-width:none}
  .m-title small{display:none}
  .sec-h h2{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.bot,.bot *,.bot::after{animation:none!important}*{animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}}

/* =====================================================================
   Режим ИИ: компоненты продукта поверх базовых стилей FBT.
   Только токены из :root — светлая и тёмная темы работают сами.
   ===================================================================== */

.warn-t { color: var(--warn); font-weight: 600; display: inline-flex; align-items: center; gap: 5px }
.neg-t { color: var(--neg-ink) }
.ok-t { color: var(--brand-ink) }
.tiny { font-size: 12px; color: var(--text-3); font-weight: 500 }
.btn.sm { height: 30px; padding: 0 10px; font-size: 14px; border-radius: 10px }
.btn[disabled], .btn:disabled { opacity: .45; cursor: not-allowed }
.btn.danger { background: var(--neg-ink) }
.btn.danger:hover { background: var(--neg) }
code { font: 12px var(--font); background: var(--neutral); padding: 1px 5px; border-radius: 5px }
.hbtn.wal.pulse { animation: walP 1.2s ease }
@keyframes walP { 25% { background: var(--brand-muted); color: var(--brand-ink) } }

/* ---------- как работает (пустой чат и кабинет) ---------- */
.how { list-style: none; margin: 18px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; text-align: left }
.how li { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2) }
.how .n { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: var(--brand); color: #fff }
.how b { display: block; font-size: 14px; font-weight: 600 }
.how small { display: block; font-size: 12px; color: var(--text-2); line-height: 1.35; margin-top: 2px }
.how-row { margin: 0 }
.how-row li { background: var(--surface-2); border-color: transparent }
@container chat (max-width: 600px) { .how { grid-template-columns: 1fr } }
@media (max-width: 760px) { .how-row { grid-template-columns: 1fr } }

/* ---------- шапка чата: этапы ---------- */
.m-stat small { font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.m-stat small:empty { display: none }
.rail { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; justify-content: center; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px }
.rail::-webkit-scrollbar { display: none }
.rs { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--text-3); padding: 5px 10px 5px 5px; border-radius: 999px; white-space: nowrap; flex: none }
.rs i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 700; background: var(--neutral); color: var(--text-2) }
.rs.done { color: var(--brand-ink) }
.rs.done i { background: var(--brand); color: #fff }
.rs.cur { color: var(--text); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--brand); font-weight: 600 }
.rs.cur i { background: var(--brand-light); color: var(--brand-ink) }
.rs.opt { opacity: .75 }
.rs.opt i { background: transparent; border: 1.5px dashed var(--line-3) }
.rs em { font-style: normal; font-size: 10px; color: var(--text-3); margin-left: -2px }
.rs-sep { width: 14px; height: 1.5px; background: var(--line-3); flex: none; border-radius: 1px }
@media (max-width: 1180px) { .rs em { display: none } }
@media (min-width: 761px) and (max-width: 1180px) { .rs:not(.cur) .rl { display: none } .rs:not(.cur) { padding-right: 5px } }
@media (max-width: 1700px) { body.ph-open .rs:not(.cur) .rl, body.ph-open .rs em { display: none } body.ph-open .rs:not(.cur) { padding-right: 5px } }
@media (max-width: 760px) {
  .rail { order: 10; flex: 1 1 100%; justify-content: flex-start; margin: 0 -2px }
  .rs { padding: 4px 8px 4px 4px; font-size: 12px }
  .rs-sep { width: 8px }
}

/* ---------- шаги агента: после работы сворачиваются в одну строку ---------- */
.sdone { font-size: 12px; color: var(--text-2) }
.sdone summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; padding: 4px 12px 4px 5px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--line-2); max-width: 100% }
.sdone summary::-webkit-details-marker { display: none }
.sdone summary > span:not(.si) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.sdone summary:hover { border-color: var(--line-3); color: var(--text) }
.sdone .si, .sdone summary .si { width: 16px; height: 16px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--brand-muted); color: var(--brand-ink) }
.sdone summary .si::after { content: ""; width: 5px; height: 3px; border-left: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(-45deg) translate(1px, -1px) }
.sdone em { font-style: normal; color: var(--text-3); white-space: nowrap }
.sdone .slist { display: grid; gap: 4px; padding: 8px 0 2px 6px }

/* ---------- события в ленте (решения других людей) ---------- */
.evt { display: flex; justify-content: center; animation: rise .35s ease both }
.evt > span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line-2); font-size: 12px; color: var(--text-2); box-shadow: var(--shadow) }
.evt b { color: var(--text); font-weight: 600 }
.evt.ok .ico { color: var(--brand-ink) }
.evt.neg .ico { color: var(--neg-ink) }

/* ---------- бриф: куда и когда · кто · что соберу ---------- */
.brief { border-radius: 24px }
.bf-top { display: flex; align-items: center; gap: 10px 12px; padding: 14px 16px 2px; flex-wrap: wrap }
.bf-ttl { display: inline-flex; align-items: center; gap: 8px; font-size: 16px }
.bf-ttl .ico { color: var(--brand-ink) }
.bf-modes { min-width: 0 }
.bf-modes button { font-size: 12px; padding: 0 14px; height: 32px }
.bf-modes .ls { display: none }
.bf-trans { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; margin: 10px 16px 0; padding: 9px 12px; border-radius: 12px; background: var(--info-light); font-size: 14px }
.bf-trans > .ico { color: var(--info) }
.bf-trans .go { margin-left: auto }
.note.sm { margin: 10px 16px 0; font-size: 14px }
.bf-hero { margin: 12px 16px 0; padding: 16px 18px; border-radius: 20px; background: var(--surface-2); display: grid; gap: 14px }
.bf-way { display: flex; align-items: flex-end; gap: 6px 14px; flex-wrap: wrap }
.bf-city { position: relative; display: flex; flex-direction: column; gap: 1px; cursor: pointer; min-width: 0 }
.bf-city small, .bf-d small { font-size: 12px; color: var(--text-3); font-weight: 500 }
.bf-cv { display: inline-flex; align-items: center; gap: 6px; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap }
.bf-cv .ico { color: var(--text-3); width: 16px; height: 16px; transition: transform .15s }
.bf-city:hover .bf-cv, .bf-city:focus-within .bf-cv { color: var(--brand-ink) }
.bf-city:hover .bf-cv .ico { transform: translateY(1px); color: var(--brand-ink) }
.bf-city.miss .bf-cv { color: var(--warn) }
.bf-city select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 16px }
.bf-arrow { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-2); color: var(--brand); margin-bottom: 1px; flex: none }
.bf-arrow .ico { width: 16px; height: 16px }
.bf-when { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap }
.bf-when .grow { flex: 1 }
.bf-d { display: flex; flex-direction: column; gap: 1px; padding: 7px 12px 8px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-2); cursor: text; transition: border-color .15s, box-shadow .15s }
.bf-d input { border: 0; outline: 0; background: transparent; padding: 0; font: inherit; font-size: 16px; font-weight: 600; color: var(--text); width: 104px }
.bf-d:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light) }
.bf-d.miss { border-color: var(--warn); background: var(--warn-light) }
.bf-d input::placeholder { color: var(--warn); font-weight: 600 }
.bf-len { font-size: 12px; color: var(--text-2); font-weight: 500 }
.bf-kind button { padding: 0 14px; font-size: 12px; height: 32px }
.bf-ask { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; border-radius: 14px; background: var(--warn-light) }
.bf-ask > span { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--warn); margin-right: 4px }
.bf-ask .opt { background: var(--surface) }
.bf-ppl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px }
.bf-who { display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.bf-who .pax { background: var(--surface); padding-right: 4px }
.pax .pn { display: flex; flex-direction: column; line-height: 1.15; padding-right: 2px }
.pax .pn small { font-size: 10px; color: var(--brand-ink); font-weight: 500; letter-spacing: .01em }
.bf-who .pax.bad { background: var(--neg-light); border-color: var(--neg-ink) }
.bf-who .pax.bad .pn small { color: var(--neg-ink); font-weight: 600 }
.pax-x { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--text-3) }
.pax-x:hover { background: var(--neutral); color: var(--text) }
.pax-x .ico { width: 12px; height: 12px }
.bf-chg { display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 10px; border-radius: 999px; color: var(--brand-ink); font-weight: 600; font-size: 12px }
.bf-chg:hover { background: var(--brand-light) }
.bf-entry { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2) }
.bf-entry .ico { color: var(--brand-ink); flex: none }
.bf-entry.bad, .bf-entry.bad .ico { color: var(--neg-ink) }
.bf-need { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; border-radius: 14px; background: var(--warn-light); font-size: 14px }
.bf-need > .ico { color: var(--warn) }
.bf-need > span { font-weight: 600; color: var(--warn); margin-right: 2px }
.bf-need .opt { background: var(--surface) }
.note.bad { background: var(--neg-light); margin: 12px 16px 0; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px 10px }
.note.bad .ico { color: var(--neg-ink) }
.note-act { grid-column: 2; display: flex; gap: 8px; flex-wrap: wrap }
.bf-svc { padding: 16px 16px 4px }
.bf-svc-h { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px }
.tile { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 12px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--surface); text-align: left; min-width: 0; transition: border-color .15s, background .15s, box-shadow .15s }
.tile:hover { border-color: var(--brand); box-shadow: 0 2px 10px rgba(46, 132, 82, .08) }
.tile.open { border-color: var(--brand); background: var(--brand-light) }
.tl-i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-light); color: var(--brand-ink); flex: none }
.tile.open .tl-i { background: var(--surface) }
.tl-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.tile b { font-size: 14px; font-weight: 600 }
.tile small { font-size: 12px; color: var(--text-2); line-height: 1.35 }
.tile .usual-tag { margin-left: 6px; vertical-align: 1px }
.tl-m { color: var(--text-3); margin-top: 2px; transition: transform .2s; flex: none }
.tile.open .tl-m { transform: rotate(180deg) }
.tile.off, .tile.ghost { border-style: dashed; background: transparent; box-shadow: none }
.tile.off .tl-i, .tile.ghost .tl-i { background: var(--neutral); color: var(--text-3) }
.tile.off b, .tile.ghost b { color: var(--text-2) }
.tile.ghost { flex-wrap: wrap; cursor: default }
.tile.ghost:hover { border-color: var(--line-3) }
.tile.ghost .go { width: 100%; padding-left: 44px; font-size: 12px }
.tile-ed { margin-top: 8px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; animation: rise .25s ease }
.tile-ed .bf-row:only-child { grid-column: 1 / -1; max-width: 420px }
.tile-txt { grid-column: 1 / -1; margin: 0; font-size: 14px; color: var(--text-2); display: flex; gap: 8px; align-items: flex-start }
.tile-txt .ico { flex: none; margin-top: 3px; color: var(--text-3) }
.bf-foot-notes { padding: 10px 16px 4px; display: grid; gap: 6px }
.bf-asm, .bf-hist { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--text-2); line-height: 1.45 }
.bf-asm .ico, .bf-hist .ico { color: var(--brand-ink); flex: none; margin-top: 2px; width: 14px; height: 14px }
.bf-asm b { color: var(--text); font-weight: 600 }
.brief .bf-foot { margin-top: 12px }
.bf-foot .btn .ico { width: 16px; height: 16px }
.bf-svcl { font-size: 12px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; min-width: 0 }
.bf-svcl > .ico { color: var(--brand-ink) }
.brief .bf-foot .btn[disabled] { opacity: .4 }
.brief.done { opacity: .78 }
.brief.done .bf-top, .brief.done .bf-hero, .brief.done .bf-svc, .brief.done .bf-trans { pointer-events: none }
.brief.done .bf-foot { pointer-events: auto }
.brief.done .pax-x, .brief.done .bf-chg, .brief.done .bf-need, .brief.done .bf-ask, .brief.done .tile-ed, .brief.done .bf-trans, .brief.done .tl-m, .brief.done .bf-cv .ico { display: none }
.opt[disabled] { opacity: .5 }
@container chat (max-width: 600px) {
  .bf-modes { width: 100% }
  .bf-modes button { padding: 0 6px; font-size: 12px }
  .bf-modes .lf { display: none }
  .bf-modes .ls { display: inline }
  .bf-hero { margin: 10px 12px 0; padding: 14px }
  .bf-cv { font-size: 24px }
  .bf-when .grow { display: none }
  .bf-kind { width: 100% }
  .tiles { grid-template-columns: 1fr }
  .tile { padding: 10px 12px; gap: 10px }
  .tl-i { width: 30px; height: 30px }
  .tl-m { display: none }
  .tile-ed { grid-template-columns: 1fr }
  .bf-svc { padding: 14px 12px 4px }
  .brief .bf-foot { flex-direction: column-reverse; align-items: stretch }
  .brief .bf-foot .grow { display: none }
  .brief .bf-foot .btn { width: 100%; height: 46px }
}

/* ---------- пакеты ---------- */
.pk-st { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px }
.cond { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: var(--text-2) }
.cond span { display: inline-flex; align-items: center; gap: 4px }
.cond .ico { width: 13px; height: 13px }
.sg.onsite b { color: var(--brand-ink) }
.sg.onsite .ico { color: var(--brand-ink) }
.pk-grid.one { grid-template-columns: minmax(0, 360px) }
.pk-grid.one .pk { animation: none }
.small .ico.sm, p .ico.sm { width: 13px; height: 13px; vertical-align: -2px }

/* ---------- проверка перед оплатой ---------- */
.review { border-radius: 24px }
.review.done { opacity: .72 }
.rv-top { display: flex; align-items: center; gap: 12px; padding: 16px 16px 6px }
.rv-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--brand-light); color: var(--brand-ink); display: grid; place-items: center; flex: none }
.rv-top b { display: block; font-size: 16px; font-weight: 600 }
.rv-top small { display: block; font-size: 12px; color: var(--text-2) }
.rv-who { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 16px 12px }
.rv-who .pax, .trip .bf-who .pax { border-radius: 14px; padding: 4px 10px 4px 4px }
.rv-who .pn small, .trip .pn small { color: var(--text-3) }
.rv-segs { margin: 0 16px; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden }
.rv-seg, .tr-seg { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 14px; border-top: 1px solid var(--line-2); align-items: start }
.tr-seg { grid-template-columns: 20px minmax(0, 1fr); padding: 10px 0 }
.rv-seg:first-child, .tr-seg:first-child { border-top: 0 }
.rv-seg > .ico, .tr-seg > .ico { color: var(--text-2); margin-top: 1px }
.rv-seg.back > .ico { transform: scaleX(-1) }
.rv-seg.fee { background: var(--surface-2) }
.rv-seg b, .tr-seg b { display: block; font-weight: 600; font-size: 14px }
.rv-seg small, .tr-seg small { display: block; font-size: 12px; color: var(--text-2); margin-top: 2px }
.rv-amt { font-weight: 600; white-space: nowrap; font-size: 14px }
.rv-checks { padding: 12px 16px 0; display: grid; gap: 6px }
.ck { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); font-size: 14px }
.ck > .ico { width: 18px; height: 18px }
.ck b { display: block; font-weight: 600 }
.ck small { display: block; color: var(--text-2); font-size: 12px; margin-top: 1px }
.ck.warn { background: var(--warn-light) }
.ck.warn > .ico { color: var(--warn) }
.ck.info { background: var(--info-light) }
.ck.info > .ico { color: var(--info) }
.ck.block { background: var(--neg-light) }
.ck.block > .ico { color: var(--neg-ink) }
.oks { display: flex; flex-wrap: wrap; gap: 6px }
.oks .ck { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 8px; border-radius: 999px; background: var(--brand-light); color: var(--brand-ink); font-size: 12px; font-weight: 500 }
.oks .ck .ico { width: 14px; height: 14px }
.rv-acc { display: flex; flex-wrap: wrap; gap: 6px 28px; padding: 14px 16px 0; font-size: 14px }
.rv-acc small { display: block; font-size: 12px; color: var(--text-3); font-weight: 500 }
.rv-pur { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 16px 0 }
.rv-just { padding: 10px 16px 0 }
.rv-just .bin { width: 100% }
.rv-foot { display: flex; align-items: flex-end; gap: 12px 16px; flex-wrap: wrap; margin-top: 16px; padding: 14px 16px 16px; border-top: 1px solid var(--line-2); background: var(--surface-2) }
.rv-sum { flex: 1 1 380px; min-width: 0 }
.rv-sum small { font-size: 12px; color: var(--text-2) }
.rv-sum b { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.15 }
.rv-note { display: flex; gap: 6px; align-items: flex-start; font-size: 12px; color: var(--text-2); margin-top: 4px; max-width: none }
.rv-note .ico { flex: none; margin-top: 2px }
.rv-btns { display: flex; gap: 8px; flex-wrap: wrap }
.kv .v { color: var(--text-2); font-size: 12px; min-width: 0 }
.acc { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; font-size: 14px; align-items: center }
.acc .k { color: var(--text-2) }
.rv-sum + .rv-btns .btn.lg, .rv-btns .btn.lg { height: 46px }
@container chat (max-width: 600px) {
  .rv-btns { width: 100% }
  .rv-btns .btn { flex: 1 }
  .rv-seg { grid-template-columns: 20px minmax(0, 1fr) }
  .rv-amt { grid-column: 2 }
  .ck { grid-template-columns: 20px minmax(0, 1fr) }
  .ck > .btn { grid-column: 2 }
  .acc { grid-template-columns: 1fr; gap: 2px }
  .acc .k { margin-top: 8px; font-size: 12px }
}

/* ---------- карточка поездки ---------- */
.rv-h { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px }
.trip { border-radius: 24px }
.trip .w-h .badge { font-size: 12px; padding: 3px 10px }
.tr-sec { padding: 4px 16px 12px }
.tr-sec.acc { padding-top: 10px; border-top: 1px solid var(--line-2) }
.docs { display: flex; flex-wrap: wrap; gap: 6px }
.doc { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--line-2); font-size: 12px; font-weight: 500 }
.doc:hover { border-color: var(--brand); color: var(--brand-ink) }
.tr-hist { margin: 0 16px 14px; font-size: 12px }
.tr-hist summary { cursor: pointer; color: var(--text-2); font-weight: 500 }
.tr-hist ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px }
.tr-hist li { display: grid; grid-template-columns: 96px 1fr; gap: 8px; color: var(--text-2) }

/* ---------- согласование ---------- */
.appr { border-radius: 20px }
.ap-who { display: flex; align-items: center; gap: 12px; padding: 14px 16px; flex-wrap: wrap }
.ap-av { width: 42px; height: 42px; border-radius: 50%; background: var(--warn-light); color: var(--warn); display: grid; place-items: center; font-weight: 700; font-size: 12px; flex: none }
.ap-who b { display: block; font-size: 16px }
.ap-who small { display: block; font-size: 12px; color: var(--text-2) }
.ap-who .grow { flex: 1 }
.chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 16px 12px }
.ch { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: var(--surface-2); font-size: 12px; font-weight: 600 }
.ch.pending { background: var(--info-light); color: var(--info) }
.ch.approved { background: var(--brand-light); color: var(--brand-ink) }
.ch.rejected { background: var(--neg-light); color: var(--neg-ink) }
.ch-sep { color: var(--text-3); display: inline-flex }
.ap-prev { margin: 0 16px 14px; padding: 12px 14px; border-radius: 14px; background: var(--surface-2) }
.ap-prev summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; list-style: none }
.ap-prev summary::-webkit-details-marker { display: none }
.ap-prev[open] summary { margin-bottom: 8px }
.ap-lines { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 14px; font-size: 12px }
.ap-lines .k { color: var(--text-2) }
.ap-foot .go .ico { width: 15px; height: 15px }
@container chat (max-width: 600px) { .ap-lines { grid-template-columns: 1fr; gap: 1px } .ap-lines .k { margin-top: 6px; font-size: 12px } }

/* ---------- телефон согласующего: второй экран рядом с чатом ---------- */
.approver { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--scrim); backdrop-filter: blur(4px); padding: 16px }
@media (min-width: 1100px) {
  .approver { inset: auto; right: 40px; top: 50%; transform: translateY(-50%); background: none; backdrop-filter: none; padding: 0; animation: phIn .5s cubic-bezier(.2, .9, .2, 1) both }
  body.ph-open .modal { right: 420px }
  body.ph-open .scrim { right: 0 }
}
@keyframes phIn { from { opacity: 0; transform: translate(60px, -50%) } }
.ph-cap { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 14px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow); font-size: 12px; font-weight: 600; color: var(--text) }
.ph-cap > .ico { color: var(--text-2) }
.ph-cap .iconbtn { width: 28px; height: 28px; border-radius: 50% }
.ph-frame { width: min(340px, calc(100vw - 32px)); height: min(640px, calc(100vh - 120px)); border-radius: 44px; background: #e6eae3; border: 10px solid #121212; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); display: flex; flex-direction: column; overflow: hidden; color: #171717 }
.ph-status { display: flex; justify-content: space-between; padding: 8px 22px 2px; font-size: 12px; font-weight: 600; background: #fff }
.ph-top { display: flex; align-items: center; gap: 10px; padding: 8px 14px 10px; background: #fff; border-bottom: 1px solid rgba(0, 0, 0, .08) }
.ph-top b { display: block; font-size: 16px }
.ph-top small { font-size: 12px; color: rgba(0, 0, 0, .5) }
.ph-av { width: 36px; height: 36px; border-radius: 50%; background: #02b140; color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none }
.ph-body { flex: 1; overflow: auto; padding: 14px 10px }
.ph-msg { background: #fff; border-radius: 18px 18px 18px 6px; padding: 12px 14px; display: grid; gap: 8px; font-size: 14px; box-shadow: 0 1px 1px rgba(0, 0, 0, .06) }
.ph-t { font-weight: 700; font-size: 14px }
.ph-l { display: grid; gap: 1px }
.ph-l .k { font-size: 12px; color: rgba(0, 0, 0, .5); text-transform: uppercase; letter-spacing: .04em; font-weight: 600 }
.ph-l.warn { background: #fff4e3; margin: 0 -6px; padding: 6px; border-radius: 10px }
.ph-kb { padding: 10px 10px 14px; background: #f4f6f3; border-top: 1px solid rgba(0, 0, 0, .06); display: grid; gap: 8px }
.ph-kb:has(.ph-rej:not([hidden])) .ph-btns { display: none }
.ph-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.ph-btns .btn { height: 40px }
.ph-btns .btn.line { background: #fff; color: #171717; border-color: #d4d6dd }
.ph-rej { display: grid; gap: 8px }
.ph-rej textarea { width: 100%; border-radius: 12px; border: 1px solid #d4d6dd; padding: 8px 10px; font: inherit; font-size: 14px; resize: none; background: #fff; color: #171717 }
.ph-rej .chip { background: #fff; color: #171717; border-color: #d4d6dd; font-size: 12px; padding: 6px 10px }

/* ---------- обмен и возврат ---------- */
.xr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line-2) }
.xr-m b { font-size: 16px; display: block }
.xr-m small { display: block; font-size: 12px; color: var(--text-2) }
.xr-p { display: flex; flex-direction: column; align-items: flex-end; gap: 6px }
.xr-p b { white-space: nowrap }
.rf-t { padding: 0 16px 8px }
.rf-r { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 16px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: 14px }
.rf-r:first-child { border-top: 0 }
.rf-r b { display: block; font-weight: 600 }
.rf-r small { display: block; color: var(--text-2); font-size: 12px }
.rf-r .num { text-align: right; white-space: nowrap }

/* ---------- обоснование ---------- */
.just-in { padding: 0 16px 14px; display: grid; gap: 10px }
.just-in p { margin: 0; font-size: 14px }
.just textarea { width: 100%; border-radius: 12px; border: 1px solid var(--line-3); background: var(--surface-2); padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; color: var(--text) }
.just textarea:focus { outline: none; border-color: var(--brand); background: var(--surface) }
.just textarea.miss { border-color: var(--warn) }

/* ---------- человек в чате ---------- */
.msg.human .hav { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--info); color: #fff; font-size: 12px; font-weight: 700 }
.hname { font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px }
.msg.human .content { background: var(--info-light); border-radius: 6px 18px 18px 18px; padding: 10px 14px; align-self: flex-start; max-width: 72ch }
.qa-note { display: flex; align-items: center; gap: 6px; font-size: 12px !important; color: var(--text-2) }
.qa-note .ico { color: var(--info) }
ul.tight { margin: 0; padding-left: 20px; font-size: 14px; display: grid; gap: 4px }


.modal { transition: opacity .22s, transform .42s cubic-bezier(.2, .9, .2, 1), right .45s cubic-bezier(.2, .9, .2, 1) }


/* ---------- раунд 2: бриф — услуги переключателями, пожелания списками ---------- */
.svcs { display: flex; flex-wrap: wrap; gap: 8px }
.svc { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 6px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--surface); font-size: 14px; font-weight: 500; color: var(--text-2); transition: border-color .15s, background .15s, color .15s; white-space: nowrap }
.svc > .ico { width: 16px; height: 16px }
.svc-b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--neutral); color: var(--text-3); flex: none; transition: background .15s, color .15s }
.svc-b .ico { width: 14px; height: 14px }
button.svc:hover { border-color: var(--brand) }
.svc.on { border-color: var(--brand); background: var(--brand-light); color: var(--brand-ink); font-weight: 600 }
.svc.on .svc-b { background: var(--brand); color: #fff }
.svc.lock { padding-left: 14px; cursor: default; border-style: solid }
.svc.lock .svc-l { width: 12px; height: 12px; opacity: .55; margin-left: -2px }
.bf-nohotel { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-2) }
.bf-nohotel > .ico { color: var(--brand-ink) }
.bf-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-2) }
.pf { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 8px 0 12px; border-radius: 10px; background: var(--surface-2); font-size: 12px; color: var(--text-2) }
.pf select { appearance: none; -webkit-appearance: none; border: 0; outline: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238a8f98' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 2px center; padding: 0 16px 0 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer }
.pf:focus-within { box-shadow: 0 0 0 2px var(--brand) }
.brief.done .bf-prefs select, .brief.done .svc { pointer-events: none }
.brief.done .svc:not(.on) { display: none }
.brief.done .bf-nohotel .go { display: none }

/* ---------- компактный пакет: условия у каждой услуги ---------- */
.pk { gap: 10px; padding: 14px }
.pk-price { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap }
.pk-price .pk-per { margin: 0 }
.pk-st { margin-top: 0 }
.pk-st .tiny { font-size: 12px; color: var(--text-2) }
.pk-svc { display: grid; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2) }
.ps { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 0 8px; align-items: start }
.ps > .ico { width: 16px; height: 16px; color: var(--text-2); margin-top: 2px }
.ps b { display: block; font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ps small { display: block; font-size: 12px; color: var(--text-2) }
.ps .cond { margin-top: 4px; font-size: 12px; gap: 2px 10px }
.ps .cond .ico { width: 12px; height: 12px }
.ps.mini small { font-size: 12px }
.pk-why { display: grid; grid-template-columns: 14px 1fr; gap: 6px; font-size: 12px; color: var(--text-2) }
.pk-why .ico { width: 14px; height: 14px; color: var(--brand-ink); margin-top: 1px }
.pk-cta { margin-top: auto }
.pk-cta .btn { height: 40px }

/* ---------- туда-обратно одним билетом ---------- */
.rtr { border-top: 1px solid var(--line-2) }
.rtr.open { background: var(--surface-2) }
.rtr-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; padding: 12px 16px }
.rt-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; min-width: 0 }
.rt-legs > div { display: flex; flex-direction: column; min-width: 0 }
.rt-legs small { font-size: 12px; color: var(--text-3); font-weight: 500 }
.rt-legs b { font-size: 16px; font-weight: 600; white-space: nowrap }
.rt-legs span { font-size: 12px; color: var(--text-2) }
.rtr .fpr { display: flex; flex-direction: column; align-items: flex-end; gap: 3px }
.rtr .fact { grid-column: 2 / -1 }
@container chat (min-width: 620px) { .rtr-top { grid-template-columns: auto minmax(0, 1fr) auto auto } .rtr .fact { grid-column: auto } }

/* ---------- отели: номера с ценой ---------- */
.hrow { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 14px 16px; border-top: 1px solid var(--line-2) }
.hr-ph { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 1 / 1 }
.hr-ph svg { display: block; width: 100%; height: 100% }
.hr-ph .rt { position: absolute; right: 6px; top: 6px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px }
.hr-b { min-width: 0; display: flex; flex-direction: column; gap: 2px }
.hr-h { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap }
.hr-h b { font-size: 16px; font-weight: 600 }
.hr-b > small { font-size: 12px; color: var(--text-2) }
.rooms { margin-top: 8px; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden }
.room { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px 12px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--line-2); font-size: 12px }
.room:first-child { border-top: 0 }
.rm-n b, .rm-p b { display: block; font-weight: 600 }
.rm-n small, .rm-p small { display: block; font-size: 12px; color: var(--text-2) }
.rm-p { text-align: right; white-space: nowrap }
.room .btn.sm { height: 32px }
@container chat (max-width: 600px) {
  .hrow { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; padding: 12px }
  .room { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 8px 10px }
  .room .badge { display: none }
  .room .btn.sm { grid-column: 2; grid-row: 1 / span 2; align-self: center }
  .rm-n small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
  .rm-p { grid-column: 1; text-align: left; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap }
  .room.out .rm-p b { color: var(--neg-ink) }
  .room.out .rm-p small::after { content: " · вне политики"; color: var(--neg-ink) }
  .room.corp .rm-p small::after { content: " · корп. тариф"; color: var(--info) }
  .svcs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }
  .svc { height: auto; min-height: 38px; padding: 6px 10px 6px 6px; font-size: 12px; white-space: normal; line-height: 1.2; text-align: left }
  .svc.lock { padding-left: 10px }
  .svc[data-tile="flight"] { grid-column: 1 / -1 }
  .rt-legs { grid-template-columns: 1fr }
}

/* ---------- проверка: туда-обратно, номера, центры затрат ---------- */
.rv-legs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 6px 0 2px }
.rv-leg { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 10px; background: var(--surface-2) }
.rv-seg .rv-leg small { margin: 0; font-size: 12px; color: var(--text-3); font-weight: 500 }
.rv-leg b { font-size: 14px }
.rv-leg span { font-size: 12px; color: var(--text-2) }
.rv-leg small { text-transform: uppercase; letter-spacing: .05em; font-weight: 600 }
.rv-leg b { font-size: 16px }
.rv-fare { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px }
.rv-fc { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); color: var(--text-2) }
.rv-fc .ico { width: 14px; height: 14px; color: var(--brand-ink) }
.rv-fc.neg { background: var(--neg-light); color: var(--neg-ink) }
.rv-fc.neg .ico { color: var(--neg-ink) }
.rv-who { gap: 10px; padding: 12px 16px 20px }
.rv-who .pax, .trip .bf-who .pax { padding: 6px 14px 6px 6px }
.rv-top { padding: 20px 16px 8px }
.rv-segs { margin-top: 4px }
.rv-legs { gap: 10px 12px; margin: 10px 0 8px }
.rv-leg { padding: 12px 14px; gap: 10px; border: 1px solid var(--line-2); background: var(--surface) }
.lg-tag { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 12px; color: var(--text-2) }
.lg-tag b { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--brand-ink) }
.lg-tag .lg-al { margin-left: auto; color: var(--text-3) }
.lg-row { display: grid; grid-template-columns: auto minmax(40px, 1fr) auto; align-items: center; gap: 12px }
.lg-pt { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.lg-pt.r { text-align: right }
.rv-leg .lg-pt b { font-size: 24px; line-height: 1.15; font-weight: 700; letter-spacing: -.01em }
.rv-leg .lg-pt span { font-size: 12px; color: var(--text); font-weight: 500 }
.rv-leg .lg-pt em { font-style: normal; font-size: 12px; color: var(--text-3) }
.lg-mid { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; color: var(--text-2) }
.lg-mid i { display: block; width: 100%; height: 1px; background: var(--line-3); position: relative }
.lg-mid i::after { content: ''; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid var(--line-3); border-right: 1px solid var(--line-3); transform: rotate(45deg) }
.rv-kvs { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; margin: 10px 0 2px; font-size: 14px }
.rv-kvs span { color: var(--text-2) }
.rv-seg .rv-kvs b { font-weight: 500; font-size: 14px }
.rf-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 4px 16px 12px }
.rf-sum > div { border-radius: 14px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px }
.rf-sum small { font-size: 12px; color: var(--text-2) }
.rf-sum b { font-size: 24px; font-weight: 700; letter-spacing: -.01em }
.rf-back { background: var(--brand-light) } .rf-back b { color: var(--brand-ink) }
.rf-keep { background: var(--warn-light) } .rf-keep b { color: var(--warn) }
.rf-t2 { margin: 0 16px 8px; border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden }
.rf-r2 { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 14px; border-top: 1px solid var(--line-2); align-items: start }
.rf-r2:first-child { border-top: 0 }
.rf-l { display: flex; flex-direction: column; gap: 1px; min-width: 0 }
.rf-l b { font-size: 14px; font-weight: 600 }
.rf-l span { font-size: 12px }
.rf-res { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-weight: 600; font-size: 14px; white-space: nowrap }
.rf-res .rf-h { color: var(--warn) }
.rf-why { grid-column: 1 / -1; font-size: 12px; line-height: 1.4; color: var(--text-2); padding: 6px 10px; border-radius: 10px; background: var(--surface-2) }
.rf-r2.held .rf-why { background: var(--warn-light); color: var(--text) }
@media (max-width: 520px) { .rf-sum b { font-size: 18px } }



.rv-acc > span > em { display: block; font-style: normal; font-size: 12px; margin-top: 1px }
.rv-cc { flex: 1 1 100%; display: grid; gap: 4px }
.cc-r { display: flex; justify-content: space-between; gap: 12px; padding: 7px 10px; border-radius: 10px; background: var(--surface-2) }
.cc-r b { font-weight: 600; font-size: 12px }
.cc-r em { display: block; font-style: normal; font-size: 12px; color: var(--text-2) }
.cc-r.over { background: var(--warn-light) }
.cc-r.over em { color: var(--warn) }
@container chat (max-width: 600px) {
  .rv-legs { grid-template-columns: 1fr }
  .review .rv-foot, .brief:not(.done) .bf-foot { position: sticky; bottom: 0; z-index: 3; box-shadow: 0 -8px 24px rgba(16, 24, 20, .08) }
  .brief:not(.done) .bf-foot { background: var(--surface) }
  .review .rv-foot { padding: 10px 12px 12px; gap: 8px }
  .review .rv-sum b { font-size: 24px }
  .review .rv-note { font-size: 12px }
  .review .rv-btns { width: 100%; display: grid; grid-template-columns: auto 1fr }
  .review .rv-btns .btn.lg { height: 44px; padding: 0 14px }
}
.review.done .rv-foot { position: static; box-shadow: none }

/* ---------- отзыв заявки ---------- */
.wd-l { list-style: none; margin: 0; padding: 4px 16px 14px; display: grid; gap: 8px; font-size: 14px }
.wd-l li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start }
.wd-l .ico { color: var(--text-2); margin-top: 2px }
.rf-note { margin: 0; padding: 0 16px 12px; display: flex; gap: 6px }

/* ---------- согласующий ---------- */
.ph-l.ok { background: #e6f6ec; margin: 0 -6px; padding: 6px; border-radius: 10px }
.ph-alt { height: auto; min-height: 44px; padding: 6px 12px; background: #fff !important; color: #1f7a45 !important; border-color: #9fd6b3 !important; font-size: 12px; white-space: normal; text-align: left; justify-content: flex-start }
.ph-alt span { display: flex; flex-direction: column; line-height: 1.25 }
.ph-alt small { font-size: 12px; font-weight: 500; color: #4b6b57 }
.ph-rej .btn[disabled] { opacity: .45 }

/* ---------- шапка: баланс и кредит ---------- */
.wal-v { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05 }
.wal-cr { font-size: 10px; font-weight: 500; color: var(--text-3) }
.wal-cr.low { color: var(--neg-ink); font-weight: 600 }

/* ---------- кабинет: поездки ---------- */
.ct-list { display: flex; flex-direction: column; margin: 0 -8px }
.ct-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto auto auto; gap: 4px 12px; align-items: center; padding: 10px 8px; border-radius: 14px }
.ct-row:hover { background: var(--surface-2) }
.ct-row .ci { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--neutral); color: var(--text-2) }
.ct-main { min-width: 0 }
.ct-main b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ct-main small { display: block; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.ct-sum { white-space: nowrap; font-size: 14px }
.ct-act { display: flex; gap: 8px; align-items: center }
.ct-log { grid-column: 2 / -1; list-style: none; margin: 4px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 4px; font-size: 12px; color: var(--text-2) }
.ct-log .num { color: var(--text-3); margin-right: 8px }
@media (max-width: 760px) {
  .ct-row { grid-template-columns: 40px minmax(0, 1fr) auto }
  .ct-row .badge { grid-column: 3; grid-row: 1 }
  .ct-sum { grid-column: 2; grid-row: 2; font-size: 12px }
  .ct-act { grid-column: 2 / -1; grid-row: 3 }
}

/* ---------- бюджет отделов ---------- */
.bud-r { padding: 10px 16px; border-top: 1px solid var(--line-2); display: grid; gap: 6px }
.bud-t { display: flex; justify-content: space-between; gap: 12px; font-size: 14px }
.bud-t b { font-weight: 600 }
.bud-bar { height: 6px; border-radius: 999px; background: var(--neutral); overflow: hidden }
.bud-bar i { display: block; height: 100%; background: var(--brand); border-radius: inherit }
.bud-bar i.hot { background: var(--warn) }
.bud-r small { font-size: 12px; color: var(--text-2) }

/* ---------- раунд 3: бриф легче; незаполненное — нейтрально, без оранжевого ---------- */
.bf-hero { background: transparent; margin: 8px 16px 0; padding: 4px 0 0; gap: 16px; border-radius: 0 }
.bf-cv { font-size: 24px; font-weight: 600 }
.bf-city.miss .bf-cv { color: var(--text-3) }
.bf-d { background: var(--surface-2); border-color: transparent }
.bf-d.miss { background: var(--surface); border: 1px dashed var(--line-3) }
.bf-d input::placeholder { color: var(--text-3); font-weight: 500 }
.bf-ask { display: grid; gap: 8px; padding: 0; background: none }
.bf-ask > span { color: var(--text-2); font-weight: 500; font-size: 12px; margin: 0 }
.dopts { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px }
.dopt { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); text-align: left; transition: border-color .15s, background .15s }
.dopt:hover { border-color: var(--brand); background: var(--brand-light) }
.dopt b { font-size: 14px; font-weight: 600 }
.dopt small { font-size: 12px; color: var(--text-2) }
.bf-need { background: none; padding: 0 }
.bf-need > .ico, .bf-need > span { color: var(--text-2) }
.bf-need > span { font-weight: 500 }
.bf-foot .warn-t { color: var(--text-2); font-weight: 500 }
@container chat (max-width: 600px) {
  .bf-hero { margin: 8px 12px 0; padding: 0 }
  .bf-cv { font-size: 20px }
  .dopts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); overflow-x: auto; scrollbar-width: none }
}
/* бриф по разделам: Маршрут · Даты · Кто едет — подпись слева, содержимое справа */
.bf-hero { gap: 0 }
.bf-sec { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line-2) }
.bf-sec:first-child { border-top: 0; padding-top: 4px }
.bf-lbl { display: flex; align-items: center; gap: 6px; align-self: start; padding-top: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em }
.bf-cnt { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--neutral); color: var(--text-2); display: inline-grid; place-items: center; font-size: 12px; letter-spacing: 0 }
.bf-body { display: grid; gap: 12px; min-width: 0 }
.bf-who { gap: 8px }
.bf-who .pax { gap: 10px; min-height: 48px; padding: 6px 6px 6px 6px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface) }
.bf-who .pax .av { width: 32px; height: 32px; font-size: 12px }
.bf-who .pax .pn { gap: 2px; font-size: 14px; line-height: 1.25; padding-right: 2px }
.bf-who .pax .pn small { font-size: 12px }
.bf-who .pax-x { width: 28px; height: 28px }
.bf-who .pax-x .ico { width: 14px; height: 14px }
.bf-who .bf-chg { height: 48px; padding: 0 16px; border-radius: 14px; border: 1px dashed var(--line-3) }
.bf-who .bf-chg:hover { border-color: var(--brand) }
@container chat (max-width: 600px) {
  .bf-sec { grid-template-columns: 1fr; gap: 8px; padding: 12px 0 }
  .bf-lbl { padding-top: 0 }
  .bf-who .pax, .bf-who .bf-chg { width: 100% }
  .bf-who .pax .pn { flex: 1 }
}
/* «Соберу» и «Пожелания» — такие же разделы; пожелания — поля с подписью, как даты */
.bf-svc { padding: 0 16px }
.bf-svc .bf-sec:first-child { border-top: 1px solid var(--line-2); padding-top: 14px }
.bf-nohotel { margin-top: 0 }
.bf-prefs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 0; padding: 0; border: 0 }
.pf { flex-direction: column; align-items: stretch; gap: 1px; height: auto; padding: 7px 12px 8px; border-radius: 12px; background: var(--surface-2) }
.pf > span { font-size: 12px; font-weight: 500; color: var(--text-3) }
.pf select { width: 100%; font-size: 16px; background-position: right 0 center }
.bf-tags { display: flex; flex-wrap: wrap; gap: 6px }
@container chat (max-width: 600px) {
  .bf-svc { padding: 0 12px }
  .bf-prefs { grid-template-columns: 1fr 1fr }
}

/* ---------- v006: рабочее место тревел-агента FBT (второй экран) ---------- */
.aws { position: fixed; inset: 0; z-index: 80; background: var(--scrim); backdrop-filter: blur(4px); display: flex; align-items: stretch; justify-content: center; padding: 24px }
.aws[hidden] { display: none }
.aw { width: min(1320px, 100%); background: var(--bg, var(--page)); border-radius: 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .3); display: flex; flex-direction: column; overflow: hidden; animation: rise .35s ease both }
.aw-h { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border-bottom: 1px solid var(--line-2) }
.aw-logo { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; background: #0f766e; color: #fff; flex: none }
.aw-tt b { display: block; font-size: 16px }
.aw-tt small { display: block; font-size: 12px; color: var(--text-2) }
.aw-me { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 999px; background: var(--surface-2) }
.aw-me b { display: block; font-size: 12px }
.aw-me small { display: block; font-size: 12px; color: var(--text-2) }
.aw .av { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #ccece8; color: #0f5e58; font-size: 12px; font-weight: 700; flex: none }
.aw .av.lg { width: 44px; height: 44px; font-size: 14px }
.aw-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 340px minmax(0, 1fr) }
.aw-q { border-right: 1px solid var(--line-2); background: var(--surface); display: flex; flex-direction: column; min-height: 0 }
.aw-qh { padding: 14px 14px 10px; display: grid; gap: 10px }
.aw-qh > b { font-size: 16px }
.aw-qh .seg2 button { height: 30px; padding: 0 10px; font-size: 12px }
.aw-ql { overflow-y: auto; overflow-x: hidden; padding: 2px 10px 12px; display: grid; gap: 8px; align-content: start }
.aw-h .grow, .aw-hd .grow, .aq-ft .grow, .aw-ch .grow, .aw-rb .grow { flex: 1 }
.aq { width: 100%; min-width: 0; box-sizing: border-box; display: grid; gap: 8px; padding: 12px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); text-align: left; transition: border-color .15s, background .15s }
.aq:hover { border-color: var(--line-3) }
.aq.on { border-color: #0f766e; box-shadow: 0 0 0 1px #0f766e; background: var(--surface-2) }
.aq.late { border-left: 4px solid var(--neg-ink) }
.aq-top { display: flex; align-items: center; gap: 8px; min-width: 0 }
.aq-top .badge { flex: none }
.aq-ft { flex-wrap: wrap; row-gap: 4px }
.aq-who { flex: 1; min-width: 0 }
.aq-who b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.aq-who small { display: block; font-size: 12px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.aq-txt { font-size: 12px; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.aq-ft { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2) }
.aq-rs { padding: 2px 8px; border-radius: 999px; background: var(--neutral); font-weight: 600 }
.aq-sla { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--text-2) }
.aq-sla .ico { width: 13px; height: 13px }
.aw-main { overflow: auto; padding: 20px 24px 28px; display: grid; gap: 16px; align-content: start }
.aw-none, .aw-empty { padding: 32px; text-align: center; color: var(--text-2) }
.aw-hd { display: flex; align-items: center; gap: 12px; flex-wrap: wrap }
.aw-hn b { display: block; font-size: 18px }
.aw-hn small { display: block; font-size: 12px; color: var(--text-2) }
.aw-req { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2) }
.aw-req small, .aw-aidid small { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em }
.aw-req p { margin: 6px 0 0; font-size: 16px; line-height: 1.45; font-weight: 500 }
.aw-aidid { padding: 12px 16px; border-radius: 16px; background: var(--brand-light) }
.aw-aidid small { color: var(--brand-ink) }
.aw-aidid ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px; display: grid; gap: 3px }
.aw-ctx { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px }
.aw-c { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); display: grid; gap: 6px; align-content: start; font-size: 14px }
.aw-c.wide { grid-column: 1 / -1 }
.aw-c > b { font-size: 14px }
.aw-c .lat { font-size: 12px; color: var(--text-2); margin-top: -4px }
.aw-ch { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em }
.aw-ch .go { text-transform: none; letter-spacing: 0; font-size: 12px }
.aw-kv { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; align-items: baseline }
.aw-kv > span:first-child { color: var(--text-2); font-size: 12px }
.aw-kv.warn > span:last-child { color: var(--warn); font-weight: 600 }
.aw-legs { margin: 2px 0 4px; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: lg }
.aw-legs li { display: grid; grid-template-columns: 24px 110px minmax(0, 1fr); gap: 8px; align-items: baseline; counter-increment: lg }
.aw-legs li::before { content: counter(lg); width: 22px; height: 22px; border-radius: 50%; background: var(--neutral); display: grid; place-items: center; font-size: 12px; font-weight: 700 }
.aw-legs b { font-size: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace }
.aw-ai { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1.5px solid #0f766e33; display: grid; gap: 10px }
.aw-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center }
.aw-done { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--brand-light); color: var(--brand-ink); font-size: 12px; font-weight: 600 }
.aw-done.wait { background: var(--warn-light); color: var(--warn) }
.aw-rule { margin: 0; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-2) }
.aw-xo { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; width: 100% }
.aw-xr { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); text-align: left }
.aw-xr.on { border-color: #0f766e; box-shadow: 0 0 0 1px #0f766e; background: var(--brand-light) }
.aw-xr b { font-size: 16px }
.aw-xr small { font-size: 12px; color: var(--text-2) }
.aw-xr span { font-size: 12px; font-weight: 600 }
.aw-xr .badge { justify-self: start; margin-top: 4px; font-size: 12px }
.aw-chat { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-2); display: grid; gap: 10px }
.aw-tr { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.aw-tr li { display: grid; gap: 2px; max-width: 80%; padding: 8px 12px; border-radius: 14px; background: var(--surface-2); font-size: 14px }
.aw-tr li.tr-client { justify-self: start }
.aw-tr li.tr-ai { justify-self: start; background: var(--info-light) }
.aw-tr li.tr-agent { justify-self: end; background: #ccece8 }
.tr-w { display: flex; gap: 8px; font-size: 12px; font-weight: 600; color: var(--text-2) }
.tr-w .num { font-weight: 500; color: var(--text-3) }
.aw-qr { display: flex; flex-wrap: wrap; gap: 6px }
.aw-qr .chip { font-size: 12px; padding: 6px 10px; text-align: left }
.aw-rep { display: grid; gap: 8px }
.aw-rep textarea { width: 100%; border-radius: 12px; border: 1px solid var(--line-3); background: var(--surface-2); padding: 10px 12px; font: inherit; font-size: 14px; resize: vertical; color: var(--text) }
.aw-rep textarea:focus { outline: none; border-color: #0f766e; background: var(--surface) }
.aw-rb { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.aw-closed { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--text-2); font-size: 14px }
.aw-hist { margin: 0 }
.aw-hist ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12px }
.aw-hist .num { color: var(--text-3); margin-right: 8px }
.by { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-right: 6px; border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--neutral); color: var(--text-2); vertical-align: 1px }
.by-agent { background: #ccece8; color: #0f5e58 }
.by-approver { background: var(--warn-light); color: var(--warn) }
.by-client { background: var(--info-light); color: var(--info) }
.note-act-in { display: inline-flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin-top: 6px }
body.aw-open { overflow: hidden }
@media (max-width: 900px) {
  .aws { padding: 0 }
  .aw { border-radius: 0 }
  .aw-body { grid-template-columns: 1fr }
  .aw-body.has-sel .aw-q { display: none }
  .aw-body:not(.has-sel) .aw-main { display: none }
  .aw-tt small, .aw-me span { display: none }
  .aw-main { padding: 14px 12px 24px }
  .aw-kv { grid-template-columns: 92px minmax(0, 1fr) }
  .aw-tr li { max-width: 92% }
  .aw-legs li { grid-template-columns: 24px 1fr; }
  .aw-legs li span { grid-column: 2 }
}
@media (max-width: 900px) { .aw-back { display: inline-flex !important } }
.aw-back { display: none }

.aq-due { display: inline-flex; align-items: center; gap: 5px; justify-self: start; padding: 3px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2) }
.aq-due .ico { width: 13px; height: 13px }
.aq-due.hot { background: var(--neg-light); color: var(--neg-ink) }
@media (max-width: 900px) {
  .aw-main > .aw-back { order: 0 } .aw-main > .aw-hd { order: 1 } .aw-main > .aw-req { order: 2 } .aw-main > .aw-chat { order: 3 } .aw-main > .aw-ai { order: 4 }
  .aw-main > .aw-aidid { order: 5 } .aw-main > .aw-ctx { order: 6 } .aw-main > .aw-hist { order: 7 }
}
/* ---------- переписки: список слева, сквозной поиск, история ---------- */
/* шапка окна чата — над лентой и списком: её меню «…» не уходит под карточки чата */
.m-head { position: relative; z-index: 10 }
.m-body { flex: 1; min-height: 0; display: flex; position: relative }
.m-col { flex: 1; min-width: 0; display: flex; flex-direction: column }
.m-side { position: absolute; z-index: 6; top: 0; bottom: 0; left: 0; width: min(340px, 88%); display: flex; flex-direction: column; background: var(--surface); border-right: 1px solid var(--line-2); box-shadow: var(--shadow-lg); transform: translateX(-104%); visibility: hidden; transition: transform .28s cubic-bezier(.2, .9, .2, 1), visibility 0s linear .28s }
.modal.side-on .m-side { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2, .9, .2, 1) }
.m-sscrim { position: absolute; inset: 0; z-index: 5; background: var(--scrim); opacity: 0; pointer-events: none; transition: opacity .2s }
.modal.side-on .m-sscrim { opacity: 1; pointer-events: auto }
@media (min-width: 1100px) {
  body:not(.ph-open) .modal:not(.side-hide) .m-side { position: relative; z-index: auto; width: 300px; flex: none; transform: none; visibility: visible; box-shadow: none; background: color-mix(in srgb, var(--surface) 72%, transparent); transition: none }
  body:not(.ph-open) .modal .m-sscrim, body:not(.ph-open) .ms-x { display: none }
  body:not(.ph-open) .modal:not(.side-hide) .side-t .ub { display: none }
}
@media (min-width: 1680px) {
  body.ph-open .modal:not(.side-hide) .m-side { position: relative; z-index: auto; width: 300px; flex: none; transform: none; visibility: visible; box-shadow: none; background: color-mix(in srgb, var(--surface) 72%, transparent); transition: none }
  body.ph-open .modal .m-sscrim, body.ph-open .ms-x { display: none }
  body.ph-open .modal:not(.side-hide) .side-t .ub { display: none }
}
.side-t { position: relative }
.side-t .ub { position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 2px var(--surface) }
.ms-h { display: flex; align-items: center; gap: 4px; padding: 14px 10px 4px 18px }
.ms-h b { flex: 1; font-size: 16px; font-weight: 600 }
.ms-h .iconbtn { width: 34px; height: 34px; border-radius: 10px }
.ms-q { display: flex; align-items: center; gap: 8px; margin: 8px 12px 6px; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text-3); cursor: text }
.ms-q:focus-within { border-color: var(--brand); background: var(--surface) }
.ms-q input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--text); outline: none }
.ms-q input::placeholder { color: var(--text-3) }
.ms-list { flex: 1; min-height: 0; overflow: auto; padding: 0 8px 16px; overscroll-behavior: contain }
.cl-g { padding: 14px 10px 4px; font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em }
.cl-row { width: 100%; display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: 12px; text-align: left; position: relative; color: var(--text) }
.cl-row:hover { background: var(--surface-2) }
.cl-row.on { background: var(--brand-light) }
.cl-i { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--neutral); color: var(--text-2); margin-top: 1px }
.cl-i.ok { background: var(--brand-light); color: var(--brand-ink) }
.cl-i.warn { background: var(--warn-light); color: var(--warn) }
.cl-i.info { background: var(--info-light); color: var(--info) }
.cl-row.on .cl-i { background: var(--surface) }
.cl-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px }
.cl-t { display: flex; align-items: baseline; gap: 8px; padding-right: 2px }
.cl-t b { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.cl-t time { font-size: 12px; color: var(--text-3); flex: none }
.cl-s { font-size: 12px; line-height: 1.4; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-right: 12px }
.cl-s .badge { margin-right: 6px; font-size: 12px; padding: 1px 6px; vertical-align: 1px }
.cl-row.unr .cl-t b { font-weight: 700 }
.cl-row.unr .cl-s { color: var(--text) }
.cl-u { position: absolute; right: 10px; top: 34px; width: 8px; height: 8px; border-radius: 50%; background: var(--brand) }
.cl-empty { margin: 0; padding: 16px 10px; font-size: 12px; color: var(--text-2) }
.cl-s mark, .msg.past mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px }
.msg.past { animation: none }
.cday { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; color: var(--text-3) }
.cday::before, .cday::after { content: ""; flex: 1; height: 1px; background: var(--line-2) }
.cday.today span { color: var(--brand-ink) }
.msg.past .mt { display: block; margin-top: 4px; font-size: 12px; color: var(--text-3); font-weight: 400 }
.msg.past .bubble .mt { text-align: right }
.msg.past.hit .bubble { border-color: var(--warn); box-shadow: 0 0 0 3px var(--warn-light) }
.msg.past.hit:not(.user):not(.human) .content { background: var(--warn-light); border-radius: 14px; padding: 8px 12px; margin: -8px -12px }
.msg.past.hit.human .content { box-shadow: 0 0 0 2px var(--warn) }
.resume { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 18px; background: var(--surface); border: 1px dashed var(--line-3) }
.resume.slim { padding: 0; border: 0; background: none }
.resume p { margin: 0 }
.rz-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px }
.rz-t > .ico { color: var(--brand-ink) }
.rz-t small { color: var(--text-3) }
.dlw .dl-r { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line-2) }
.dlw .dl-r .ci { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--neutral); color: var(--text-2) }
.dlw .dl-r b { display: block; font-size: 14px; font-weight: 600 }
.dlw .dl-r small { display: block; font-size: 12px; color: var(--text-2) }
.dlw .dl-r.hit { background: var(--brand-light) }
.dlw .dl-r.hit .ci { background: var(--brand); color: #fff }
.dlw .w-f small { font-size: 12px }
@container chat (max-width: 520px) { .dlw .dl-r { grid-template-columns: auto minmax(0, 1fr) } .dlw .dl-r .btn { grid-column: 2; justify-self: start } }
@media (max-width: 760px) { .m-head > [data-act="minimize"] { display: none } .ms-q input { font-size: 16px } }