/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
  --y:       #ffd705;
  --y-soft:  rgba(255,215,5,.10);
  --y-brd:   rgba(255,215,5,.32);
  --g1: #15bc5e; --g2: #00c054; --g3: #618f3b;
  --grad-h:  linear-gradient(139deg,#15bc5e 0%,#1f5a39 100%);
  --grad-u:  linear-gradient(314deg,#618f3b 0%,#00c054 100%);
  --bg-page: #0e1a12; --bg-w: #111d14; --bg-card: #162019;
  --bg-h1:   #1c2a1f; --bg-h2:  #223228;
  --t1: rgba(255,255,255,.92); --t2: rgba(255,255,255,.60); --t3: rgba(255,255,255,.32);
  --bdr1: rgba(0,192,84,.12); --bdr2: rgba(0,192,84,.22);
  --radius-w: 22px;
  --header-h: 68px;
  --input-h: 64px;
  /* Widget dimensions */
  --w-width: 380px;
  --w-height: 640px;
  --w-bottom: 28px;
  --w-left: 28px;
  --fab-size: 60px;
  --fab-bottom: 28px;
  --fab-left: 28px;
}

/* Tablet */
@media (max-width: 768px) {
  :root {
    --w-width: 360px;
    --w-height: 600px;
    --w-bottom: 16px;
    --w-left: 16px;
    --fab-bottom: 20px;
    --fab-left: 20px;
  }
}

/* Mobile full-screen */
@media (max-width: 480px) {
  :root {
    --w-width: 100vw;
    --w-height: 100%;
    --w-bottom: 0px;
    --w-left: 0px;
    --radius-w: 0px;
    --fab-size: 56px;
    --fab-bottom: 80px;
    --fab-left: 20px;
  }
}

/* ═══════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}


/* ═══════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════ */
@keyframes ring{0%,100%{box-shadow:0 4px 18px rgba(0,140,50,.28),0 0 0 0 rgba(21,188,94,.4)}50%{box-shadow:0 4px 18px rgba(0,140,50,.28),0 0 0 14px rgba(21,188,94,0)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes sh{0%{left:-65%}100%{left:115%}}
@keyframes yp{0%,100%{box-shadow:0 0 0 0 rgba(255,215,5,.5)}50%{box-shadow:0 0 0 7px rgba(255,215,5,0)}}
@keyframes td{0%,80%,100%{transform:scale(.7);opacity:.3}40%{transform:scale(1);opacity:1}}
@keyframes slideIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes slideUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes wIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes cardExpand{from{width:0;opacity:0}to{width:300px;opacity:1}}

/* ═══════════════════════════════════════════════════
   FAB LAUNCHER
═══════════════════════════════════════════════════ */
#launcher{
  position:fixed;
  bottom:var(--fab-bottom);
  left:var(--fab-left);
  z-index:9000;
  display:flex;
  flex-direction:row;
  align-items:flex-end;
  gap:10px;
}

#fab{
  width:var(--fab-size);
  height:var(--fab-size);
  border-radius:50%;
  background:var(--grad-h);
  border:2.5px solid var(--y);
  overflow:hidden;
  position:relative;
  cursor:pointer;
  flex-shrink:0;
  transition:transform .2s ease,box-shadow .2s;
  animation:ring 3s 4s ease-in-out infinite;
  box-shadow:0 6px 24px rgba(0,100,40,.4);
}
#fab:hover{transform:scale(1.08)}
#fab:active{transform:scale(.95)}
#fab img{width:100%;height:100%;border-radius:50%;object-fit:cover;position:absolute;inset:0}

/* Launcher card */
#lcard{
  background:var(--bg-card);
  border:1.5px solid var(--bdr2);
  border-radius:18px 18px 18px 4px;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  max-width:300px;
  width:300px;
  opacity:0;
  pointer-events:none;
  transform:translateX(10px) scale(.96);
  transform-origin:left bottom;
  transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.4,.64,1);
  box-shadow:0 8px 28px rgba(0,0,0,.45),0 0 0 0 transparent;
}
#lcard.show{opacity:1;pointer-events:all;transform:none}
.lcshim{position:absolute;top:0;left:-100%;width:55%;height:100%;pointer-events:none;z-index:1;background:linear-gradient(90deg,transparent,rgba(0,164,0,.06),transparent);animation:sh 4.5s 1.5s ease-in-out infinite}
.lci{min-width:280px;padding:13px 36px 14px 15px;position:relative;z-index:2}
.lcs{display:flex;align-items:center;gap:5px;margin-bottom:5px}
.lcdot{width:6px;height:6px;border-radius:50%;background:#00c054;box-shadow:0 0 5px rgba(0,192,84,.7);animation:blink 2s infinite;flex-shrink:0}
.lclbl{font-family:'Unbounded',sans-serif;font-size:8px;font-weight:600;color:var(--g2);letter-spacing:.1em;text-transform:uppercase;opacity:.65}
#greetText{font-size:13.5px;font-weight:500;color:var(--t1);line-height:1.4;min-height:19px}
.cur{display:inline-block;width:2px;height:13px;background:var(--g1);vertical-align:text-bottom;margin-left:1px;border-radius:1px;animation:blink .75s step-end infinite}

#lcaps{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1),margin-top .4s ease}
#lcaps.open{max-height:140px;margin-top:10px}
.lcaps-line{height:1px;background:var(--bdr1);margin-bottom:9px;opacity:0;transition:opacity .3s .1s}
#lcaps.open .lcaps-line{opacity:1}
.lcap{display:flex;align-items:center;gap:9px;padding:6px 4px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .4s cubic-bezier(.34,1.4,.64,1)}
.lcap.on{opacity:1;transform:none}
.lcap-i{width:24px;height:24px;border-radius:50%;background:var(--bg-h1);border:1px solid var(--bdr1);display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.lcap-t{font-size:12.5px;font-weight:600;color:var(--t2);flex:1;transition:color .15s}
.lcap-a{font-size:11px;color:var(--t3);transition:transform .2s,color .2s}
.lcap:hover .lcap-t{color:var(--t1)}
.lcap:hover .lcap-a{transform:translateX(3px);color:var(--g2)}
.lcap.audit{background:var(--y-soft);border:1px solid var(--y-brd);border-radius:10px;padding:7px 9px;margin-top:3px;animation:yp 2.5s 1.5s ease-in-out infinite}
.lcap.audit .lcap-i{background:rgba(255,215,5,.15);border-color:rgba(255,215,5,.35)}
.lcap.audit .lcap-t{color:#ffd705;font-weight:700}
.lcap.audit .lcap-a{color:rgba(255,215,5,.5)}
.free-badge{font-size:9px;font-weight:800;color:#fff;background:var(--g2);border-radius:4px;padding:2px 7px;letter-spacing:.3px;flex-shrink:0}
#lclose{position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;background:var(--bg-h1);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--t3);transition:all .15s;z-index:5}
#lclose:hover{background:var(--bg-h2);color:var(--t1)}
#lclose svg{width:8px;height:8px;display:block}

/* Mobile: launcher card max-width */
@media (max-width:480px){
  #lcard{max-width:calc(100vw - 90px);width:calc(100vw - 90px)}
  .lci{min-width:0}
}

/* ═══════════════════════════════════════════════════
   WIDGET PANEL
═══════════════════════════════════════════════════ */
#widget{
  position:fixed;
  bottom:var(--w-bottom);
  left:var(--w-left);
  width:var(--w-width);
  height:var(--w-height);
  /* не выходить за верхний край экрана */
  max-height:calc(100dvh - var(--w-bottom) - 16px);
  z-index:9001;
  border-radius:var(--radius-w);
  overflow:hidden;
  background:var(--bg-w);
  box-shadow:0 24px 64px rgba(0,0,0,.55),0 0 0 1.5px var(--bdr1);
  display:none;
  flex-direction:column;
  animation:wIn .35s cubic-bezier(.34,1.4,.64,1) both;
  padding-bottom:env(safe-area-inset-bottom,0px);
  touch-action:pan-y;
}
#widget.open{display:flex}

/* Mobile: full screen adjustments */
@media (max-width:480px){
   #widget{
    border-radius:0;
    box-shadow:none;
    top:0;
    bottom:0;
    height:100dvh;
    max-height:100dvh;
    padding-bottom:env(safe-area-inset-bottom,8px);
    touch-action:pan-y;
  }
  /* Slide up from bottom on mobile */
  @keyframes wIn{
    from{opacity:0;transform:translateY(40px)}
    to{opacity:1;transform:none}
  }
}

/* ═══════════════════════════════════════════════════
   HEADERS
═══════════════════════════════════════════════════ */
.wh{
  background:var(--grad-h);
  padding:14px 14px 14px 16px;
  display:flex;
  align-items:center;
  gap:11px;
  position:relative;
  overflow:hidden;
  flex-shrink:0;
  min-height:var(--header-h);
}
.wh::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08) 0%,transparent 100%);pointer-events:none}
.wh-av{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.25);overflow:hidden;flex-shrink:0;position:relative;z-index:1}
.wh-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.whi{flex:1;position:relative;z-index:1;min-width:0}
.whn{font-family:'Unbounded',sans-serif;font-size:14px;font-weight:700;color:#fff;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.whs{font-size:11px;color:rgba(255,255,255,.72);margin-top:3px;display:flex;align-items:center;gap:5px}
.whsd{width:6px;height:6px;border-radius:50%;background:var(--y);box-shadow:0 0 5px rgba(255,215,5,.9);flex-shrink:0}
.wh-acts{display:flex;align-items:center;gap:6px;position:relative;z-index:1;flex-shrink:0}
.wh-btn{width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.15);border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.85);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .2s;flex-shrink:0}
.wh-btn:hover{background:rgba(0,0,0,.3)}
.wh-btn:active{transform:scale(.93)}
.wh-btn svg{width:14px;height:14px;display:block}

