/* the hidden attribute must win over the badge display rule (unread dot shows only when not hidden) */
html[data-brand="lana"] .lana-sw-badge[hidden] { display: none; }

/* ============================================================
   lana-support.css — the support bubble and its panel (js/support-widget.js)
   Loaded after css/lana.css. Dark values here; the light values of v5/v7
   (GIFs, drawers, reactions, the composer box) at the end of THIS file,
   the older ones at the end of css/lana-light.css ("SUPPORT WIDGET").
   v5: one thread (no list, no topic picker), raspberry avatar, emoji and
   GIF drawers, reactions under the bubbles, read-only when the Store is
   blocked.
   v7: no avatar any more (header = title + reply line + close; a team
   message = its "LanaChat team" label + bubble), and the composer is ONE
   rounded box, Intercom / ALI Remote style: field on top, tools (attach,
   emoji, GIF) bottom left and the round Send bottom right INSIDE it, the
   pickers floating above it, the privacy line under it.

   Stacking: the bubble and the panel sit at --z-dropdown minus one (59).
   That is above the whole Console (#app is its own stacking context at
   z-index 1) and below every overlay appended to <body>: .sheet and
   .vmodal (60), popovers (80), .ask dialogs (90), toasts (100), native
   <dialog> (top layer).
   --lana-sw-lift is set by the script when a reply box (Live Convs,
   Playground) sits in the bottom-right corner: the bubble rises above it.
   ============================================================ */
html[data-brand="lana"] {
  --lana-sw-z: calc(var(--z-dropdown, 60) - 1);
  --lana-sw-size: 60px;   /* l49 (Arthur): same size as the Intercom launcher */
  --lana-sw-edge: 20px;
}

/* ---------- the bubble ---------- */
html[data-brand="lana"] .lana-sw-launcher {
  position: fixed;
  right: var(--lana-sw-edge);
  bottom: calc(var(--lana-sw-edge) + var(--lana-sw-lift, 0px));
  z-index: var(--lana-sw-z);
  display: grid; place-items: center;
  width: var(--lana-sw-size); height: var(--lana-sw-size);
  padding: 0; margin: 0;
  border: 0; border-radius: var(--radius-full);
  background: var(--primary);
  /* white glyph as asked: 3.5:1 on the raspberry, above the 3:1 of a non-text icon (same white as the switch knob) */
  color: #fff;
  box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--primary) 55%, transparent), var(--shadow-sm);
  cursor: pointer;
  transition: transform .15s ease, background-color .12s ease, bottom .15s ease;
}
html[data-brand="lana"] .lana-sw-launcher:hover { background: var(--primary-hover); transform: scale(1.05); }
html[data-brand="lana"] .lana-sw-launcher:active { transform: scale(.97); }
html[data-brand="lana"] .lana-sw-launcher > span:not(.lana-sw-badge) { display: grid; place-items: center; transition: transform .15s ease, opacity .15s ease; }
html[data-brand="lana"] .lana-sw-launcher .lana-sw-ic-x,
html[data-brand="lana"] .lana-sw-launcher .lana-sw-ic-chat { grid-area: 1 / 1; }
html[data-brand="lana"] .lana-sw-launcher .lana-sw-ic-chat svg, html[data-brand="lana"] .lana-sw-launcher .lana-sw-ic-x svg { width: 30px; height: 30px; }
html[data-brand="lana"] .lana-sw-launcher .lana-sw-ic-x { opacity: 0; transform: rotate(-45deg) scale(.8); }
html[data-brand="lana"] .lana-sw-launcher[aria-expanded="true"] .lana-sw-ic-chat { opacity: 0; transform: rotate(45deg) scale(.8); }
html[data-brand="lana"] .lana-sw-launcher[aria-expanded="true"] .lana-sw-ic-x { opacity: 1; transform: none; }
/* unread replies: the red pill on the top-right edge */
html[data-brand="lana"] .lana-sw-badge {
  position: absolute; top: -4px; right: -4px;
  min-width: 20px; height: 20px; padding: 0 5px;
  display: grid; place-items: center;
  border: 2px solid var(--background); border-radius: var(--radius-full);
  background: var(--destructive); color: var(--destructive-foreground);
  font-size: var(--text-xs); line-height: 1; font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

/* the "Saved" chip of js/store.js and the Tracking toast move left of the bubble.
   v7: the chip is centred on the bubble's height (store.js puts it at bottom 16 px,
   the bubble sits at bottom 20 px and is 52 px tall), 12 px left of it, never on it.
   --lana-sw-reserve: what the bubble and the chip take from the right edge of the
   screen (edge + bubble + 12 + the chip, ~76 px for "Saving…" / "Saved", + 8);
   a footer or a pager pinned to the bottom of the screen keeps that much room on
   its right (Fans: css/lana-fans.css). */
html[data-brand="lana"] { --lana-sw-reserve: 0px; }
html[data-brand="lana"] body.lana-sw-on { --lana-sw-reserve: calc(var(--lana-sw-edge) + var(--lana-sw-size) + 12px + 76px + 8px); }
html[data-brand="lana"] body.lana-sw-on #workspace-save-status {
  right: calc(var(--lana-sw-edge) + var(--lana-sw-size) + 12px);
  bottom: calc(var(--lana-sw-edge) + var(--lana-sw-size) / 2);
  transform: translateY(50%);
  max-width: min(640px, calc(100vw - var(--lana-sw-edge) * 2 - var(--lana-sw-size) - 12px));
}
/* When the bubble rises above a reply box (--lana-sw-lift, Live Convs and Playground),
   js/support-widget.js sets the lift on the bubble only: the chip cannot read it and
   would stay on the Send button. It rises by the usual lift of those pages (the reply
   box, ~72 px; Live: only on a wide screen, the phone shows the list or the thread).
   CSS anchor positioning cannot do it: store.js appends the chip BEFORE the bubble,
   and an anchor must come first in the page. Exact fix for later: support-widget.js
   also writes the lift as --lana-sw-lift-chip on <body>: these rules then follow it. */
