/* Composer: send arrow only shows once the prompt has text (+ stays
   always visible — it's the attach/tools entry point, not text-dependent).
   chat-input-guard.js's syncSendState() is the live mechanism: it sets
   btn.disabled + toggles .is-disabled based on actual text/attachment
   content (workspace-shell.js's .has-content toggle is a documented dead
   duplicate of the same thing and never actually fires). Scoped to
   .composer-r22e (the class actually present on the live composer
   element) — the equivalent rule in app.css is deliberately scoped AWAY
   from .composer-r22e via :not(), so this is the only place this logic
   can live without the two rules fighting each other. */
.composer-r22e .send {
  opacity: 1;
  transition: opacity .18s ease;
}
.composer-r22e .send.is-disabled,
.composer-r22e .send[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* R74-FIX: app.css's base .composer-row uses align-items:flex-end
   unconditionally. That's correct for the grown multi-line state
   (.composer-row-stacked/.composer-row-multiline, where buttons should
   pin to the bottom under a tall textarea per app.css:14836's own stacked
   rule), but in the normal single-line idle state the row (42px) is
   taller than the 36px icon buttons, so flex-end pushes every icon 6px
   below center — confirmed live via getBoundingClientRect. ChatGPT/Gemini
   center icons in the single-line state. Scoped to explicitly exclude the
   grown states so multi-line bottom-pinning is untouched. */
.composer-row:not(.composer-row-stacked):not(.composer-row-multiline) {
  align-items: center;
}

/* R76-FIX: .composer-row (the actual visible dark pill background,
   confirmed by walking the DOM at the pill's screen position) had
   border-radius:0 and padding:0 — a sharp-cornered rectangle with the +
   button sitting at 0px gap from the left edge, confirmed live via
   getBoundingClientRect. The doc comment in workspace-shell-gateway.css
   describes an intended .composer-input-pill wrapper that owns rounding —
   it was never actually added to the DOM, so .composer-row itself needs
   the treatment. Padding here both rounds the edge gap (buttons no longer
   touch the border) and increases the box height, since the row's height
   is otherwise just its tallest child (42px, the 36px buttons plus a
   couple px of centering slack). */
.composer-r22e .composer-row {
  padding: 14px 16px;
  border-radius: 26px;
}

/* R80-FIX (R81 correction below): composer bottom didn't align with the
   account dock bottom (57px gap, confirmed live via getBoundingClientRect
   — composer sat below the viewport entirely). Root cause: .shell-v19 is
   a grid with min-height:100vh, so when .workspace-main's natural content
   height exceeds one viewport (true even on an empty new chat, ~604px
   measured vs a 543px viewport), the whole grid row stretches to fit it.
   The sidebar is rigidly height:100vh + position:sticky so it stays
   exactly viewport-height regardless, but .workspace-main had no height
   cap of its own, so it grew with its row — leaving its bottom (and the
   composer inside it) sitting below the sidebar's bottom.
   R81 correction: the first version of this fix used overflow:hidden,
   which stopped the grid from growing but also made .workspace-main
   itself unscrollable — confirmed live as a real regression: views that
   render directly into .workspace-main without their own internal scroll
   wrapper (e.g. the "Research Command Center" home dashboard — it has no
   .chat-primary, unlike the live chat view) lost the ability to scroll
   at all, and the sticky composer just floated at a fixed spot overlapping
   dashboard content instead of pinning to a real bottom edge. overflow-y:
   auto keeps the same height cap (stopping the grid/body from growing
   past 100vh) while still letting .workspace-main scroll internally when
   its own content — not just .chat-primary's — is taller than the
   viewport. */
.shell.ux-flow-shell.ux-chat-shell-mode .workspace-main {
  height: 100vh;
  overflow-y: auto;
}

/* R69-FIX: implements the .sidebar-scroll-body behavior the R36 comment in
   index.html already describes and assumes exists ("titi-ux-flow.css
   already defines .sidebar-scroll-body — flex:1 1 auto; overflow-y:auto")
   but which was never actually written — same documented-intent-but-missing
   pattern as the composer-model-picker and ToolHub icon bugs. Without this,
   #workspaceSidebar's own overflow:auto (app.css .shell-v19 .workspace-sidebar)
   made the ENTIRE sidebar — brand, nav, projects, history, AND the account
   dock appended after it — scroll as one block, so the account dock never
   stayed pinned at the bottom the way ChatGPT/Gemini do it; it just became
   the last thing you scroll past. */
#workspaceSidebar.workspace-sidebar {
  overflow: hidden;
}
.sidebar-scroll-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* R97G-FIX: overflow-y:auto alone makes overflow-x compute to auto too
     (same CSS-spec quirk fixed on #sidebarProjectsSection in titi-premium.css)
     — any child that overflows horizontally (e.g. an untruncated long chat
     title) put a second, horizontal scrollbar on this single vertical list.
     This region should only ever scroll vertically. */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .12) transparent;
}
.sidebar-scroll-body::-webkit-scrollbar { width: 8px; }
.sidebar-scroll-body::-webkit-scrollbar-track { background: transparent; }
.sidebar-scroll-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); }
.titi-account-dock {
  flex-shrink: 0;
}

