/* Galgal mechanic app: charcoal ground, hi-vis orange, and a little motion. */
:root{
  --bg:#16120e; --surface:#211b15; --surface-2:#2b231b; --line:#3a3027;
  --text:#fbf5ee; --muted:#bfae9c; --orange:#ff7a1a; --orange-2:#ffa24d; --orange-ink:#1a0f05;
  --ok:#3ecf7a; --danger:#ff5d4d;
  --r:16px; --shadow:0 10px 30px rgba(0,0,0,.35);
  font-family:"Rubik","Assistant","Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);overflow-x:hidden}
.hidden{display:none!important}
button{font:inherit;color:inherit;cursor:pointer}
a{color:var(--orange-2)}

/* ---------- drifting background glows ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
.glow{position:absolute;width:55vmax;height:55vmax;border-radius:50%;filter:blur(70px);opacity:.28;
  background:radial-gradient(circle,var(--orange) 0%,transparent 65%);animation:drift 22s ease-in-out infinite}
.g1{top:-20vmax;right:-15vmax}
.g2{bottom:-25vmax;left:-20vmax;animation-duration:28s;animation-delay:-6s;
  background:radial-gradient(circle,#ff4d1a 0%,transparent 65%)}
.g3{top:35%;left:40%;width:30vmax;height:30vmax;opacity:.16;animation-duration:18s;animation-delay:-3s;
  background:radial-gradient(circle,#ffc14d 0%,transparent 65%)}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(6vmax,4vmax) scale(1.1)}
  66%{transform:translate(-5vmax,6vmax) scale(.92)}}

/* ---------- spinning wheel logo ---------- */
.wheel svg{width:100%;height:100%;fill:none;stroke:var(--orange);stroke-width:6;stroke-linecap:round}
.wheel .hub{fill:var(--orange)}
.wheel{display:inline-block;animation:spin 6s linear infinite}
.wheel.big{width:92px;height:92px;animation-duration:3.5s;filter:drop-shadow(0 0 18px rgba(255,122,26,.55))}
.wheel.small{width:30px;height:30px}
@keyframes spin{to{transform:rotate(-360deg)}}

/* ---------- login ---------- */
/* The card is anchored near the top, not centered: a centered card slid up
   whenever the on-screen keyboard shrank the visible area. A fixed top gap
   doesn't depend on the viewport's height at all, so the card stays put
   whether the keyboard is open or not. Only a mouse-driven screen (no
   on-screen keyboard to open) gets the roomier gap. dvh sizes the screen to
   what is visible; vh is the fallback for browsers without it. */
.screen.login{min-height:100vh;min-height:100dvh;display:grid;justify-items:center;align-content:start;
  padding:48px 24px 24px}
@media (pointer:fine) and (min-height:760px){.screen.login{padding-top:12vh}}
.login-card{width:min(400px,100%);background:rgba(33,27,21,.82);backdrop-filter:blur(12px);
  border:1px solid var(--line);border-radius:24px;padding:32px 24px;text-align:center;box-shadow:var(--shadow);
  animation:rise .6s cubic-bezier(.2,.9,.3,1.2)}
.brand{font-size:2rem;font-weight:800;margin:.3em 0 0;letter-spacing:.02em;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.tagline{color:var(--muted);margin:.2em 0 1.5em}
form{display:flex;flex-direction:column;gap:8px;text-align:start}
label{font-size:.9rem;color:var(--muted);margin-top:6px}
input,textarea{width:100%;padding:14px 16px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);
  color:var(--text);font:inherit;font-size:1.05rem;transition:border-color .2s,box-shadow .2s}
input.invalid{border-color:#ef5350;box-shadow:0 0 0 3px rgba(239,83,80,.2)}
.field-error{color:#ff8a80;font-size:.85rem;margin:6px 2px 2px;animation:rise .2s ease-out}
input:focus,textarea:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,122,26,.25)}
.error{color:var(--danger);min-height:1.3em;margin:4px 0 0;font-size:.95rem}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.97)}}