html[data-brand="lana"] body.lana-sw-on:has(#app .pgd .lt-cp) #workspace-save-status { bottom: calc(var(--lana-sw-edge) + var(--lana-sw-lift-chip, 72px) + var(--lana-sw-size) / 2); }
@media (min-width: 761px) {
  html[data-brand="lana"] body.lana-sw-on:has(#app .lv .lt-cp) #workspace-save-status { bottom: calc(var(--lana-sw-edge) + var(--lana-sw-lift-chip, 76px) + var(--lana-sw-size) / 2); }
}
html[data-brand="lana"] body.lana-sw-on .trk-toast { right: calc(var(--lana-sw-edge) + var(--lana-sw-size) + 12px); }

/* ---------- the panel ---------- */
html[data-brand="lana"] .lana-sw-panel {
  position: fixed;
  right: var(--lana-sw-edge);
  bottom: calc(var(--lana-sw-edge) + var(--lana-sw-size) + 12px + var(--lana-sw-lift, 0px));
  z-index: var(--lana-sw-z);
  display: flex; flex-direction: column;
  width: 380px; max-width: calc(100vw - var(--lana-sw-edge) * 2);
  height: 560px;
  max-height: calc(100vh - var(--lana-sw-edge) * 2 - var(--lana-sw-size) - 12px - var(--lana-sw-lift, 0px));
  max-height: calc(100dvh - var(--lana-sw-edge) * 2 - var(--lana-sw-size) - 12px - var(--lana-sw-lift, 0px));
  overflow: hidden;
  border: 1px solid var(--border-strong); border-radius: var(--radius-xl);
  background: var(--popover); color: var(--popover-foreground);
  box-shadow: var(--shadow-md);
  font-size: var(--text-base);
  transform-origin: 100% 100%;
  animation: lana-sw-in .15s ease-out;
}
html[data-brand="lana"] .lana-sw-panel[hidden] { display: none; }
@keyframes lana-sw-in { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* header: soft raspberry, the title block starts at the left edge (no avatar since v7) */
html[data-brand="lana"] .lana-sw-head {
  flex: none; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  background: var(--primary-soft);
  border-bottom: 1px solid var(--border);
}
html[data-brand="lana"] .lana-sw-head-t { min-width: 0; flex: 1; }
html[data-brand="lana"] .lana-sw-head-t b { display: block; font-size: var(--text-lg); line-height: var(--leading-tight); font-weight: var(--weight-semibold); letter-spacing: -.01em; }
html[data-brand="lana"] .lana-sw-head-t p { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: var(--text-sm); color: var(--muted-foreground); }
html[data-brand="lana"] .lana-sw-online { flex: none; width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--success); }

/* icon buttons (close, back, attach): ghost, 36 px */
html[data-brand="lana"] .lana-sw-icon-btn {
  flex: none; display: grid; place-items: center;
  width: var(--control-h); height: var(--control-h); padding: 0;
  border: 0; border-radius: var(--radius-md);
  background: transparent; color: var(--muted-foreground);
  cursor: pointer; transition: background-color .12s, color .12s;
}
html[data-brand="lana"] .lana-sw-icon-btn:hover { background: var(--accent-strong); color: var(--foreground); }

html[data-brand="lana"] .lana-sw-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html[data-brand="lana"] .lana-sw-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- thread ---------- */
html[data-brand="lana"] .lana-sw-log {
  flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-4) var(--space-4) var(--space-2);
}
html[data-brand="lana"] .lana-sw-log:focus-visible { outline-offset: -2px; }   /* the global ring, drawn inside the scroll box */
html[data-brand="lana"] .lana-sw-day { display: flex; justify-content: center; margin: var(--space-2) 0; }
html[data-brand="lana"] .lana-sw-day span { padding: 2px 8px; border-radius: var(--radius-full); background: var(--secondary); color: var(--muted-foreground); font-size: var(--text-xs); }
html[data-brand="lana"] .lana-sw-msg { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 100%; }
html[data-brand="lana"] .lana-sw-msg.is-start { margin-top: var(--space-2); }
html[data-brand="lana"] .lana-sw-msg.is-me { justify-content: flex-end; }
html[data-brand="lana"] .lana-sw-stack { display: flex; flex-direction: column; gap: 3px; min-width: 0; max-width: 78%; }
html[data-brand="lana"] .lana-sw-msg.is-me .lana-sw-stack { align-items: flex-end; }
html[data-brand="lana"] .lana-sw-who { font-size: var(--text-xs); color: var(--muted-foreground); padding-inline: 4px; }
html[data-brand="lana"] .lana-sw-bub {
  padding: 8px 12px;
  border-radius: var(--radius-xl);
  font-size: var(--text-base); line-height: 1.45;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
html[data-brand="lana"] .lana-sw-msg.is-team .lana-sw-bub { background: var(--muted); color: var(--foreground); border-bottom-left-radius: var(--radius-sm); }
html[data-brand="lana"] .lana-sw-msg.is-me .lana-sw-bub { background: var(--primary); color: var(--primary-foreground); border-bottom-right-radius: var(--radius-sm); }
html[data-brand="lana"] .lana-sw-time { padding-inline: 4px; font-size: var(--text-xs); color: var(--subtle-foreground); font-variant-numeric: tabular-nums; }
html[data-brand="lana"] .lana-sw-receipt { align-self: flex-end; margin: -2px 4px 0; font-size: var(--text-xs); color: var(--subtle-foreground); }
html[data-brand="lana"] .lana-sw-files { display: flex; flex-direction: column; gap: 4px; }
html[data-brand="lana"] .lana-sw-file,
html[data-brand="lana"] .lana-sw-chip {
  display: flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  background: var(--card); color: var(--foreground);
  font-size: var(--text-sm); text-decoration: none;
}
html[data-brand="lana"] a.lana-sw-file:hover { background: var(--accent); }
html[data-brand="lana"] :is(.lana-sw-file, .lana-sw-chip) svg { flex: none; color: var(--muted-foreground); }
html[data-brand="lana"] .lana-sw-file-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-brand="lana"] .lana-sw-file-s { flex: none; font-size: var(--text-xs); color: var(--subtle-foreground); }
html[data-brand="lana"] .lana-sw-typing { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
html[data-brand="lana"] .lana-sw-dots { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: var(--radius-xl); border-bottom-left-radius: var(--radius-sm); background: var(--muted); }
html[data-brand="lana"] .lana-sw-dots i { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--muted-foreground); animation: lana-sw-dot 1s infinite ease-in-out; }
html[data-brand="lana"] .lana-sw-dots i:nth-child(2) { animation-delay: .15s; }
html[data-brand="lana"] .lana-sw-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes lana-sw-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* composer (v7): one rounded box, nothing but the privacy line outside it */
html[data-brand="lana"] .lana-sw-composer {
  flex: none; display: flex; flex-direction: column; gap: 6px;
  padding: var(--space-2) var(--space-3) var(--space-2);
  padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
}
html[data-brand="lana"] .lana-sw-err { margin: 0; font-size: var(--text-sm); color: var(--destructive); }
/* the box and the picker that floats above it */
html[data-brand="lana"] .lana-sw-boxwrap { position: relative; min-width: 0; }
html[data-brand="lana"] .lana-sw-box {
  display: flex; flex-direction: column; min-width: 0;
  border: 1px solid var(--input); border-radius: var(--radius-xl);
  background: var(--input-background);
  transition: border-color .12s, box-shadow .12s;
}
html[data-brand="lana"] .lana-sw-box:hover { border-color: rgb(255 255 255 / .3); }
html[data-brand="lana"] .lana-sw-box:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 18%, transparent); }
html[data-brand="lana"] .lana-sw-box textarea {
  display: block; box-sizing: border-box;
  width: 100%; min-height: 34px; max-height: 114px;
  padding: 10px 12px 4px; margin: 0;
  border: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: transparent; color: var(--foreground);
  font: inherit; font-size: var(--text-base); line-height: 20px;
  resize: none; overflow-y: hidden;
}
/* the box draws the focus (border + soft ring): no second ring on the field inside it */
html[data-brand="lana"] .lana-sw-box textarea:focus,
html[data-brand="lana"] .lana-sw-box textarea:focus-visible { outline: none !important; box-shadow: none; }
html[data-brand="lana"] .lana-sw-box textarea::placeholder { color: var(--subtle-foreground); opacity: 1; }
html[data-brand="lana"] .lana-sw-pending { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 8px 8px 0; list-style: none; }
html[data-brand="lana"] .lana-sw-pending[hidden] { display: none; }
html[data-brand="lana"] .lana-sw-chip { padding: 4px 4px 4px 10px; max-width: 100%; min-width: 0; }
html[data-brand="lana"] .lana-sw-chip-x { flex: none; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-foreground); cursor: pointer; }
html[data-brand="lana"] .lana-sw-chip-x:hover { background: var(--accent-strong); color: var(--foreground); }
/* foot of the box: tools on the left, Send on the right */
html[data-brand="lana"] .lana-sw-box-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 6px 6px; }
html[data-brand="lana"] .lana-sw-send {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--primary); border-radius: var(--radius-full);
  background: var(--primary); color: #fff;
  cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease, transform .18s ease;
}
html[data-brand="lana"] .lana-sw-send svg { width: 16px; height: 16px; stroke-width: 2.2; }
/* l46 (Arthur): pink with white text; on hover white fill, #111 glyph, 1 px pink outline */
html[data-brand="lana"] .lana-sw-send:is(:hover, :focus-visible):not(:disabled):not(.is-disabled) { background: #fff; border-color: var(--primary); color: #111; transform: translateY(-1px); }
html[data-brand="lana"] .lana-sw-send:is(:disabled, .is-disabled) { background: var(--muted); border-color: var(--muted); color: var(--subtle-foreground); cursor: not-allowed; }
/* the privacy line under the box */
html[data-brand="lana"] .lana-sw-legal { margin: 0; padding-inline: 4px; text-align: center; font-size: var(--text-xs); line-height: 1.4; color: var(--subtle-foreground); }
html[data-brand="lana"] .lana-sw-legal a { color: var(--muted-foreground); text-decoration: underline; text-underline-offset: 2px; }
html[data-brand="lana"] .lana-sw-legal a:hover { color: var(--foreground); }

/* the old "#support" page */
html[data-brand="lana"] .lana-sw-page .box { color: var(--primary); }

/* ---------- v5: greeting, content wrapper, reactions ---------- */
html[data-brand="lana"] .lana-sw-greet .lana-sw-bub { white-space: normal; }
html[data-brand="lana"] .lana-sw-greet-1 { font-weight: var(--weight-semibold); }
html[data-brand="lana"] .lana-sw-msg.is-team .lana-sw-stack { align-items: flex-start; }
/* bubble (or GIF) + its reaction bar: the bar floats over the top edge on hover / focus / tap */
html[data-brand="lana"] .lana-sw-content { position: relative; display: flex; flex-direction: column; max-width: 100%; min-width: 0; }
html[data-brand="lana"] .lana-sw-msg.is-me .lana-sw-content { align-items: flex-end; }
html[data-brand="lana"] .lana-sw-reactbar {
  position: absolute; top: -18px; z-index: 1;
  display: flex; gap: 2px; padding: 2px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full);
  background: var(--popover); box-shadow: var(--shadow-sm);
  opacity: 0; pointer-events: none; transform: translateY(4px);
  transition: opacity .12s ease, transform .12s ease;
}
html[data-brand="lana"] .lana-sw-msg.is-team .lana-sw-reactbar { left: 4px; }
html[data-brand="lana"] .lana-sw-msg.is-me .lana-sw-reactbar { right: 4px; }
html[data-brand="lana"] :is(.lana-sw-content:hover, .lana-sw-content:focus-within, .lana-sw-msg.is-picking .lana-sw-content) > .lana-sw-reactbar { opacity: 1; pointer-events: auto; transform: none; }
html[data-brand="lana"] .lana-sw-panel.is-off .lana-sw-reactbar { display: none; }
html[data-brand="lana"] .lana-sw-reactbar button {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: var(--radius-full); background: transparent;
  font-size: 15px; line-height: 1; cursor: pointer;
  transition: background-color .12s, transform .12s;
}
html[data-brand="lana"] .lana-sw-reactbar button:hover { background: var(--accent-strong); transform: scale(1.15); }
html[data-brand="lana"] .lana-sw-reacts { display: flex; flex-wrap: wrap; gap: 4px; }
html[data-brand="lana"] .lana-sw-msg.is-me .lana-sw-reacts { justify-content: flex-end; }
html[data-brand="lana"] .lana-sw-rx {
  display: inline-flex; align-items: center; gap: 3px;
  height: 24px; padding: 0 7px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-full);
  background: var(--card); color: var(--foreground);
  font-size: var(--text-xs); line-height: 1; cursor: pointer;
}
html[data-brand="lana"] .lana-sw-rx:hover { background: var(--accent); }
html[data-brand="lana"] .lana-sw-rx.is-mine { border-color: var(--primary-border); background: var(--primary-soft); }
html[data-brand="lana"] .lana-sw-rx-n { font-variant-numeric: tabular-nums; color: var(--muted-foreground); font-weight: var(--weight-medium); }

