@import url("./base.css");
@import url("./components/shell/shell.css");
@import url("./components/settings/prompts.css");
@import url("./components/home/home.css");
@import url("./components/conversation/conversation.css");
@import url("./components/cluster-card/cluster-card.css");
@import url("./components/workbench/workbench.css");
@import url("./components/report/report.css");

html,
body {
  height: 100dvh;
  overflow: hidden;
}

.app-shell {
  height: 100dvh;
  min-height: 0;
}

.sidebar {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.sidebar-top,
.sidebar > nav,
.sidebar-user {
  flex: none;
}

.recent {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.sidebar-user {
  margin-top: 0;
}

#page-main {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.view {
  min-height: 100%;
}

#page-research {
  height: 100%;
  overflow: hidden;
}

#local-chat {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
}

#local-chat-turns {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#local-chat-form {
  flex: none;
}

#local-run {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.local-run-heading {
  flex: none;
}

.local-workspace-layout {
  flex: 1;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
}

.local-run-main,
.local-workspace-layout[data-presentation="general"] .local-run-main {
  min-height: 0;
  overflow: hidden;
}

.local-workspace-layout .local-run-main,
.local-workspace-layout .local-team {
  grid-row: 1;
}

.local-workspace-layout .local-team {
  height: 100%;
  min-height: 0;
}

.local-workspace-layout[data-presentation="general"] .local-run-main {
  height: 100%;
}

.local-run-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

#run-composer-form {
  flex: none;
  margin-top: 0;
}

.research-workbench {
  height: 100%;
  min-height: 0;
  max-height: 100%;
}

@media (max-width: 1023px) {
  .local-workspace-layout,
  .local-workspace-layout[data-presentation="general"] {
    display: flex;
    flex-direction: column;
  }

  .local-workspace-layout .local-run-main {
    flex: 1;
    min-height: 0;
  }
}

/* The muted token follows each theme without taking on its accent color. */
:root {
  --scrollbar-thumb-idle: color-mix(in srgb, var(--muted) 18%, transparent);
  --scrollbar-thumb-hover: color-mix(in srgb, var(--muted) 48%, transparent);
}

.recent::-webkit-scrollbar,
#page-main::-webkit-scrollbar,
#local-chat-turns::-webkit-scrollbar,
.local-run-messages::-webkit-scrollbar,
.conversation-scroll::-webkit-scrollbar,
.workspace-body::-webkit-scrollbar,
.panel-researchers #local-agent-detail::-webkit-scrollbar,
.local-team #run-reader-body::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.recent::-webkit-scrollbar-track,
#page-main::-webkit-scrollbar-track,
#local-chat-turns::-webkit-scrollbar-track,
.local-run-messages::-webkit-scrollbar-track,
.conversation-scroll::-webkit-scrollbar-track,
.workspace-body::-webkit-scrollbar-track,
.panel-researchers #local-agent-detail::-webkit-scrollbar-track,
.local-team #run-reader-body::-webkit-scrollbar-track {
  background: transparent;
}

.recent::-webkit-scrollbar-thumb,
#page-main::-webkit-scrollbar-thumb,
#local-chat-turns::-webkit-scrollbar-thumb,
.local-run-messages::-webkit-scrollbar-thumb,
.conversation-scroll::-webkit-scrollbar-thumb,
.workspace-body::-webkit-scrollbar-thumb,
.panel-researchers #local-agent-detail::-webkit-scrollbar-thumb,
.local-team #run-reader-body::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--scrollbar-thumb-idle);
}

.sidebar:hover .recent::-webkit-scrollbar-thumb,
#page-main:hover::-webkit-scrollbar-thumb,
#local-chat-turns:hover::-webkit-scrollbar-thumb,
.local-run-messages:hover::-webkit-scrollbar-thumb,
.conversation-scroll:hover::-webkit-scrollbar-thumb,
.workspace-body:hover::-webkit-scrollbar-thumb,
.panel-researchers #local-agent-detail:hover::-webkit-scrollbar-thumb,
.local-team #run-reader-body:hover::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-hover);
}

/* Chromium ignores ::-webkit-scrollbar once these are set, so Firefox gets them alone. */
@supports not selector(::-webkit-scrollbar) {
  .recent,
  #page-main,
  #local-chat-turns,
  .local-run-messages,
  .conversation-scroll,
  .workspace-body,
  .panel-researchers #local-agent-detail,
  .local-team #run-reader-body {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb-hover) transparent;
  }
}

/* Shared conversation messages: the same variants appear in plain chat and research. */
.chat-message[hidden] {
  display: none !important;
}

.chat-message.chat-message-user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: fit-content;
  max-width: min(75%, 620px);
  margin: 0 0 26px auto;
  padding: 11px 17px;
  border: 0;
  border-radius: 22px;
  color: var(--ink);
  background: color-mix(in srgb, #dcecff 72%, var(--surface));
  box-shadow: none;
  overflow-wrap: anywhere;
}

html[data-theme="night"] .chat-message.chat-message-user {
  background: color-mix(in srgb, #395879 60%, var(--surface));
}

.chat-message-user .chat-message-content {
  width: 100%;
  margin: 0;
  text-align: left;
  white-space: pre-wrap;
}

.chat-message.chat-message-assistant {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0 0 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

.chat-message-assistant .markdown-content {
  width: 100%;
  color: var(--ink);
  font-size: 14px;
}

.chat-message-assistant .markdown-content th {
  background: transparent;
}

.chat-message-assistant .markdown-table {
  border: 0;
  border-radius: 0;
}

.chat-message-assistant .markdown-content th,
.chat-message-assistant .markdown-content td {
  border-bottom: 1px solid var(--line);
}

.chat-message-attachments {
  width: 100%;
}

.chat-message-attachments[hidden] {
  display: none !important;
}

.chat-message.chat-message-completion {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: none;
}

#local-chat-form.chat-composer,
#run-composer-form.chat-composer {
  width: 100%;
  max-width: none;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: none;
}

/* Keep every conversation element on the same centered column in its pane. */
#page-main {
  --conversation-column-width: 860px;
}

#local-chat {
  width: min(var(--conversation-column-width), calc(100% - 48px));
  max-width: none;
  padding: 24px 0;
}

#local-run .local-run-messages > *,
#local-run-status,
#run-composer-form.chat-composer {
  width: min(100%, var(--conversation-column-width));
  margin-inline: auto;
}

.local-run-messages > .local-run-completion {
  max-width: none;
}

.local-run-cluster {
  margin-left: 0;
}

.landing-content {
  width: min(100%, var(--conversation-column-width));
}

.placeholder-view,
.empty-view {
  width: min(100%, var(--conversation-column-width));
  margin-inline: auto;
}

@media (max-width: 480px) {
  #local-chat {
    width: calc(100% - 28px);
  }
}

#local-chat-form.chat-composer textarea,
#run-composer-form.chat-composer textarea {
  min-height: 46px;
  resize: none;
  font-size: 14px;
}

#local-chat-form.chat-composer button[type="submit"],
#run-composer-form.chat-composer button[type="submit"] {
  border-radius: 50%;
  color: white;
  background: #17212e;
}

html[data-theme="night"] #local-chat-form.chat-composer button[type="submit"],
html[data-theme="night"] #run-composer-form.chat-composer button[type="submit"] {
  color: #17212e;
  background: #dcecff;
}