/* Layout and the few things inkv2 has no answer for. Everything else is inkv2. */

[hidden] { display: none !important; }

body { display: flex; height: 100dvh; overflow: hidden; }
.app { min-width: 0; }
#messages, #chat-list, #settings-page { overflow-y: auto; }
#chat-list { min-height: 0; flex: 1; }

/* The chats list: on large screens a column beside the page, as wide as it was dragged to, folding away
   instead of jumping; on small ones inkv2's drawer over the page. */
#sidebar-handle { display: none; }
@media (min-width: 768px) {
  aside[data-sidebar] { width: var(--sidebar-width, 16rem); flex: none; overflow: hidden; transition: width 0.15s ease, padding 0.15s ease; }
  [data-sidebar=collapsed] aside[data-sidebar] { width: 0; padding-inline: 0; border-right: none; }
  #sidebar-handle { display: block; flex: none; width: 6px; margin-left: -3px; margin-right: -3px; z-index: 1; cursor: col-resize; touch-action: none; }
  #sidebar-handle:hover, body.resizing #sidebar-handle { background: var(--color-highlight-medium); }
  [data-sidebar=collapsed] #sidebar-handle { display: none; }
  body.resizing { cursor: col-resize; user-select: none; }
  body.resizing aside[data-sidebar] { transition: none; }
}
aside[data-sidebar] a { white-space: nowrap; }
/* The drawer dims the page it covers. */
@media (max-width: 767px) {
  body:has(aside[data-sidebar][data-open="true"])::after { content: ""; position: fixed; inset: 0; z-index: 39; background: rgb(0 0 0 / 0.3); }
}

/* Messages use the full width, each in a frame of its own, marked by who it is from. */
.message { display: flex; flex-direction: column; flex: none; border: var(--border-width) solid var(--color-highlight-medium); border-left: 3px solid var(--color-muted); background: var(--color-surface); }
.message.user { border-left-color: var(--color-iris); }
.message.assistant { border-left-color: var(--color-pine); }
.message.system { border-left-color: var(--color-gold); }
.message > .content { padding: var(--space-2) var(--space-3) var(--space-3); }
.message.folded > .content { display: none; }

/* The header stays in view while any of its message is, so its actions can always be reached. */
.message > header { position: sticky; top: calc(-1 * var(--space-3)); z-index: 1; min-height: 1.75rem; padding: 0 var(--space-2) 0 var(--space-3); background: var(--color-overlay); border-bottom: var(--border-width) solid var(--color-highlight-low); }
.message > header .peek { min-width: 0; flex: 1; color: var(--color-subtle); }
.message > header .actions { flex: none; opacity: 0.7; }
.message:hover .actions, .message .actions:focus-within { opacity: 1; }
#messages.busy .actions :is([data-act=edit], [data-act=rerun], [data-act=reanswer], [data-act=swipe], [data-act=delete]) { opacity: 0.25; pointer-events: none; }
.message .actions button { min-height: 0; padding: 0 var(--space-2); border: none; }
.message.system > .content, .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.message img.attachment { max-width: min(20rem, 100%); }