/* ---------- v5: GIF cards (local set rendered in CSS, or a real image from the server) ---------- */
html[data-brand="lana"] .lana-sw-gif {
  --sw-tone: var(--chart-1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 140px; aspect-ratio: 4 / 3;
  border: 1px solid color-mix(in srgb, var(--sw-tone) 40%, transparent);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--sw-tone) 20%, var(--card));
  color: var(--foreground); overflow: hidden;
}
html[data-brand="lana"] .lana-sw-gif[data-tone="2"] { --sw-tone: var(--chart-2); }
html[data-brand="lana"] .lana-sw-gif[data-tone="3"] { --sw-tone: var(--chart-3); }
html[data-brand="lana"] .lana-sw-gif[data-tone="4"] { --sw-tone: var(--chart-4); }
html[data-brand="lana"] .lana-sw-gif[data-tone="5"] { --sw-tone: var(--chart-5); }
html[data-brand="lana"] .lana-sw-gif[data-tone="6"] { --sw-tone: var(--chart-6); }
html[data-brand="lana"] .lana-sw-gif-e { display: block; font-size: 40px; line-height: 1; }
html[data-brand="lana"] .lana-sw-gif-l { max-width: 100%; padding-inline: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-xs); font-weight: var(--weight-semibold); }
html[data-brand="lana"] .lana-sw-gif.is-img { width: auto; aspect-ratio: auto; max-width: 220px; border-color: var(--border); background: var(--muted); }
html[data-brand="lana"] .lana-sw-gif.is-img img { display: block; max-width: 100%; max-height: 220px; height: auto; }
html[data-brand="lana"] .lana-sw-gif[data-anim="bounce"] .lana-sw-gif-e { animation: lana-sw-bounce 1.1s ease-in-out infinite; }
html[data-brand="lana"] .lana-sw-gif[data-anim="pulse"] .lana-sw-gif-e { animation: lana-sw-pulse 1.4s ease-in-out infinite; }
html[data-brand="lana"] .lana-sw-gif[data-anim="beat"] .lana-sw-gif-e { animation: lana-sw-beat 1s ease-in-out infinite; }
html[data-brand="lana"] .lana-sw-gif[data-anim="shake"] .lana-sw-gif-e { animation: lana-sw-shake 1.2s ease-in-out infinite; }
html[data-brand="lana"] .lana-sw-gif[data-anim="spin"] .lana-sw-gif-e { animation: lana-sw-spin 1.6s ease-in-out infinite; }
html[data-brand="lana"] .lana-sw-gif[data-anim="tilt"] .lana-sw-gif-e { animation: lana-sw-tilt 1.8s ease-in-out infinite; }
html[data-brand="lana"] .lana-sw-gif[data-anim="wave"] .lana-sw-gif-e { transform-origin: 70% 80%; animation: lana-sw-wave 1.3s ease-in-out infinite; }
@keyframes lana-sw-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes lana-sw-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes lana-sw-beat { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(1.22); } 30% { transform: scale(.95); } }
@keyframes lana-sw-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
@keyframes lana-sw-spin { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(180deg) scale(1.1); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes lana-sw-tilt { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }
@keyframes lana-sw-wave { 0%, 60%, 100% { transform: rotate(0); } 15% { transform: rotate(18deg); } 30% { transform: rotate(-10deg); } 45% { transform: rotate(14deg); } }

/* ---------- v5: tools row (emoji, GIF, attach) and the drawers above the input ---------- */
html[data-brand="lana"] .lana-sw-tools { display: flex; align-items: center; gap: 2px; min-width: 0; }
html[data-brand="lana"] .lana-sw-tools .lana-sw-icon-btn { width: 32px; height: 32px; border-radius: var(--radius-full); }
html[data-brand="lana"] .lana-sw-tool.is-on { background: var(--accent-strong); color: var(--foreground); }
/* "GIF": plain text in small capitals, the same weight as the two icons next to it */
html[data-brand="lana"] .lana-sw-tool-gif span { font-size: 11px; line-height: 1; font-weight: var(--weight-semibold); letter-spacing: .06em; }
/* the picker: floats above the box (bottom of the wrap + 8 px), left under its icon (js placeDrawer),
   never wider than the box, so never out of the panel */
html[data-brand="lana"] .lana-sw-drawer {
  position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 2;
  display: flex; flex-direction: column; gap: 8px;
  width: min(320px, 100%); max-height: 260px; padding: 8px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  background: var(--popover); box-shadow: var(--shadow-md);
  overflow: hidden;
}
html[data-brand="lana"] .lana-sw-drawer[hidden] { display: none; }
html[data-brand="lana"] .lana-sw-drawer-hd { position: relative; flex: none; }
html[data-brand="lana"] .lana-sw-q-ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); display: grid; color: var(--subtle-foreground); pointer-events: none; }
html[data-brand="lana"] .lana-sw-gif-q {
  width: 100%; height: var(--control-h); margin: 0; padding: 0 10px 0 32px;
  border: 1px solid var(--input); border-radius: var(--radius-md);
  background: var(--input-background); color: var(--foreground);
  font: inherit; font-size: var(--text-sm);
}
html[data-brand="lana"] .lana-sw-gif-q::placeholder { color: var(--subtle-foreground); opacity: 1; }
html[data-brand="lana"] .lana-sw-gif-q:focus { border-color: var(--ring); }
html[data-brand="lana"] .lana-sw-gif-wrap,
html[data-brand="lana"] .lana-sw-drawer[data-kind="emoji"] { overflow: auto; overscroll-behavior: contain; min-height: 0; }
html[data-brand="lana"] .lana-sw-gif-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
html[data-brand="lana"] .lana-sw-gif-pick { display: block; padding: 0; border: 0; border-radius: var(--radius-lg); background: transparent; cursor: pointer; }
html[data-brand="lana"] .lana-sw-gif-pick .lana-sw-gif { width: 100%; transition: transform .12s ease, border-color .12s; }
html[data-brand="lana"] .lana-sw-gif-pick .lana-sw-gif-e { font-size: 28px; }
html[data-brand="lana"] .lana-sw-gif-pick:hover .lana-sw-gif { transform: scale(1.04); border-color: var(--sw-tone); }
html[data-brand="lana"] .lana-sw-emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
html[data-brand="lana"] .lana-sw-emoji {
  display: grid; place-items: center; height: 36px; padding: 0;
  border: 0; border-radius: var(--radius-md); background: transparent;
  font-size: 20px; line-height: 1; cursor: pointer;
}
html[data-brand="lana"] .lana-sw-emoji:hover { background: var(--accent-strong); }
html[data-brand="lana"] .lana-sw-drawer-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-4) var(--space-2); text-align: center; }
html[data-brand="lana"] .lana-sw-drawer-empty b { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
html[data-brand="lana"] .lana-sw-drawer-empty p { margin: 0 0 6px; font-size: var(--text-sm); color: var(--muted-foreground); }

/* ---------- v5: read-only (Store blocked) ---------- */
html[data-brand="lana"] .lana-sw-off {
  flex: none; display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border); background: var(--muted);
}
html[data-brand="lana"] .lana-sw-off > div { flex: 1; min-width: 0; }
html[data-brand="lana"] .lana-sw-off b { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
html[data-brand="lana"] .lana-sw-off p { margin: 2px 0 0; font-size: var(--text-xs); color: var(--muted-foreground); }
html[data-brand="lana"] .lana-sw-off-ic { flex: none; display: grid; color: var(--warning); }
html[data-brand="lana"] .lana-sw-off-ic svg { width: 20px; height: 20px; }

/* ---------- phones and narrow windows: the panel takes the screen ---------- */
@media (max-width: 760px) {
  html[data-brand="lana"] { --lana-sw-size: 48px; --lana-sw-edge: 16px; }
  html[data-brand="lana"] .lana-sw-panel {
    inset: 0; width: 100%; max-width: none; height: 100%; max-height: none;
    border: 0; border-radius: 0; box-shadow: none;
    padding-top: env(safe-area-inset-top, 0px);
  }
  html[data-brand="lana"] body.lana-sw-open .lana-sw-launcher { display: none; }
  html[data-brand="lana"] .lana-sw-head { padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); }
  html[data-brand="lana"] .lana-sw-close { width: 40px; height: 40px; }
  html[data-brand="lana"] .lana-sw-box textarea { font-size: 16px; }   /* no zoom on iOS */
  html[data-brand="lana"] .lana-sw-stack { max-width: 82%; }
  html[data-brand="lana"] .lana-sw-tools .lana-sw-icon-btn { width: 40px; height: 40px; }
  html[data-brand="lana"] .lana-sw-send { width: 40px; height: 40px; }
  html[data-brand="lana"] .lana-sw-box-foot { padding: 0 4px 4px; }
  html[data-brand="lana"] .lana-sw-drawer { width: 100%; }
  html[data-brand="lana"] .lana-sw-rx { height: 32px; padding: 0 10px; font-size: var(--text-sm); }
  html[data-brand="lana"] .lana-sw-reactbar button { width: 36px; height: 36px; font-size: 18px; }
  html[data-brand="lana"] .lana-sw-reactbar { top: -26px; }
  html[data-brand="lana"] .lana-sw-emoji { height: 40px; }
  /* the panel covers the screen: the "Saved" chip would sit on the composer, it stays hidden (errors still show) */
  html[data-brand="lana"] body.lana-sw-open #workspace-save-status:not([data-state="error"]) { visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-brand="lana"] .lana-sw-panel { animation: none; }
  html[data-brand="lana"] :is(.lana-sw-launcher, .lana-sw-launcher > span) { transition: none; }
  html[data-brand="lana"] .lana-sw-launcher:hover { transform: none; }
  html[data-brand="lana"] :is(.lana-sw-start, .lana-sw-send) { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
  html[data-brand="lana"] :is(.lana-sw-start, .lana-sw-send):is(:hover, :focus-visible) { transform: none; }
  html[data-brand="lana"] .lana-sw-dots i { animation: none; opacity: .7; }
  html[data-brand="lana"] .lana-sw-gif .lana-sw-gif-e { animation: none; }
  html[data-brand="lana"] :is(.lana-sw-reactbar, .lana-sw-reactbar button, .lana-sw-gif-pick .lana-sw-gif) { transition: none; }
}

/* ---------- light theme (v5 parts) ---------- */
html[data-brand="lana"][data-theme="light"] .lana-sw-gif { background: color-mix(in srgb, var(--sw-tone) 12%, var(--card)); border-color: color-mix(in srgb, var(--sw-tone) 30%, transparent); }
html[data-brand="lana"][data-theme="light"] .lana-sw-gif.is-img { background: var(--muted); border-color: var(--border); }
html[data-brand="lana"][data-theme="light"] .lana-sw-reactbar { background: var(--background); }
html[data-brand="lana"][data-theme="light"] .lana-sw-rx { background: var(--background); }
html[data-brand="lana"][data-theme="light"] .lana-sw-rx.is-mine { background: var(--primary-soft); }
html[data-brand="lana"][data-theme="light"] .lana-sw-drawer { background: var(--background); }
html[data-brand="lana"][data-theme="light"] .lana-sw-box:hover { border-color: var(--input-hover); }
html[data-brand="lana"][data-theme="light"] .lana-sw-legal a { color: var(--primary-text); }
html[data-brand="lana"][data-theme="light"] .lana-sw-gif-q:hover { border-color: var(--input-hover); }
html[data-brand="lana"][data-theme="light"] .lana-sw-off-ic { color: var(--warning); }

/* ---------- account7: Home (guides search, Start a conversation), guide view, back arrow ---------- */
/* back "‹" at the left of the header, on the guide and conversation views only (ALI Remote style) */
html[data-brand="lana"] .lana-sw-back { margin-left: calc(var(--space-2) * -1); color: var(--foreground); }
html[data-brand="lana"] .lana-sw-back[hidden] { display: none; }
html[data-brand="lana"] .lana-sw-head-t p[hidden] { display: none; }
html[data-brand="lana"] .lana-sw-panel[data-view="guide"] .lana-sw-head { padding-top: var(--space-3); padding-bottom: var(--space-3); }

html[data-brand="lana"] .lana-sw-home { flex: 1; min-height: 0; display: flex; flex-direction: column; }
html[data-brand="lana"] .lana-sw-home-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: var(--space-4) var(--space-4) var(--space-3); }
html[data-brand="lana"] .lana-sw-hi { margin: 0 0 var(--space-3); font-size: var(--text-xl); line-height: var(--leading-tight); font-weight: var(--weight-semibold); letter-spacing: -.015em; color: var(--foreground); }
html[data-brand="lana"] .lana-sw-hi .lana-sw-greet-1 { display: block; color: var(--muted-foreground); }
html[data-brand="lana"] .lana-sw-hi-2 { display: block; }

