/* LL AI v67.6 — EXPERIENCE MAX
   Interaction/UX layer only. Preserves LL's existing theme/accent tokens. */

:root{
  --llx-radius-sm:10px;
  --llx-radius-md:16px;
  --llx-radius-lg:22px;
  --llx-radius-xl:28px;
  --llx-shadow:0 22px 70px rgba(0,0,0,.34);
  --llx-hairline:color-mix(in srgb,var(--theme-line,#ffffff18) 92%,transparent);
  --llx-surface:color-mix(in srgb,var(--theme-surface,#222) 96%,transparent);
  --llx-surface-2:color-mix(in srgb,var(--theme-surface-2,#181818) 96%,transparent);
  --llx-muted:var(--theme-muted,#a2a2a8);
  --llx-text:var(--theme-text,#f4f4f5);
  --llx-accent:var(--accent,#8fa6ff);
}

html[data-ll-ui="67.6"] body{overscroll-behavior:none}
html[data-ll-ui="67.6"] button,
html[data-ll-ui="67.6"] [role="button"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
html[data-ll-ui="67.6"] :focus-visible{outline:2px solid color-mix(in srgb,var(--llx-accent) 78%,white 12%);outline-offset:2px}

/* Sidebar: same LL colors, stronger hierarchy and hit targets. */
html[data-ll-ui="67.6"] .side{gap:2px}
html[data-ll-ui="67.6"] .brandRow{position:sticky;top:0;z-index:4;background:linear-gradient(var(--sidebar,#0f0f0f) 82%,transparent);backdrop-filter:blur(14px)}
html[data-ll-ui="67.6"] .navItem{min-height:44px;border:1px solid transparent;border-radius:13px;transition:background .15s ease,border-color .15s ease,transform .12s ease}
html[data-ll-ui="67.6"] .navItem:hover{background:color-mix(in srgb,var(--theme-surface,#242424) 78%,var(--accent) 8%);border-color:var(--llx-hairline)}
html[data-ll-ui="67.6"] .navItem:active{transform:scale(.985)}
html[data-ll-ui="67.6"] .navItem.active,
html[data-ll-ui="67.6"] .navItem[aria-current="page"]{background:color-mix(in srgb,var(--theme-surface,#242424) 84%,var(--accent) 16%);border-color:color-mix(in srgb,var(--accent) 26%,transparent)}
html[data-ll-ui="67.6"] .chatSearchWrap{border-radius:14px;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
html[data-ll-ui="67.6"] .chatSearchWrap:focus-within{border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
html[data-ll-ui="67.6"] .chatHistory{scroll-padding-block:12px}

/* Top bar: compact, stable, clearer current-chat affordance. */
html[data-ll-ui="67.6"] .topbar{min-height:60px;height:60px;border-bottom:1px solid color-mix(in srgb,var(--theme-line,#ffffff18) 56%,transparent);box-shadow:0 1px 0 rgba(255,255,255,.018)}
html[data-ll-ui="67.6"] #currentChatName{max-width:min(44vw,430px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid transparent}
html[data-ll-ui="67.6"] #currentChatName:hover{background:color-mix(in srgb,var(--theme-surface,#242424) 72%,transparent);border-color:var(--llx-hairline)}
html[data-ll-ui="67.6"] .topActions .roundBtn{transition:transform .12s ease,background .15s ease,border-color .15s ease}
html[data-ll-ui="67.6"] .topActions .roundBtn:active{transform:scale(.94)}

/* Chat composition and message spacing. */
html[data-ll-ui="67.6"] .chat{scroll-behavior:smooth;scroll-padding-bottom:148px}
html[data-ll-ui="67.6"] .msgrow{width:min(820px,100%);max-width:100%;display:flex;flex-direction:column;align-items:flex-start;gap:5px}
html[data-ll-ui="67.6"] .msgrow .msg.ai{max-width:100%;width:100%}
html[data-ll-ui="67.6"] .assistantTextBody{font-size:15px;line-height:1.68;letter-spacing:.001em}
html[data-ll-ui="67.6"] .msg.user{box-shadow:inset 0 1px rgba(255,255,255,.025)}
html[data-ll-ui="67.6"] .msgActions{flex-direction:row!important;align-items:center!important;gap:1px!important;margin:2px 0 0 -5px!important;min-height:34px;opacity:.42;transition:opacity .16s ease,transform .16s ease}
html[data-ll-ui="67.6"] .msgrow:hover .msgActions,
html[data-ll-ui="67.6"] .msgActions:focus-within{opacity:1}
html[data-ll-ui="67.6"] .msgActions .btn{width:34px;height:34px;padding:0;border:0!important;background:transparent!important;border-radius:10px;display:grid;place-items:center;color:var(--llx-muted);transition:background .15s ease,color .15s ease,transform .1s ease}
html[data-ll-ui="67.6"] .msgActions .btn:hover{background:color-mix(in srgb,var(--theme-surface,#242424) 88%,var(--accent) 12%)!important;color:var(--llx-text)}
html[data-ll-ui="67.6"] .msgActions .btn:active{transform:scale(.9)}

html[data-ll-ui="67.6"] .composer{z-index:12}
html[data-ll-ui="67.6"] .composebox{border-color:color-mix(in srgb,var(--theme-line,#ffffff18) 90%,white 4%);box-shadow:0 10px 34px rgba(0,0,0,.16),inset 0 1px rgba(255,255,255,.025);transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
html[data-ll-ui="67.6"] .composebox:focus-within{border-color:color-mix(in srgb,var(--accent) 34%,var(--theme-line,#ffffff18));box-shadow:0 14px 44px rgba(0,0,0,.22),0 0 0 3px color-mix(in srgb,var(--accent) 7%,transparent),inset 0 1px rgba(255,255,255,.035)}
html[data-ll-ui="67.6"] #question{line-height:1.45}
html[data-ll-ui="67.6"] .pendingAttachments{max-width:780px;margin-inline:auto}

/* Code = first-class artifact. */
html[data-ll-ui="67.6"] .mdCode{position:relative;border-radius:16px!important;border-color:color-mix(in srgb,var(--theme-line,#ffffff18) 88%,white 3%)!important;box-shadow:0 14px 42px rgba(0,0,0,.18)!important}
html[data-ll-ui="67.6"] .mdCodeHead{position:sticky;top:0;z-index:2;min-height:42px;height:auto!important;gap:8px;padding:6px 8px 6px 12px!important;backdrop-filter:blur(12px)}
html[data-ll-ui="67.6"] .llArtifactActions{margin-left:auto;display:flex;gap:5px;align-items:center}
html[data-ll-ui="67.6"] .llArtifactBtn{height:30px;border:1px solid var(--llx-hairline);border-radius:9px;background:color-mix(in srgb,var(--theme-surface,#222) 94%,transparent);color:var(--llx-text);padding:0 10px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
html[data-ll-ui="67.6"] .llArtifactBtn:hover{background:color-mix(in srgb,var(--theme-surface,#222) 78%,var(--accent) 22%);border-color:color-mix(in srgb,var(--accent) 34%,transparent)}
html[data-ll-ui="67.6"] .mdCode pre{max-height:min(64dvh,720px)}
html[data-ll-ui="67.6"] .mdTableWrap{border-radius:15px!important;box-shadow:0 10px 30px rgba(0,0,0,.1)}

/* Image generation progress card + mini game. */
.llImageWaitWrap{width:min(760px,calc(100% - 24px));margin:12px auto 16px;animation:llxRise .22s ease-out both}
.llImageWaitWrap[hidden]{display:none!important}
.llImageWaitCard{border:1px solid var(--llx-hairline);border-radius:22px;background:linear-gradient(145deg,color-mix(in srgb,var(--theme-surface-2,#181818) 96%,var(--accent) 4%),var(--theme-surface,#222));box-shadow:0 18px 60px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035);overflow:hidden}
.llImageWaitHead{display:flex;align-items:center;gap:12px;padding:15px 16px}
.llImageWaitGlyph{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;flex:0 0 auto;background:color-mix(in srgb,var(--accent) 16%,var(--theme-surface,#222));border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);position:relative;overflow:hidden}
.llImageWaitGlyph::after{content:"";width:18px;height:18px;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 30%,transparent);border-top-color:var(--accent);animation:llxSpin .9s linear infinite}
.llImageWaitCopy{min-width:0;flex:1}.llImageWaitCopy b{display:block;font-size:13px;margin-bottom:3px}.llImageWaitCopy small{display:block;color:var(--llx-muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.llImageWaitToggle{border:1px solid var(--llx-hairline);border-radius:11px;background:var(--llx-surface);color:var(--llx-text);padding:8px 11px;font-size:11px;font-weight:750}
.llImageWaitToggle:hover{border-color:color-mix(in srgb,var(--accent) 38%,transparent);background:color-mix(in srgb,var(--theme-surface,#222) 82%,var(--accent) 18%)}
.llImagePulseDots{display:flex;gap:4px;align-items:center;margin-top:7px}.llImagePulseDots i{width:5px;height:5px;border-radius:50%;background:var(--accent);animation:llxDot 1s ease-in-out infinite}.llImagePulseDots i:nth-child(2){animation-delay:.13s}.llImagePulseDots i:nth-child(3){animation-delay:.26s}
.llSnakeStage{border-top:1px solid var(--llx-hairline);padding:12px 14px 14px;background:color-mix(in srgb,var(--theme-bg,#111) 84%,transparent)}
.llSnakeStage[hidden]{display:none!important}.llSnakeTop{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;color:var(--llx-muted);font-size:10px}.llSnakeTop b{color:var(--llx-text);font-size:11px}.llSnakeCanvas{display:block;width:100%;max-width:560px;aspect-ratio:2/1;margin:auto;border:1px solid var(--llx-hairline);border-radius:14px;background:color-mix(in srgb,var(--theme-bg,#111) 92%,black 8%);touch-action:none}.llSnakeHint{text-align:center;color:var(--llx-muted);font-size:9px;margin-top:8px}
.llChatImageWait{position:fixed;left:50%;translate:-50% 0;bottom:calc(104px + env(safe-area-inset-bottom));z-index:14;width:min(720px,calc(100% - 24px));pointer-events:auto}
.llChatImageWait .llImageWaitCard{backdrop-filter:blur(18px)}

/* Artifact preview panel. */
.llArtifactOverlay{position:fixed;inset:0;z-index:1800;background:rgba(0,0,0,.56);backdrop-filter:blur(16px);display:flex;justify-content:flex-end;animation:llxFade .18s ease both}
.llArtifactOverlay[hidden]{display:none!important}
.llArtifactPanel{width:min(920px,96vw);height:100dvh;background:var(--theme-bg,#151515);border-left:1px solid var(--llx-hairline);box-shadow:-30px 0 100px rgba(0,0,0,.36);display:flex;flex-direction:column;animation:llxSlide .22s cubic-bezier(.2,.8,.2,1) both;min-width:0}
.llArtifactTop{height:60px;flex:0 0 auto;border-bottom:1px solid var(--llx-hairline);display:flex;align-items:center;gap:8px;padding:0 12px;background:color-mix(in srgb,var(--theme-bg,#151515) 92%,transparent);backdrop-filter:blur(16px)}
.llArtifactTop strong{font-size:13px;margin-right:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.llArtifactTop button{height:36px;border:1px solid var(--llx-hairline);border-radius:11px;background:var(--llx-surface);color:var(--llx-text);padding:0 11px;font-size:11px;font-weight:700}.llArtifactTop button.active{background:color-mix(in srgb,var(--theme-surface,#222) 78%,var(--accent) 22%);border-color:color-mix(in srgb,var(--accent) 38%,transparent)}
.llArtifactBody{flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;background:var(--theme-bg,#151515)}
.llArtifactFrameShell{height:100%;width:100%;display:grid;place-items:center;padding:14px;transition:max-width .18s ease}.llArtifactFrameShell.mobile{max-width:430px}.llArtifactFrameShell.tablet{max-width:820px}.llArtifactFrame{width:100%;height:100%;border:1px solid var(--llx-hairline);border-radius:16px;background:#fff;box-shadow:0 20px 70px rgba(0,0,0,.22)}
.llArtifactCodeView{width:100%;height:100%;overflow:auto;margin:0;padding:20px;background:color-mix(in srgb,var(--theme-bg,#111) 94%,black 6%);color:var(--llx-text);font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre;tab-size:2}

/* Improved surface consistency across LL's full-screen tools. */
html[data-ll-ui="67.6"] :is(.imageStudio,.flashStudio,.canvasStudio,#llAssistantsCenter,[id*="Sites" i],[class*="sitesStudio" i],[class*="sitesShell" i]){isolation:isolate}
html[data-ll-ui="67.6"] :is(.imageStudioTop,.flashTop,.canvasTop,.llAsTop,[class*="sitesTop" i],[class*="sitesHeader" i]){box-shadow:0 1px 0 rgba(255,255,255,.018);backdrop-filter:blur(18px)}
html[data-ll-ui="67.6"] :is(.imageCard,.flashFace,.llAsCard,[class*="siteCard" i],[class*="projectCard" i]){transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
html[data-ll-ui="67.6"] :is(.imageCard,.llAsCard,[class*="siteCard" i],[class*="projectCard" i]):hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 30%,var(--theme-line,#ffffff18));box-shadow:0 16px 44px rgba(0,0,0,.18)}
html[data-ll-ui="67.6"] .imageCard img{transition:transform .24s ease,filter .24s ease}
html[data-ll-ui="67.6"] .imageCard:hover img{transform:scale(1.018)}
html[data-ll-ui="67.6"] .llAsCard{min-height:180px!important}

/* Tooltips for unlabeled icon buttons (text comes from aria-label/title, no proprietary strings). */
.llxTooltip{position:fixed;z-index:2500;pointer-events:none;max-width:260px;padding:7px 9px;border:1px solid var(--llx-hairline);border-radius:9px;background:color-mix(in srgb,var(--theme-surface-2,#181818) 96%,transparent);color:var(--llx-text);box-shadow:0 10px 34px rgba(0,0,0,.3);font-size:10px;line-height:1.3;opacity:0;transform:translateY(4px);transition:opacity .12s ease,transform .12s ease}.llxTooltip.show{opacity:1;transform:none}

/* Keyboard shortcut help. */
.llShortcutHelp{position:fixed;inset:0;z-index:1850;background:rgba(0,0,0,.58);backdrop-filter:blur(16px);display:grid;place-items:center;padding:16px}.llShortcutHelp[hidden]{display:none!important}.llShortcutCard{width:min(560px,96vw);max-height:80dvh;overflow:auto;border:1px solid var(--llx-hairline);border-radius:24px;background:var(--theme-surface-2,#181818);box-shadow:var(--llx-shadow);padding:18px}.llShortcutHead{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.llShortcutHead h3{margin:0;font-size:17px}.llShortcutHead button{width:36px;height:36px;border:1px solid var(--llx-hairline);border-radius:10px;background:var(--llx-surface);color:inherit}.llShortcutGrid{display:grid;gap:7px}.llShortcutRow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 11px;border:1px solid color-mix(in srgb,var(--theme-line,#ffffff18) 70%,transparent);border-radius:12px}.llShortcutRow span{font-size:12px}.llShortcutRow kbd{font:10px system-ui;padding:5px 7px;border:1px solid var(--llx-hairline);border-radius:7px;background:var(--theme-bg,#111);color:var(--llx-muted)}

/* Micro feedback / reduced motion. */
@keyframes llxSpin{to{transform:rotate(360deg)}}
@keyframes llxDot{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
@keyframes llxRise{from{opacity:0;transform:translateY(8px) scale(.992)}to{opacity:1;transform:none}}
@keyframes llxFade{from{opacity:0}to{opacity:1}}
@keyframes llxSlide{from{transform:translateX(24px);opacity:.7}to{transform:none;opacity:1}}

@media(max-width:800px){
  html[data-ll-ui="67.6"] .topbar{height:56px;min-height:56px}
  html[data-ll-ui="67.6"] #currentChatName{max-width:42vw;font-size:14px}
  html[data-ll-ui="67.6"] .chat{scroll-padding-bottom:128px}
  html[data-ll-ui="67.6"] .msgActions{opacity:.72!important}
  html[data-ll-ui="67.6"] .assistantTextBody{font-size:14.5px}
  .llArtifactPanel{width:100vw;border-left:0}.llArtifactFrameShell{padding:8px}.llArtifactFrame{border-radius:12px}
  .llImageWaitWrap{width:calc(100% - 16px);margin-block:8px 12px}.llImageWaitHead{padding:12px}.llImageWaitGlyph{width:36px;height:36px}.llImageWaitToggle{padding:7px 9px}.llSnakeStage{padding:9px}.llChatImageWait{bottom:calc(92px + env(safe-area-inset-bottom));width:calc(100% - 16px)}
}

@media(prefers-reduced-motion:reduce){
  html[data-ll-ui="67.6"] *,html[data-ll-ui="67.6"] *::before,html[data-ll-ui="67.6"] *::after{scroll-behavior:auto!important}
  .llImageWaitGlyph::after,.llImagePulseDots i,.llArtifactOverlay,.llArtifactPanel,.llImageWaitWrap{animation:none!important;transition:none!important}
}
/* Unified command search results (chats/files/images/assistants). */
.commandList .llxSearchDivider{height:1px;margin:8px 10px;background:var(--llx-hairline)}
.commandList .llxSearchItem .commandIcon{font-size:15px}
.commandList .llxSearchItem .commandText small{max-width:460px}
.commandList .llxSearchKind{font-size:9px;color:var(--llx-muted);border:1px solid var(--llx-hairline);border-radius:999px;padding:4px 7px;white-space:nowrap}