:root {
  color-scheme: dark;
  --bg: #080909;
  --panel: #101111;
  --panel-raised: #191a1b;
  --panel-hover: #242526;
  --line: #292a2b;
  --line-soft: #1e2021;
  --text: #f2f2f2;
  --muted: #a5a7a8;
  --subtle: #777b7d;
  --rail: #14212e;
  --accent: #f4f4f4;
  --green: #6fcea0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: var(--bg); color: var(--text); font-size: 14px; }
button, input, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #b5c7dc; outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
[hidden] { display: none !important; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon-small { width: 14px; height: 14px; }

.app-shell { display: flex; width: 100%; height: 100dvh; min-height: 0; background: var(--bg); }

.main-frame { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg); }
.topbar { position: relative; z-index: 25; display: flex; flex: 0 0 66px; align-items: center; justify-content: space-between; min-width: 0; padding: 0 18px 0 23px; border-bottom: 1px solid rgba(255,255,255,.025); background: #090a0a; }
.topbar-leading { display: flex; align-items: center; min-width: 214px; gap: 14px; }
.top-home, .icon-button, .small-icon-button, .search-filter, .small-plus, .round-action, .send-button, .attachment-remove, .dialog-close { display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; }
.top-home { width: 24px; height: 30px; color: #f0f0f0; background: transparent; }
.top-home .icon { width: 19px; height: 19px; }
.project-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.project-eyebrow { color: #717576; font-size: 9px; font-weight: 750; letter-spacing: .15em; line-height: 1; }
.project-name { display: flex; align-items: center; gap: 4px; max-width: 210px; padding: 1px 0; overflow: hidden; border: 0; background: transparent; color: #ececec; font-size: 13px; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.project-name .icon { color: #8b8d8e; }
.mobile-menu-button { display: none !important; }
.search-box { position: absolute; left: 50%; display: flex; align-items: center; gap: 11px; width: min(390px, 36vw); height: 38px; padding: 0 9px 0 13px; transform: translateX(-50%); border: 1px solid #202122; border-radius: 15px; background: #171819; color: #aeb0b1; transition: background .16s ease, border-color .16s ease; }
.search-box:focus-within { border-color: #454748; background: #1c1d1e; }
.search-box > .icon { width: 17px; height: 17px; color: #96999a; }
.search-box input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: #f0f0f0; font-size: 13px; }
.search-box input::placeholder { color: #929596; opacity: 1; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-filter { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 10px; background: #242526; color: #ddd; transition: background .15s ease; }
.search-filter:hover { background: #343637; }
.search-filter .icon { width: 16px; height: 16px; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.top-avatar { width: 30px; height: 30px; margin-left: 12px; border: 0; border-radius: 50%; color: #fff; background: radial-gradient(circle at 70% 25%, #69b89d 0 18%, #24736e 19% 43%, #1d4146 44% 100%); font-size: 9px; font-weight: 800; letter-spacing: -.04em; box-shadow: 0 0 0 2px rgba(255,255,255,.1); cursor: pointer; }
.icon-button { width: 34px; height: 34px; border-radius: 11px; background: transparent; color: #e5e5e5; transition: background .14s ease, color .14s ease; }
.icon-button:hover, .top-home:hover, .small-icon-button:hover { background: rgba(255,255,255,.09); color: white; }
.icon-button .icon { width: 20px; height: 20px; }
.top-create { margin-right: 5px; }
.top-create .icon { width: 23px; height: 23px; }
.top-avatar { margin-left: 12px; }
.top-popover { position: absolute; top: 56px; right: 52px; z-index: 60; width: 220px; padding: 6px; border: 1px solid #303233; border-radius: 15px; background: #1b1c1d; box-shadow: 0 14px 45px rgba(0,0,0,.48); }
.top-popover button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 11px 10px; border: 0; border-radius: 10px; background: transparent; color: #e7e7e7; font-size: 12px; text-align: left; cursor: pointer; }
.top-popover button:hover { background: #2a2b2c; }
.top-popover .icon { width: 17px; height: 17px; color: #b9bbbc; }

.body-layout { position: relative; display: flex; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.sidebar { z-index: 21; display: flex; flex: 0 0 264px; flex-direction: column; width: 264px; min-width: 0; height: 100%; padding: 17px 12px 13px; background: #090a0a; transition: width .2s ease, flex-basis .2s ease, transform .22s ease; }
.sidebar-scroll { min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #363838 transparent; }
.sidebar-nav { display: flex; flex-direction: column; gap: 3px; }
.nav-entry { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 42px; padding: 0 13px; border: 0; border-radius: 14px; background: transparent; color: #e6e7e7; font-size: 12px; font-weight: 620; text-align: left; cursor: pointer; transition: color .16s ease, background .16s ease; }
.nav-entry .icon { width: 18px; height: 18px; color: #e8e9e9; }
.nav-entry span:not(.nav-count):not(.nav-entry-dot) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nav-entry:hover { background: #191a1a; }
.nav-entry.is-active { background: #303132; color: #fff; }
.nav-entry.is-active .icon { color: #fff; }
.sidebar-separator { height: 1px; margin: 13px 3px 13px; background: #363738; }
.sidebar-separator-tight { margin-top: 12px; margin-bottom: 12px; }
.sidebar-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 39px; padding: 0 8px 0 13px; }
.section-title { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 0; border: 0; background: transparent; color: #e6e7e7; font-size: 12px; font-weight: 650; cursor: pointer; }
.section-title:hover { color: #fff; }
.section-title .icon { width: 18px; height: 18px; }
.small-plus { width: 28px; height: 28px; border-radius: 9px; background: transparent; color: #ececec; }
.small-plus:hover { background: #2b2c2d; }
.small-plus .icon { width: 17px; height: 17px; }
.nav-entry-compact { min-height: 38px; padding-left: 13px; gap: 13px; color: #c9caca; font-size: 11px; font-weight: 520; }
.nav-entry-compact .icon { width: 17px; height: 17px; }
.nav-entry-dot { display: block; width: 7px; height: 7px; margin-left: 5px; border: 1px solid #888; border-radius: 2px; }
.nav-count { margin-left: auto; color: #8c9090; font-size: 10px; font-weight: 500; }
.section-alone { margin-top: 1px; }
.create-tool { color: #dedfdf; }
.create-tool .icon { width: 17px; height: 17px; }
.sidebar-bottom { display: flex; flex-direction: column; gap: 1px; margin-top: auto; padding-top: 12px; }
.sidebar-bottom .nav-entry { min-height: 40px; }
.sidebar-collapsed .sidebar { flex-basis: 0; width: 0; padding-left: 0; padding-right: 0; overflow: hidden; border: 0; }

.canvas { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; overflow: hidden; background: #000; }
.canvas-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; padding: 32px 24px 200px; scrollbar-width: thin; scrollbar-color: #333 transparent; }
.empty-state { position: absolute; top: 43%; left: 50%; display: flex; width: min(680px, calc(100% - 42px)); flex-direction: column; align-items: center; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.empty-flower { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 19px; color: #f5f5f5; }
.empty-flower svg { width: 61px; height: 61px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.empty-state h1 { margin: 0; color: #c2c4c4; font-size: clamp(17px, 1.45vw, 21px); font-weight: 500; letter-spacing: -.035em; line-height: 1.4; }
.empty-subtitle { margin: 9px 0 0; color: #737677; font-size: 12px; line-height: 1.55; }
.empty-cta { display: none; align-items: center; gap: 8px; margin-top: 19px; padding: 9px 13px; border: 1px solid #454748; border-radius: 20px; background: #161717; color: #e8e8e8; font-size: 12px; font-weight: 600; cursor: pointer; pointer-events: auto; }
.empty-cta:hover { background: #242626; }
.empty-cta .icon { width: 16px; height: 16px; }
.activity-stream { display: flex; width: min(880px, 100%); flex-direction: column; gap: 23px; margin: 0 auto; padding: 6px 2px 40px; }
.turn { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.turn[hidden] { display: none; }
.user-message { align-self: flex-end; max-width: min(72%, 610px); padding: 13px 17px; border: 1px solid #242526; border-radius: 19px 19px 5px 19px; background: #191a1b; color: #f0f0f0; font-size: 13px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-card { position: relative; align-self: flex-start; width: min(680px, 100%); min-width: 0; padding: 18px 19px 14px; border: 1px solid #242526; border-radius: 18px; background: #111212; box-shadow: 0 12px 40px rgba(0,0,0,.11); }
.assistant-header { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.assistant-mark { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #404342; border-radius: 10px; background: #202322; color: #eff2ef; }
.assistant-mark .icon { width: 16px; height: 16px; }
.assistant-name { color: #e9eaea; font-size: 12px; font-weight: 650; }
.model-badge { margin-left: 1px; padding: 4px 7px; border: 1px solid #2c2e2e; border-radius: 8px; color: #888d8d; font-size: 9px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.assistant-content { color: #d4d6d6; font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.assistant-content p { margin: 0 0 10px; }
.assistant-content p:last-child { margin-bottom: 0; }
.assistant-image-wrap { overflow: hidden; margin-top: 14px; border: 1px solid #292b2c; border-radius: 13px; background: #080909; }
.assistant-image { display: block; width: 100%; max-height: 560px; object-fit: contain; background: #0d0e0e; }
.assistant-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding-top: 13px; margin-top: 14px; border-top: 1px solid #252727; }
.card-action { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 0 9px; border: 0; border-radius: 9px; background: transparent; color: #aaadad; font-size: 10px; font-weight: 580; cursor: pointer; }
.card-action:hover { background: #222424; color: #f0f0f0; }
.card-action .icon { width: 14px; height: 14px; }
.card-action.is-saved { color: #bde6ce; }
.card-action-delete { margin-left: auto; }
.turn.is-trashed { opacity: .56; }
.loading-card { min-height: 80px; }
.loading-row { display: flex; align-items: center; gap: 10px; color: #aaadad; font-size: 12px; }
.spinner { width: 17px; height: 17px; border: 2px solid #424444; border-top-color: #e6e8e7; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.filter-empty { display: flex; width: min(440px, 100%); min-height: 150px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; margin: 10vh auto 0; color: #787c7c; text-align: center; }
.filter-empty .icon { width: 22px; height: 22px; }
.filter-empty p { margin: 0; font-size: 13px; }

.composer-dock { position: absolute; z-index: 15; right: 20px; bottom: 28px; left: 20px; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.composer { position: relative; width: min(540px, 100%); padding: 5px 7px 7px; border: 1px solid #242627; border-radius: 23px; background: #151617; box-shadow: 0 12px 44px rgba(0,0,0,.37); pointer-events: auto; transition: border-color .16s ease, box-shadow .16s ease; }
.composer:focus-within { border-color: #3c3e3f; box-shadow: 0 12px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.025); }
.composer textarea { display: block; width: 100%; min-height: 42px; max-height: 180px; resize: none; padding: 11px 9px 8px; border: 0; outline: 0; background: transparent; color: #f1f1f1; font-size: 13px; line-height: 1.55; overflow-y: auto; }
.composer textarea:focus-visible { outline: none; }
.composer textarea::placeholder { color: #85898a; opacity: 1; }
.composer-bottom { display: flex; align-items: center; justify-content: space-between; min-height: 35px; padding: 0 0 0 2px; }
.composer-controls-left, .composer-controls-right { display: flex; align-items: center; gap: 7px; }
.round-action { width: 30px; height: 30px; border-radius: 50%; background: #202122; color: #d7d8d8; transition: background .15s ease, transform .15s ease; }
.round-action:hover { background: #303233; transform: rotate(90deg); }
.round-action .icon { width: 18px; height: 18px; }
.mode-chip { display: flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border: 1px solid #343637; border-radius: 17px; background: #f4f4f4; color: #151616; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .15s ease; }
.mode-chip:hover { background: white; }
.mode-chip-icon { width: 14px; height: 14px; color: #414545; }
.mode-chevron { width: 12px; height: 12px; color: #555; }
.small-icon-button { width: 30px; height: 30px; border-radius: 9px; background: transparent; color: #bfc1c1; transition: background .15s ease, color .15s ease; }
.small-icon-button .icon { width: 17px; height: 17px; }
.send-button { width: 31px; height: 31px; border-radius: 50%; background: #303233; color: #828687; transition: background .15s ease, color .15s ease, transform .15s ease; }
.send-button .icon { width: 18px; height: 18px; }
.send-button:not(:disabled) { background: #f2f2f2; color: #111; }
.send-button:not(:disabled):hover { background: #fff; transform: translateX(1px); }
.send-button:disabled { opacity: .75; }
.send-button.is-loading { background: #353737; color: #d8dada; }
.send-button.is-loading .icon { animation: pulse .8s ease-in-out infinite alternate; }
@keyframes pulse { to { opacity: .45; transform: translateX(2px); } }
.attachment-preview { display: flex; align-items: center; gap: 8px; max-width: 100%; padding: 8px 7px 2px; color: #c9cbcb; font-size: 10px; }
.attachment-preview img { width: 37px; height: 37px; border: 1px solid #424545; border-radius: 8px; object-fit: cover; }
.attachment-name { max-width: 210px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.attachment-remove { width: 23px; height: 23px; margin-left: auto; border-radius: 50%; background: #292b2c; color: #ccc; }
.attachment-remove:hover { background: #3a3c3d; color: white; }
.attachment-remove .icon { width: 14px; height: 14px; }
.composer-hint { margin: 7px 0 0; color: #666a6a; font-size: 9px; line-height: 1.2; pointer-events: auto; }
.popover-wrap { position: relative; display: inline-flex; }
.composer-popover { position: absolute; bottom: calc(100% + 13px); z-index: 35; width: 260px; padding: 9px; border: 1px solid #333536; border-radius: 15px; background: #1c1d1e; box-shadow: 0 14px 44px rgba(0,0,0,.6); color: #eee; }
.mode-popover { left: 0; width: 280px; }
.idea-popover { right: -42px; width: 274px; }
.aspect-popover { right: -40px; width: 265px; }
.popover-eyebrow { margin: 4px 7px 8px; color: #8f9393; font-size: 9px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.mode-option { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px; border: 0; border-radius: 11px; background: transparent; color: #e7e8e8; text-align: left; cursor: pointer; }
.mode-option:hover, .mode-option.is-selected { background: #292b2c; }
.option-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #343637; color: #efefef; }
.option-icon .icon { width: 17px; height: 17px; }
.mode-option > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 3px; }
.mode-option strong { font-size: 11px; font-weight: 650; }
.mode-option small { color: #929696; font-size: 9px; }
.option-check { display: none; width: 15px; height: 15px; color: #bdc9bf; }
.mode-option.is-selected .option-check { display: block; }
.idea-popover > button { display: block; width: 100%; padding: 10px 9px; border: 0; border-radius: 9px; background: transparent; color: #ddd; font-size: 11px; text-align: left; cursor: pointer; }
.idea-popover > button:hover { background: #2b2d2e; color: white; }
.aspect-options { display: flex; align-items: center; gap: 7px; }
.aspect-options button { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 7px; min-height: 67px; border: 1px solid #343637; border-radius: 10px; background: #242526; color: #cfd1d1; font-size: 10px; cursor: pointer; }
.aspect-options button:hover, .aspect-options button.is-selected { border-color: #c6c9c9; background: #303233; color: #fff; }
.aspect-options button span:first-child { display: block; border: 1.5px solid currentColor; border-radius: 2px; }
.aspect-square { width: 18px; height: 18px; }
.aspect-wide { width: 26px; height: 15px; }
.aspect-tall { width: 14px; height: 22px; }
.popover-note { margin: 10px 4px 2px; color: #838787; font-size: 9px; line-height: 1.5; }
.drop-hint { position: absolute; inset: -12px -8px; z-index: 3; display: none; align-items: center; justify-content: center; gap: 10px; border: 1px dashed #8f9999; border-radius: 27px; background: rgba(16,18,18,.94); color: #eee; font-size: 13px; pointer-events: none; }
.drop-hint .icon { width: 19px; height: 19px; }
.canvas.is-dragging .drop-hint { display: flex; }
.canvas.is-dragging .composer { border-color: #b9c8c7; }
.canvas-footer { position: absolute; bottom: 12px; left: 12px; z-index: 12; display: flex; align-items: center; gap: 7px; max-width: 240px; color: #737777; font-size: 9px; line-height: 1.3; pointer-events: none; }
.connection-dot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: #797d7d; }
.connection-dot.is-online { background: #66c68e; box-shadow: 0 0 9px rgba(102,198,142,.36); }
.connection-dot.is-offline { background: #b58d67; }

.toast-region { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.toast { max-width: min(360px, calc(100vw - 32px)); padding: 12px 15px; border: 1px solid #3a3c3d; border-radius: 13px; background: #222425; color: #f1f2f2; box-shadow: 0 12px 36px rgba(0,0,0,.45); font-size: 12px; line-height: 1.5; animation: toast-in .18s ease both; }
.toast.is-error { border-color: #664542; background: #2b1d1c; color: #ffe4df; }
.toast.is-success { border-color: #3c604b; background: #1d2921; color: #dff7e7; }
@keyframes toast-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

.modal-backdrop { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 18px; background: rgba(0,0,0,.7); backdrop-filter: blur(7px); }
.dialog { position: relative; width: min(440px, 100%); padding: 28px; border: 1px solid #393b3c; border-radius: 22px; background: #171819; box-shadow: 0 22px 75px rgba(0,0,0,.54); }
.dialog-close { position: absolute; top: 13px; right: 13px; width: 31px; height: 31px; border-radius: 9px; background: transparent; color: #a6a9a9; }
.dialog-close:hover { background: #2b2d2e; color: white; }
.dialog-close .icon { width: 17px; height: 17px; }
.dialog-mark { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 17px; border: 1px solid #404242; border-radius: 13px; background: #252727; color: #f0f2f1; }
.dialog-mark .icon { width: 20px; height: 20px; }
.dialog-kicker { margin: 0 0 9px; color: #8a9090; font-size: 9px; font-weight: 750; letter-spacing: .15em; }
.dialog h2 { margin: 0; color: #f3f4f4; font-size: 21px; font-weight: 650; letter-spacing: -.035em; line-height: 1.3; }
.dialog-copy { margin: 11px 0 19px; color: #aeb1b1; font-size: 12px; line-height: 1.7; }
.dialog-tip { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; border: 1px solid #303333; border-radius: 13px; background: #202222; color: #aaaeae; font-size: 11px; line-height: 1.6; }
.dialog-tip strong { color: #e4e6e6; font-size: 11px; }
.dialog-tip code { padding: 2px 5px; border-radius: 5px; background: #313434; color: #edf0ef; font: 10px ui-monospace, SFMono-Regular, Menlo, monospace; }
.dialog-tip em { color: #d2d4d4; font-style: normal; }
.dialog-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; margin-top: 17px; padding: 0 17px; border: 0; border-radius: 11px; background: #f1f2f2; color: #171819; font-size: 11px; font-weight: 700; cursor: pointer; }
.dialog-primary:hover { background: #fff; }
.dialog-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; margin: -4px 0 12px; padding: 0 11px; border: 1px solid #393c3c; border-radius: 10px; background: transparent; color: #c8cccc; font-size: 10px; font-weight: 600; cursor: pointer; }
.dialog-secondary:hover { background: #292c2c; color: #fff; }
.dialog-secondary:disabled { opacity: .55; cursor: progress; }
.api-status-card { display: flex; align-items: center; gap: 11px; padding: 13px 14px; margin: 5px 0 15px; border: 1px solid #303333; border-radius: 13px; background: #202222; }
.api-status-card .connection-dot { width: 9px; height: 9px; }
.api-status-card > div { display: flex; flex-direction: column; gap: 3px; }
.api-status-card strong { color: #e8eaea; font-size: 11px; }
.api-status-card span:not(.connection-dot) { color: #9a9e9e; font-size: 10px; }
.settings-list { display: flex; flex-direction: column; gap: 1px; margin: 0 0 14px; }
.settings-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid #292b2c; color: #9a9e9e; font-size: 10px; }
.settings-list strong { color: #dcdfdf; font-size: 10px; font-weight: 600; }
.rename-label { display: block; margin: 21px 0 7px; color: #aeb1b1; font-size: 11px; }
.rename-input { width: 100%; height: 40px; padding: 0 12px; border: 1px solid #424545; border-radius: 10px; background: #101111; color: #f1f2f2; font-size: 12px; }
.rename-input:focus { border-color: #9da4a4; outline: none; }

@media (max-width: 1000px) {
  .sidebar { flex-basis: 234px; width: 234px; }
  .topbar { padding-right: 14px; padding-left: 18px; }
  .topbar-leading { min-width: 190px; }
  .search-box { width: min(345px, 34vw); }
  .topbar-actions { gap: 4px; }
  .top-avatar { margin-left: 5px; }
}

@media (max-width: 760px) {
  .topbar { flex-basis: 60px; padding: 0 11px; }
  .topbar-leading { min-width: 0; gap: 10px; }
  .project-eyebrow { display: none; }
  .project-name { max-width: 145px; }
  .search-box { width: min(290px, 34vw); height: 35px; }
  .top-help, .top-more { display: none; }
  .sidebar { flex: 0 0 250px; width: 250px; position: absolute; top: 0; bottom: 0; left: 0; z-index: 31; box-shadow: 18px 0 45px rgba(0,0,0,.32); transform: translateX(-110%); }
  .body-layout.sidebar-open .sidebar { transform: translateX(0); }
  .body-layout.sidebar-open::after { position: absolute; inset: 0; z-index: 30; background: rgba(0,0,0,.5); content: ""; }
  .mobile-menu-button { display: grid !important; width: 31px; height: 31px; }
  .canvas-scroll { padding-right: 18px; padding-left: 18px; }
  .empty-state { top: 39%; }
  .empty-subtitle { max-width: 340px; }
  .empty-cta { display: inline-flex; }
  .composer-dock { right: 14px; bottom: 22px; left: 14px; }
  .canvas-footer { bottom: 6px; left: 8px; opacity: .72; }
  .composer-hint { display: none; }
  .activity-stream { padding-right: 0; padding-left: 0; }
}

@media (max-width: 540px) {
  .topbar { flex-basis: 58px; padding: 0 12px; }
  .topbar-leading { gap: 8px; }
  .mobile-menu-button { margin-right: 1px; }
  .top-home { display: none; }
  .project-name { max-width: 145px; font-size: 12px; }
  .search-box { display: none; }
  .topbar-actions { gap: 2px; }
  .topbar-actions .icon-button { width: 31px; height: 31px; }
  .topbar-actions [data-open-modal="settings-modal"] { display: none; }
  .top-create { margin-right: 1px; }
  .top-avatar { width: 27px; height: 27px; margin-left: 4px; }
  .body-layout { overflow: hidden; }
  .sidebar { top: 0; width: min(286px, 84vw); }
  .canvas-scroll { padding: 22px 13px 190px; }
  .empty-state { top: 37%; width: calc(100% - 26px); }
  .empty-flower { width: 57px; height: 57px; margin-bottom: 13px; }
  .empty-flower svg { width: 52px; height: 52px; }
  .empty-state h1 { max-width: 330px; font-size: 18px; }
  .empty-subtitle { max-width: 300px; font-size: 11px; }
  .composer-dock { right: 10px; bottom: 19px; left: 10px; }
  .composer { border-radius: 20px; }
  .composer textarea { min-height: 42px; padding-right: 8px; padding-left: 8px; font-size: 13px; }
  .composer-controls-left, .composer-controls-right { gap: 3px; }
  .round-action { width: 29px; height: 29px; }
  .mode-chip { gap: 5px; padding: 0 8px; }
  .small-icon-button { width: 28px; height: 29px; }
  .send-button { width: 30px; height: 30px; }
  .mode-popover { width: min(280px, calc(100vw - 30px)); }
  .idea-popover, .aspect-popover { right: -68px; width: min(270px, calc(100vw - 30px)); }
  .user-message { max-width: 88%; font-size: 12px; }
  .assistant-card { padding: 15px 14px 12px; }
  .assistant-content { font-size: 12px; }
  .canvas-footer { display: none; }
  .toast-region { right: 10px; bottom: 11px; }
  .toast { font-size: 11px; }
  .dialog { padding: 24px 21px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}