html[data-brand="lana"] .lana-sw-search { position: relative; margin-bottom: var(--space-3); }
html[data-brand="lana"] .lana-sw-search-ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: grid; color: var(--muted-foreground); pointer-events: none; }
html[data-brand="lana"] .lana-sw-search-q {
  box-sizing: border-box; width: 100%; height: 40px; padding: 0 12px 0 36px;
  border: 1px solid var(--input); border-radius: var(--radius-lg);
  background: var(--input-background); color: var(--foreground);
  font: inherit; font-size: var(--text-sm);
}
html[data-brand="lana"] .lana-sw-search-q::placeholder { color: var(--muted-foreground); }
html[data-brand="lana"] .lana-sw-search-q:hover { border-color: var(--input-hover); }
html[data-brand="lana"] .lana-sw-search-q::-webkit-search-cancel-button { cursor: pointer; }

html[data-brand="lana"] .lana-sw-h3 { margin: 0 0 var(--space-2); color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .02em; text-transform: uppercase; }
html[data-brand="lana"] .lana-sw-glist { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
html[data-brand="lana"] .lana-sw-glist > li + li { border-top: 1px solid var(--border); }
html[data-brand="lana"] .lana-sw-gl {
  display: flex; align-items: center; gap: var(--space-3);
  box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 12px;
  border: 0; background: transparent; color: var(--foreground);
  font: inherit; font-size: var(--text-sm); text-align: left; cursor: pointer;
}
html[data-brand="lana"] .lana-sw-gl:hover { background: var(--accent); }
html[data-brand="lana"] .lana-sw-gl:focus-visible { outline-offset: -2px; }
html[data-brand="lana"] .lana-sw-gl-ic { flex: none; display: grid; color: var(--muted-foreground); }
html[data-brand="lana"] .lana-sw-gl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
html[data-brand="lana"] .lana-sw-gl-t { font-weight: var(--weight-medium); line-height: 1.35; overflow-wrap: anywhere; }
html[data-brand="lana"] .lana-sw-gl-s { color: var(--muted-foreground); font-size: var(--text-xs); line-height: 1.4; overflow-wrap: anywhere; }
html[data-brand="lana"] .lana-sw-gl-s mark { background: var(--primary-soft); color: var(--foreground); border-radius: 2px; }
html[data-brand="lana"] .lana-sw-gl-chev { flex: none; display: grid; color: var(--muted-foreground); }
html[data-brand="lana"] .lana-sw-glist.is-loading li { padding: 14px 12px; }
html[data-brand="lana"] .lana-sw-skel { display: block; height: 12px; width: 70%; border-radius: var(--radius-sm); background: var(--muted); animation: lana-sw-skel 1.2s ease-in-out infinite alternate; }
html[data-brand="lana"] .lana-sw-glist.is-loading li:nth-child(2n) .lana-sw-skel { width: 52%; }
@keyframes lana-sw-skel { from { opacity: .55; } to { opacity: 1; } }
html[data-brand="lana"] .lana-sw-gnone { margin: 0; padding: var(--space-3); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--muted-foreground); font-size: var(--text-sm); line-height: 1.5; overflow-wrap: anywhere; }
html[data-brand="lana"] .lana-sw-gerr { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); font-size: var(--text-sm); }
html[data-brand="lana"] .lana-sw-gerr p { margin: 0; color: var(--muted-foreground); }