/* ---------- buttons ---------- */
.btn{border:0;border-radius:12px;padding:14px 18px;font-weight:700;font-size:1.02rem;transition:transform .12s,filter .2s,background .2s}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(135deg,var(--orange),var(--orange-2));color:var(--orange-ink);box-shadow:0 8px 22px rgba(255,122,26,.35)}
.btn.primary:disabled{filter:grayscale(.6) brightness(.8);cursor:default}
.btn.ghost{background:transparent;border:1px solid var(--line);color:var(--muted)}
.btn.ok{background:var(--ok);color:#06210f}
/* The two order buttons, in each app's own colour so people find theirs at a glance. */
.btn.wa{background:#25d366;color:#062b16;box-shadow:0 8px 22px rgba(37,211,102,.28)}
.btn.tg{background:#2aabee;color:#fff;box-shadow:0 8px 22px rgba(42,171,238,.25)}
.btn.small{padding:8px 12px;font-size:.9rem}
.shine{position:relative;overflow:hidden}
.shine::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(120%);animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%,60%{transform:translateX(120%)}100%{transform:translateX(-120%)}}
button:focus-visible,a:focus-visible{outline:3px solid var(--orange-2);outline-offset:2px}

/* ---------- header, tabs ---------- */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:rgba(22,18,14,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:8px}
.logo .brand{font-size:1.4rem;margin:0}
.live{margin-inline-start:auto;display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted)}
.live .dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(62,207,122,.6);animation:pulse 1.8s infinite}
.live.off .dot{background:var(--danger);animation:none}
@keyframes pulse{70%{box-shadow:0 0 0 10px rgba(62,207,122,0)}100%{box-shadow:0 0 0 0 rgba(62,207,122,0)}}
.tabs{display:flex;gap:6px;padding:12px 16px}
/* Three equal tabs that always fit a phone: they shrink, never scroll. */
.tab{flex:1 1 0;min-width:0;white-space:nowrap;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:10px 6px;color:var(--muted);font-size:.92rem;transition:all .25s}
.tab.active{background:var(--orange);color:var(--orange-ink);border-color:var(--orange);font-weight:700;transform:translateY(-1px)}
.count{display:inline-block;min-width:1.5em;padding:0 .4em;border-radius:999px;background:rgba(0,0,0,.25);font-size:.8rem}
.count.bump{animation:bump .5s}
@keyframes bump{40%{transform:scale(1.5)}}

/* ---------- job cards ---------- */
.list{padding:4px 16px 32px;display:flex;flex-direction:column;gap:14px;max-width:720px;margin:0 auto}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;box-shadow:var(--shadow);
  animation:slideIn .45s cubic-bezier(.2,.9,.3,1.15) both}
.card.fresh{border-color:var(--orange);animation:slideIn .45s cubic-bezier(.2,.9,.3,1.15) both,glowCard 1.6s ease-out 2}
@keyframes slideIn{from{opacity:0;transform:translateX(-40px) scale(.97)}}
@keyframes glowCard{50%{box-shadow:0 0 0 4px rgba(255,122,26,.35),var(--shadow)}}
.card-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{border-radius:999px;padding:4px 10px;font-size:.82rem;font-weight:700;background:var(--surface-2);color:var(--muted)}
.pill.hot{background:rgba(255,122,26,.18);color:var(--orange-2)}
.pill.ok{background:rgba(62,207,122,.16);color:var(--ok)}
.pill.bad{background:rgba(255,93,77,.14);color:var(--danger)}
.ago{margin-inline-start:auto;color:var(--muted);font-size:.85rem}
.problem{font-size:1.15rem;font-weight:700;margin:10px 0 6px}
.meta{color:var(--muted);display:flex;flex-direction:column;gap:4px}
.photos{display:flex;gap:8px;margin-top:10px;overflow-x:auto}
.photos img{width:92px;height:92px;object-fit:cover;border-radius:12px;border:1px solid var(--line);cursor:zoom-in}
.actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.actions .btn{flex:1}
.client{margin-top:12px;padding:12px;border-radius:12px;background:rgba(62,207,122,.08);border:1px solid rgba(62,207,122,.35)}

