/* Message Luke (chat.js): the floating button bottom right and its panel. Ice blue on near-black, the dashboard's
   tokens (dash.css, ut.css). Desktop: a 380px panel above the button. Phone (640px and under): a full-screen sheet sized
   to the visual viewport (--utc-vh, --utc-top from chat.js), so the keyboard never covers the message box. */
.utc{--utc-ice:#8fd3ff;--utc-ice2:#4fb4f2;--utc-line:rgba(143,211,255,.18);--utc-line2:rgba(143,211,255,.32);
  --utc-gap:24px;--utc-fab:60px;--utc-clear:0px;
  position:fixed;right:0;bottom:0;z-index:85;font-family:"PT Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--fg,#f1f2f4)}
.utc-sr,.utc-hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.utc-hp{left:-9999px}

/* ---------- the button ---------- */
.utc-fab{position:fixed;right:calc(var(--utc-gap) + env(safe-area-inset-right));bottom:max(calc(var(--utc-gap) + env(safe-area-inset-bottom)),var(--utc-clear));
  width:var(--utc-fab);height:var(--utc-fab);border-radius:50%;display:grid;place-items:center;cursor:pointer;color:#fff;
  border:1px solid rgba(255,255,255,.22);
  background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.35),transparent 45%),linear-gradient(145deg,#4fb4f2,#1e6fb8 70%,#14508a);
  box-shadow:0 18px 40px -14px rgba(79,180,242,.85),0 0 0 6px rgba(79,180,242,.10),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .35s cubic-bezier(.2,.9,.25,1.2),box-shadow .3s,opacity .3s,bottom .3s cubic-bezier(.2,.8,.2,1);-webkit-tap-highlight-color:transparent}