/* the foot of Home: the plain raspberry button, then the link to the Guides page */
html[data-brand="lana"] .lana-sw-home-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
html[data-brand="lana"] .lana-sw-start {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  box-sizing: border-box; width: 100%; height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--primary); border-radius: var(--radius-lg);
  background: var(--primary); color: #fff;
  font: inherit; font-size: var(--text-base); font-weight: var(--weight-semibold);
  cursor: pointer; transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
/* l46 (Arthur): "Start a conversation" is pink with white text; on hover white fill, #111 text, 1 px pink outline */
html[data-brand="lana"] .lana-sw-start:is(:hover, :focus-visible) { background: #fff; border-color: var(--primary); color: #111; transform: translateY(-1px); box-shadow: 0 10px 22px -14px color-mix(in srgb, var(--primary) 60%, transparent); }
html[data-brand="lana"] .lana-sw-start svg { flex: none; }
html[data-brand="lana"] .lana-sw-start-l { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-brand="lana"] .lana-sw-start-n { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--radius-full); background: #fff; color: var(--primary); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 20px; text-align: center; }
html[data-brand="lana"] .lana-sw-start:is(:hover, :focus-visible) .lana-sw-start-n { background: var(--primary); color: #fff; }
html[data-brand="lana"] .lana-sw-start-n[hidden] { display: none; }
html[data-brand="lana"] .lana-sw-all { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-md); color: var(--muted-foreground); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; }
html[data-brand="lana"] .lana-sw-all:hover { color: var(--foreground); background: var(--accent); }

/* one guide, read in the panel: the same prose as the Guides page, a little smaller */
html[data-brand="lana"] .lana-sw-guide { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; }
html[data-brand="lana"] .lana-sw-guide:focus-visible { outline-offset: -2px; }
html[data-brand="lana"] .lana-sw-art { padding: var(--space-4) var(--space-4) var(--space-5); }
html[data-brand="lana"] .lana-sw-art-crumb { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-2); color: var(--muted-foreground); font-size: var(--text-xs); }
html[data-brand="lana"] .lana-sw-art-t { margin: 0; font-size: var(--text-lg); line-height: var(--leading-tight); font-weight: var(--weight-semibold); letter-spacing: -.01em; overflow-wrap: anywhere; }
html[data-brand="lana"] .lana-sw-art-m { display: flex; align-items: center; gap: 6px; margin: var(--space-2) 0 var(--space-4); color: var(--muted-foreground); font-size: var(--text-xs); }
html[data-brand="lana"] .lana-sw-prose { font-size: var(--text-sm); line-height: 1.6; }
html[data-brand="lana"] .lana-sw-prose h3 { font-size: var(--text-base); }
html[data-brand="lana"] .lana-sw-prose img { max-width: 100%; height: auto; }
html[data-brand="lana"] .lana-sw-prose :is(pre, table) { max-width: 100%; overflow: auto; }
html[data-brand="lana"] .lana-sw-guide-foot { flex: none; display: flex; justify-content: center; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border); }
html[data-brand="lana"] .lana-sw-full {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  box-sizing: border-box; width: 100%; height: var(--control-h); padding: 0 var(--space-4);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  color: var(--foreground); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none;
}
html[data-brand="lana"] .lana-sw-full:hover { background: var(--accent); }

