Something went wrong. Try again.
I'm going to build my own OpenClaw, with blackjack... and bun!
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359/* * chat.css - Extracted from styles.css during the layered stylesheet split. * Ownership: Chat shell, compose/search/footer controls, and timeline container chrome. * Keep selector names/order stable in this first move-only tranche. */
/* Floating controls */.floating-controls { display: none;}
.floating-btn { background: var(--bg-secondary); border: 1px solid var(--border-color); cursor: pointer; padding: var(--spacing-xs); border-radius: var(--radius-full); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: background-color var(--ui-transition-fast), color var(--ui-transition-fast), border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);}
.floating-btn:hover { background-color: var(--bg-hover); color: var(--text-primary);}
.floating-btn.enabled { color: var(--accent-color);}
/* Search bar */.search-results-spacer { height: calc((var(--spacing-sm) + env(safe-area-inset-top, 0px) + 12px) * 1.25); flex-shrink: 0;}
/* Hashtag header */.hashtag-header { flex-shrink: 0; display: flex; align-items: center; padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--border-color); font-weight: 600; color: var(--accent-color);}
/* OOBE panel */.oobe-panel { margin: var(--spacing-sm) var(--spacing-md) 0; padding: calc(var(--spacing-sm) + 2px) calc(var(--spacing-md) + 2px); border: 1px solid var(--border-color); border-radius: var(--chat-surface-radius); background: linear-gradient(180deg, var(--bg-secondary), color-mix(in srgb, var(--bg-secondary) 84%, var(--accent-soft, rgba(29, 155, 240, 0.08)) 16%)); display: flex; flex-direction: column; gap: var(--spacing-sm);}
.oobe-panel-copy { display: flex; flex-direction: column; gap: 4px;}
.oobe-panel-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary);}
.oobe-panel-title { margin: 0; font-size: var(--font-size-lg); line-height: 1.25; color: var(--text-primary);}
.oobe-panel-body { margin: 0; color: var(--text-secondary);}
.oobe-panel-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-xs);}
.oobe-panel-btn { min-height: 32px; padding: 0 12px; border-radius: var(--chat-surface-radius); border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); font: inherit; cursor: pointer;}
.oobe-panel-btn:hover { background: var(--bg-hover);}
.oobe-panel-btn-primary { border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color)); background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-primary));}
.oobe-panel-btn:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px;}
/* Theme toggle */.theme-toggle { background: var(--bg-secondary); border: 1px solid var(--border-color); cursor: pointer; padding: var(--spacing-xs); border-radius: var(--radius-full); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: background-color var(--ui-transition-fast), color var(--ui-transition-fast), border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);}
.theme-toggle:hover { background-color: var(--bg-hover);}
.theme-toggle svg { display: block;}
/* Compose box */.compose-box { flex-shrink: 0; border-top: none; padding: var(--spacing-sm) var(--spacing-md) 2px; background-color: var(--bg-primary); display: flex; flex-direction: column; gap: 2px; align-items: stretch;}
.compose-input-wrapper { position: relative; flex: 1; width: 100%; display: flex; flex-direction: column; gap: 0; background-color: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--chat-surface-radius); padding: var(--chat-surface-padding-y) var(--chat-surface-padding-x);}
.compose-input-wrapper:focus-within { border-color: var(--accent-color);}
.compose-input-wrapper.drag-active { border-color: var(--accent-color); background-color: var(--bg-hover); box-shadow: 0 0 0 2px var(--accent-soft-strong, rgba(29, 155, 240, 0.2));}
.compose-input-main { flex: 1; display: flex; flex-direction: column; gap: 1px; min-width: 0; position: relative;}
.compose-file-refs { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); padding: 0 0 4px 0; align-items: center;}
.compose-submit-error { flex: 0 1 100%; border-radius: var(--radius-md); background: color-mix(in srgb, var(--danger-color) 16%, transparent); border: 1px solid color-mix(in srgb, var(--danger-color) 35%, transparent); color: var(--danger-color); padding: 4px 8px; font-size: 11px; line-height: 1.25; white-space: normal; max-width: 100%; width: calc(100% - 2px);}
.compose-submit-error-top { margin: 2px var(--spacing-xs) 0 var(--spacing-xs);}
.compose-inline-status { margin: 2px 0 0 0; border-radius: var(--chat-surface-radius); border: 1px solid color-mix(in srgb, var(--accent-color) 28%, transparent); background: color-mix(in srgb, var(--accent-color) 10%, transparent); color: var(--text-primary); padding: var(--chat-surface-padding-y) var(--chat-surface-padding-x); line-height: 1.3;}
.compose-inline-status.compaction { border-color: color-mix(in srgb, var(--warning-color, #f59e0b) 36%, transparent); background: color-mix(in srgb, var(--warning-color, #f59e0b) 14%, transparent);}
.compose-inline-status-row { display: flex; align-items: center; gap: var(--chat-surface-inline-gap); min-width: 0;}
.compose-inline-status-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-color); flex: 0 0 auto; position: relative; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent);}
.compose-inline-status-dot.compose-inline-status-dot-pulsing { animation: composeStatusDotPulse 1.4s ease-out infinite;}
.compose-inline-status.compaction .compose-inline-status-dot { background: var(--warning-color, #f59e0b);}
@keyframes composeStatusDotPulse { 0% { transform: scale(1); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent), 0 0 0 0 color-mix(in srgb, currentColor 28%, transparent); } 70% { transform: scale(1.08); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent), 0 0 0 8px color-mix(in srgb, currentColor 0%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 12%, transparent), 0 0 0 0 color-mix(in srgb, currentColor 0%, transparent); }}
@media (prefers-reduced-motion: reduce) { .compose-inline-status-dot.compose-inline-status-dot-pulsing { animation: none; }}
.compose-inline-status-title { min-width: 0; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.compose-inline-status-elapsed { margin-left: auto; font-size: 11px; color: var(--text-secondary); flex: 0 0 auto;}
.compose-inline-status-detail { margin-top: 4px; font-size: 11px; color: var(--text-secondary);}
.compose-command-notice { margin: 2px var(--spacing-xs) 0 var(--spacing-xs);}
.compose-command-notice-text { margin-top: 0; white-space: pre-wrap;}
.compose-clear-attachments-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-secondary); border-radius: var(--radius-full); padding: 2px 8px; font-size: 11px; line-height: 1.15; font-weight: 500; cursor: pointer; transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast), background-color var(--ui-transition-fast);}
.compose-clear-attachments-btn:hover,.compose-clear-attachments-btn:focus-visible { color: var(--accent-color); border-color: color-mix(in srgb, var(--accent-color) 45%, var(--border-color)); background: color-mix(in srgb, var(--accent-color) 10%, transparent); outline: none;}
.compose-file-pill { display: inline-flex; align-items: center; gap: 6px; background-color: var(--bg-primary); border: 1px solid var(--border-color); border-radius: var(--radius-full); padding: 2px 6px; color: var(--text-secondary); font-size: var(--font-size-sm); max-width: 100%;}
.compose-file-pill svg { display: block;}
.compose-file-name { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.compose-file-remove { background: none; border: none; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center; color: inherit; cursor: pointer;}
.compose-file-remove:hover { color: var(--text-primary);}
.compose-box textarea { flex: 1; width: 100%; min-height: 50px; max-height: none; border: none; resize: none; field-sizing: content; font-family: inherit; font-size: var(--chat-content-font-size); color: var(--text-primary); background-color: transparent; outline: none; padding: 0 calc(var(--spacing-xs) + 28px) 0 0; line-height: 1.5; overflow-y: hidden; overflow-wrap: anywhere; word-break: break-word;}
.compose-popout-btn { position: absolute; top: 2px; right: 2px; width: 24px; height: 24px; border: none; border-radius: 999px; background: transparent; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; transition: background-color var(--ui-transition-fast), color var(--ui-transition-fast);}
.compose-popout-btn:hover,.compose-popout-btn:focus-visible { background: var(--bg-hover); color: var(--accent-color); outline: none;}
/* iOS/WebKit: keep compose textarea at >=16px to avoid focus-triggered page zoom/scroll jumps while typing in Safari/PWA modes (notably on iPad). Do not gate this behind coarse-pointer media queries: iPad/PWA/hardware-input combinations can miss those and still trigger whole-page movement on focus. */@supports (-webkit-touch-callout: none) { :root { --chat-content-font-size: max(var(--font-size-md), 16px); }}
.compose-box textarea::placeholder { color: var(--text-secondary); opacity: var(--placeholder-opacity, 0.65);}
/* Slash command autocomplete dropdown */.slash-autocomplete { position: absolute; bottom: 100%; left: 0; right: 0; max-height: 240px; overflow-y: auto; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25); z-index: 100; margin-bottom: 4px; scrollbar-width: thin;}
.slash-item { display: flex; align-items: baseline; gap: 10px; padding: 6px 10px; cursor: pointer; transition: background-color 0.1s;}
.slash-item:hover,.slash-item.active { background: var(--bg-hover);}
.slash-name { font-family: var(--font-mono, monospace); font-size: var(--font-size-sm); color: var(--accent-color); white-space: nowrap; font-weight: 600;}
.slash-desc { font-size: var(--font-size-sm); color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* Compose metadata row (model hint + context usage) */.compose-meta-row { display: flex; align-items: center; justify-content: flex-start; gap: var(--spacing-xs); min-height: 12px; padding: 0 2px; flex: 1; min-width: 0;}
.compose-model-meta { display: flex; align-items: flex-start; flex-direction: column; gap: 2px; min-width: 0;}
.compose-model-meta-subline { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; width: 100%;}
.compose-agent-hints { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0;}
.compose-agent-hints-inline { flex-wrap: nowrap; gap: 4px; flex-shrink: 0; max-width: min(34vw, 320px); overflow: hidden;}
.compose-agent-hints-label { font-size: 10.5px; line-height: 1; color: var(--text-tertiary, var(--text-secondary)); text-transform: uppercase; letter-spacing: 0.05em;}
.compose-agent-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-secondary); border-radius: 999px; padding: 2px 7px; font-size: 11px; line-height: 1.1; cursor: pointer; transition: background-color var(--ui-transition-fast), color var(--ui-transition-fast), border-color var(--ui-transition-fast);}
.compose-agent-chip:hover,.compose-agent-chip:focus-visible { background: var(--bg-hover); color: var(--text-primary); border-color: var(--accent-color); outline: none;}
.compose-agent-chip.active { color: var(--accent-color); border-color: color-mix(in srgb, var(--accent-color) 55%, var(--border-color)); background: color-mix(in srgb, var(--accent-color) 10%, var(--bg-primary));}
.compose-agent-chip.active:hover,.compose-agent-chip.active:focus-visible { color: var(--accent-color); border-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 14%, var(--bg-hover));}
.compose-agent-chip-handle { font-family: var(--font-mono, monospace);}
.compose-agent-hints-inline .compose-agent-chip { flex-shrink: 0;}
.compose-agent-hints-inline .compose-agent-hints-label { margin-right: 2px;}
.compose-footer { display: flex; align-items: flex-end; gap: var(--spacing-xs); min-width: 0;}
.compose-model-hint { font-size: 11.5px; color: var(--text-secondary); opacity: var(--model-hint-opacity, 0.85); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; font-family: var(--font-mono, monospace); letter-spacing: 0.01em; min-width: 0; flex: 0 0 auto;}
.compose-model-hint-btn { border: none; background: transparent; padding: 0; margin: 0; text-align: left; cursor: pointer; align-self: flex-start;}
.compose-model-hint-btn:hover,.compose-model-hint-btn:focus-visible { opacity: 1; color: var(--text-primary); outline: none;}
.compose-model-hint-btn:disabled { cursor: default;}
.compose-queue-indicator { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 2px 6px; border-radius: 999px; border: 1px solid var(--border-color); background: var(--bg-elevated); color: var(--text-tertiary, var(--text-secondary)); font-size: 10.5px; line-height: 1; white-space: nowrap; letter-spacing: 0.01em; max-width: min(45vw, 190px);}
.compose-queue-stack { width: auto; display: flex; flex-direction: column; gap: var(--chat-surface-stack-gap); margin: var(--chat-surface-stack-gap) var(--spacing-sm) 0; max-height: min(24vh, 180px); overflow: auto; scrollbar-width: thin;}
.compose-box > .compose-queue-stack { width: 100%; margin: 0;}
.compose-queue-stack-item { display: flex; align-items: stretch; gap: var(--chat-surface-inline-gap); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--chat-surface-radius); padding: var(--chat-surface-padding-y) var(--chat-surface-padding-x); min-width: 0;}
.compose-queue-stack-content { flex: 1 1 auto; min-width: 0; font-size: 11.5px; color: var(--text-secondary); line-height: 1.3; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--chat-surface-inline-gap); overflow: hidden;}
.compose-queue-stack-text { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.compose-queue-stack-refs { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0;}
.compose-queue-stack-refs .compose-file-pill { background: var(--bg-primary); padding: 1px 6px;}
.compose-queue-stack-actions { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;}
.compose-queue-stack-steer-btn { min-height: var(--chat-surface-control-height); padding: 0 9px 0 7px; border-radius: 999px; color: var(--accent-color); opacity: 0.72; display: inline-flex; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600; cursor: pointer; transition: opacity 0.15s ease, background-color 0.15s ease; background: none; border: 1px solid color-mix(in srgb, var(--accent-color) 30%, transparent);}
.compose-queue-stack-steer-btn:hover,.compose-queue-stack-steer-btn:focus-visible { opacity: 1; background: color-mix(in srgb, var(--accent-color) 10%, transparent); outline: none;}
.compose-queue-stack-steer-btn svg { flex-shrink: 0;}
.compose-queue-stack-close-btn { width: var(--chat-surface-control-height); height: var(--chat-surface-control-height); padding: 0; border-radius: 999px; color: var(--accent-color); opacity: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease; background: none; border: none; margin-left: -2px;}
.compose-queue-stack-item:hover .compose-queue-stack-close-btn,.compose-queue-stack-item:focus-within .compose-queue-stack-close-btn { opacity: 0.4;}
.compose-queue-stack-close-btn:hover,.compose-queue-stack-close-btn:focus-visible { opacity: 1 !important; color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 10%, transparent); outline: none;}
.compose-queue-stack-move-btn { width: 22px; height: 22px; padding: 0; border-radius: 999px; color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; opacity: 0.5; transition: opacity 0.15s ease, color 0.15s ease, background-color 0.15s ease;}
.compose-queue-stack-move-btn:hover,.compose-queue-stack-move-btn:focus-visible { opacity: 1; color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 10%, transparent); outline: none;}
.compose-queue-stack-move-btn:disabled { opacity: 0.15; cursor: default; pointer-events: none;}
@media (hover: none) and (pointer: coarse) { .compose-queue-stack-close-btn { opacity: 0.4; }}
.compose-queue-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-color); flex: 0 0 auto; box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 20%, transparent);}
.compose-queue-indicator span:last-child { overflow: hidden; text-overflow: ellipsis;}
.compose-steer-btn { position: relative;}
.compose-steer-btn svg { transform: rotate(-12deg);}
.compose-model-usage-hint { display: block; font-size: 10.5px; color: var(--text-tertiary, var(--text-secondary)); opacity: 0.82; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1; font-family: var(--font-mono, monospace); letter-spacing: 0.01em; flex: 0 1 auto;}
.compose-model-popup { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25); padding: var(--spacing-sm); z-index: 120; display: flex; flex-direction: column; gap: var(--spacing-xs);}
.compose-model-popup-title { font-size: var(--font-size-sm); color: var(--text-secondary);}
.compose-model-popup-menu { max-height: 220px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-sm); background: var(--bg-primary);}
.compose-model-popup-empty { font-size: 12px; color: var(--text-secondary); padding: 10px 8px;}
.compose-model-popup-item { width: 100%; text-align: left; border: none; background: transparent; color: var(--text-primary); font-family: var(--font-family-mono); font-size: 12px; padding: 7px 8px; cursor: pointer;}
.compose-model-popup-model-item { display: flex; align-items: flex-start;}
.compose-model-popup-model-label { display: block; width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.compose-model-popup-item:hover,.compose-model-popup-item:focus-visible { background: var(--bg-hover); outline: none;}
.compose-model-popup-item.active { color: var(--accent-color); font-weight: 600; background: color-mix(in srgb, var(--accent-color) 10%, transparent);}
.compose-model-popup-btn.active { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color) 35%, transparent); background: color-mix(in srgb, var(--accent-color) 10%, transparent);}
.compose-model-popup-item.archived { color: var(--text-secondary);}
.compose-model-popup-item.archived:hover,.compose-model-popup-item.archived:focus-visible { background: color-mix(in srgb, var(--bg-hover) 65%, transparent); color: var(--text-primary);}
.compose-model-popup-item.current { cursor: default; font-weight: 600; color: var(--text-secondary); background: color-mix(in srgb, var(--bg-hover) 55%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border-color) 70%, transparent);}
.compose-model-popup-item-row { display: flex; align-items: center;}
.compose-model-popup-item-row .compose-model-popup-item { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;}
.compose-model-popup-item-delete { display: none; align-items: center; justify-content: center; flex-shrink: 0; width: 30px; height: 30px; margin-right: 4px; border: 1px solid transparent; border-radius: var(--radius-sm, 4px); background: transparent; color: color-mix(in srgb, var(--danger-color, #f4212e) 60%, var(--text-secondary)); cursor: pointer; opacity: 0.9; transition: opacity 0.12s, color 0.12s, background-color 0.12s, border-color 0.12s;}
.compose-model-popup-item-delete svg { width: 14px; height: 14px;}
.compose-model-popup-item-row:hover .compose-model-popup-item-delete { display: inline-flex;}
@media (hover: none), (pointer: coarse) { .compose-model-popup-item-row .compose-model-popup-item-delete { display: inline-flex; }}
.compose-model-popup-item-delete:hover,.compose-model-popup-item-delete:focus-visible { opacity: 1; color: var(--danger-color, #f4212e); background: color-mix(in srgb, var(--danger-color, #f4212e) 16%, transparent); border-color: color-mix(in srgb, var(--danger-color, #f4212e) 35%, transparent);}
.compose-model-popup-actions { display: flex; gap: var(--spacing-xs); justify-content: flex-end;}
.compose-model-popup-btn { border: 1px solid var(--border-color); background: var(--bg-primary); color: var(--text-primary); border-radius: var(--radius-sm); font-size: 12px; padding: 4px 8px; cursor: pointer;}
.compose-model-popup-btn.primary { border-color: var(--accent-color); color: var(--accent-color);}
.compose-model-popup-btn.danger { border-color: color-mix(in srgb, var(--danger-color) 40%, var(--border-color)); color: var(--danger-color);}
.compose-model-popup-btn:disabled { opacity: 0.5; cursor: not-allowed;}
.rename-branch-overlay { position: fixed; inset: 0; z-index: 210; display: flex; align-items: center; justify-content: center; padding: 16px; background: color-mix(in srgb, var(--bg-primary) 70%, transparent);}
.rename-branch-panel { width: min(440px, 92vw); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);}
.rename-branch-title { font-size: 12px; color: var(--text-secondary); line-height: 1.2;}
.rename-branch-panel input { width: 100%; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 7px 10px; background: var(--bg-primary); color: var(--text-primary); font: inherit;}
.rename-branch-panel input:focus { outline: 2px solid color-mix(in srgb, var(--accent-color) 35%, transparent); outline-offset: 1px;}
.rename-branch-help { font-size: 12px; line-height: 1.4; color: var(--text-secondary);}
.rename-branch-help.error { color: var(--danger-color, #ef4444);}
.rename-branch-help.success { color: var(--success-color, #22c55e);}
.rename-branch-actions { display: flex; gap: 8px; justify-content: flex-end;}
.compose-context-pie { display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 0; box-sizing: border-box; line-height: 0; opacity: 0.7; cursor: default; transition: opacity 0.15s; flex-shrink: 0;}.compose-context-pie:hover { opacity: 1;}
.compose-send-stack { position: relative; display: inline-flex; align-items: flex-end; justify-content: flex-end; flex: 0 0 auto;}
.compose-connection-status { position: absolute; right: 0; bottom: 0; z-index: 3; display: inline-flex; align-items: center; justify-content: center; min-height: 22px; padding: 0 8px; border-radius: var(--radius-full); border: 1px solid color-mix(in srgb, var(--border-color) 90%, transparent); font-size: 10.5px; line-height: 1; font-weight: 600; white-space: nowrap; box-sizing: border-box; flex: 0 0 auto; color: inherit; vertical-align: middle; pointer-events: none; box-shadow: var(--shadow-sm);}
.compose-actions { display: flex; align-items: center; gap: calc(var(--spacing-xs) - 2px); margin-right: -2px; flex-shrink: 0; margin-left: auto;}
.compose-actions.search-mode { gap: calc(var(--spacing-sm) - 2px);}
.compose-actions .icon-btn { padding: var(--spacing-xs);}
.compose-session-trigger-group { display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0;}
.compose-session-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 28px; padding: 0; margin: 0; border: none; background: transparent; border-radius: var(--radius-full); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;}
.compose-session-trigger:hover,.compose-session-trigger:focus-visible { outline: none;}
.compose-session-trigger-pill { justify-content: flex-start;}
.compose-session-trigger-icon-btn { min-width: 28px; padding: 4px;}
.compose-current-agent-label { display: inline-flex; align-items: center; min-height: 24px; border: 1px solid transparent; background: transparent; font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600; line-height: 1; color: var(--text-secondary); padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(28vw, 180px); border-radius: var(--radius-full); box-shadow: none; opacity: 0.95; transition: background-color var(--ui-transition-fast), color var(--ui-transition-fast), border-color var(--ui-transition-fast), opacity var(--ui-transition-fast), transform var(--ui-transition-fast); pointer-events: none;}
.compose-current-agent-label.active { color: var(--accent-contrast-text, #0f1419); background: var(--accent-color); border-color: var(--accent-color); opacity: 1;}
.compose-session-trigger:hover .compose-current-agent-label,.compose-session-trigger:focus-visible .compose-current-agent-label { opacity: 1;}
.compose-session-trigger.active .compose-current-agent-label.active,.compose-session-trigger:hover .compose-current-agent-label.active,.compose-session-trigger:focus-visible .compose-current-agent-label.active { color: var(--accent-contrast-text, #0f1419); background: color-mix(in srgb, var(--accent-color) 90%, var(--bg-hover)); border-color: color-mix(in srgb, var(--accent-color) 92%, black 8%);}
.compose-session-trigger-icon { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; min-height: 16px; padding: 0; border: none; border-radius: 0; background: transparent; color: var(--accent-color); transition: color var(--ui-transition-fast), opacity var(--ui-transition-fast); pointer-events: none; opacity: 0.95;}
.compose-session-trigger:hover .compose-session-trigger-icon,.compose-session-trigger:focus-visible .compose-session-trigger-icon,.compose-session-trigger.active .compose-session-trigger-icon { color: var(--accent-color); opacity: 1;}
.compose-mention-icon { width: 18px; height: 18px; display: block;}
.compose-actions .icon-btn svg { width: 18px; height: 18px;}
.compose-actions.search-mode .icon-btn { color: var(--accent-color);}
.compose-search-scope-wrap { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px;}
.compose-search-scope-label { font-size: 11px; color: var(--text-secondary); white-space: nowrap;}
.compose-search-scope-select { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary); color: var(--text-primary); padding: 4px 8px; font: inherit; font-size: var(--font-size-sm);}
.icon-btn { background: none; border: none; cursor: pointer; padding: var(--spacing-xs); border-radius: var(--radius-full); color: var(--accent-color); display: flex; align-items: center; justify-content: center; transition: background-color var(--ui-transition-fast), color var(--ui-transition-fast), border-color var(--ui-transition-fast), box-shadow var(--ui-transition-fast);}
.icon-btn:hover,.icon-btn:focus-visible { background-color: var(--accent-soft, rgba(29, 155, 240, 0.1)); outline: none;}
.icon-btn svg { display: block;}
.notification-btn.active { color: var(--success-color);}
.notification-btn.denied { color: var(--danger-color);}
.notification-btn.denied:hover { background: transparent;}
.notification-btn.unavailable { color: var(--text-secondary);}
.notification-btn.unavailable:hover { background: transparent;}
.icon-btn:disabled { opacity: 0.3; cursor: not-allowed;}
.send-btn { color: var(--accent-color); transition: color var(--ui-transition-fast);}
.send-btn:disabled { color: var(--text-secondary);}
.media-files-preview { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); padding: 2px var(--spacing-xs) 0 var(--spacing-xs); margin-top: var(--spacing-xs);}