.utc-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 22px 46px -14px rgba(79,180,242,1),0 0 0 8px rgba(79,180,242,.14),inset 0 1px 0 rgba(255,255,255,.35)}
.utc-fab:active{transform:scale(.96)}
.utc-fab:focus-visible{outline:2px solid #fff;outline-offset:3px}
.utc-fab svg{grid-area:1/1;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.2,.9,.25,1.2),opacity .25s}
.utc-ic-down{opacity:0;transform:rotate(-90deg) scale(.6)}
.utc.open .utc-ic-chat{opacity:0;transform:rotate(90deg) scale(.6)}
.utc.open .utc-ic-down{opacity:1;transform:none}
.utc-dot{position:absolute;top:-3px;right:-3px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;display:grid;place-items:center;
  font:700 12px/1 "PT Sans",system-ui,sans-serif;color:#1c0e00;background:linear-gradient(90deg,#ff8048,#ffb547);border:2px solid #03060d;box-shadow:0 0 14px rgba(255,150,60,.8)}
.utc-dot[hidden]{display:none}
.utc.has-new .utc-fab{animation:utcNudge 2.6s ease-in-out infinite}
@keyframes utcNudge{0%,80%,100%{box-shadow:0 18px 40px -14px rgba(79,180,242,.85),0 0 0 6px rgba(79,180,242,.10)}88%{box-shadow:0 18px 40px -14px rgba(79,180,242,.85),0 0 0 14px rgba(79,180,242,0)}}
.utc.tucked .utc-fab{opacity:0;transform:scale(.6);pointer-events:none}

/* ---------- the preview beside the button (a team message while the panel is closed) ---------- */
.utc-peek{position:fixed;right:calc(var(--utc-gap) + env(safe-area-inset-right) + var(--utc-fab) + 12px);bottom:max(calc(var(--utc-gap) + env(safe-area-inset-bottom)),var(--utc-clear));
  max-width:min(300px,calc(100vw - var(--utc-fab) - 56px));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;align-items:center;text-align:left;padding:10px 12px 10px 14px;border-radius:18px;border-bottom-right-radius:6px;
  border:1px solid var(--utc-line2);background:linear-gradient(180deg,rgba(14,24,42,.97),rgba(6,11,22,.97));color:var(--fg,#f1f2f4);cursor:pointer;font:400 13.5px/1.35 "PT Sans",system-ui,sans-serif;
  box-shadow:0 24px 50px -24px rgba(0,0,0,.9),0 12px 30px -20px rgba(79,180,242,.8);opacity:0;transform:translateY(8px) scale(.97);transform-origin:100% 100%;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.utc-peek.in{opacity:1;transform:none}
.utc-peek[hidden]{display:none}
.utc-peek b{grid-column:1;font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--utc-ice)}
.utc-peek span{grid-column:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.utc-peek i{grid-column:2;grid-row:1/3;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--fg3,#8d949e);background:rgba(255,255,255,.05)}
.utc-peek i svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.utc.open .utc-peek,.utc.tucked .utc-peek{display:none}
/* While the panel is open it sits above the "better in the app" card (z 90) and the sample's Preview Stage pill. */
.utc.open{z-index:95}

/* ---------- the panel ---------- */
.utc-panel{position:fixed;right:calc(var(--utc-gap) + env(safe-area-inset-right));
  bottom:calc(max(calc(var(--utc-gap) + env(safe-area-inset-bottom)),var(--utc-clear)) + var(--utc-fab) + 14px);
  width:min(380px,calc(100vw - 32px));height:min(600px,calc(100vh - 140px));height:min(600px,calc(100dvh - 140px - var(--utc-clear)));
  display:flex;flex-direction:column;overflow:hidden;border-radius:22px;border:1px solid var(--utc-line2);
  background:radial-gradient(420px 220px at 100% 0,rgba(79,180,242,.18),transparent 70%),linear-gradient(180deg,rgba(12,20,36,.97),rgba(5,9,18,.98));
  box-shadow:0 40px 90px -30px rgba(0,0,0,.95),0 24px 60px -36px rgba(79,180,242,.8),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  opacity:0;transform:translateY(14px) scale(.97);transform-origin:100% 100%;transition:opacity .22s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.utc-panel[hidden]{display:none}
.utc.in .utc-panel{opacity:1;transform:none}

.utc-h{flex:none;display:flex;align-items:center;gap:12px;padding:16px 14px 14px 16px;border-bottom:1px solid var(--utc-line)}
.utc-av{position:relative;flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-family:"Bebas Neue",sans-serif;font-size:21px;letter-spacing:1px;color:#071424;
  background:linear-gradient(115deg,#5d7d9c,#e9f5ff 28%,#8fb6d6 52%,#f4faff 74%,#4f6f8f);box-shadow:0 0 0 2px rgba(143,211,255,.18),0 8px 20px -8px rgba(143,211,255,.6)}
.utc-av i{position:absolute;right:0;bottom:1px;width:11px;height:11px;border-radius:50%;background:#5fd39a;border:2px solid #0a1222;box-shadow:0 0 8px rgba(95,211,154,.8)}
.utc-ht{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.utc-ht b{font-family:"League Gothic",sans-serif;font-weight:400;font-size:25px;line-height:1;letter-spacing:.6px;text-transform:uppercase;color:#fff}
.utc-ht span{font-size:12.5px;line-height:1.35;color:var(--fg3,#8d949e)}
.utc-x{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;cursor:pointer;color:var(--fg2,#c4c9d0);border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);transition:background .2s,color .2s,border-color .2s}
.utc-x:hover{color:#fff;border-color:var(--utc-line2);background:rgba(143,211,255,.1)}
.utc-x:focus-visible{outline:2px solid var(--utc-ice);outline-offset:2px}
.utc-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

.utc-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 14px 10px}
.utc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.utc-m{display:flex;flex-direction:column;max-width:84%}
.utc-m.gap{margin-top:10px}
.utc-m.gap:first-child{margin-top:0}
.utc-m.you{align-self:flex-end;align-items:flex-end}
.utc-m.team{align-self:flex-start;align-items:flex-start}
.utc-b{display:block;padding:10px 14px;border-radius:18px;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}
.utc-m.team .utc-b{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-bottom-left-radius:6px;color:var(--fg,#f1f2f4)}
.utc-m.you .utc-b{background:linear-gradient(145deg,#2f8fd8,#1e6fb8);border:1px solid rgba(143,211,255,.35);border-bottom-right-radius:6px;color:#fff;box-shadow:0 10px 24px -16px rgba(79,180,242,.9)}
.utc-m.greet .utc-b{background:rgba(143,211,255,.08);border-color:var(--utc-line)}
.utc-m.pending .utc-b{opacity:.65}
.utc-m.failed .utc-b{background:rgba(255,107,107,.14);border-color:rgba(255,107,107,.5)}
.utc-t{margin-top:4px;padding:0 4px;font-size:11.5px;color:var(--fg3,#8d949e)}
.utc-retry{border:0;background:none;color:#ff9b9b;font:700 11.5px "PT Sans",system-ui,sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.utc-load{display:flex;gap:5px;padding:12px 4px}
.utc-load i{width:7px;height:7px;border-radius:50%;background:var(--utc-ice);opacity:.35;animation:utcDots 1.1s ease-in-out infinite}
.utc-load i:nth-child(2){animation-delay:.15s}.utc-load i:nth-child(3){animation-delay:.3s}
@keyframes utcDots{50%{opacity:1;transform:translateY(-3px)}}

.utc-form{flex:none;display:flex;flex-direction:column;gap:8px;padding:12px 12px 12px;border-top:1px solid var(--utc-line);background:rgba(3,6,13,.6)}
.utc-row{position:relative;display:flex;align-items:flex-end;gap:8px}
.utc-row textarea{flex:1;min-width:0;min-height:46px;max-height:140px;resize:none;padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  color:#fff;font:400 16px/1.4 "PT Sans",system-ui,sans-serif;transition:border-color .2s,box-shadow .2s}
.utc-row textarea::placeholder{color:#6f7782}
.utc-row textarea:focus{outline:none;border-color:rgba(143,211,255,.7);box-shadow:0 0 0 3px rgba(79,180,242,.2)}
.utc-send{flex:none;height:46px;display:inline-flex;align-items:center;gap:7px;padding:0 16px;border-radius:999px;border:0;cursor:pointer;color:#fff;
  font:700 14px "PT Sans",system-ui,sans-serif;background:linear-gradient(90deg,#1e6fb8,#4fb4f2);box-shadow:0 12px 26px -12px rgba(79,180,242,.95);transition:filter .2s,opacity .2s,transform .2s}
.utc-send:hover{filter:brightness(1.1)}
.utc-send:active{transform:scale(.97)}
.utc-send:focus-visible{outline:2px solid #fff;outline-offset:2px}
.utc-send:disabled{opacity:.45;cursor:default;filter:none;box-shadow:none}
.utc-send.busy{opacity:.7}
.utc-send svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.utc-note{margin:0;font-size:13px;line-height:1.4;color:var(--fg2,#c4c9d0)}
.utc-note[data-err]{color:#ff9b9b}
.utc-note[hidden]{display:none}
.utc-foot{margin:0;padding:0 4px;font-size:12px;line-height:1.4;color:var(--fg3,#8d949e)}
.utc-foot a{color:var(--utc-ice);font-weight:700;text-decoration:none}
.utc-foot a:hover{text-decoration:underline}

/* ---------- phone: full-screen sheet over the visual viewport ---------- */
@media (max-width:640px){
  .utc{--utc-gap:16px;--utc-fab:56px}
  .utc-panel{left:0;right:0;top:var(--utc-top,0px);bottom:auto;width:auto;height:var(--utc-vh,100vh);border-radius:0;border:0;
    padding-top:env(safe-area-inset-top);transform:translateY(24px);transform-origin:50% 100%}
  .utc.open .utc-fab{opacity:0;transform:scale(.6);pointer-events:none}
  .utc-h{padding:12px 12px 12px calc(14px + env(safe-area-inset-left))}
  .utc-scroll{padding:14px calc(12px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left))}
  .utc-form{padding:10px calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left))}
  .utc-m{max-width:88%}
  .utc-send span{display:none}
  .utc-send{width:46px;padding:0;justify-content:center}
  html.utc-lock,html.utc-lock body{overflow:hidden;overscroll-behavior:none}
}
@media (prefers-reduced-motion:reduce){
  .utc-fab,.utc-fab svg,.utc-panel,.utc-send{transition:none}
  .utc.has-new .utc-fab{animation:none}
  .utc-load i{animation:none;opacity:.7}
}
@media print{.utc{display:none}}
