/* Lumio AI on the web: the shell around the shared chat (lw- classes). Colors
   come from /shared/chat/theme.css, so the page follows the Appearance
   setting; the rest of the website stays dark. */
html, body { height: 100%; }
body.lw {
  margin: 0; display: flex; height: 100svh; overflow: hidden; background: var(--bg); color: var(--text);
  font: 400 15px/1.5 var(--font); -webkit-font-smoothing: antialiased;
}
.lw *, .lw *::before, .lw *::after { box-sizing: border-box; }
/* Zero specificity, like shared/chat/chat.css's own reset: every button class
   (the chat's .lc-send, .lc-btn-accent, .lc-link…, the page's .lw-icon…)
   sets its own color and font over it. */
:where(.lw) button { font: inherit; color: inherit; }
.lw [hidden] { display: none !important; }
.lw-mark { color: var(--text); }
.lw-mark-dot { fill: var(--accent); }

/* sidebar (docs/design-system.md §5.2: 244 px, the same on /chat and /create) */
.lw-side {
  width: var(--sidebar-w, 244px); flex: none; display: flex; flex-direction: column; gap: 8px; min-height: 0;
  padding: 14px 12px 12px; background: var(--sidebar); border-right: 1px solid var(--line);
}
.lw-side-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 6px 8px; }
.lw-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: 600; letter-spacing: -.01em; }
.lw-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 10px; background: none; color: var(--muted); cursor: pointer;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.lw-icon:hover, .lw-icon[aria-expanded="true"] { background: var(--hover); color: var(--text); }
/* Chat, then its Images and Videos views (the gallery of what the person made in chat) */
.lw-views { display: flex; flex-direction: column; gap: 1px; margin: 0 0 8px; }
.lw-view {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px 0 12px; border-radius: var(--r-row, 10px);
  color: var(--muted); font: 500 var(--fs-row, 13.5px)/1 var(--font); text-decoration: none;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.lw-view:hover { background: var(--hover); color: var(--text); }
.lw-view[aria-current="page"] { background: var(--active); color: var(--text); }
.lw-view svg { flex: none; }
.lw-view[hidden] { display: none; }
.lw-view:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
#gallery-root[hidden], #chat-root[hidden] { display: none; }
/* New chat: the sidebar's own size (docs/design-system.md: 34 px, 13.5 px), its card kept; the shortcut shows
   on hover and keyboard focus (the design review of 2026-10-26: a 15 px, 38 px card was the loudest thing there) */
.lw-new {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px 0 12px; border-radius: var(--r-row, 10px);
  border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; font: 500 var(--fs-ui, 13.5px)/1 var(--font);
  transition: background var(--dur-2) var(--ease);
}
.lw-new:hover { background: var(--card-hover); }
/* a touch screen (the phone's drawer): 40 px, like the composer's controls */
@media (pointer: coarse) { .lw-new { height: 40px; } }
.lw-new span { flex: 1; text-align: left; }
/* the text font, not the code one: in 11 px mono ⇧⌘O read as "⌘↑0" */
.lw-kbd { font: 500 11.5px var(--font); letter-spacing: .04em; color: var(--label); padding: 1px 5px; border-radius: 5px; border: 1px solid var(--line); }
.lw-new .lw-kbd { opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.lw-new:hover .lw-kbd, .lw-new:focus-visible .lw-kbd { opacity: 1; }
.lw-list { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 6px; }
.lw-foot { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.lw-acct { position: relative; flex: 1; min-width: 0; }
.lw-me {
  width: 100%; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 8px; border: 0; border-radius: 12px;
  background: none; color: var(--text); text-align: left; cursor: pointer;
}
.lw-me:hover { background: var(--hover); }
.lw-me[aria-expanded="true"] { background: var(--active); }
.lw-me:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.lw-me-text { flex: 1; }
.lw-me-chev { flex: none; color: var(--label); }
.lw-avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 650 13px var(--font); }
.lw-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lw-me-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lw-me-text b { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-me-text small { color: var(--label); font-size: 12px; }
/* Without an account (docs/guest-chat-contract.md §7.2): Sign up (primary sm) and
   Sign in (ghost sm) in the account row's place; Appearance stays at the right. */
.lw-guest { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; padding: 4px 2px; }
.lw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--h-sm, 28px); padding: 0 12px;
  border: 0; border-radius: var(--r-pill, 999px); background: none; font: 500 var(--fs-sm, 12.5px)/1 var(--font); white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.lw-btn:active { transform: scale(.98); }
.lw-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
.lw-btn-primary { background: var(--primary-bg); color: var(--primary-fg); font-weight: 600; }
.lw-btn-primary:hover { background: var(--primary-hover); }
.lw-btn-ghost { color: var(--dim); }
.lw-btn-ghost:hover { background: var(--hover); color: var(--text); }
.lw-pick { position: relative; }
.lw-menu {
  position: absolute; bottom: calc(100% + 8px); right: 0; z-index: 40; min-width: 150px; padding: 6px;
  border: 1px solid var(--line-strong); border-radius: 14px; background: var(--popover); box-shadow: var(--shadow-lg);
}
.lw-menu button { display: flex; align-items: center; width: 100%; gap: 8px; padding: 7px 10px; border: 0; border-radius: 9px; background: none; cursor: pointer; text-align: left; font-size: 13.5px; }
.lw-menu button:hover, .lw-menu button:focus-visible { background: var(--hover); outline: none; }
.lw-menu button[aria-checked="true"]::after { content: '✓'; margin-left: auto; color: var(--accent); }
/* the account menu (docs/design-system.md §6.10): who, then Plan & usage, Settings, Sign out */
.lw-acct-menu { left: 0; right: auto; width: min(260px, calc(100vw - 24px)); border-radius: var(--r-pop, 16px); background: var(--popover-glass, var(--popover)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.lw-acct-head { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.lw-acct-head b { font: 600 13.5px/1.3 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-acct-head small { font-size: 12px; color: var(--label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-acct-head small:empty { display: none; }
.lw-acct-menu button { gap: 10px; min-height: 36px; border-radius: var(--r-control, 8px); }
.lw-acct-menu button svg { flex: none; color: var(--dim); }
.lw-acct-menu .lw-kbd { margin-left: auto; }
.lw-menu-sep { height: 1px; margin: 4px 6px; background: var(--line); }

/* main */
.lw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.lw-head { height: 56px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 clamp(12px, 3vw, 22px); border-bottom: 1px solid var(--line); }
.lw-title { flex: 1; min-width: 0; margin: 0; font: 500 14.5px var(--font); color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lw-chat > .lc-root { flex: 1; min-height: 0; }
/* [Work mode] #work-root, the Work view's place. The Chat | Work switch is chat.css's (.lc-modes): chat.js
   hands it to the view that shows, under a new chat's or task's composer (docs/work-extension-contract.md §6.1) */
#work-root[hidden] { display: none; }
/* [/Work mode] */
/* [Code mode] #code-root, the Code view's place (docs/code-mode-contract.md §1): the same switch, its third tab */
#code-root[hidden] { display: none; }
/* [/Code mode] */
.lw-toast {
  position: fixed; left: 50%; bottom: 110px; transform: translateX(-50%); z-index: 60; max-width: min(460px, calc(100% - 24px));
  padding: 10px 14px; border-radius: 12px; background: var(--popover); border: 1px solid var(--line-strong); box-shadow: var(--shadow-md); font-size: 13.5px;
}
.lw-scrim { display: none; }
.lw-only-narrow { display: none; }

/* narrow: the sidebar is a drawer */
@media (max-width: 820px) {
  .lw-only-narrow { display: inline-flex; }
  /* Closed, the drawer casts no shadow on the page's edge and leaves the Tab order (hidden once it's slid away). */
  .lw-side {
    position: fixed; inset: 0 auto 0 0; z-index: 70; width: min(300px, 86vw);
    transform: translateX(-102%); box-shadow: none; visibility: hidden;
    transition: transform var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out), visibility 0s linear var(--dur-4);
  }
  body.lw-side-open .lw-side {
    transform: none; box-shadow: var(--shadow-dialog); visibility: visible;
    transition: transform var(--dur-4) var(--ease-out), box-shadow var(--dur-4) var(--ease-out), visibility 0s;
  }
  .lw-scrim { display: block; position: fixed; inset: 0; z-index: 65; background: var(--scrim); }
  .lw-head { gap: 8px; }
  .lw-kbd { display: none; }
}