/* ===== R60: scroll-to-bottom FAB + responsive breakpoints ===== */
.titi-scroll-bottom-fab {
  position: absolute;
  right: 18px;
  bottom: calc(var(--titi-chat-scroll-pad, 96px) + 12px);
  z-index: 40;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}
.titi-scroll-bottom-fab.hidden { display: none !important; }
.main.workspace-main, .chat-shell, #chatShell, .workspace-main { position: relative; }
.titi-long-job-bar {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: rgba(0,0,0,.02);
}
.titi-long-job-meta { display:flex; justify-content:space-between; gap:8px; font-size:12px; margin-bottom:6px; }
.titi-long-job-progress { height:6px; border-radius:999px; background:rgba(0,0,0,.08); overflow:hidden; margin-bottom:8px; }
.titi-long-job-progress > i { display:block; height:100%; background:#2563eb; border-radius:999px; }
.titi-long-job-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* 1920 / 1440 / 1366 desktop densify */
@media (max-width: 1440px) {
  .composer-plus-menu, .composer-plus-sheet { max-width: min(420px, 92vw); }
}
@media (max-width: 1366px) {
  .workspace-main { min-width: 0; }
  #chat { padding-left: 8px; padding-right: 8px; }
}

/* Tablet 768x1024 */
@media (max-width: 1024px) {
  body.ux-context-open .research-inspector,
  #researchInspector { max-width: min(360px, 42vw); }
  .composer-row { gap: 8px; }
  .composer-plus-menu.titi-toolhub,
  #composerPlusMenu {
    max-height: min(70vh, 560px);
    overflow: auto;
    width: min(420px, 94vw);
  }
  .sidebar, .app-sidebar { z-index: 50; }
}

/* Mobile 430 / 390 */
@media (max-width: 480px) {
  .titi-scroll-bottom-fab {
    right: 12px;
    bottom: calc(var(--titi-chat-scroll-pad, 110px) + 8px);
    width: 36px;
    height: 36px;
  }
  .composer-row-stacked #prompt,
  .composer-row #prompt {
    max-width: 100%;
  }
  #composerPlusMenu,
  .composer-plus-menu {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 78vh;
    border-radius: 16px 16px 0 0;
    overflow: auto;
    z-index: 80;
  }
  .app-header, .workspace-header, .project-header {
    flex-wrap: wrap;
    gap: 6px;
  }
  .sidebar.is-open, body.sidebar-open .sidebar {
    max-width: min(88vw, 320px);
  }
  /* composer must not cover last messages — padding handled by --titi-chat-scroll-pad */
  #chat { scroll-padding-bottom: var(--titi-chat-scroll-pad, 120px); }
}