/* ---------- bid sheet ---------- */
.bid{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);animation:rise .3s ease-out}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 6px}
.chip{border:1px solid var(--line);background:var(--surface-2);border-radius:999px;padding:8px 12px;color:var(--text)}
.chip.on{background:var(--orange);color:var(--orange-ink);border-color:var(--orange);font-weight:700}

/* ---------- empty state: a bike riding across ---------- */
.empty{text-align:center;color:var(--muted);padding:48px 12px}
.road{position:relative;height:70px;overflow:hidden;margin-bottom:12px}
.road::after{content:"";position:absolute;bottom:8px;left:0;right:0;height:2px;
  background:repeating-linear-gradient(90deg,var(--line) 0 18px,transparent 18px 30px);animation:road .6s linear infinite}
.rider{position:absolute;bottom:10px;font-size:44px;animation:ride 5s linear infinite}
@keyframes ride{from{right:-60px}to{right:110%}}
@keyframes road{to{background-position:-30px 0}}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:calc(20px + env(safe-area-inset-bottom));left:50%;transform:translate(-50%,120px);
  background:var(--orange);color:var(--orange-ink);font-weight:700;padding:12px 18px;border-radius:14px;
  box-shadow:var(--shadow);transition:transform .35s cubic-bezier(.2,.9,.3,1.2);z-index:50;max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0)}

/* ---------- photo viewer ---------- */
.viewer{position:fixed;inset:0;background:rgba(0,0,0,.85);display:grid;place-items:center;z-index:60;animation:fade .2s}
.viewer img{max-width:94vw;max-height:88vh;border-radius:12px}
@keyframes fade{from{opacity:0}}

/* ---------- account sheet ---------- */
.muted{color:var(--muted)}
.row-btn{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:0;padding:4px 0;
  font-weight:700;font-size:1.02rem;text-align:start}
.row-btn .go{color:var(--muted);font-size:1.4rem;transition:transform .2s}
.row-btn[aria-expanded="true"] .go{transform:rotate(-90deg)}
#pass-form{margin-top:10px}
.solo-bar{display:flex}
.legal{margin:14px 0 0;font-size:.85rem;color:var(--muted)}
#setup-name-row{display:flex;flex-direction:column;gap:8px}
.sheet{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;animation:fade .2s}
.sheet-card{position:relative;width:min(520px,100%);max-height:90dvh;overflow:auto;background:var(--surface);
  border:1px solid var(--line);border-radius:22px 22px 0 0;padding:20px 16px calc(20px + env(safe-area-inset-bottom));animation:rise .3s ease-out}