@media (max-width: 760px) {
  html[data-brand="lana"] .lana-sw-back { width: 40px; height: 40px; }
  html[data-brand="lana"] .lana-sw-search-q { height: 44px; font-size: 16px; }   /* no zoom on iOS */
  html[data-brand="lana"] .lana-sw-gl { min-height: 48px; }
  html[data-brand="lana"] .lana-sw-full { height: 44px; }
  html[data-brand="lana"] .lana-sw-home-foot, html[data-brand="lana"] .lana-sw-guide-foot { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) { html[data-brand="lana"] .lana-sw-skel { animation: none; } }
html[data-brand="lana"][data-theme="light"] .lana-sw-search-q { background: var(--background); }
html[data-brand="lana"][data-theme="light"] .lana-sw-glist { background: var(--background); }
html[data-brand="lana"][data-theme="light"] .lana-sw-search-q:hover { border-color: var(--input-hover); }

/* ============================================================
   widget9 (06/10)
   1. Public pages (landing, login, employee-login) load only css/tokens.css, which does not define
      --popover, --radius-xl, --z-dropdown, --text-base... so the panel was a transparent box with
      raw text. These are the Console values, scoped to the widget on <body data-lana-support>.
      (The Console body has no such attribute: nothing changes there.)
   2. The bubble: see #lana-sw-launcher below (raspberry chat tab since 22/10).
   3. Guest conversation: e-mail gate, "Chatting as", Guides link.
   ============================================================ */
body[data-lana-support] .lana-sw-launcher, body[data-lana-support] .lana-sw-panel {
  --z-dropdown: 60; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-full: 999px;
  --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-lg: 16px; --text-xl: 18px; --leading-tight: 1.2;
  --weight-medium: 500; --weight-semibold: 600; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --control-h: 36px;
  --chart-1: #f24886; --chart-2: #a689f1; --chart-3: #56acf0; --chart-4: #3ed0c8; --chart-5: #f7b83d; --chart-6: #4ed589;
  --background: #0a0a0b; --foreground: #fafafa; --card: #151517; --popover: #1c1c1f; --popover-foreground: #fafafa;
  --muted: #1c1c1f; --muted-foreground: #a1a1aa; --subtle-foreground: #8b8b94; --secondary: #232326;
  --accent: rgb(255 255 255 / .06); --accent-strong: rgb(255 255 255 / .10);
  --border: rgb(255 255 255 / .09); --border-strong: rgb(255 255 255 / .14);
  --input: rgb(255 255 255 / .22); --input-hover: rgb(255 255 255 / .3); --input-background: rgb(255 255 255 / .03);
  --primary: #f24886; --primary-hover: #fd6496; --primary-foreground: #1a050d; --primary-text: #f24886;
  --primary-soft: color-mix(in srgb, #f24886 14%, transparent); --primary-border: color-mix(in srgb, #f24886 42%, transparent);
  --ring: #f24886; --destructive: #f2613a; --destructive-foreground: #1c0a04; --success: #43d58f; --warning: #f2b036;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .4); --shadow-md: 0 12px 32px -12px rgb(0 0 0 / .7);
}
html[data-theme="light"] body[data-lana-support] .lana-sw-panel, html[data-theme="light"] body[data-lana-support] .lana-sw-launcher {
  --background: #fff; --foreground: #18181b; --card: #fff; --popover: #fff; --popover-foreground: #18181b;
  --muted: #f4f4f5; --muted-foreground: #52525b; --subtle-foreground: #66666e; --secondary: #f4f4f5;
  --accent: rgb(0 0 0 / .04); --accent-strong: rgb(0 0 0 / .07);
  --border: rgb(0 0 0 / .09); --border-strong: rgb(0 0 0 / .14);
  --input: rgb(0 0 0 / .44); --input-hover: rgb(0 0 0 / .62); --input-background: #fff;
  --primary-hover: #e8397a; --primary-text: #be185d;
  --primary-soft: color-mix(in srgb, #f24886 10%, transparent); --primary-border: color-mix(in srgb, #f24886 45%, transparent);
  --destructive: #b93815; --destructive-foreground: #fff; --success: #0f7b45; --warning: #a05a00;
  --shadow-sm: 0 1px 2px rgb(0 0 0 / .06); --shadow-md: 0 12px 28px -12px rgb(0 0 0 / .18), 0 2px 6px -2px rgb(0 0 0 / .06);
}
/* a static page has no .add button style: the gate's button brings its own */
body[data-lana-support] .lana-sw-panel { font-family: inherit; line-height: 1.4; }
body[data-lana-support] .lana-sw-panel button { font: inherit; }

/* the bubble, ONE design on every page and theme (Arthur, 22/10): a small raspberry chat tab, white glyph.
   #lana-sw-launcher (id) beats the light shadow of css/lana-light.css without !important. */
html[data-brand="lana"] #lana-sw-launcher {
  background: #f24886; color: #fff;
  box-shadow: 0 8px 24px -6px color-mix(in srgb, #f24886 55%, transparent), 0 1px 2px rgb(0 0 0 / .18);
  cursor: pointer;
  transition: transform .15s ease, background-color .12s ease, box-shadow .15s ease, bottom .15s ease;
}
html[data-brand="lana"] #lana-sw-launcher:hover { background: #e8397a; transform: scale(1.04); }
html[data-brand="lana"] #lana-sw-launcher:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { html[data-brand="lana"] #lana-sw-launcher:is(:hover, :active) { transform: none; } }
html[data-brand="lana"] #lana-sw-launcher:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f24886; }
/* unread count: white pill, raspberry text and edge, reads on the raspberry disc */
html[data-brand="lana"] #lana-sw-launcher .lana-sw-badge {
  background: #fff; color: #d61f66; border: 2px solid #f24886; top: -5px; right: -5px;
}

html[data-brand="lana"] .lana-sw-link {
  appearance: none; background: none; border: 0; padding: 4px 6px; margin: 0; border-radius: var(--radius-sm);
  color: var(--primary-text); font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer; text-decoration: underline; text-underline-offset: 2px;
}
html[data-brand="lana"] .lana-sw-link:hover { background: var(--accent); }
html[data-brand="lana"] .lana-sw-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
html[data-brand="lana"] .lana-sw-guides-link[hidden] { display: none; }
html[data-brand="lana"] .lana-sw-guestbar {
  flex: none; padding: 8px var(--space-4); border-bottom: 1px solid var(--border);
  color: var(--muted-foreground); font-size: var(--text-sm); overflow-wrap: anywhere;
}
html[data-brand="lana"] .lana-sw-guestbar b { color: var(--foreground); font-weight: var(--weight-medium); }
html[data-brand="lana"] .lana-sw-body[data-guest] { display: flex; flex-direction: column; min-height: 0; }
html[data-brand="lana"] .lana-sw-body[data-view="gate"] { display: flex; flex-direction: column; min-height: 0; }
html[data-brand="lana"] .lana-sw-gate-log { flex: 1; min-height: 0; overflow: auto; padding: var(--space-4); }
html[data-brand="lana"] .lana-sw-gate { flex: none; padding: var(--space-3) var(--space-4) var(--space-4); border-top: 1px solid var(--border); }
html[data-brand="lana"] .lana-sw-gate-l { display: block; margin-bottom: 6px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--muted-foreground); }
html[data-brand="lana"] .lana-sw-gate-row { display: flex; gap: 8px; }
html[data-brand="lana"] .lana-sw-gate-in {
  flex: 1; min-width: 0; height: var(--control-h); padding: 0 12px; box-sizing: border-box;
  border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--input-background); color: var(--foreground); font-size: 16px;
}
html[data-brand="lana"] .lana-sw-gate-in:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
html[data-brand="lana"] .lana-sw-gate-in[aria-invalid="true"] { border-color: var(--destructive); }
html[data-brand="lana"] .lana-sw-gate .add {
  flex: none; height: var(--control-h); padding: 0 14px; border: 1px solid var(--primary); border-radius: var(--radius-md);
  background: var(--primary); color: #fff; font-weight: var(--weight-semibold); cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
/* l46 (Arthur): same as every action button, white fill, #111 text, 1 px pink outline on hover */
html[data-brand="lana"] .lana-sw-gate .add:is(:hover, :focus-visible) { background: #fff; border-color: var(--primary); color: #111; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  html[data-brand="lana"] .lana-sw-gate .add { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
  html[data-brand="lana"] .lana-sw-gate .add:is(:hover, :focus-visible) { transform: none; }
}
html[data-brand="lana"] .lana-sw-gate-err { margin: 6px 0 0; color: var(--destructive); font-size: var(--text-sm); }
html[data-brand="lana"] .lana-sw-gate-err[hidden] { display: none; }

/* ===== widget10: Ask anything · Powered by AI ===== */
html[data-brand="lana"] .lana-sw-search-q { padding-right: 132px; }
html[data-brand="lana"] .lana-sw-ask-go { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; height: 28px; padding: 0 8px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--muted-foreground); font: inherit; font-size: var(--text-xs); cursor: pointer; }
html[data-brand="lana"] .lana-sw-ask-go:hover { background: var(--accent); color: var(--foreground); }
html[data-brand="lana"] .lana-sw-ask-go:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
html[data-brand="lana"] .lana-sw-ai-tag { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
html[data-brand="lana"] .lana-sw-ai-tag svg { flex: none; }
html[data-brand="lana"] .lana-sw-ask { margin: 0 0 var(--space-3); }
html[data-brand="lana"] .lana-sw-ask[hidden] { display: none; }
html[data-brand="lana"] .lana-sw-ask-card { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card, var(--input-background)); display: grid; gap: var(--space-2); }
html[data-brand="lana"] .lana-sw-ask-lbl { margin: 0; display: flex; align-items: center; gap: 6px; color: var(--muted-foreground); font-size: var(--text-xs); }
html[data-brand="lana"] .lana-sw-ask-a, html[data-brand="lana"] .lana-sw-ask-nf { margin: 0; font-size: var(--text-sm); line-height: 1.55; overflow-wrap: anywhere; }
html[data-brand="lana"] .lana-sw-ask-src { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
html[data-brand="lana"] .lana-sw-ask-link { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; font-size: var(--text-sm); color: var(--foreground); overflow-wrap: anywhere; }
html[data-brand="lana"] .lana-sw-ask-link span:last-child { color: var(--primary); white-space: nowrap; }
html[data-brand="lana"] .lana-sw-ask-link:hover span:first-child { text-decoration: underline; }
html[data-brand="lana"] .lana-sw-ask-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
html[data-brand="lana"] .lana-sw-ask-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-xs); color: var(--muted-foreground); }
html[data-brand="lana"] .lana-sw-vote { border: 1px solid var(--border); background: transparent; border-radius: var(--radius-md); height: 28px; min-width: 32px; cursor: pointer; font-size: 14px; }
html[data-brand="lana"] .lana-sw-vote:hover { background: var(--accent); }
html[data-brand="lana"] .lana-sw-ask-think { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--muted-foreground); font-size: var(--text-sm); }
html[data-brand="lana"] .lana-sw-dots { display: inline-flex; gap: 3px; }
html[data-brand="lana"] .lana-sw-dots i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .4; animation: lana-sw-dot 1s infinite ease-in-out; }
html[data-brand="lana"] .lana-sw-dots i:nth-child(2) { animation-delay: .15s; }
html[data-brand="lana"] .lana-sw-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes lana-sw-dot { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { html[data-brand="lana"] .lana-sw-dots i { animation: none; opacity: .6; } }
html[data-brand="lana"] .lana-sw-ai-badge { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--foreground); font-size: var(--text-xs); }
html[data-brand="lana"] .lana-sw-ai-follow { display: block; margin-top: 2px; color: var(--muted-foreground); font-size: var(--text-xs); }
@media (max-width: 480px) { html[data-brand="lana"] .lana-sw-ask-go { height: 36px; } html[data-brand="lana"] .lana-sw-search-q { padding-right: 126px; } }
html[data-brand="lana"][data-theme="light"] .lana-sw-ask-card { background: var(--background); }

