/* Live Chat — Tech Guide popup (Sean 2026-09-30). Modern chat UI, dark theme, senior-readable. */
#lc-overlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:flex-end;justify-content:center;background:rgba(2,8,16,.72);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:0}
#lc-overlay[hidden]{display:none}
#lc-card{width:100%;max-width:600px;height:94vh;height:94dvh;display:flex;flex-direction:column;background:linear-gradient(180deg,#12222f 0%,#0b141d 100%);border:1px solid #1e4d4a;border-bottom:none;border-radius:28px 28px 0 0;box-shadow:0 -12px 60px rgba(0,0,0,.6),0 0 40px rgba(11,150,142,.18);overflow:hidden;color:#f2f6fa}
@media(min-width:560px){
  #lc-overlay{align-items:center;padding:20px}
  #lc-card{height:min(840px,94vh);height:min(840px,94dvh);border-bottom:1px solid #1e4d4a;border-radius:28px}
}
/* Header: persona */
#lc-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:rgba(11,150,142,.12);border-bottom:1px solid #1e4d4a;flex:none}
.lc-avatar{width:52px;height:52px;flex:none;border-radius:50%;box-shadow:0 0 0 2px #0b968e;background:linear-gradient(135deg,#0d9a92,#0a5a55);display:flex;align-items:center;justify-content:center;font-size:30px}
#lc-head-tx{flex:1;min-width:0}
#lc-head-tx strong{display:block;font-size:20px;line-height:1.2}
#lc-status{display:flex;align-items:center;gap:6px;font-size:14px;color:#8fe3b0;margin-top:2px}
#lc-status i{width:9px;height:9px;border-radius:50%;background:#34d17b;box-shadow:0 0 8px rgba(52,209,123,.9);animation:lc-dot 1.8s infinite}
.lc-avatar svg{width:68%;height:68%;display:block}
.lc-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
#lc-head .lc-avatar{width:80px;height:80px;margin-left:0}
#lc-new{margin-left:auto}
#lc-close{background:#1b2c3d;color:#fff;border:2px solid #3a546e;border-radius:50%;width:46px;height:46px;font-size:24px;line-height:1;cursor:pointer;flex:none}
#lc-close:hover{background:#e0531f;border-color:#e0531f}
#lc-new{background:#1b2c3d;color:#fff;border:2px solid #3a546e;border-radius:999px;min-height:46px;padding:0 14px;font-size:16px;font-weight:700;cursor:pointer;flex:none;white-space:nowrap}
#lc-new:hover{background:#0b968e;border-color:#0b968e}
/* Chat scroll area */
#lc-chat{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 14px;display:flex;flex-direction:column;gap:10px}
/* Sean 2026-10-01: chat messages must never get squished. #lc-chat is a flex
   column, so a tall message (the device check-in card) shrank to fit instead
   of overflowing — and with overflow:hidden on the card, the device pill and
   the Yes/Not buttons were clipped off on phones. flex-shrink:0 keeps every
   message at its natural height; the chat area already scrolls. */
#lc-chat>*{flex-shrink:0}
.lc-row{display:flex;gap:8px;align-items:flex-end;max-width:100%}
.lc-row .lc-avatar{width:36px;height:36px;font-size:20px;box-shadow:0 0 0 1px #0b968e}
.lc-bubble{padding:13px 16px;border-radius:18px;font-size:18px;line-height:1.5;max-width:82%;overflow-wrap:break-word}
.lc-bot .lc-bubble{background:#1a2c3e;border:1px solid #2a4358;border-bottom-left-radius:6px;color:#eef4fa}
.lc-user{justify-content:flex-end}
.lc-user .lc-bubble{background:linear-gradient(180deg,#0d9a92,#0a7a74);border-bottom-right-radius:6px;color:#fff;font-weight:600}
/* Typing indicator */
.lc-typing{display:inline-flex;gap:5px;padding:15px 18px;background:#1a2c3e;border:1px solid #2a4358;border-radius:18px;border-bottom-left-radius:6px}
.lc-typing i{width:9px;height:9px;border-radius:50%;background:#7fd4c9;animation:lc-bounce 1.1s infinite}
.lc-typing i:nth-child(2){animation-delay:.18s}
.lc-typing i:nth-child(3){animation-delay:.36s}
@keyframes lc-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-6px);opacity:1}}
/* Chips: wrap into a full grid of tappable pills — every option is visible
   at once, no horizontal scrolling and no scrollbar covering the labels
   (Sean 2026-09-30: seniors couldn't see or choose the options). */
.lc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:2px 2px 6px}
.lc-chip{flex:none;background:#0c2232;border:1px solid #2a7a74;color:#cfe3ff;border-radius:999px;padding:13px 22px;font-size:18px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap;min-height:52px}
.lc-chip:hover{background:#123043}
/* Link / lesson buttons */
.lc-linkbtn{display:block;width:100%;margin:4px 0;padding:15px 16px;font-size:18px;font-weight:700;color:#fff;background:#123a52;border:2px solid #2a7a74;border-radius:14px;cursor:pointer;font-family:inherit;text-align:left;text-decoration:none;box-sizing:border-box;line-height:1.4}
.lc-linkbtn:hover{background:#174a68;border-color:#0b968e}
/* Device check-in card */
.lc-device{position:relative;background:linear-gradient(160deg,#18293c,#0d1a29);border:1px solid #2c4b61;border-radius:22px;padding:26px 20px 20px;margin:12px 0;text-align:center;overflow:hidden;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.lc-device::before{content:"";position:absolute;left:-20%;right:-20%;top:-60px;height:220px;background:radial-gradient(ellipse at center,rgba(11,150,142,.30),transparent 70%);pointer-events:none}
.lc-device-img{position:relative;width:100%;max-width:360px;height:240px;object-fit:contain;background:#0a1420;border-radius:26px;border:2px solid rgba(11,150,142,.85);box-shadow:0 6px 24px rgba(11,150,142,.35)}
.lc-device-q{position:relative;font-size:22px;font-weight:800;margin:14px 0 10px;color:#fff;letter-spacing:.2px}
.lc-device-namewrap{position:relative;margin:0 0 4px}
.lc-device-name{display:inline-block;font-size:16px;font-weight:700;color:#07302c;background:linear-gradient(180deg,#8ae8de,#4cc9bf);padding:8px 20px;border-radius:999px;box-shadow:0 2px 12px rgba(11,150,142,.45)}
.lc-device-yes{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:12px;background:linear-gradient(180deg,#12aca3,#0a7a74);color:#fff;font-size:19px;font-weight:800;border:none;border-radius:999px;padding:16px;cursor:pointer;font-family:inherit;box-shadow:0 6px 18px rgba(11,150,142,.45)}
.lc-device-yes:active{transform:scale(.98)}
.lc-check{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.22);font-size:17px}
.lc-device-not{position:relative;background:none;border:none;color:#8aa9c7;font-size:14px;cursor:pointer;padding:12px 8px 4px;font-family:inherit;display:block;margin:0 auto}
.lc-device-not u{text-underline-offset:3px}
/* Follow-up: did that solve it? */
.lc-solved{background:rgba(11,150,142,.1);border:1px solid #1e4d4a;border-radius:16px;padding:14px;margin:4px 0;text-align:center}
.lc-solved p{font-size:18px;font-weight:700;margin:0 0 10px;color:#fff}
.lc-solved-row{display:flex;gap:10px}
.lc-solved-row button{flex:1;padding:14px 8px;font-size:18px;font-weight:800;border-radius:12px;cursor:pointer;font-family:inherit;border:2px solid #2a7a74;background:#0c2232;color:#cfe3ff;min-height:56px}
.lc-solved-row button.lc-yes{background:#0b7a55;border-color:#34d17b;color:#fff}
.lc-solved-row button:hover{filter:brightness(1.15)}
/* Sean card + callback */
.lc-sean{background:#152b1a;border:2px solid #3f7a3f;border-radius:16px;padding:16px;margin:4px 0;text-align:center}
.lc-sean p{font-size:18px;line-height:1.55;color:#eaf5ea;margin:0 0 12px}
.lc-sean p a{color:#ffd9a8;font-weight:800}
.lc-callbtn{display:inline-block;padding:15px 26px;font-size:19px;font-weight:800;color:#fff;background:#2e7d32;border:2px solid #7fd67f;border-radius:14px;text-decoration:none}
.lc-cb{margin-top:10px}
.lc-cb input{font-size:19px;padding:13px;border-radius:10px;border:2px solid #2a3f55;background:#0e1a26;color:#fff;width:170px;margin-right:8px;font-family:inherit}
.lc-cb button{font-size:18px;font-weight:800;padding:13px 20px;border-radius:10px;border:2px solid #ffb37a;background:#e0531f;color:#fff;cursor:pointer;font-family:inherit}
.lc-cb-msg{font-size:16px;color:#9fb4c8;min-height:1.4em;margin:8px 0 0}
/* Read-aloud button inside bot bubble */
.lc-read{display:block;margin-top:10px;background:none;border:2px solid #2a7a74;color:#7fd4c9;border-radius:999px;padding:9px 18px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit}
.lc-read:hover{background:rgba(11,150,142,.15)}
.lc-read:disabled{opacity:.6;cursor:default}
/* Composer */
#lc-foot{flex:none;padding:10px 12px 14px;background:rgba(2,8,16,.5);border-top:1px solid #1e4d4a}
/* Voice mode: one big mic, live transcript, small keyboard icon for typing */
#lc-voice{display:flex;flex-direction:column;align-items:center;gap:10px;padding:8px 4px 2px;position:relative}
#lc-voice[hidden]{display:none}
/* Small icon button: keyboard to open typing, mic to go back to voice */
.lc-iconbtn{width:52px;height:52px;flex:none;border-radius:50%;background:#16293a;border:2px solid #3a546e;color:#cfe3ff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
.lc-iconbtn:hover{border-color:#0b968e;color:#fff}
.lc-iconbtn.lc-emph{background:#e0531f;border-color:#ffb37a;color:#fff;animation:lc-pulse 1.6s infinite}
#lc-voice .lc-iconbtn{position:absolute;top:2px;right:4px}
#lc-type .lc-iconbtn{margin:10px auto 0}
#lc-bigmic{width:92px;height:92px;border-radius:50%;border:3px solid #5eead4;background:linear-gradient(180deg,#0d9a92,#0a6e68);color:#fff;font-size:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit}
#lc-bigmic:hover{filter:brightness(1.1)}
#lc-bigmic.listening{background:linear-gradient(180deg,#c74a12,#a53a0e);border-color:#ffb37a;animation:lc-pulse 1.4s infinite}
@keyframes lc-pulse{0%,100%{box-shadow:0 0 0 0 rgba(224,83,31,.5)}50%{box-shadow:0 0 0 14px rgba(224,83,31,0)}}
#lc-hear{font-size:17px;color:#cfe3ff;text-align:center;margin:0;min-height:2.4em;line-height:1.45;max-width:100%}
#lc-note{font-size:15px;color:#9fb4c8;text-align:center;margin:0 0 8px;min-height:1.2em}
#lc-row{display:flex;gap:8px}
#lc-input{flex:1;min-width:0;font-size:19px;color:#fff;background:#0e1a26;border:2px solid #2a4358;border-radius:999px;padding:13px 18px;font-family:inherit}
#lc-input::placeholder{color:#7d93a8}
#lc-input:focus{outline:none;border-color:#0b968e}
#lc-send{flex:none;width:58px;height:58px;border-radius:50%;border:none;background:linear-gradient(180deg,#0d9a92,#0a6e68);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center}
#lc-send:hover{filter:brightness(1.12)}
.lc-again{display:block;margin:2px auto;background:none;border:none;color:#9fb4c8;font-size:16px;text-decoration:underline;cursor:pointer;padding:10px;font-family:inherit}
.lc-again:hover{color:#fff}
.lc-fade{animation:lc-fade .18s ease-out}
@keyframes lc-fade{from{opacity:.2}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .lc-typing i,.lc-fade,#lc-bigmic.listening,.lc-iconbtn.lc-emph{animation:none}
  #lc-chat{scroll-behavior:auto}
}
/* Homepage launch button */
.lc-launch.lc-launch{background:linear-gradient(180deg,#0d9a92,#0a6e68)!important;border:2px solid #5eead4!important;color:#fff!important;font-family:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;width:100%}
.lc-launch:hover{filter:brightness(1.12)}
.lc-dot{width:11px;height:11px;border-radius:50%;background:#34d17b;box-shadow:0 0 8px rgba(52,209,123,.9);animation:lc-dot 1.8s infinite}
@keyframes lc-dot{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.lc-dot,#lc-status i{animation:none}}

/* ---- Floating chat button era (Sean 2026-09-30) ----
   The full-width sticky chat bar is gone — one floating "Chat" pill on the
   homepage and Learn page, at every width. It sits left of the far-right
   corner (right:96px, bottom:24px — see the inline page styles) so it never
   hides behind the cart, with a slow LED ring around its edges. No
   per-device overrides: the position clears the cart everywhere. */
/* (retired 2026-09-30: the sticky chat bar is gone, so the pill no longer
   needs to ride above it — its inline position already clears the cart) */
@media(min-width:768px){
  /* device image is fluid (100% of card) at every width — no override needed */
}