#dd-support{
    --b:#e8201f; --bd:#c41a19; --bg:#f5f3ee; --panel:#fff; --ink:#17191c; --muted:#61666c; --line:#e2e2de;
    --tk:#177245; --tk-bg:#e7f4ec; --bl:#b3261e; --bl-bg:#fbeae8; --if:#1c6db0; --if-bg:#e8f1fa; --bn-bg:#fdeee6;
    --am:#d9a02b; --am-bg:#fff9ec; --am-ink:#8a6a12;
    --r:14px; color:var(--ink);
    font-family:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  }
  #dd-support *{box-sizing:border-box}
  #dd-support .ddc-wrap{max-width:640px;margin:0 auto;padding:18px 14px 40px}
  #dd-support .ddc-shell{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 12px 40px -20px rgba(0,0,0,.3);display:flex;flex-direction:column;height:78vh;min-height:560px;max-height:820px}
  #dd-support .ddc-head{background:var(--b);color:#fff;padding:14px 18px;display:flex;align-items:center;gap:12px;flex:none}
  #dd-support .ddc-av{width:38px;height:38px;border-radius:50%;background:#fff;color:var(--b);font-weight:800;font-size:17px;display:flex;align-items:center;justify-content:center}
  #dd-support .ddc-ht{flex:1;line-height:1.2}
  #dd-support .ddc-ht b{font-size:15px;display:block}
  #dd-support .ddc-ht span{font-size:11.5px;opacity:.92}
  #dd-support .ddc-reset{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:8px;font-size:12px;padding:6px 11px;cursor:pointer;font-family:inherit}
  #dd-support .ddc-chat{flex:1;overflow-y:auto;padding:18px 15px 24px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
  #dd-support .ddc-day{align-self:center;font-size:10.5px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:3px 11px}
  #dd-support .bub{max-width:86%;padding:10px 13px;border-radius:15px;font-size:14px;line-height:1.5;animation:ddpop .26s ease both}
  #dd-support .bot{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-bottom-left-radius:5px}
  #dd-support .usr{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:5px;font-weight:500}
  #dd-support .banner{align-self:stretch;background:var(--bn-bg);border:1.5px solid var(--b);border-radius:12px;padding:11px 13px;font-size:13.5px;animation:ddpop .26s ease both}
  #dd-support .banner b{display:block;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--bd);margin-bottom:4px;font-weight:700}
  #dd-support .opts{align-self:flex-start;display:flex;flex-direction:column;gap:7px;width:86%;animation:ddpop .26s ease both}
  #dd-support .opt{text-align:left;background:var(--panel);border:1.5px solid var(--b);color:var(--bd);border-radius:12px;padding:10px 14px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit}
  #dd-support .opt:hover{background:var(--b);color:#fff}
  #dd-support .muted{align-self:flex-start;font-size:11.5px;color:var(--muted);font-style:italic;max-width:86%}
  #dd-support .home,#dd-support .track{align-self:flex-start;width:92%;background:var(--panel);border:1px solid var(--line);border-radius:15px;border-bottom-left-radius:5px;padding:13px 14px;animation:ddpop .26s ease both}
  #dd-support .h-sec{font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:12px 0 6px}
  #dd-support .h-sec:first-child{margin-top:0}
  #dd-support .h-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:13px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;background:var(--bg);cursor:pointer;width:100%;text-align:left;font-family:inherit;color:inherit}
  #dd-support .h-row:hover{border-color:var(--b)}
  #dd-support .h-row b{font-weight:700}
  #dd-support .h-row .go{color:var(--bd);font-size:11.5px;font-weight:700;white-space:nowrap}
  #dd-support .h-row.tk{border-style:dashed;color:var(--muted);cursor:pointer;background:var(--panel)}
  #dd-support .t-top{display:flex;justify-content:space-between;font-size:9.5px;font-weight:700;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
  #dd-support .t-st{font-weight:800;font-size:16px;display:flex;align-items:center;gap:8px;margin-bottom:7px}
  #dd-support .dot{width:10px;height:10px;border-radius:50%;flex:none}
  #dd-support .d-ok{background:var(--tk)} #dd-support .d-warn{background:var(--b)} #dd-support .d-bad{background:var(--bl)} #dd-support .d-mute{background:#9aa0a6}
  #dd-support .t-row{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:5px 0;border-top:1px dashed var(--line)}
  #dd-support .t-row span{color:var(--muted)} #dd-support .t-row b{font-weight:600;text-align:right}
  #dd-support .out{align-self:flex-start;max-width:92%;border-radius:15px;border-bottom-left-radius:5px;padding:12px 14px;font-size:13.5px;line-height:1.5;border:1.5px solid;animation:ddpop .26s ease both}
  #dd-support .out h5{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;gap:6px;margin:0 0 6px}
  #dd-support .out h5 i{width:8px;height:8px;border-radius:50%}
  #dd-support .o-t{background:var(--tk-bg);border-color:var(--tk)} #dd-support .o-t h5{color:var(--tk)} #dd-support .o-t h5 i{background:var(--tk)}
  #dd-support .o-b{background:var(--bl-bg);border-color:var(--bl)} #dd-support .o-b h5{color:var(--bl)} #dd-support .o-b h5 i{background:var(--bl)}
  #dd-support .o-i{background:var(--if-bg);border-color:var(--if)} #dd-support .o-i h5{color:var(--if)} #dd-support .o-i h5 i{background:var(--if)}
  #dd-support .tkline{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 8px}
  #dd-support .tk-pill{font-size:10px;font-weight:700;background:#fff;border:1px solid currentColor;border-radius:99px;padding:2px 9px}
  #dd-support .o-t .tk-pill{color:var(--tk)}
  #dd-support .metaL{margin:8px 0 0;padding:9px 11px;background:rgba(255,255,255,.65);border-radius:9px}
  #dd-support .metaL b{font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px;font-weight:700}
  #dd-support .metaL ul{list-style:none;margin:0;padding:0}
  #dd-support .metaL li{font-size:12px;padding-left:15px;position:relative;margin-bottom:2px}
  #dd-support .metaL li:before{content:"▸";position:absolute;left:2px;color:var(--b)}
  #dd-support .autol{margin-top:8px;padding-top:7px;border-top:1px dashed rgba(0,0,0,.16);font-size:10px;color:var(--muted)}
  #dd-support .tk-help{margin:-2px 0 8px;padding:8px 11px;background:var(--bn-bg);border:1px solid var(--b);border-radius:10px;font-size:11.5px;line-height:1.6;color:var(--ink)}
  #dd-support .tk-help a{color:var(--bd);font-weight:700;text-decoration:none}
  /* Call back request (shown when the care API returns is_hours_exceed = true) */
  #dd-support .tk-cb{margin:-2px 0 8px;padding:10px 12px;background:var(--bn-bg);border:1px solid var(--b);border-radius:12px;font-size:12.5px;line-height:1.5;color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
  #dd-support .tk-cb.solo{align-self:flex-start;width:86%;margin:0;animation:ddpop .26s ease both}
  #dd-support .tk-cb-btn{background:var(--b);color:#fff;border:0;border-radius:10px;padding:9px 14px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
  #dd-support .tk-cb-btn:hover{background:var(--bd)}
  #dd-support .tk-cb-btn:disabled{opacity:.6;cursor:default}
  #dd-support .tk-cb-err{font-size:11.5px;color:var(--bl)}
  #dd-support .tk-cb.done{background:var(--tk-bg);border-color:var(--tk);color:var(--tk);font-weight:600}
  @media(prefers-reduced-motion:reduce){#dd-support .tk-cb.solo{animation:none}}
  #dd-support .ddlink{color:var(--brand,#e8201f);font-weight:700;text-decoration:underline;text-underline-offset:2px}
  #dd-support .ddlink:hover{opacity:.82}
  #dd-support .fcard{align-self:flex-start;width:92%;background:var(--panel);border:1.5px solid var(--b);border-radius:15px;border-bottom-left-radius:5px;padding:13px 14px;animation:ddpop .26s ease both}
  #dd-support .f-eb{font-size:9.5px;font-weight:700;letter-spacing:.08em;color:var(--bd);margin-bottom:4px}
  #dd-support .f-tt{font-weight:800;font-size:14.5px;margin-bottom:10px}
  #dd-support .fld{margin-bottom:9px}
  #dd-support .frow{display:flex;gap:8px}#dd-support .frow .fld{flex:1}
  #dd-support .fld label,#dd-support .flbl{display:block;font-size:10.5px;font-weight:600;color:var(--muted);margin:0 0 3px}
  #dd-support .flbl{margin-top:9px}#dd-support .fld em{color:var(--bl);font-style:normal}
  #dd-support .inp{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 11px;font-size:12.5px;min-height:16px;width:100%;font-family:inherit;color:var(--ink)}
  #dd-support textarea.inp{min-height:52px;resize:vertical}
  #dd-support .fchips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}
  #dd-support .rchip{border:1.5px solid var(--line);border-radius:99px;padding:5px 12px;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--panel);cursor:pointer}
  #dd-support .rchip.sel{border-color:var(--b);color:var(--bd);background:var(--bn-bg)}
  #dd-support .rchip.off{opacity:.5;text-decoration:line-through;cursor:not-allowed}
  #dd-support .fnote{font-size:10.5px;color:var(--muted);margin-top:7px;line-height:1.45}
  #dd-support .fnote.req{color:var(--bl)}
  #dd-support .ferr{color:var(--bl);font-size:10.5px;margin-top:4px;font-weight:600}
  #dd-support .inp.bad{border-color:var(--bl);background:var(--bl-bg)}
  #dd-support .fchips.bad{outline:1.5px solid var(--bl);outline-offset:3px;border-radius:8px}
  /* "needs" = still outstanding but the customer has not touched it yet: amber, no red
     shouting, no error text. It turns into .bad once they touch the field or tap the
     locked button. See the LIVE GATE block in the script. */
  #dd-support .inp.needs{border-color:var(--am);background:var(--am-bg)}
  #dd-support .fchips.needs{outline:1.5px dashed var(--am);outline-offset:3px;border-radius:8px}
  #dd-support .alloc.needs,#dd-support .itwrap.needs{outline:1.5px dashed var(--am);outline-offset:2px}
  #dd-support .alloc.bad,#dd-support .itwrap.bad{outline:1.5px solid var(--bl);outline-offset:2px}
  #dd-support .fbtn{display:block;width:100%;margin-top:11px;background:var(--b);border:1.5px solid var(--b);color:#fff;border-radius:10px;padding:10px;font-weight:700;font-size:13.5px;cursor:pointer;font-family:inherit}
  #dd-support .fbtn:disabled{background:var(--tk-bg);border-color:var(--tk);color:var(--tk);cursor:default}
  /* Locked = every required answer is not in yet. Styled as disabled but deliberately
     still clickable, so tapping it can point at what is missing instead of doing nothing. */
  #dd-support .fbtn.locked{background:#eceae5;border-color:#dcd9d2;color:#8c9198;cursor:not-allowed}
  #dd-support .fbtn.locked:hover{background:#eceae5}
  #dd-support .fgate{font-size:10.5px;font-weight:600;line-height:1.45;margin-top:7px;color:var(--am-ink);display:flex;gap:5px;align-items:flex-start}
  #dd-support .fgate i{font-style:normal;flex:none}
  #dd-support .fgate span{font-weight:600;opacity:.75}
  #dd-support .fgate.ready{color:var(--tk)}
  #dd-support .fgate.hard{color:var(--bl)}
  @keyframes ddshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}
  #dd-support .fcard.shake{animation:ddshake .45s cubic-bezier(.36,.07,.19,.97) both}
  #dd-support .itrow{display:flex;align-items:center;gap:9px;padding:8px;border:1px solid var(--line);border-radius:10px;margin-bottom:6px;cursor:pointer}
  #dd-support .cb{width:18px;height:18px;border:1.5px solid var(--muted);border-radius:5px;flex:none;position:relative}
  #dd-support .itrow.on .cb{background:var(--b);border-color:var(--b)}
  #dd-support .itrow.on .cb:after{content:'✓';color:#fff;font-size:12px;position:absolute;left:3px;top:-1px}
  #dd-support .ithumb{width:34px;height:34px;border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;font-size:18px;flex:none}
  #dd-support .itn{line-height:1.25;font-size:12px}#dd-support .itn b{display:block;font-weight:600}#dd-support .itn small{color:var(--muted);font-size:10.5px}
  #dd-support .alloc{border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:8px}
  #dd-support .al-h{font-size:12.5px;font-weight:700;display:flex;justify-content:space-between;gap:8px;margin-bottom:7px}
  #dd-support .al-h span{color:var(--muted);font-weight:500;font-size:10.5px;white-space:nowrap}
  #dd-support .qline{display:flex;justify-content:space-between;align-items:center;font-size:12.5px;padding:4px 0}
  #dd-support .stepper{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:3px 9px;display:inline-flex;gap:11px;align-items:center;background:var(--bg);user-select:none}
  #dd-support .stepper button{border:none;background:none;font-size:15px;color:var(--bd);cursor:pointer;line-height:1;font-family:inherit}
  #dd-support .stepper b{color:var(--ink);font-size:13px;min-width:14px;text-align:center}
  #dd-support .al-sum{font-size:10.5px;color:var(--bd);margin:6px 0 7px;font-weight:600}
  #dd-support .ugrid{display:flex;gap:7px;margin-bottom:7px}
  #dd-support .uthumb{width:54px;height:54px;border-radius:10px;background:var(--bg);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:20px}
  #dd-support .uthumb.add{border-style:dashed;color:var(--bd);font-size:22px;cursor:pointer}
  #dd-support .vidtile{border:1px solid var(--line);border-radius:10px;padding:9px 11px;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--bg)}
  #dd-support .vidtile b{color:var(--tk);font-size:10.5px;white-space:nowrap}
  #dd-support .rvrow{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:6px 0;border-bottom:1px dashed var(--line)}
  #dd-support .rvrow span{color:var(--muted);text-align:right}
  #dd-support .ddc-foot{flex:none;border-top:1px solid var(--line);background:var(--panel);padding:9px 14px;font-size:11px;color:var(--muted);text-align:center}
  @keyframes ddpop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){#dd-support .bub,#dd-support .banner,#dd-support .opts,#dd-support .out,#dd-support .fcard{animation:none}}