/* widget12: the panel opens on the conversation; compact "Ask anything" line on top of the thread */
html[data-brand="lana"] .lana-sw-qask {
  flex: none; position: relative; display: flex; align-items: center; gap: 6px;
  margin: 8px var(--space-4) 0; padding: 0 4px 0 10px; height: 36px; box-sizing: border-box;
  border: 1px solid var(--input); border-radius: var(--radius-lg); background: var(--input-background);
}
html[data-brand="lana"] .lana-sw-qask:hover { border-color: var(--input-hover); }
html[data-brand="lana"] .lana-sw-qask:focus-within { border-color: var(--ring); }
html[data-brand="lana"] .lana-sw-qask-ic { display: grid; color: var(--primary-text); flex: none; }
html[data-brand="lana"] .lana-sw-qask-q {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; outline: 0; background: none;
  color: var(--foreground); font: inherit; font-size: var(--text-sm);
}
html[data-brand="lana"] .lana-sw-qask-q::placeholder { color: var(--muted-foreground); }
html[data-brand="lana"] .lana-sw-qask-go {
  appearance: none; flex: none; width: 28px; height: 28px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: var(--radius-md); background: none; color: var(--muted-foreground); cursor: pointer;
}
html[data-brand="lana"] .lana-sw-qask-go:hover { background: var(--accent); color: var(--foreground); }
html[data-brand="lana"] .lana-sw-qask-go:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
@media (max-width: 640px) { html[data-brand="lana"] .lana-sw-qask-q { font-size: 16px; } }   /* no zoom on iOS */
html[data-brand="lana"] .lana-sw-qask .lana-sw-qask-q,
html[data-brand="lana"] .lana-sw-qask .lana-sw-qask-q:focus,
html[data-brand="lana"] .lana-sw-qask .lana-sw-qask-q:focus-visible { outline: 0; box-shadow: none; border: 0; background: none; padding: 0 0 0 4px; }
html[data-brand="lana"] .lana-sw-qask:has(.lana-sw-qask-q:focus-visible) { outline: 2px solid var(--ring); outline-offset: 1px; }