.sheet-close{position:absolute;top:12px;inset-inline-end:12px}
.sheet-name{margin:4px 0 0;font-size:1.3rem}
.sheet-sec{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.sheet-sec h3{margin:0 0 6px;font-size:1.02rem}
.sheet-sec p{margin:0 0 4px}
#admin-btn[aria-pressed="true"]{background:var(--orange);color:var(--orange-ink);border-color:var(--orange)}
#account-btn{max-width:40vw;overflow:hidden;text-overflow:clip;white-space:nowrap}

/* ---------- admin panel ---------- */
.admin-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.admin-head h2{margin:0;flex:1}
.period{margin:0;width:100%}
.tile{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:16px;box-shadow:var(--shadow);animation:slideIn .4s both;transition:border-color .2s,transform .12s}
.tile:hover{border-color:var(--orange)}
.tile:active{transform:scale(.99)}
.tile-top{display:flex;align-items:baseline;gap:10px}
.tile-title{font-weight:700;font-size:1.1rem;flex:1}
.tile-top b{font-size:2rem;color:var(--orange-2)}
.tile .go{color:var(--muted);font-size:1.6rem;line-height:1}
.tile-sub{color:var(--muted);font-size:.92rem;margin-top:8px}
.bar{display:flex;gap:3px;height:10px;margin-top:12px;border-radius:999px;overflow:hidden}
.seg{min-width:6px;border-radius:999px}
.seg.open,.dot.open{background:var(--orange)}
.seg.progress,.dot.progress{background:#ffc14d}
.seg.done,.dot.done{background:var(--ok)}
.seg.cancelled,.dot.cancelled{background:var(--danger)}
.seg.expired,.dot.expired{background:var(--muted)}
.seg.empty{flex:1;background:var(--surface-2)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:.88rem;color:var(--muted)}
.legend .dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-inline-end:5px}
.user-stats{display:flex;align-items:center;gap:14px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:.85rem;color:var(--muted)}
.user-stats b{display:block;font-size:1.15rem;color:var(--text)}
.user-stats em{margin-inline-start:auto;font-style:normal;font-size:.8rem}
.user{animation:slideIn .35s both}
.hint{background:linear-gradient(135deg,rgba(255,122,26,.16),rgba(255,162,77,.08));border:1px solid rgba(255,122,26,.5);
  border-radius:var(--r);padding:14px;animation:rise .4s ease-out}
.hint p{margin:6px 0 0;color:var(--muted);font-size:.92rem}
.hint .actions .btn{flex:0 1 auto}
.admin h2{margin:8px 0 0;font-size:1.15rem}
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:12px;animation:slideIn .4s both}
.stat b{display:block;font-size:1.6rem;color:var(--orange-2)}
.stat span{color:var(--muted);font-size:.85rem}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.row .grow{flex:1;min-width:0}
.user{border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--surface-2)}
.user .meta{font-size:.88rem}
.inline-form{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.inline-form input{flex:1;min-width:140px;padding:10px 12px;font-size:1rem}
.btn.danger{background:transparent;border:1px solid rgba(255,93,77,.5);color:var(--danger)}
.btn.danger.sure{background:var(--danger);color:#fff}
table.mini{width:100%;border-collapse:collapse;font-size:.9rem}
table.mini th,table.mini td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:start}
table.mini th{color:var(--muted);font-weight:600}
.log li{padding:6px 0;border-bottom:1px solid var(--line);font-size:.9rem;list-style:none}
.log{margin:0;padding:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ---------- who are you (website, signed out) ---------- */
.gate-choice{display:flex;flex-direction:column;gap:10px}
.gate-choice a.btn{display:block;text-decoration:none}
.gate-note{color:var(--muted);font-size:.92rem;margin:0 0 14px;line-height:1.5}
.client-link{margin-bottom:0}
.source-row{display:flex;align-items:baseline;gap:10px;padding:8px 0;border-top:1px dashed var(--line);margin-top:8px}
.source-row span{flex:1}
.source-row b{font-size:1.15rem;color:var(--text)}
.source-row em{font-style:normal;font-size:.8rem;color:var(--muted);min-width:5em;text-align:end}

/* ---------- the bot chat demo (chat-demo.js): Telegram on Android, dark theme ---------- */
.chat-demo{--cd-h:540px;container-type:inline-size;direction:ltr;width:100%;max-width:330px;margin:0 auto;padding:7px;border-radius:42px;background:#0a0a0c;
  box-shadow:0 0 0 1px #2c2620,0 24px 50px rgba(0,0,0,.55),0 0 70px rgba(255,122,26,.14);text-align:left;color:#fff;
  font:13.5px/1.36 Roboto,"Segoe UI",system-ui,sans-serif;-webkit-user-select:none;user-select:none}
.cd-phone{border-radius:35px;overflow:hidden;background:#121a23}
.cd-bar{display:flex;justify-content:space-between;align-items:center;padding:9px 24px 6px;font-size:12px;font-weight:600}
.cd-bar-r{display:flex;gap:5px;align-items:center}
.cd-bar-r svg{width:14px;height:10px;fill:#fff}
.cd-batt{font-size:9.5px;font-weight:700;line-height:1;padding:2px 4px;border-radius:4px;background:#fff;color:#121a23}
.cd-screen{position:relative;height:var(--cd-h);overflow:hidden;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240' fill='none' stroke='white' stroke-opacity='.075' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='22' cy='52' r='9'/%3E%3Ccircle cx='52' cy='52' r='9'/%3E%3Cpath d='M22 52l9-15h14l7 15M31 37l7 15 7-15M28 33h7'/%3E%3Cpath d='M150 72l22-22'/%3E%3Ccircle cx='176' cy='46' r='7'/%3E%3Cpath d='M173 43l6 6'/%3E%3Cpath d='M205 112l4 9 10 1-7 7 2 10-9-5-9 5 2-10-7-7 10-1z'/%3E%3Cpath d='M62 168c-12-9-15-17-9-21 4-3 9-1 9 3 0-4 5-6 9-3 6 4 3 12-9 21z'/%3E%3Cpath d='M114 152h30a8 8 0 0 0-2-16 11 11 0 0 0-21-2 8 8 0 0 0-7 18z'/%3E%3Cpath d='M26 202l26 6-15 22z'/%3E%3Ccircle cx='36' cy='210' r='1.5'/%3E%3Ccircle cx='42' cy='216' r='1.5'/%3E%3Ccircle cx='196' cy='204' r='10'/%3E%3Cellipse cx='196' cy='204' rx='19' ry='5' transform='rotate%28-20 196 204%29'/%3E%3Cpath d='M100 20c6 0 6 8 12 8s6-8 12-8 6 8 12 8'/%3E%3Ccircle cx='120' cy='96' r='3'/%3E%3Ccircle cx='230' cy='20' r='2'/%3E%3Cpath d='M136 196v18M127 205h18'/%3E%3Crect x='82' y='206' width='18' height='22' rx='4'/%3E%3Cpath d='M86 206v-4h10v4'/%3E%3C/svg%3E") 0 0/200px,linear-gradient(165deg,#1f2d3c,#141d27 75%)}
/* the chat fades out under the floating header */
.cd-screen::before{content:"";position:absolute;inset:0 0 auto;height:84px;z-index:1;pointer-events:none;
  background:linear-gradient(#18232f 35%,rgba(24,35,47,0))}
.cd-chat{position:absolute;inset:0 0 58px;overflow:hidden;transition:bottom .25s ease}
.cd-screen.kb .cd-chat{bottom:108px}
.cd-track{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:5px;padding:0 9px 6px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .5s}
.cd-screen.cd-fade .cd-track{opacity:0}
.cd-date{align-self:center;background:rgba(0,0,0,.3);border-radius:12px;padding:3px 10px;font-size:12px;font-weight:500;margin:4px 0}
.cd-row{display:flex;flex-direction:column;max-width:86%;align-self:flex-start}
.cd-row.out{align-self:flex-end}
.cd-msg{position:relative;padding:6px 10px 4px;border-radius:17px}
.cd-msg.in{background:#212d3b;border-bottom-left-radius:0;margin-left:8px}
.cd-msg.out{border-bottom-right-radius:0;margin-right:8px;background-color:rgb(60,134,242);background-repeat:no-repeat;
  background-image:linear-gradient(180deg,rgb(150,72,220),rgb(122,86,228) 45%,rgb(82,112,236) 75%,rgb(56,134,242))}
.cd-msg.in.cont{border-bottom-left-radius:6px}
.cd-msg.out.cont{border-bottom-right-radius:6px}
.cd-tail{position:absolute;bottom:0;width:9px;height:17px}
.cd-msg.in .cd-tail{left:-8.6px;fill:#212d3b}
.cd-msg.out .cd-tail{right:-8.6px;fill:var(--tail,rgb(60,134,242));transform:scaleX(-1)}
.cd-msg.cont .cd-tail{display:none}
.cd-text{white-space:pre-wrap;overflow-wrap:anywhere;text-align:start}
.cd-text a{color:#6ab3f3}
.cd-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:1px}
.cd-time{margin-left:auto;display:flex;align-items:center;gap:3px;font-size:11px;color:rgba(255,255,255,.45);white-space:nowrap}
.cd-msg.out .cd-time{color:rgba(255,255,255,.78)}
.cd-checks{width:15px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cd-msg.inline{display:flex;align-items:flex-end;gap:9px}
.cd-msg.inline .cd-foot{margin:0 0 -1px}
.cd-react{display:inline-flex;align-items:center;gap:3px;padding:2px 3px 2px 7px;border-radius:14px;background:rgba(255,255,255,.2);
  font-size:13px;animation:cdPop .35s cubic-bezier(.2,.9,.3,1.4) both}
.cd-react-by svg{width:17px;height:17px;display:block}
.cd-btns{display:flex;gap:4px;margin:4px 0 0 8px;overflow:hidden;transition:height .25s,opacity .25s,margin .25s}
.cd-btn{position:relative;overflow:hidden;flex:1;text-align:center;padding:9px 6px;border-radius:9px;background:rgba(33,45,59,.82);
  font-weight:500;direction:rtl;transition:background .2s}
.cd-btn:first-child{border-bottom-left-radius:16px}.cd-btn:last-child{border-bottom-right-radius:16px}
.cd-btn.tapped{background:rgba(70,90,115,.9)}
.cd-ripple{position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px;border-radius:50%;background:rgba(255,255,255,.35);
  pointer-events:none;animation:cdRipple .55s ease-out forwards}
.cd-head{position:absolute;top:8px;left:8px;right:8px;z-index:2;display:flex;align-items:center;gap:6px}
.cd-round{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(33,44,57,.94)}
.cd-round svg{width:19px;height:19px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cd-round circle{fill:#fff;stroke:none}
.cd-pill{flex:1;min-width:0;display:flex;align-items:center;gap:9px;padding:3px 12px 3px 3px;border-radius:22px;background:rgba(33,44,57,.94)}
.cd-avatar svg{width:34px;height:34px;display:block}
.cd-who{display:flex;flex-direction:column;line-height:1.2}
.cd-who b{font-size:15px;font-weight:600}
.cd-status{font-size:12px;color:rgba(255,255,255,.55)}
.cd-status.typing{color:#6ab3f3}
.cd-bottom{position:absolute;left:0;right:0;bottom:0;z-index:2}
.cd-startbar{padding:8px 8px 10px}
.cd-start{position:relative;overflow:hidden;display:block;text-align:center;padding:11px;border-radius:22px;background:#212d3b;
  color:#6ab3f3;font-weight:600;letter-spacing:.05em}
.cd-screen.started .cd-startbar,.cd-screen:not(.started) .cd-inputrow{display:none}
.cd-inputrow{display:flex;align-items:flex-end;gap:6px;padding:8px}
.cd-menu{flex:none;display:flex;align-items:center;gap:5px;height:40px;padding:0 13px 0 11px;border-radius:20px;background:#3390ec;
  font-size:14px;font-weight:600}
/* while typing, Menu shrinks to its icon to give the text room */
.cd-screen.typing .cd-menu{padding:0;width:40px;justify-content:center;font-size:0;gap:0}
.cd-screen.typing .cd-field>svg:last-child{display:none}
.cd-menu svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.3;stroke-linecap:round}
.cd-field{flex:1;min-width:0;min-height:40px;display:flex;align-items:flex-end;gap:7px;padding:10px 10px;border-radius:20px;background:#212d3b}
.cd-field svg{flex:none;width:20px;height:20px;fill:none;stroke:rgba(255,255,255,.5);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cd-typed{flex:1;min-width:0;line-height:20px;text-align:start}
.cd-typed:empty::before{content:"Message";color:rgba(255,255,255,.45)}
.cd-action{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#3390ec}
.cd-action svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.cd-kb{padding:6px 8px 10px;background:#17212b}
.cd-screen:not(.kb) .cd-kb{display:none}
.cd-kbbtn{display:block;padding:9px;border-radius:9px;background:#2a3949;text-align:center;direction:rtl}
/* a narrow phone (the sign-in card) has no room for the paperclip */
@container (max-width:300px){.cd-field>svg:last-child{display:none}.cd-menu{padding:0 11px 0 9px;font-size:13px}}
@keyframes cdPop{from{opacity:0;transform:scale(.5)}}
@keyframes cdRipple{to{transform:scale(10);opacity:0}}
.gate-card .chat-demo{--cd-h:400px;margin:0 auto 18px}
.gate-card .brand{margin-top:0}