/* Collapsible blocks: closed, previewing the last lines as they stream in, or fully open. */
.block { margin: 0; border-left: 3px solid var(--color-ocean); }
.block[data-kind="tool"] { border-left-color: var(--color-rose); }
.block summary { min-height: 2rem; font-weight: 500; }
.block > .body { margin: 0; padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.5; }
.block[data-preview] > .body { max-height: calc(4 * 1.5em + var(--space-2) * 2); overflow: hidden; }
.block pre { background: none; padding: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.block pre + pre { margin-top: var(--space-2); border-top: var(--border-width) dashed var(--color-border); padding-top: var(--space-2); }
.hint { font-size: var(--text-sm); color: var(--color-subtle); }

/* A swarm at work */
.swarm { display: flex; flex-direction: column; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--text-sm); }
.swarm ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.swarm li { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.swarm li ui-chip { max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Composer */
#composer.dragging { outline: 2px dashed var(--color-iris); outline-offset: -4px; }
#attachment-items { flex-wrap: wrap; }
.attachment-item { position: relative; }
.attachment-item img { width: 4.5rem; height: 4.5rem; object-fit: cover; }
.attachment-item button { position: absolute; inset: 2px 2px auto auto; min-height: 0; padding: 0 var(--space-1); }

.welcome h2 { text-align: center; }
.presets { display: grid; gap: var(--space-2); width: 100%; max-width: var(--md); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* Settings: a page of their own, in sections. */
.settings { max-width: var(--lg); margin-inline: auto; }
.settings .field { display: flex; flex-direction: column; gap: var(--space-1); }
.settings select, .settings input:not([type=checkbox]) { width: 100%; }
.settings legend ui-chip { margin-left: var(--space-2); font-weight: normal; }

#settings-page { padding-bottom: var(--space-8); }
.hint-setting ui-chip { font-size: var(--text-xs); font-weight: normal; }
.hint-setting input[type=number] { width: 4.5rem !important; min-height: 2rem; }
.settings .server { display: flex; align-items: baseline; gap: var(--space-2); }
.settings .server small { color: var(--color-love); }
.settings .server #swarm-status { color: var(--color-subtle); }
@media (max-width: 480px) { header .text-muted { display: none; } }

.edit-area { width: 100%; min-height: 3rem; }
.writer .edit-area { min-height: 2rem; }
.writer button { flex: none; }
.writer ui-alert { flex-basis: 100%; }
/* The message, and under it what the chat answers with and what to do. */
#composer textarea { width: 100%; min-height: 2.75rem; max-height: 10rem; overflow-y: auto; }
#toolbar { flex-wrap: wrap; }
#toolbar .actions { margin-left: auto; }
#toolbar button { flex: none; }
select.pill { width: auto; max-width: 14rem; min-height: 2.25rem; padding-block: 0; font-size: var(--text-sm); text-overflow: ellipsis; }
@media (max-width: 480px) { select.pill { max-width: 9rem; } }

/* Chats at work show a pulsing dot. */
#chat-list a[data-active]::after { content: ""; margin-left: auto; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-iris); animation: working 1.2s ease-in-out infinite; }
@keyframes working { 50% { opacity: 0.2; } }

/* The subagents of the chat. */
#crew { border-top: var(--border-width) solid var(--color-highlight-medium); max-height: 30vh; overflow-y: auto; }
.member { background: var(--color-surface); padding: var(--space-1) var(--space-2); }
.member[data-state=running] { border-left: 3px solid var(--color-iris); }
.member[data-state=failed] { border-left: 3px solid var(--color-love); }
.member > div { padding: var(--space-2) 0; }
.member .result { max-height: 12rem; overflow: auto; white-space: pre-wrap; }

.tool-group > details { margin-left: var(--space-5); }

.member summary strong { min-width: 5rem; }
.member summary { justify-content: flex-start; }

/* Is swarm up, and is llama.cpp behind it: green, red, or grey while unknown. */
.dot { display: inline-block; flex: none; width: 0.5rem; height: 0.5rem; margin-right: var(--space-1); border-radius: 50%; background: var(--color-muted); vertical-align: middle; }
.dot[data-up=true] { background: var(--color-pine); }
.dot[data-up=false] { background: var(--color-love); }
#status { color: var(--color-subtle); text-decoration: none; }
#status:hover { color: var(--color-text); }
@media (max-width: 480px) { #status small { font-size: 0; } #status .dot { margin: 0; } }

.member .pulses { max-height: 10rem; overflow: auto; }
.member ui-chip[data-word=thinking] { background: color-mix(in srgb, var(--color-iris) 20%, transparent); color: var(--color-iris); }
.member ui-chip[data-word=writing], .member ui-chip[data-word=done] { background: color-mix(in srgb, var(--color-pine) 20%, transparent); color: var(--color-pine); }
.member ui-chip[data-word=working] { background: color-mix(in srgb, var(--color-gold) 20%, transparent); color: var(--color-gold); }
.member ui-chip[data-word=failed] { background: color-mix(in srgb, var(--color-love) 20%, transparent); color: var(--color-love); }
.member ui-chip[data-word=starting] { background: color-mix(in srgb, var(--color-muted) 20%, transparent); color: var(--color-muted); }

/* SwarmNet's router and node pages: the settings column, without the chats. */
.settings fieldset { min-width: 0; }
.table-wrap { overflow-x: auto; }
.table-wrap :is(th, td) { white-space: nowrap; }
.table-wrap .num { text-align: right; font-variant-numeric: tabular-nums; }
.row-actions { display: flex; gap: var(--space-1); justify-content: flex-end; }
.row-actions.start { justify-content: flex-start; }
.row-actions button { min-height: 0; padding: 0 var(--space-2); font-size: var(--text-xs); }
.checks { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.inline-form input { flex: 1 1 10rem; width: auto !important; }