/* qa8 : 36 px hit area on the "Ask" arrow (28 px), the look does not change */
html[data-brand="lana"] .lana-sw-qask-go { position: relative; }
html[data-brand="lana"] .lana-sw-qask-go::after { content: ""; position: absolute; inset: -4px; }

/* ---------- l46: Lana waves next to the first message of a conversation ---------- */
html[data-brand="lana"] .lana-sw-msg.has-lana { gap: 6px; }
html[data-brand="lana"] .lana-sw-lana { flex: none; width: 56px; height: 56px; object-fit: contain; align-self: flex-end; transform-origin: 50% 90%; }
html[data-brand="lana"] .lana-sw-msg.has-lana .lana-sw-stack { max-width: calc(100% - 62px); }
html[data-brand="lana"] .lana-sw-lana-say {
  position: relative; align-self: flex-start; margin: 0 0 4px; padding: 6px 10px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); color: var(--foreground);
  font-size: var(--text-xs); font-weight: 500; line-height: 1.4;
}
@media (prefers-reduced-motion: no-preference) {
  /* a short hello: two sways with a small bob, then she stays still; her line pops in after the first sway */
  html[data-brand="lana"] .lana-sw-lana { animation: lanaSwWave 0.9s ease-in-out 0.15s 2 both; }
  html[data-brand="lana"] .lana-sw-lana-say { animation: lanaSwSay 0.35s ease-out 0.5s both; }
}
@keyframes lanaSwWave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(-7deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(-3px) rotate(7deg); }
}
@keyframes lanaSwSay { from { opacity: 0; transform: translateY(4px) scale(0.96); } to { opacity: 1; transform: none; } }