/* Shared Lettuce workspace navigation. Conversation and composer styles stay
   in their own stylesheets so expanding the shell never changes the input. */
body.lw-body {
  --lw-rail-w: 64px;
  --lw-side-w: 280px;
  --lw-shell-surface: #f8f8f7;
  --lw-shell-hover: #eaeae8;
  --lw-shell-divider: rgba(20, 22, 25, .08);
  --lw-profile-h: 76px;
}
body.lw-body .lw-shell {
  position: relative;
  display: grid;
  grid-template-columns: var(--lw-rail-w) 0 minmax(0, 1fr);
  height: 100dvh;
}
body.lw-body.lw-sidebar-expanded .lw-shell { grid-template-columns: 0 var(--lw-side-w) minmax(0, 1fr); }
body.lw-body .lw-main { grid-column: 3; min-height: 0; padding-bottom: 0; }
body.lw-body .lw-rail {
  grid-column: 1;
  padding: 12px 8px 76px;
  gap: 7px;
  overflow: hidden;
  background: var(--lw-shell-surface);
  border-right: 1px solid var(--lw-shell-divider);
}
body.lw-sidebar-expanded .lw-rail { visibility: hidden; padding: 0; }
.lw-shell-toggle {
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 9px;
  background: transparent; color: var(--lw-ink-2);
  flex: 0 0 auto; cursor: pointer;
}
.lw-shell-toggle svg { width: 22px; height: 22px; }
.lw-shell-toggle:hover { background: var(--lw-shell-hover); color: var(--lw-ink); }
body.lw-body .lw-rail > .lw-shell-toggle { margin-bottom: 13px; }
body.lw-body .lw-rail-btn {
  width: 44px; height: 43px; border-radius: 9px;
  color: var(--lw-ink-2);
}
body.lw-body .lw-rail-btn > span { gap: 0; }
body.lw-body .lw-rail-btn svg { width: 21px; height: 21px; }
body.lw-body .lw-rail .lw-rail-label { display: none; }
body.lw-body .lw-rail-btn:hover { background: var(--lw-shell-hover); color: var(--lw-ink); }
body.lw-body .lw-rail-btn.is-active { background: #e8e8e5; color: var(--lw-ink); }
body.lw-body .lw-rail-btn.is-active::before { display: none; }
body.lw-body .lw-side {
  grid-column: 2; grid-row: 1;
  position: static; inset: auto;
  width: var(--lw-side-w); max-width: none;
  height: 100%; max-height: none;
  display: flex; visibility: hidden;
  transform: none; box-shadow: none;
  overflow: hidden;
  border: 0; border-right: 1px solid var(--lw-shell-divider);
  border-radius: 0; background: var(--lw-shell-surface);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding-bottom: var(--lw-profile-h);
  transition: none;
}
body.lw-sidebar-expanded .lw-side { visibility: visible; }
body.lw-body .lw-side-head {
  position: static; min-height: 64px;
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px 9px 20px;
  gap: 10px; background: transparent;
}
body.lw-body .lw-side-head::before { display: none; }
.lw-shell-brand { font: 600 21px/1.2 var(--lw-sans); letter-spacing: -.65px; }
.lw-sidebar-apps { display: grid; flex: 0 0 auto; gap: 3px; padding: 4px 12px 10px; }
body.lw-body .lw-sidebar-apps .lw-rail-btn {
  display: flex; align-items: center;
  width: 100%; height: 39px; padding: 0 11px;
  text-align: left;
}
body.lw-body .lw-sidebar-apps .lw-rail-btn > span { flex-direction: row; align-items: center; gap: 12px; }
body.lw-body .lw-sidebar-apps .lw-rail-label {
  display: block; font: 500 14px/1.2 var(--lw-sans);
  color: inherit; text-transform: none; letter-spacing: 0;
}
body.lw-body .lw-side-body {
  flex: 1 1 auto; min-height: 0;
  padding: 0 12px 18px; overflow-y: auto;
  overscroll-behavior: contain; scroll-padding-block: 12px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
body.lw-body .lw-sidebar-conversations { border-top: 1px solid var(--lw-shell-divider); padding-top: 8px; }
body.lw-body .lw-sidebar-conversations > .lw-side-group { margin-top: 7px; }
body.lw-body .lw-side-group-title-row { padding: 0 9px 5px; }
body.lw-body .lw-side-group-title {
  font: 500 12px/1.4 var(--lw-sans); letter-spacing: 0;
  text-transform: none; color: var(--lw-muted);
}
.lw-shell-new-chat {
  display: grid; place-items: center; width: 29px; height: 29px; margin-left: auto;
  padding: 0; border: 0; border-radius: 8px;
  background: transparent; color: var(--lw-ink-2); cursor: pointer;
}
.lw-shell-new-chat svg { width: 18px; height: 18px; }
.lw-shell-new-chat:hover { background: var(--lw-shell-hover); }
body.lw-body .lw-chat-row, body.lw-body .lw-list-item { border-radius: 8px; }
body.lw-body .lw-list-item { padding: 9px 10px; }
body.lw-body .lw-list-item-title { font-size: 13px; font-weight: 400; }
body.lw-body .lw-list-item-sub { display: none; }
body.lw-body .lw-chat-row.is-active { background: #e8e8e5; }
body.lw-body .lw-chat-row:hover { background: var(--lw-shell-hover); }
.lw-sidebar-agents { margin-top: 22px; padding-top: 12px; border-top: 1px solid var(--lw-shell-divider); }
body.lw-body .lw-sidebar-agents .lw-spacebar-side { margin-top: 0; background: transparent; border-color: transparent; }
body.lw-body .lw-sidebar-agents .lw-spacebar-side-copy strong { font-size: 13px; }
body.lw-body .lw-sidebar-agents .lw-spacebar-side-copy small { font: 11px/1.4 var(--lw-sans); }
body.lw-body .lw-sidebar-agents .lw-spacebar-add {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin: 6px 0 0; padding: 10px 12px;
  border: 0; border-radius: 8px; background: transparent;
  color: var(--lw-ink-2); font: 500 13px/1.3 var(--lw-sans); cursor: pointer;
}
body.lw-body .lw-sidebar-agents .lw-spacebar-add:hover { background: var(--lw-shell-hover); }
.lw-shell-profile {
  position: absolute; left: 0; bottom: 0; z-index: 71;
  display: flex; width: var(--lw-rail-w); padding: 12px 8px 14px;
  background: var(--lw-shell-surface);
  border-right: 1px solid var(--lw-shell-divider);
}
body.lw-sidebar-expanded .lw-shell-profile { width: var(--lw-side-w); padding-inline: 12px; border-top: 1px solid var(--lw-shell-divider); }
.lw-profile-trigger {
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 44px; padding: 6px 8px;
  border: 0; border-radius: 9px; background: transparent;
  color: var(--lw-ink); font: inherit; text-align: left; cursor: pointer;
}
.lw-profile-trigger:hover, .lw-profile-trigger[aria-expanded="true"] { background: var(--lw-shell-hover); }
.lw-profile-trigger .lw-avatar { width: 30px; height: 30px; background: #686e66; }
.lw-profile-trigger .lw-avatar-initial { opacity: 0; }
.lw-profile-trigger .lw-clock-face { opacity: 1; }
.lw-profile-trigger:hover .lw-clock-face, .lw-profile-trigger:focus-visible .lw-clock-face, .lw-profile-trigger[aria-expanded="true"] .lw-clock-face { opacity: 0; }
.lw-profile-trigger:hover .lw-avatar-initial, .lw-profile-trigger:focus-visible .lw-avatar-initial, .lw-profile-trigger[aria-expanded="true"] .lw-avatar-initial { opacity: 1; }
.lw-shell-profile-copy { display: none; flex: 1; min-width: 0; }
.lw-shell-profile-copy strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lw-shell-profile-copy small { display: block; font-size: 11px; color: var(--lw-muted); }
.lw-shell-profile-more { display: none; width: 20px; height: 20px; flex: 0 0 auto; }
body.lw-sidebar-expanded .lw-shell-profile-copy, body.lw-sidebar-expanded .lw-shell-profile-more { display: block; }
body.lw-body .lw-profile-menu {
  position: fixed; left: 12px; bottom: 82px;
  z-index: 120; width: 270px; min-width: 0; max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 106px); overflow-y: auto;
  padding: 6px; border: 1px solid rgba(20, 22, 25, .11); border-radius: 14px;
  background: #fff; box-shadow: 0 8px 30px rgba(20, 22, 25, .12);
  gap: 2px;
}
.lw-profile-menu-header { display: flex; align-items: center; gap: 11px; padding: 12px 10px 14px; margin-bottom: 4px; border-bottom: 1px solid var(--lw-shell-divider); }
.lw-profile-menu-avatar { display: grid; place-items: center; width: 37px; height: 37px; border-radius: 50%; background: #686e66; color: white; font-size: 14px; font-weight: 600; flex: 0 0 auto; }
.lw-profile-menu-header > span:last-child { display: grid; min-width: 0; gap: 2px; }
.lw-profile-menu-header strong { font-size: 13px; font-weight: 600; }
.lw-profile-menu-header small { font-size: 11px; color: var(--lw-muted); overflow-wrap: anywhere; }
body.lw-body .lw-profile-menu a, body.lw-body .lw-profile-menu button {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px;
  font-size: 13px; line-height: 1.3; color: var(--lw-ink);
}
body.lw-body .lw-profile-menu [hidden] { display: none; }
.lw-profile-menu [role="menuitem"] svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--lw-ink-2); }
.lw-profile-menu-hint { margin-left: auto; color: var(--lw-muted); font-size: 11px; }
.lw-profile-menu-divider { height: 1px; background: var(--lw-shell-divider); margin: 5px; }
.lw-sidebar-backdrop { display: none; }
body.lw-body .lw-mobile-dock { display: none; }
.lw-shell-help { width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 32px; border: 1px solid var(--lw-line); border-radius: 18px; background: var(--lw-panel); color: var(--lw-ink); font: 14px/1.6 var(--lw-sans); box-shadow: 0 18px 70px rgba(20, 22, 25, .2); }
.lw-shell-help::backdrop { background: rgba(20, 22, 25, .28); }
.lw-shell-help-close { position: absolute; right: 13px; top: 10px; width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--lw-ink-2); font: 24px/1 var(--lw-sans); cursor: pointer; }
.lw-shell-help-close:hover { background: var(--lw-sunk); }
.lw-shell-help-kicker { margin: 0 0 8px; color: var(--lw-muted); font-size: 12px; }
.lw-shell-help h2 { font: 600 22px/1.3 var(--lw-sans); letter-spacing: -.6px; }
.lw-shell-help a { display: inline-block; margin-top: 10px; color: var(--lw-blue-deep); font-weight: 500; }
@media (max-width: 700px) {
  body.lw-body { --lw-mobile-side-w: min(320px, calc(100vw - 44px)); --lw-profile-h: 84px; }
  body.lw-body .lw-shell { display: block; }
  body.lw-body .lw-rail { display: none; }
  body.lw-body .lw-side {
    position: fixed; inset: 0 auto 0 0;
    width: var(--lw-mobile-side-w);
    height: 100dvh; max-height: none;
    z-index: 91; visibility: hidden;
    transform: translateX(-100%);
    transition: transform .2s ease, visibility .2s;
    padding-top: env(safe-area-inset-top);
    padding-bottom: calc(var(--lw-profile-h) + env(safe-area-inset-bottom));
    background: var(--lw-shell-surface);
    border-radius: 0; box-shadow: 16px 0 48px rgba(20, 22, 25, .12);
  }
  body.lw-body.lw-side-open .lw-side { display: flex; transform: translateX(0); visibility: visible; }
  body.lw-body.lw-side-open::after { display: none; }
  body.lw-body .lw-side-head { padding: 14px 16px 12px 24px; min-height: 72px; }
  body.lw-body .lw-side-head .lw-shell-toggle { width: 44px; height: 44px; }
  body.lw-body .lw-sidebar-apps { gap: 4px; padding: 0 16px 16px; }
  body.lw-body .lw-sidebar-apps .lw-rail-btn { height: 44px; padding-inline: 12px; border-radius: 10px; }
  body.lw-body .lw-sidebar-apps .lw-rail-label { font-size: 15px; }
  body.lw-body .lw-side-body { padding: 0 16px 20px; }
  body.lw-body .lw-sidebar-conversations { padding-top: 12px; }
  body.lw-body .lw-side-group-title-row { min-height: 38px; padding: 0 10px 6px; }
  body.lw-body .lw-side-group-title { font-size: 13px; color: #666b70; }
  body.lw-body .lw-shell-new-chat { width: 36px; height: 36px; }
  body.lw-body .lw-list-item { min-height: 44px; padding: 11px 12px; }
  body.lw-body .lw-list-item-title { font-size: 14px; line-height: 1.5; }
  body.lw-body .lw-sidebar-agents { margin-top: 20px; padding-top: 14px; }
  body.lw-body .lw-sidebar-agents .lw-spacebar-side { min-height: 48px; padding: 10px 12px; gap: 12px; }
  body.lw-body .lw-sidebar-agents .lw-spacebar-side-copy strong { font-size: 14px; }
  body.lw-body .lw-sidebar-agents .lw-spacebar-side-copy small { font-size: 12px; }
  body.lw-body .lw-sidebar-agents .lw-spacebar-add { min-height: 44px; margin-top: 8px; font-size: 14px; }
  body.lw-body .lw-spacebar-agent-row { grid-template-columns: minmax(0, 1fr) 44px; gap: 4px; }
  body.lw-body .lw-spacebar-agent-chat { width: 44px; min-height: 44px; border-color: transparent; }
  body.lw-body .lw-shell-profile {
    position: fixed; z-index: 92; display: none;
    width: var(--lw-mobile-side-w); min-height: calc(var(--lw-profile-h) + env(safe-area-inset-bottom));
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--lw-shell-divider);
  }
  body.lw-side-open .lw-shell-profile { display: flex; }
  body.lw-body .lw-profile-trigger { min-height: 52px; padding: 8px 10px; }
  body.lw-body .lw-profile-trigger .lw-avatar { width: 34px; height: 34px; }
  body.lw-body .lw-shell-profile-copy strong { font-size: 14px; }
  body.lw-body .lw-shell-profile-copy small { font-size: 12px; }
  body.lw-body .lw-shell-profile-copy, body.lw-body .lw-shell-profile-more { display: block; }
  body.lw-body.lw-side-open .lw-sidebar-backdrop {
    display: block; position: fixed; inset: 0; z-index: 90;
    padding: 0; border: 0; border-radius: 0;
    background: rgba(20, 22, 25, .3); cursor: pointer;
  }
  body.lw-body .lw-sidebar-backdrop[hidden] { display: none; }
  body.lw-body .lw-profile-menu {
    left: 12px; width: min(296px, calc(100vw - 68px));
    bottom: calc(var(--lw-profile-h) + 8px + env(safe-area-inset-bottom));
    max-height: calc(100dvh - var(--lw-profile-h) - 24px - env(safe-area-inset-bottom));
  }
  body.lw-body .lw-profile-menu a, body.lw-body .lw-profile-menu button { min-height: 44px; font-size: 14px; }
  body.lw-body .lw-main { height: 100%; padding-bottom: 0; }
}
@media (max-width: 700px) and (max-height: 600px) {
  body.lw-body .lw-side-head { min-height: 60px; padding-block: 8px; }
  body.lw-body .lw-sidebar-apps { gap: 2px; padding-bottom: 10px; }
  body.lw-body .lw-sidebar-agents { margin-top: 12px; padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { body.lw-body .lw-side { transition: none; } }

/* Agents are a plain navigation group with one creation action. */
body.lw-body .lw-sidebar-agents { display:grid; grid-template-columns:minmax(0,1fr) 32px; border-top:0; margin:0 0 12px; padding:0; }
body.lw-body .lw-sidebar-agents .lw-spacebar-side { min-width:0; border:0; background:transparent; box-shadow:none; padding:8px 9px; }
body.lw-body .lw-sidebar-agents .lw-spacebar-side-copy small { display:none; }
body.lw-body .lw-sidebar-agents > .lw-shell-new-chat { align-self:center; }
body.lw-body .lw-sidebar-agents .lw-spacebar-agents { grid-column:1/-1; }
@media(max-width:700px) {
  body.lw-body .lw-shell { position:absolute; top:var(--lw-visible-top,0px); left:0; width:100%; height:var(--lw-visible-height,100dvh); min-height:0; }
  body.lw-body.lw-keyboard-open .lw-main { padding-bottom:0; }
  body.lw-body.lw-keyboard-open .lw-space-stage { padding-bottom:0; min-height:0; }
  body.lw-body.lw-keyboard-open .lw-mobile-dock { display:none; }
}

.lw-profile-avatar-photo { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; opacity:0; transition:opacity .18s ease; }
.lw-profile-trigger:hover .lw-profile-avatar-photo, .lw-profile-trigger:focus-visible .lw-profile-avatar-photo, .lw-profile-trigger[aria-expanded="true"] .lw-profile-avatar-photo { opacity:1; }
.lw-space-gallery-media { display:block; width:100%; height:100%; max-height:100%; object-fit:contain; background:var(--lw-paper,#f5f5f2); }
.lw-desktop-task { width:min(100% - 40px,600px); max-height:70%; overflow:auto; padding:22px; border:1px solid var(--lw-line); border-radius:10px; background:var(--lw-panel); }
.lw-desktop-task:empty { display:none; }
.lw-desktop-task p { margin:8px 0; line-height:1.6; }
.lw-desktop-task button { margin:8px 8px 0 0; }

/* Computer tasks use the same restrained forms as the Space composer. */
body.lw-body .lw-computer-dialog { width:min(100%,460px); text-align:left; border-radius:12px; padding:26px; }
body.lw-body .lw-computer-dialog h2 { margin:0 0 12px; font:500 21px/1.3 var(--lw-sans,Arial,sans-serif); letter-spacing:-.025em; }
body.lw-body .lw-computer-dialog p { font-size:13px; line-height:1.6; margin:0 0 20px; }
body.lw-body .lw-desktop-task-label { display:grid; gap:8px; margin-top:20px; color:var(--lw-ink-2); font:500 12px/1.5 var(--lw-sans,Arial,sans-serif); }
body.lw-body .lw-desktop-task-label textarea { display:block; width:100%; min-height:104px; resize:vertical; max-height:240px; padding:12px 14px; border:1px solid var(--lw-line); border-radius:8px; background:var(--lw-panel,#fff); color:var(--lw-ink); font:400 14px/1.6 var(--lw-sans,Arial,sans-serif); box-sizing:border-box; }
body.lw-body .lw-desktop-task-label textarea:focus { outline:2px solid var(--lw-blue,#2f6d8f); outline-offset:2px; }
body.lw-body .lw-desktop-task-label textarea::placeholder { color:var(--lw-muted); opacity:1; }
body.lw-body .lw-computer-dialog-actions { gap:10px; align-items:stretch; }
body.lw-body .lw-computer-dialog-actions .lw-btn { min-height:44px; padding:10px 14px; font-size:13px; line-height:1.4; text-align:center; justify-content:center; }
body.lw-body .lw-computer-dialog>[data-lw-desktop-pair] { margin-top:16px; font-size:13px; }
@media(max-width:480px) { body.lw-body .lw-computer-dialog { padding:22px; } body.lw-body .lw-computer-dialog h2 { font-size:19px; } body.lw-body .lw-computer-dialog-actions { flex-direction:column-reverse; } }

/* The document cannot accumulate keyboard reveal scroll; conversation and
   product panes retain their own scrolling. Match the canvas to the chat. */
html.lw-viewport-root { height:100%; overflow:hidden; overscroll-behavior:none; background:#fff; }
html.lw-viewport-root body.lw-body { height:100%; background:var(--lw-panel); }
@media(max-width:700px), (hover:none) and (pointer:coarse) {
  html.lw-viewport-root body.lw-body { position:fixed; inset:0; width:100%; }
  body.lw-body .lw-shell { position:absolute; top:var(--lw-visible-top,0px); left:0; width:100%; height:var(--lw-visible-height,100dvh); min-height:0; overflow:hidden; }
  body.lw-body .lw-space-stage { min-height:0; }
  body.lw-body .lw-space-form { flex-shrink:0; padding-bottom:max(8px,env(safe-area-inset-bottom)); }
  body.lw-body.lw-keyboard-open .lw-space-form { padding-bottom:8px; }
}