/* Пульт агентов findpet. Стили из наброска (agents-console/index.html): цвета, шрифты, карточки, пилюли. */
:root{
  --bg:#eef1f4; --surface:#ffffff; --ink:#16202b; --muted:#5b6876; --line:#d5dbe2;
  --accent:#1f4fd1; --accent-soft:#e3eafc; --on-accent:#ffffff;
  --ok:#1d7a4c; --ok-soft:#dff3e8; --wait:#a35f00; --wait-soft:#fdf0d9;
  --stuck:#b3261e; --stuck-soft:#fbe3e1; --human:#1f4fd1; --human-soft:#e3eafc;
  --closed:#6b7480; --closed-soft:#eceff2; --screen:#f7f9fb;
  --f-display:"Unbounded","Onest",system-ui,sans-serif;
  --f-body:"Onest",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0f141a; --surface:#171e26; --ink:#e6ebf0; --muted:#97a3b0; --line:#2a3440;
  --accent:#7d9cff; --accent-soft:#1d2a4d; --on-accent:#0b1020;
  --ok:#5fcf95; --ok-soft:#163626; --wait:#f0b252; --wait-soft:#3a2a10;
  --stuck:#ff8a80; --stuck-soft:#43201d; --human:#7d9cff; --human-soft:#1d2a4d;
  --closed:#9aa4ae; --closed-soft:#232c35; --screen:#121920; color-scheme:dark}}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5}
h1,h2,h3,p{margin:0}
button,input,select{font:inherit;color:inherit}
a{color:var(--accent)}
code,.mono{font-family:var(--f-mono);font-size:.88em}
.boot{padding:40px 16px;color:var(--muted);text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* оболочка: телефон — колонка с нижним меню, десктоп — меню слева */
.shell{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.head{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 16px 4px;
  font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.head .who{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
.lnk{border:0;background:none;min-height:44px;min-width:44px;padding:6px 8px;border-radius:8px;color:var(--muted);font:inherit;text-decoration:underline;cursor:pointer}
.lnk:hover,.lnk:focus-visible{color:var(--accent)}
main{flex:1;padding:0 12px 96px;display:flex;flex-direction:column;gap:8px;width:100%;max-width:760px;margin:0 auto}
.top{padding:4px 4px 8px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.top h1{font-family:var(--f-display);font-size:19px;font-weight:500;letter-spacing:-.01em;text-wrap:balance}
.top span{font-size:12px;color:var(--muted)}
.nav{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(5,1fr);
  border-top:1px solid var(--line);background:var(--surface);padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
.nav a{padding:10px 0 12px;text-align:center;font-size:11px;white-space:nowrap;color:var(--muted);text-decoration:none;position:relative;min-height:48px}
.nav a.on{color:var(--accent);font-weight:600}
.nav a:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.nav i{display:block;font-style:normal;font-size:16px;line-height:1.2}
.nav b{position:absolute;top:4px;left:calc(50% + 8px);min-width:18px;padding:0 5px;border-radius:999px;background:var(--stuck);
  color:#fff;font-size:10.5px;line-height:18px;font-weight:600}
@media (min-width:900px){
  .shell{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:8px;max-width:1240px;margin:0 auto;padding-top:12px}
  .head{grid-column:1/3;padding:4px 16px 12px}
  .nav{position:static;grid-column:1;grid-row:2;display:flex;flex-direction:column;align-self:start;gap:4px;
    background:none;border:0;padding:8px 8px 0}
  .nav a{display:flex;gap:10px;align-items:center;text-align:left;padding:10px 14px;border-radius:12px;font-size:14px;min-height:44px}
  .nav a.on{background:var(--accent-soft)}
  .nav i{display:inline;width:18px;text-align:center}
  .nav b{position:static;margin-left:auto}
  main{grid-column:2;grid-row:2;max-width:none;margin:0;padding:0 16px 48px}
  .top h1{font-size:24px}
  .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:10px;align-items:start}
  .cards .group,.cards .empty{grid-column:1/-1}
  .parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:8px}
}

/* карточки */
.cards{display:flex;flex-direction:column;gap:8px}
@media (min-width:900px){.cards{display:grid}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:6px;min-width:0}
.card.alert{border-left:4px solid var(--stuck)}
.card.ask{border-left:4px solid var(--human)}
.card.quiet{border-left:4px solid var(--wait)}
.card.off{opacity:.75}
.row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.row>*{min-width:0}
.k{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.t{font-weight:600;overflow-wrap:anywhere}
.t a{color:var(--accent);text-decoration:underline}
/* зона касания 44×44 без смещения вёрстки */
.hit{display:inline-flex;align-items:center;min-height:44px;min-width:44px;margin:-11px -6px;padding:0 6px}
.sub{color:var(--muted);font-size:13px;overflow-wrap:anywhere}
.btns{display:flex;flex-wrap:wrap;gap:8px}
.b{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:10px;padding:8px 14px;min-height:44px;font-size:14px;text-decoration:none;cursor:pointer}
.b:hover{border-color:var(--accent)}
.b:focus-visible,.inp:focus-visible,.lnk:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.b.p{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.b.n{color:var(--stuck)}
.b.d{background:var(--stuck);border-color:var(--stuck);color:var(--on-accent)}
.btns.two>.b{flex:1}
.b[disabled]{opacity:.55;cursor:default}
.group{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:10px 4px 0}
.empty.unknown{border-color:var(--wait);color:var(--ink)}
.empty{background:var(--surface);border:1px dashed var(--line);border-radius:14px;padding:18px 16px;color:var(--muted);text-align:center}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.p-ok{background:var(--ok-soft);color:var(--ok)}
.p-wait{background:var(--wait-soft);color:var(--wait)}
.p-stuck{background:var(--stuck-soft);color:var(--stuck)}
.p-human{background:var(--human-soft);color:var(--human)}
.p-closed{background:var(--closed-soft);color:var(--closed)}

/* плашки состояния (шлюз, ошибки) */
.banner{border-radius:12px;padding:10px 12px;font-size:13px;background:var(--wait-soft);color:var(--ink);display:flex;flex-direction:column;gap:4px}
.banner b{color:var(--wait)}
.banner.err{background:var(--stuck-soft)}
.banner.err b{color:var(--stuck)}
.banner.info{background:var(--accent-soft)}
.banner.info b{color:var(--accent)}

/* задачи */
.seg{display:flex;gap:6px;padding:0 0 4px}
.seg a{display:inline-flex;align-items:center;min-height:44px;padding:6px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:13px;text-decoration:none}
.seg a.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.parts{display:flex;flex-direction:column;gap:6px}
.part{display:grid;grid-template-columns:52px 1fr auto;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.part .k a{color:var(--accent)}
.part .what{min-width:0}
.part .what .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.part .links{grid-column:2/4;display:flex;gap:12px;font-size:13px;flex-wrap:wrap}
.prog{display:flex;gap:3px;margin-top:4px}
.prog i{height:4px;flex:1;border-radius:2px;background:var(--line)}
.prog i.d{background:var(--ok)}
.prog i.c{background:var(--accent)}
.stg{display:flex;flex-direction:column;gap:2px}
.stg .names{display:flex;gap:3px;font-size:11.5px;color:var(--muted)}
.stg .names span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stg-none{font-size:12px;color:var(--muted);font-style:italic;margin-top:2px}

/* лента */
.tl{display:flex;flex-direction:column;padding-left:6px}
.day{font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 0 2px}
.ev{display:grid;grid-template-columns:46px 14px 1fr;gap:6px;align-items:start;padding:6px 0}
.ev .time{font-family:var(--f-mono);font-size:11px;color:var(--muted);padding-top:2px}
.ev .dot{width:9px;height:9px;border-radius:50%;margin-top:6px;background:var(--line)}
.ev .dot.ok{background:var(--ok)} .ev .dot.h{background:var(--human)} .ev .dot.w{background:var(--wait)}
.ev .txt{overflow-wrap:anywhere}
.ev .hid{color:var(--muted);font-style:italic}
select.inp{appearance:auto}

/* агенты */
.mach{gap:8px}
.meter{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:var(--accent)}
.tab{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;font-size:13px;padding:6px 0;border-top:1px dashed var(--line)}
.tab .mono{font-size:11.5px;color:var(--muted)}
.bg{font-size:12px;color:var(--muted);padding-left:12px;overflow-wrap:anywhere}

/* формы и вход */
.form{display:flex;flex-direction:column;gap:12px;width:100%;max-width:440px;margin:0 auto}
.fld{display:flex;flex-direction:column;gap:4px}
.lbl{font-size:12px;color:var(--muted);padding:0 2px}
.inp{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface);color:var(--ink);font-size:16px;min-height:44px;width:100%}
.inp.bad{border-color:var(--stuck)}
.err{color:var(--stuck);font-size:13px;min-height:0}
.hint{font-size:12.5px;color:var(--muted);padding:0 4px}
.auth{align-items:stretch;padding-top:24px}
.auth h1{font-family:var(--f-display);font-size:22px;font-weight:500;text-align:center;padding-bottom:6px}
.steps{display:flex;gap:6px;justify-content:center;padding-bottom:4px}
.steps i{width:28px;height:4px;border-radius:2px;background:var(--line)}
.steps i.d{background:var(--ok)} .steps i.c{background:var(--accent)}
.codes{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;font-family:var(--f-mono);font-size:15px}
.codes span{border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:var(--surface);text-align:center;user-select:all}
.qr{align-self:center;width:200px;height:200px;background:#fff;border-radius:10px;padding:8px}
.secret-row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
.secret-row .secret{flex:1;min-width:200px;font-size:15px;letter-spacing:.06em}
.secret{font-family:var(--f-mono);font-size:13px;overflow-wrap:anywhere;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.chk{display:flex;gap:10px;align-items:center;font-size:14px;min-height:44px}
.chk input{width:24px;height:24px;margin:0;flex:none}
.modal-back{position:fixed;inset:0;background:rgba(10,20,30,.55);display:flex;align-items:flex-end;justify-content:center;z-index:20}
.modal{background:var(--surface);border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));width:100%;max-width:480px;display:flex;flex-direction:column;gap:12px;max-height:92vh;overflow:auto}
.modal h2{font-family:var(--f-display);font-size:17px;font-weight:500}
@media (min-width:600px){.modal-back{align-items:center}.modal{border-radius:18px}}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}