/* Chat header */
.ch{
  background:var(--bg-card);
  border-bottom:1.5px solid var(--bg-h2);
  padding:0 12px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
  height:var(--header-h);
}
.ch-back{
  display:flex;align-items:center;gap:6px;
  font-size:14px;font-weight:700;color:var(--t1);
  cursor:pointer;background:none;border:none;
  font-family:'Golos Text',sans-serif;
  transition:color .15s;
  padding:8px 0;
  touch-action:manipulation;
  margin-right:auto;
}
.ch-back:hover{color:var(--g2)}
.ch-back svg{width:16px;height:16px;flex-shrink:0}
.ch-av{width:34px;height:34px;border-radius:50%;overflow:hidden;flex-shrink:0;border:1.5px solid var(--bdr2)}
.ch-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.ch-info{flex:1;min-width:0}
.ch-name{font-size:13px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-sub{font-size:10.5px;color:var(--t3);display:flex;align-items:center;gap:4px;margin-top:1px}
.ch-sub-dot{width:5px;height:5px;border-radius:50%;background:#00c054;flex-shrink:0}
.ch-acts{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ch-btn{width:32px;height:32px;border-radius:50%;background:var(--bg-h1);border:1.5px solid var(--bdr1);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}
.ch-btn:hover{background:var(--bg-h2);color:var(--t1)}
.ch-btn:active{transform:scale(.93)}
.ch-btn svg{width:14px;height:14px;display:block}

/* ═══════════════════════════════════════════════════
   SCROLL BODY
═══════════════════════════════════════════════════ */
.wscroll{
  overflow-y:auto;
  flex:1;
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  background:var(--bg-w);
  min-height:0;
  -webkit-overflow-scrolling:touch;
}
.wscroll::-webkit-scrollbar{width:3px}
.wscroll::-webkit-scrollbar-track{background:transparent}
.wscroll::-webkit-scrollbar-thumb{background:var(--bdr1);border-radius:3px}

/* ═══════════════════════════════════════════════════
   HOME SCREEN
═══════════════════════════════════════════════════ */
.wgreet{text-align:center;padding:20px 18px 8px}
.wgreet-title{font-family:'Unbounded',sans-serif;font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-.4px;margin-bottom:5px}
.wgreet-sub{font-size:12.5px;color:var(--t3)}

/* Audit card */
.wa{
  margin:14px 12px 0;
  border-radius:16px;overflow:hidden;
  border:1.5px solid var(--y-brd);
  cursor:pointer;position:relative;
  background:linear-gradient(139deg,#1e5c2e 0%,#0f3018 100%);
  transition:transform .2s,box-shadow .2s;
}
.wa:hover{transform:translateY(-2px);box-shadow:0 8px 26px rgba(255,215,5,.14)}
.wa:active{transform:scale(.98)}
.wa::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--y),transparent)}
.wasm{position:absolute;top:0;left:-100%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,215,5,.06),transparent);animation:sh 5s 2s ease-in-out infinite;pointer-events:none}
.wai{padding:13px 14px 14px;position:relative;z-index:1}
.wa-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:7px}
.wabadge{display:inline-flex;align-items:center;gap:5px;background:rgba(255,215,5,.15);border:1px solid var(--y-brd);border-radius:100px;padding:3px 10px 3px 7px;font-size:10px;font-weight:700;color:#ffd705;letter-spacing:.3px;white-space:nowrap;flex-shrink:0;margin-top:2px}
.wabadge::before{content:'';width:5px;height:5px;border-radius:50%;background:#ffd705;box-shadow:0 0 4px rgba(255,215,5,.8);animation:blink 1.5s infinite}
.watitle{font-family:'Unbounded',sans-serif;font-size:14px;font-weight:800;color:#fff;line-height:1.35;letter-spacing:-.3px}
.watitle em{font-style:normal;color:#ffd705}
.wadesc{font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.6;margin-bottom:12px}
.wabtns{display:flex;gap:8px;flex-wrap:wrap}
.wabtn{background:var(--y);color:#0a0700;border:none;border-radius:10px;padding:9px 16px;font-family:'Unbounded',sans-serif;font-size:11px;font-weight:800;cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .2s;letter-spacing:-.1px;touch-action:manipulation}
.wabtn:hover{background:#ffe033;box-shadow:0 4px 14px rgba(255,215,5,.35);transform:translateY(-1px)}
.wabtn:active{transform:scale(.96)}
.wabtn svg{flex-shrink:0}
.wabtn2{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);border:1.5px solid rgba(255,255,255,.15);border-radius:10px;padding:9px 16px;font-size:11.5px;font-weight:600;cursor:pointer;font-family:'Golos Text',sans-serif;transition:all .2s;touch-action:manipulation}
.wabtn2:hover{background:rgba(255,255,255,.14);color:#fff}

/* Services */
.svc-section{padding:16px 12px 4px}
.svc-label{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:.8px;text-transform:uppercase;margin-bottom:10px}
.svc-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.svc-card{
  background:var(--bg-card);border:1.5px solid var(--bg-h2);
  border-radius:13px;padding:12px 10px 11px;
  display:flex;flex-direction:column;align-items:flex-start;gap:7px;
  cursor:pointer;transition:all .18s;touch-action:manipulation;
}
.svc-card:hover{background:var(--bg-h1);border-color:var(--bdr2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,120,40,.1)}
.svc-card:active{transform:scale(.96)}
.svc-card.wide{grid-column:span 2;flex-direction:row;align-items:center;gap:12px;padding:12px 14px;background:var(--y-soft);border-color:var(--y-brd)}
.svc-card.wide:hover{background:rgba(255,215,5,.18);border-color:rgba(255,215,5,.5)}
.svc-icon{width:34px;height:34px;border-radius:10px;background:var(--bg-h1);border:1px solid var(--bdr1);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.svc-card.wide .svc-icon{background:rgba(255,215,5,.15);border-color:rgba(255,215,5,.32)}
.svc-svg{width:18px;height:18px;display:block;filter:brightness(0) saturate(100%) invert(85%) sepia(60%) saturate(500%) hue-rotate(5deg) brightness(105%)}
.svc-card.wide .svc-svg{width:20px;height:20px}
.svc-name{font-size:11.5px;font-weight:600;color:var(--t1);line-height:1.3}
.svc-card.wide .svc-name{font-size:12.5px;color:#ffd705;font-weight:700}
.svc-sub{font-size:10px;color:var(--t3);line-height:1.4;margin-top:1px}
.svc-card.wide .svc-sub{color:rgba(255,215,5,.45)}
.svc-arr{margin-left:auto;font-size:14px;color:rgba(255,215,5,.4);transition:transform .18s,color .18s;flex-shrink:0}
.svc-card.wide:hover .svc-arr{transform:translateX(3px);color:rgba(255,215,5,.85)}

/* Chips */
.wchips{display:flex;gap:6px;padding:10px 12px 16px;flex-wrap:wrap}
.chip{background:var(--bg-card);border:1.5px solid var(--bg-h2);border-radius:100px;padding:6px 14px;font-size:12px;color:var(--t2);cursor:pointer;transition:all .15s;touch-action:manipulation}
.chip:hover{border-color:var(--bdr2);color:var(--g2);background:var(--bg-h1)}
.chip:active{transform:scale(.95)}

/* ═══════════════════════════════════════════════════
   CHAT SCREEN
═══════════════════════════════════════════════════ */
#stateChat{display:none;flex-direction:column;height:100%}
.chat-disclaimer{font-size:10.5px;color:var(--t3);text-align:center;padding:10px 16px 6px;line-height:1.55}
.chat-msgs{
  overflow-y:auto;padding:12px 14px 10px;
  display:flex;flex-direction:column;gap:10px;
  background:var(--bg-w);flex:1;min-height:0;
  -webkit-overflow-scrolling:touch;
}
.chat-msgs::-webkit-scrollbar{width:3px}
.chat-msgs::-webkit-scrollbar-thumb{background:var(--bdr1);border-radius:3px}
.mrow{display:flex;align-items:flex-end;gap:8px}
.mav{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;border:1.5px solid var(--bdr1)}
.mav img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bbot{background:var(--bg-card);border:1.5px solid var(--bg-h2);border-radius:14px 14px 14px 3px;padding:10px 13px;font-size:13.5px;color:var(--t1);line-height:1.6;max-width:80%}
.busr{background:var(--grad-u);border-radius:14px 14px 3px 14px;padding:10px 13px;font-size:13.5px;color:#fff;line-height:1.6;margin-left:auto;max-width:80%;animation:slideIn .25s ease both}
.typing-wrap{display:flex;align-items:flex-end;gap:8px}
.typing{background:var(--bg-card);border:1.5px solid var(--bg-h2);border-radius:14px 14px 14px 3px;padding:10px 14px;display:flex;gap:4px;align-items:center}
.typing .dot{width:7px;height:7px;border-radius:50%;background:var(--t3);animation:td 1.2s ease-in-out infinite}
.typing .dot:nth-child(2){animation-delay:.2s}
.typing .dot:nth-child(3){animation-delay:.4s}

/* ═══════════════════════════════════════════════════
   AUDIT FORM
═══════════════════════════════════════════════════ */
#stateAudit{display:none;flex-direction:column;height:100%}
#stateAudit.active{display:flex}
.afh{background:var(--grad-h);padding:16px;display:flex;align-items:center;justify-content:space-between;min-height:var(--header-h);flex-shrink:0}
.aft{font-family:'Unbounded',sans-serif;font-size:13px;font-weight:700;color:#fff}
.afb{background:none;border:none;font-family:'Golos Text',sans-serif;font-size:13px;font-weight:600;color:rgba(255,255,255,.65);cursor:pointer;transition:color .15s;padding:8px 0;touch-action:manipulation}
.afb:hover{color:#fff}
.afbody{
  padding:16px 14px 20px;
  background:var(--bg-w);
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  gap:0;
}
/* верхняя группа — всё содержимое формы */
.af-top{display:flex;flex-direction:column;flex:1}
.afprog{display:flex;gap:4px;margin-bottom:18px}
.afstep{flex:1;height:3px;border-radius:3px;background:var(--bg-h2);transition:background .35s}
.afstep.done{background:var(--grad-u)}
.afprom{background:var(--bg-card);border:1.5px solid var(--bg-h2);border-radius:12px;padding:13px;margin-bottom:18px;display:flex;gap:10px}
.afpicon{font-size:18px;flex-shrink:0;margin-top:1px}
.afptitle{font-size:13px;font-weight:600;color:var(--t1);margin-bottom:3px}
.afpdesc{font-size:11.5px;color:var(--t3);line-height:1.55}
.aflbl{display:block;font-size:10px;font-weight:700;color:var(--g2);letter-spacing:.8px;text-transform:uppercase;margin-bottom:6px;opacity:.8}
.afinp{
  width:100%;background:var(--bg-card);border:1.5px solid var(--bg-h2);
  border-radius:12px;padding:11px 14px;font-size:14px;
  font-family:'Golos Text',sans-serif;color:var(--t1);outline:none;
  margin-bottom:16px;transition:border-color .18s,box-shadow .18s;
  -webkit-text-size-adjust:100%;
  display:block;
}
.afinp:focus{border-color:var(--bdr2);box-shadow:0 0 0 3px rgba(0,140,50,.08)}
.afinp::placeholder{color:var(--t3)}
.afinp.err{border-color:rgba(200,50,50,.4)}
/* нижняя группа — кнопка */
.af-bottom{flex-shrink:0;padding-top:8px}
.af-spacer{display:none}
.afsub{
  width:100%;background:var(--y);color:#0a0700;border:none;
  border-radius:12px;padding:14px;font-family:'Unbounded',sans-serif;
  font-size:13px;font-weight:800;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:all .2s;letter-spacing:-.2px;touch-action:manipulation;
}
.afsub:hover{background:#ffe033;box-shadow:0 0 22px rgba(255,215,5,.35);transform:translateY(-1px)}
.afsub:active{transform:scale(.97)}
.afnote{font-size:10.5px;color:var(--t3);text-align:center;margin-top:10px;line-height:1.6}
.afnote em{font-style:normal;color:var(--g2)}

/* ═══════════════════════════════════════════════════
   SUCCESS SCREEN
═══════════════════════════════════════════════════ */
#stateSuccess{display:none;padding:36px 20px 28px;text-align:center;background:var(--bg-w)}
.ssring{width:72px;height:72px;border-radius:50%;margin:0 auto 18px;background:var(--bg-card);border:2px solid var(--bdr2);display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 0 20px rgba(0,140,50,.12);animation:wIn .5s cubic-bezier(.34,1.56,.64,1) both}
.sstitle{font-family:'Unbounded',sans-serif;font-size:16px;font-weight:800;color:var(--t1);letter-spacing:-.4px;margin-bottom:8px}
.ssdesc{font-size:13px;color:var(--t3);line-height:1.65;margin-bottom:18px}
.sstimer{background:var(--y-soft);border:1.5px solid var(--y-brd);border-radius:12px;padding:13px 15px;display:flex;align-items:center;gap:10px;text-align:left;margin-bottom:16px}
.ssticon{font-size:20px;flex-shrink:0}
.ssttitle{font-size:13px;font-weight:700;color:#ffd705;margin-bottom:2px}
.sstsub{font-size:11px;color:var(--t3);line-height:1.5}
.ssclose{width:100%;background:var(--bg-card);border:1.5px solid var(--bdr1);color:var(--g2);border-radius:11px;padding:12px;font-family:'Golos Text',sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;touch-action:manipulation}
.ssclose:hover{background:var(--bg-h1);border-color:var(--bdr2)}

/* ═══════════════════════════════════════════════════
   HISTORY SCREEN
═══════════════════════════════════════════════════ */
#stateHistory{display:none;flex-direction:column;height:100%}
.hist-hdr{background:var(--bg-card);border-bottom:1.5px solid var(--bg-h2);padding:0 14px;display:flex;align-items:center;gap:10px;flex-shrink:0;height:var(--header-h)}
.hist-back{width:34px;height:34px;border-radius:50%;background:var(--bg-h1);border:1.5px solid var(--bdr1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:all .15s;flex-shrink:0;touch-action:manipulation}
.hist-back:hover{background:var(--bg-h2);color:var(--t1)}
.hist-back svg{width:14px;height:14px}
.hist-title-label{position:absolute;left:50%;transform:translateX(-50%);font-family:'Unbounded',sans-serif;font-size:13px;font-weight:700;color:var(--t1);white-space:nowrap}
.hist-edit-btn{margin-left:auto;width:34px;height:34px;border-radius:50%;background:var(--bg-h1);border:1.5px solid var(--bdr1);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t2);transition:all .15s;flex-shrink:0;touch-action:manipulation}
.hist-edit-btn:hover{background:var(--bg-h2);color:var(--g1)}
.hist-edit-btn.active{background:rgba(0,192,84,.12);border-color:var(--bdr2);color:var(--g1)}
.hist-edit-btn svg{width:14px;height:14px}
.hist-body{overflow-y:auto;flex:1;padding:14px;background:var(--bg-w);-webkit-overflow-scrolling:touch}
.hist-body::-webkit-scrollbar{width:3px}
.hist-body::-webkit-scrollbar-thumb{background:var(--bdr1);border-radius:3px}
.hist-group{font-size:10px;font-weight:700;color:var(--t3);letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;padding:0 2px}
.hist-empty{text-align:center;color:var(--t3);font-size:13px;padding:40px 0}
.hist-item{display:flex;align-items:center;gap:10px;padding:12px 8px;border-bottom:1px solid var(--bg-h2);cursor:pointer;transition:background .15s;border-radius:9px;touch-action:manipulation}
.hist-item:last-child{border-bottom:none}
.hist-item:hover{background:var(--bg-h1)}
.hist-item:active{background:var(--bg-h2)}
.hist-icon{width:32px;height:32px;border-radius:9px;background:var(--bg-h1);border:1px solid var(--bdr1);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.hist-text{flex:1;min-width:0}
.hist-item-title{font-size:13px;font-weight:500;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-item-time{font-size:10.5px;color:var(--t3);margin-top:2px}
.hist-del{width:26px;height:26px;border-radius:50%;background:rgba(220,50,50,.1);border:1px solid rgba(220,50,50,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(220,80,80,.7);font-size:13px;flex-shrink:0;opacity:0;pointer-events:none;transition:all .18s;transform:scale(.8);touch-action:manipulation}
.hist-del.show{opacity:1;pointer-events:all;transform:scale(1)}
.hist-del:hover{background:rgba(220,50,50,.22);color:#f55}

/* ═══════════════════════════════════════════════════
   INPUT BAR
═══════════════════════════════════════════════════ */
.winput{
  display:flex;gap:8px;align-items:center;
  padding:10px 12px;
  flex-shrink:0;
  background:var(--bg-card);
  border-top:1.5px solid var(--bg-h2);
  min-height:var(--input-h);
}
.wi{
  flex:1;background:var(--bg-w);border:1.5px solid var(--bg-h2);
  border-radius:12px;padding:10px 14px;font-size:14px;
  font-family:'Golos Text',sans-serif;color:var(--t1);outline:none;
  transition:border-color .15s,box-shadow .15s;
  /* iOS zoom fix */
  -webkit-text-size-adjust:100%;
}
.wi:focus{border-color:var(--bdr2);box-shadow:0 0 0 3px rgba(0,140,50,.08)}
.wi::placeholder{color:var(--t3)}
.ws{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:var(--grad-u);border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:opacity .15s,transform .15s;
  box-shadow:0 3px 10px rgba(0,140,50,.25);
  touch-action:manipulation;
}
.ws:hover{opacity:.85;transform:scale(1.05)}
.ws:active{transform:scale(.93)}

/* ═══════════════════════════════════════════════════
   MOBILE-SPECIFIC UX TWEAKS
═══════════════════════════════════════════════════ */
/* Larger touch targets on mobile */
@media (max-width:480px) {
  .wh-btn{width:36px;height:36px}
  .ch-btn{width:36px;height:36px}
  .chip{padding:8px 16px;font-size:13px}
  .wi{font-size:16px} /* Prevents iOS zoom */
  .afinp{font-size:16px} /* Prevents iOS zoom */
  .ws{width:44px;height:44px}
  .svc-grid{grid-template-columns:1fr 1fr 1fr;gap:6px}
  .svc-card{padding:10px 8px}
  .svc-icon{width:30px;height:30px;border-radius:8px;font-size:14px}
  .svc-svg{width:16px;height:16px}
  .svc-name{font-size:11px}
  .wabtns{gap:6px}
  .wabtn,.wabtn2{flex:1;justify-content:center}
  .bbot,.busr{max-width:88%;font-size:14px}
  /* History full header */
  .hist-hdr{position:relative}
}

/* Tablet layout tweaks */
@media (min-width:481px) and (max-width:768px) {
  :root{--w-width:360px;--w-height:600px}
  .bbot,.busr{max-width:82%}
}

/* Desktop: larger feels better */
@media (min-width:1200px) {
  :root{--w-width:460px;--w-height:720px}
}
/* end */