:root{
  --navy:#262A4A; --blue:#1876E6; --lblue:#D5E8FE; --xlblue:#E7F1FF;
  --grey:#6B7086; --grey2:#9AA0B4; --magenta:#C64FA0; --teal:#00A88F; --purple:#806EDB;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:'Poppins','Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--xlblue); color:var(--navy);
  -webkit-font-smoothing:antialiased; min-height:100dvh;
  padding-bottom:env(safe-area-inset-bottom);
}

.app-head{
  position:sticky; top:0; z-index:10; background:var(--navy); color:#fff;
  padding:14px 18px calc(14px); padding-top:calc(14px + env(safe-area-inset-top));
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.brand{font-weight:500; font-size:17px; letter-spacing:.01em}
.status{display:flex; align-items:center; gap:8px; font-size:13px; opacity:.85}
.status .dot{width:9px;height:9px;border-radius:50%;background:#FFC24B;transition:background .3s}
.status.online .dot{background:#3AD07E}
.status.offline .dot{background:var(--grey2)}

#main{max-width:560px; margin:0 auto; padding:18px 16px 40px; display:flex; flex-direction:column; gap:14px}

.card{background:#fff; border-radius:18px; padding:22px 20px; box-shadow:0 8px 30px rgba(38,42,74,.08)}
.eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); font-weight:500}
#ctx-prompt{font-size:26px; line-height:1.2; font-weight:500; margin:8px 0 16px}

.chips{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:16px}
.chip-group{margin-bottom:16px}
.chip-group-label{font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:var(--grey2); font-weight:500; margin-bottom:8px}
.chips-row{display:flex; flex-wrap:wrap; gap:9px}
.chip{
  border:2px solid var(--lblue); background:#fff; color:var(--navy);
  border-radius:999px; padding:9px 16px; font:inherit; font-size:15px; font-weight:500; cursor:pointer;
  transition:all .12s;
}
.chip[aria-pressed="true"]{background:var(--sel,var(--blue)); border-color:var(--sel,var(--blue)); color:#fff}
.chip .cnt{opacity:.6; font-weight:400; margin-left:4px}
.chip[aria-pressed="true"] .cnt{opacity:.85}

.fld{display:block}
.fld>span{display:block; font-size:14px; color:var(--grey); margin-bottom:7px}
#input,.name{
  width:100%; border:2px solid #E2E8F4; border-radius:12px; padding:14px 15px;
  font:inherit; font-size:17px; color:var(--navy); background:#fff; resize:none;
}
#input:focus,.name:focus{outline:none; border-color:var(--blue)}
.name{margin-top:10px}

.send{
  width:100%; margin-top:14px; border:0; border-radius:12px; padding:16px;
  background:var(--blue); color:#fff; font:inherit; font-size:18px; font-weight:500; cursor:pointer;
  transition:opacity .15s, transform .05s;
}
.send:disabled{opacity:.4}
.send:not(:disabled):active{transform:scale(.99)}

.hint{margin-top:14px; font-size:14px; line-height:1.45; color:var(--grey)}
.link{
  align-self:center; background:none; border:0; color:var(--blue); font:inherit; font-size:16px;
  font-weight:500; cursor:pointer; padding:6px 10px;
}

.manual{display:flex; flex-direction:column; gap:8px}
.manual .grp{background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 4px 16px rgba(38,42,74,.06)}
.manual .grp>button{
  width:100%; text-align:left; border:0; background:#fff; font:inherit; font-size:17px; font-weight:500;
  color:var(--navy); padding:16px 18px; cursor:pointer; display:flex; justify-content:space-between; align-items:center;
}
.manual .grp .subs{display:none; padding:0 14px 14px; flex-wrap:wrap; gap:8px}
.manual .grp.open .subs{display:flex}

.mine-wrap{padding-top:18px}
.mine{display:flex; flex-direction:column; gap:9px; margin-top:10px}
.mine .m{
  display:flex; align-items:flex-start; gap:10px; background:#F5F8FD; border-radius:12px; padding:12px 14px;
  border-left:5px solid var(--accent,var(--blue)); font-size:16px; line-height:1.35;
}
.mine .m .txt{flex:1}
.mine .m .tag{font-size:12px; color:var(--grey2); display:block; margin-bottom:2px}
.mine .m .rm{border:0; background:none; color:var(--grey2); font-size:16px; cursor:pointer; line-height:1}

#toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(20px);
  background:var(--navy); color:#fff; padding:13px 22px; border-radius:26px; font-size:16px;
  opacity:0; transition:opacity .2s, transform .2s; pointer-events:none; z-index:50; box-shadow:0 10px 30px rgba(0,0,0,.3);
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}