/* Buman Studio — white canvas, soft gray surfaces, rounded red actions. */
:root {
  color-scheme: light;
  --ink: #18191d;
  --muted: #757983;
  --subtle: #9b9ea6;
  --accent: #fa284e;
  --accent-hover: #e91d42;
  --surface: #f0f1f4;
  --line: #e7e8ed;
  --radius-panel: 28px;
  --radius-card: 22px;
  --radius-small: 16px;
  --radius-pill: 999px;
  --menu-check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fa284e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 8 3 3 7-7'/%3E%3C/svg%3E");
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; }
[hidden], .hidden { display: none !important; }
body { margin: 0; min-width: 320px; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
button, textarea, select, input { font: inherit; }
button, label.upload-chip { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button, .upload-chip { transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
button:focus, input:focus, select:focus, textarea:focus { outline: none; }
button:focus-visible, select:focus-visible, input:not([type="checkbox"]):focus-visible { box-shadow: inset 0 0 0 1.5px #bcc2ce; }
::selection { color: #fff; background: var(--accent); }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: #c8cad1; }
::-webkit-scrollbar-track { background: transparent; }
.icon-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.glass-panel { backdrop-filter: blur(26px); -webkit-backdrop-filter: blur(26px); }
.app-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; width: 100%; height: 100dvh; padding: 18px; }
.app-shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
.history-sidebar { display: flex; flex-direction: column; min-height: 0; padding: 30px 16px 20px; border: 1px solid #f3f4f7; border-radius: var(--radius-panel); background: rgba(237, 239, 244, .85); }
.sidebar-collapsed .history-sidebar { display: none; }
.sidebar-brand { padding: 0 10px 30px; }
.sidebar-brand strong { display: block; font-size: 20px; font-weight: 650; letter-spacing: -.04em; }
.sidebar-brand div > span { display: block; margin-top: 7px; color: var(--subtle); font-size: 9px; letter-spacing: .13em; }
.new-chat { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 54px; padding: 14px 20px; border: 0; border-radius: var(--radius-pill); color: #fff; background: var(--accent); font-size: 15px; font-weight: 550; }
.new-chat .icon { width: 23px; height: 23px; stroke-width: 1.8; }
.new-chat:hover { background: var(--accent-hover); box-shadow: 0 5px 16px #fa284e1a; }
.history-heading { display: flex; justify-content: space-between; align-items: center; margin: 33px 10px 14px; color: var(--muted); font-size: 12px; }
.history-heading span { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: var(--radius-pill); background: #e5e7ec; color: #757983; font-size: 10px; }
.history-list { display: grid; flex: 1; min-height: 0; gap: 10px; align-content: start; overflow: auto; }
.history-row { position: relative; min-width: 0; }
.history-item { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 77px; padding: 12px 39px 12px 11px; border: 1px solid transparent; border-radius: var(--radius-small); color: #575b65; background: #ffffff45; text-align: left; }
.history-item:hover { background: #ffffffa6; }
.history-item.active { border-color: #fff; color: var(--ink); background: #ffffffbd; box-shadow: 0 3px 12px #22233103; }
.history-thumb { display: grid; place-items: center; flex: 0 0 42px; height: 48px; overflow: hidden; border-radius: 12px; color: #858993; background: #e9ebf0; }
.history-item.active .history-thumb { color: var(--accent); background: #fa284e0c; }
.history-thumb .icon { width: 23px; height: 23px; stroke-width: 1.3; }
.history-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.history-copy { display: grid; gap: 6px; min-width: 0; }
.history-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 550; }
.history-copy > span { color: #8b8f99; font-size: 10px; }
.history-delete { position: absolute; top: 50%; right: 7px; display: grid; place-items: center; width: 28px; height: 30px; padding: 0; transform: translateY(-50%); border: 0; border-radius: var(--radius-pill); color: #969aa4; background: transparent; }
.history-delete .icon { width: 15px; height: 15px; }
.history-delete:hover { color: var(--accent); background: #fa284e0b; }
.history-rename { position: absolute; top: 9px; right: 7px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-pill); color: #969aa4; background: transparent; }
.history-rename .icon { width: 14px; height: 14px; }
.history-rename:hover { color: #535762; background: #e9ecf2; }
.history-delete { top: auto; bottom: 9px; height: 28px; transform: none; }
.history-foot { padding: 17px 10px 0; color: #8b8f99; font-size: 10px; }
.status-dot { display: inline-block; width: 5px; height: 5px; margin: 0 5px 1px 0; border-radius: 50%; background: #a4a8b1; }
.sidebar-scrim { display: none; }
.conversation { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--radius-panel); background: #fff; }
.topbar { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 18px; min-height: 80px; padding: 16px 22px; }
.header-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.header-identity > div { min-width: 0; }
.header-identity strong { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.header-slash { color: #c7c9d0; font-weight: 400; }
.header-project { max-width: 260px; overflow: hidden; color: #858993; text-overflow: ellipsis; font-size: 12px; font-weight: 400; }
.eyebrow { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 10px; font-weight: 500; letter-spacing: .09em; }
.header-identity .eyebrow { margin-top: 8px; color: #969aa4; font-size: 10px; letter-spacing: 0; }
.header-identity .eyebrow span:first-child { color: var(--accent); font-weight: 600; }
.header-identity .eyebrow span + span::before { padding-right: 8px; color: #b8bbc3; content: "·"; }
.sidebar-toggle { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; color: #828690; background: var(--surface); }
.sidebar-toggle:hover { color: var(--ink); background: #e7e8ee; }
.sidebar-toggle .icon { width: 18px; height: 18px; }
.workspace-status { padding: 7px 12px; border-radius: var(--radius-pill); color: #9b9ea6; background: #f5f6f8; font-size: 10px; }
.chat-scroll { flex: 1; width: 100%; max-width: 1080px; min-height: 0; margin: 0 auto; padding: 24px 36px 30px; overflow: auto; overflow-x: hidden; scrollbar-gutter: stable; }
.message { display: flex; gap: 12px; max-width: 690px; }
.avatar { position: relative; display: grid; place-items: center; flex: 0 0 36px; height: 36px; margin-top: 3px; overflow: hidden; border-radius: 50%; color: var(--ink); background: #f2f3f6; }
.avatar img { grid-area: 1 / 1; display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar .avatar-generating { display: none; }
.avatar { border: 1px solid #e9ebf1; background: #f0f1f5; }
.avatar .avatar-static { width: 74%; height: 74%; border-radius: 50%; object-fit: contain; mix-blend-mode: multiply; }
.avatar.is-generating .avatar-static { display: none; }
.avatar.is-generating .avatar-generating { display: block; animation: avatar-flow 4.5s ease-in-out infinite; }
@keyframes avatar-flow { 0%, 100% { transform: scale(1.15) rotate(-12deg); } 35% { transform: translate(3%, -3%) scale(1.3) rotate(20deg); } 70% { transform: translate(-3%, 3%) scale(1.2) rotate(55deg); } }
.avatar .icon { width: 18px; height: 18px; fill: currentColor; stroke-width: 1; }
.avatar[data-profile-avatar] { padding: 0; cursor: pointer; transition: box-shadow .2s, border-color .2s; }
.avatar[data-profile-avatar]:hover { border-color: #fc2850; box-shadow: 0 0 0 3px #fc285012; }
.avatar[data-profile-avatar]:focus-visible { outline: 2px solid #fc2850; outline-offset: 3px; }
.avatar.has-profile-image .avatar-static { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal; }
.avatar.has-profile-image.is-generating .avatar-static { display: block; }
.avatar.has-profile-image.is-generating .avatar-generating { display: none; }
.avatar.has-profile-image.is-generating::after { content: ''; position: absolute; inset: 0; border: 2px solid transparent; border-top-color: #fc2850; border-right-color: #fc2850; border-radius: 50%; animation: profile-avatar-spin 1.8s linear infinite; pointer-events: none; }
.account-avatar { width: 30px; height: 30px; flex-basis: 30px; margin: 0; }
@keyframes profile-avatar-spin { to { transform: rotate(360deg); } }
.bubble { padding: 15px 18px; border: 0; border-radius: var(--radius-card); background: #f6f7f9; }
.bubble p { margin: 0; color: #575b65; font-size: 13px; line-height: 1.85; }
.message-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.message-tags span { padding: 5px 9px; border-radius: var(--radius-pill); color: #828690; background: #eef0f4; font-size: 10px; }
.message-list { display: grid; }
.user-message { justify-self: end; max-width: 580px; margin: 28px 0 32px; }
.user-message .bubble { border-radius: var(--radius-card); background: #edeef2; }
.user-message .bubble p { color: #30333b; }
.reference-pill { display: inline-block; margin-top: 8px; color: #858993; font-size: 10px; }
.message-reference-image { display: block; width: 88px; height: 88px; margin-top: 12px; padding: 0; overflow: hidden; border: 1px solid #ffffffb3; border-radius: 16px; background: #fff; }
.message-reference-image:hover { box-shadow: 0 3px 12px #2223310a; }
.message-reference-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.message-reference-gallery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.message-reference-gallery .message-reference-image { position: relative; margin-top: 0; }
.reference-number { position: absolute; bottom: 4px; left: 4px; padding: 2px 6px; border-radius: 7px; color: #505561; background: #fffffff0; font-size: 10px; line-height: 1.4; pointer-events: none; }
.reference-pill { max-width: 100%; overflow-wrap: anywhere; }
.is-empty .assistant-message { display: none; }
.is-empty .chat-scroll { display: flex; flex-direction: column; justify-content: safe center; }
.welcome-card { flex-shrink: 0; width: 100%; max-width: 680px; margin: 0 auto; padding: 20px 10px 40px; text-align: center; }
.welcome-icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 22px; border-radius: 50%; color: var(--accent); background: #f1f2f5; }
.welcome-icon .icon { width: 26px; height: 26px; stroke-width: 1.4; }
.welcome-kicker { margin: 0 0 13px; color: #969aa4; font-size: 12px; letter-spacing: .035em; }
.welcome-card h1 { margin: 0; color: var(--ink); font-size: clamp(26px, 3vw, 38px); font-weight: 600; line-height: 1.3; letter-spacing: -.05em; }
.welcome-description { margin: 20px 0; color: var(--muted); font-size: 13px; line-height: 1.9; }
.welcome-rules { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.welcome-rules span { padding: 6px 10px; border-radius: var(--radius-pill); color: #8b8f99; background: #f3f4f7; font-size: 10px; }
.starter-prompts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 36px; }
.starter-label { grid-column: 1 / -1; margin-bottom: 4px; color: #a0a3ad; font-size: 10px; }
.starter-label > span { display: none; }
.starter-prompts button { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 13px 17px; border: 0; border-radius: var(--radius-pill); color: #656974; background: #f0f1f5; text-align: left; font-size: 11px; }
.starter-prompts button:hover { color: var(--ink); background: #e8eaf0; }
.starter-prompts button > span { color: #aaadb6; font-size: 10px; }
.starter-prompts i { margin-left: auto; color: #8b8f99; font-size: 16px; font-style: normal; }
.result-card { position: relative; min-width: 0; width: calc(100% - 48px); margin: 0 0 30px 48px; padding: 12px 0 20px; }
.result-avatar { position: absolute; top: 8px; left: -48px; width: 36px; }
.avatar.is-generating { background: #f1eff9; box-shadow: 0 0 15px #a55cf11a; }
.image-generating-placeholder .icon { fill: url(#generating-star); stroke: none; animation: star-breathe 1.8s ease-in-out infinite; }
@keyframes star-breathe { 0%, 100% { transform: rotate(-15deg) scale(.85); filter: hue-rotate(0deg); } 50% { transform: rotate(35deg) scale(1.15); filter: hue-rotate(80deg); } }
.result-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.result-head h2 { margin: 16px 0 0; color: var(--ink); font-size: clamp(23px, 2.5vw, 31px); font-weight: 600; letter-spacing: -.035em; }
.result-head .eyebrow { font-size: 9px; letter-spacing: .09em; }
.concept-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.result-demo { margin-left: 3px; color: #a0a3ad; font-size: 10px; letter-spacing: 0; }
.secondary-button { padding: 10px 17px; border: 0; border-radius: var(--radius-pill); color: #70747e; background: var(--surface); font-size: 12px; white-space: nowrap; }
.secondary-button:hover { color: var(--ink); background: #e8eaf0; }
.design-preview { position: relative; display: grid; grid-template-columns: minmax(200px, .9fr) minmax(0, 1fr); align-items: stretch; gap: 24px; min-height: 260px; margin: 12px 0 26px; }
.design-preview::before { position: absolute; top: -6px; left: 0; width: 40px; height: 3px; border-radius: var(--radius-pill); background: var(--accent); content: ""; }
.image-result-frame { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-width: 0; padding: 12px; border: 1px solid #e9ebf0; border-radius: var(--radius-card); background: #f7f8fa; }
.image-result-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 24px; margin-bottom: 9px; font-size: 10px; }
.image-status { color: #676c77; }
.image-status::before { display: inline-block; width: 5px; height: 5px; margin-right: 5px; border-radius: 50%; background: var(--accent); vertical-align: 1px; content: ""; }
.image-model { max-width: 50%; overflow: hidden; color: #858a95; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.image-result-content { display: grid; flex: 1; align-items: center; min-height: 240px; overflow: hidden; border-radius: 16px; background: #fff; }
.image-prompt { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e5e7ed; }
.image-prompt-label { color: #969ba5; font-size: 10px; }
.image-prompt-text { max-height: 120px; margin: 5px 0 7px; overflow: auto; color: #656b76; font-size: 11px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.image-prompt small { display: block; color: #a0a5ae; font-size: 9px; line-height: 1.6; }
.result-thumbnails { display: flex; align-items: stretch; gap: 8px; overflow-x: auto; padding: 10px 0 4px; }
.result-thumbnails button { display: grid; grid-template-rows: 64px auto; gap: 7px; flex: 0 0 108px; width: 108px; min-width: 0; height: auto; padding: 7px; border: 1px solid transparent; border-radius: 14px; background: #eceef3; }
.result-thumbnails button[aria-pressed="true"] { border-color: var(--accent); background: #fff; }
.result-thumbnails img { display: block; width: 100%; height: 64px; object-fit: contain; border-radius: 9px; background: #fff; }
.result-thumbnails span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 10px; line-height: 1.6; text-align: center; }
.result-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.result-actions .secondary-button { padding: 7px 12px; font-size: 10px; text-decoration: none; }
.composer-feedback { margin: 8px 0 0; color: #8b8f99; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.composer-feedback.is-error { color: #c52d49; }
.is-failed .image-generating-placeholder { padding: 18px; text-align: center; line-height: 1.8; }
.is-failed .image-generating-placeholder .icon { fill: #989da7; animation: none; }
.image-generating-placeholder { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 240px; color: #9499a5; font-size: 11px; }
.image-generating-placeholder .icon { width: 28px; height: 28px; }
.result-card.is-generating .design-image-button, .result-card.is-generating .tote-art, .result-card.is-generating .table-section { display: none; }
.result-details { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-width: 0; }
.preview-copy { min-width: 0; padding-top: 0; }
.result-details > .table-section { margin-top: auto; padding-top: 24px; }
.result-details .section-heading { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.result-details .material-table { max-height: 340px; overflow: auto; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #d1d4dc transparent; }
.result-details .material-row { grid-template-columns: .55fr 1.2fr 1fr; gap: 10px; padding-block: 11px; font-size: 11px; overflow-wrap: anywhere; }
.result-details .material-row:first-child { position: sticky; z-index: 1; top: 0; background: #fff; font-size: 10px; }
.preview-tag { display: inline-block; padding: 6px 10px; border-radius: var(--radius-pill); color: #8b8f99; background: #f2f3f6; font-size: 10px; }
.preview-copy p { margin: 17px 0 0; color: #717580; font-size: 13px; line-height: 1.9; }
.preview-copy .message-tags span { background: #f3f4f7; color: #8b8f99; font-size: 9px; }
.design-image-button { grid-column: 1; grid-row: 1; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--radius-card); background: transparent; cursor: zoom-in; }
.design-image-button:hover { background: #f7f8fa; }
.design-image { display: block; width: 100%; height: auto; max-height: 440px; aspect-ratio: 1; border-radius: var(--radius-card); object-fit: contain; }
.has-shape-preview .tote-art { display: none; }
.tote-art { position: relative; grid-column: 1; grid-row: 1; justify-self: center; width: 200px; height: 195px; filter: drop-shadow(0 12px 12px #3e354018); }
.tote-body { position: absolute; right: 11px; bottom: 3px; left: 11px; height: 139px; overflow: hidden; border-radius: 10px 10px 24px 24px; background: repeating-linear-gradient(90deg, #fffdf4 0 13px, #d9cce9 13px 23px); box-shadow: inset 0 0 0 2px #72519024; }
.tote-flap { position: absolute; z-index: 3; top: -7px; left: 50%; width: 54px; height: 36px; border-radius: 8px; transform: translateX(-50%); background: #6e4a91; }
.tote-handle { position: absolute; z-index: 2; top: 13px; left: 47px; width: 43px; height: 103px; border: 10px solid #7f59a5; border-bottom: 0; border-radius: 30px 30px 0 0; }
.tote-handle.second { left: 102px; }
.star, .moon { position: absolute; z-index: 4; }
.star { color: #70508d; }
.s1 { left: 25px; bottom: 45px; }
.s2 { right: 23px; bottom: 64px; }
.moon { right: 31px; bottom: 22px; color: #eec957; font-size: 28px; }
.table-section { padding-top: 4px; }
.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; }
.section-heading h3 { margin: 0; color: #373b44; font-size: 13px; font-weight: 550; }
.section-heading > span { color: #a0a3ad; font-size: 10px; }
.material-table { font-size: 12px; }
.material-row { display: grid; grid-template-columns: .7fr 1.5fr 1fr; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); color: #858993; line-height: 1.6; }
.material-row:first-child { color: #969aa4; font-size: 10px; }
.material-row strong { color: #626672; font-weight: 500; }
.material-row:first-child strong { color: #969aa4; font-weight: 400; }
.composer-wrap { position: relative; z-index: 3; flex: 0 0 auto; width: 100%; padding: 15px 22px 14px; }
.composer-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; width: min(960px, 100%); margin: 0 auto; padding: 16px 17px 11px 22px; border: 1px solid #f2f3f6; border-radius: var(--radius-panel); background: rgba(255, 255, 255, .88); box-shadow: 0 8px 35px #2b30420e, 0 2px 5px #2b304202; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
.composer-inner > * { grid-column: 1 / -1; min-width: 0; }
.composer-inner:not(.is-expanded) { padding-block: 12px; }
.composer-inner:not(.is-expanded) > .quick-settings,
.composer-inner:not(.is-expanded) > .reference-preview,
.composer-inner:not(.is-expanded) > .composer-note,
.composer-inner:not(.is-expanded) > .composer-feedback,
.composer-inner:not(.is-expanded) .output-settings { display: none; }
.composer-inner:not(.is-expanded) > .composer { grid-column: 1; grid-row: 1; margin: 0; }
.composer-inner:not(.is-expanded) > .composer-footer { grid-column: 2; grid-row: 1; }
.composer-inner:not(.is-expanded) textarea { height: 44px; max-height: 44px; }
.composer-inner:focus-within { border-color: #e8eaf0; box-shadow: 0 8px 35px #2b304212; }
.composer { display: flex; align-items: flex-end; gap: 12px; margin: 10px 0; }
.composer textarea { display: block; flex: 1; min-width: 0; width: 100%; min-height: 44px; max-height: 130px; padding: 11px 0; border: 0; outline: 0; resize: none; color: var(--ink); background: transparent; font-size: 13px; line-height: 1.7; }
.composer textarea::placeholder { color: #9b9ea8; }
.quick-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.edit-basis-preview { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 4px 7px 4px 4px; border: 1px solid var(--line); border-radius: 16px; background: #f7f8fa; }
.edit-basis-image { display: block; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; overflow: hidden; border: 0; border-radius: 12px; background: #fff; }
.edit-basis-image img { display: block; width: 100%; height: 100%; object-fit: contain; }
.edit-basis-copy { display: grid; gap: 3px; min-width: 0; max-width: 170px; }
.edit-basis-copy > span { color: var(--subtle); font-size: 9px; }
.edit-basis-copy strong { overflow: hidden; color: #626672; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.edit-basis-remove { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; color: #858b98; background: #eceef3; font-size: 15px; }
.edit-basis-remove:hover { color: var(--ink); background: #e1e4eb; }
.quick-chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 7px 11px; border: 0; border-radius: var(--radius-pill); color: #656974; background: #f0f1f5; font-size: 11px; white-space: nowrap; cursor: pointer; }
.quick-chip:hover { color: var(--ink); background: #e8eaf0; }
.quick-chip .icon { width: 15px; height: 15px; }
.tier-picker { position: relative; }
.tier-trigger { min-width: 118px; color: #fff; background: var(--accent); }
.tier-trigger:hover { color: #fff; background: var(--accent-hover); }
.tier-trigger span { margin-left: 4px; }
.upload-button { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: #777d89; background: #f0f1f5; }
.upload-button:hover { color: var(--ink); background: #e8eaf0; }
.upload-button .icon { width: 18px; height: 18px; }
.reference-name { display: none; }
.send-button { display: grid; flex: 0 0 44px; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; color: #fff; background: var(--accent); }
.send-button .icon { width: 24px; height: 24px; stroke-width: 2.2; }
.send-button:hover { background: var(--accent-hover); box-shadow: 0 3px 12px #fa284e26; }
.send-button:disabled { opacity: .55; cursor: wait; }
.send-button.is-generating .icon { display: none; }
.send-button.is-generating::after { width: 18px; height: 18px; border: 2px solid #ffffff66; border-top-color: #fff; border-radius: 50%; animation: send-spin .8s linear infinite; content: ""; }
@keyframes send-spin { to { transform: rotate(360deg); } }
.composer-footer { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.output-settings { display: flex; flex: 1; min-width: 0; align-items: center; flex-wrap: wrap; gap: 7px; }
.output-control { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border-radius: var(--radius-pill); color: #8b8f99; background: #f3f4f7; font-size: 10px; }
.output-control select { min-width: 0; min-height: 30px; padding: 4px 16px 4px 0; border: 0; border-radius: var(--radius-pill); color: #626672; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%23888d98' stroke-width='1.5'%3E%3Cpath d='m2 4 3 3 3-3'/%3E%3C/svg%3E"); background-position: right center; background-repeat: no-repeat; appearance: none; font-size: 10px; cursor: pointer; }
.studio-select { min-width: 0; }
.studio-select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 9px; width: 100%; min-height: 30px; padding: 4px 0; border: 0; border-radius: var(--radius-pill); color: #626672; background: transparent; text-align: left; font-size: inherit; }
.studio-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.studio-select-chevron { flex: 0 0 5px; width: 5px; height: 5px; margin: -3px 2px 0 0; border-right: 1.5px solid #888d98; border-bottom: 1.5px solid #888d98; transform: rotate(45deg); }
.output-control { padding-right: 9px; }
.model-control > span { flex: 0 0 auto; }
.model-control > .studio-select { max-width: 185px; }
/* One full-field button: label, value, chevron and surrounding whitespace. */
.output-control.has-full-trigger:has(> .studio-select) { gap: 0; padding: 0; }
.output-control.has-full-trigger > .studio-select { width: 100%; max-width: none; border-radius: inherit; }
.output-control.has-full-trigger .studio-select-trigger { min-height: 36px; gap: 6px; padding: 6px 10px; border-radius: inherit; touch-action: manipulation; }
.output-control.has-full-trigger .studio-select-label { flex: 0 0 auto; color: #8b8f99; font-size: 10px; white-space: nowrap; }
.output-control.has-full-trigger .studio-select-value { flex: 1; }
.output-control.has-full-trigger.model-control .studio-select-value { max-width: 185px; }
.output-control.has-full-trigger .studio-select-trigger:hover:not(:disabled) { background: #e9ecf2; }
.output-control.has-full-trigger .studio-select-trigger:disabled { opacity: .5; cursor: not-allowed; }
.provider-task-details { margin-top: 18px; color: #969ba6; font-size: 10px; }
.provider-task-details summary { cursor: pointer; }
.provider-task-details p { margin: 8px 0 0; overflow-wrap: anywhere; font-size: 10px; line-height: 1.6; }
.strategy-evidence { margin-top: 18px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 19px; color: #767b88; background: #f8f9fc; font-size: 11px; }
.strategy-evidence summary { color: #585e6b; cursor: pointer; }
.strategy-evidence[open] { max-height: 300px; overflow-y: auto; overscroll-behavior: contain; }
.strategy-evidence > p { margin: 10px 0 0; font-size: 11px; line-height: 1.7; }
.strategy-evidence .strategy-network { color: #868b98; }
.strategy-source { display: flex; gap: 11px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--line); }
.strategy-source > div { flex: 1; min-width: 0; }
.strategy-source strong, .strategy-source span, .strategy-source small, .strategy-source a { display: block; overflow-wrap: anywhere; }
.strategy-source strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: #535966; font-size: 11px; font-weight: 550; }
.strategy-source span, .strategy-source small { margin-top: 4px; color: #959ba7; font-size: 10px; }
.strategy-source small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strategy-source p { margin: 7px 0 0; font-size: 11px; line-height: 1.7; }
.strategy-source a { margin-top: 7px; color: #777e8e; text-underline-offset: 3px; }
.strategy-source-preview { flex: 0 0 48px; align-self: flex-start; height: 48px; padding: 0; overflow: hidden; border: 1px solid #e8eaf1; border-radius: 13px; background: #fff; }
.strategy-source-preview img { width: 100%; height: 100%; object-fit: contain; }
.strategy-evidence .strategy-note { color: #a0a5b0; font-size: 10px; }
.output-control:has(.studio-select-trigger[aria-expanded="true"]) { background: #e9ecf2; }
.studio-select-menu { position: fixed; inset: auto; z-index: 40; display: flex; flex-direction: column; width: 220px; max-height: 360px; margin: 0; padding: 9px; overflow: hidden; border: 1px solid #ffffffed; border-radius: var(--radius-card); color: var(--ink); background: rgba(248, 249, 252, .96); box-shadow: 0 12px 40px #252a3a16, 0 2px 8px #252a3a08; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); animation: menu-appear .14s ease-out; }
.studio-select-title { flex: 0 0 auto; padding: 5px 11px 10px; color: #969ba6; font-size: 10px; }
.studio-select-options { display: grid; flex: 1; min-height: 0; gap: 3px; overflow-y: auto; overscroll-behavior: contain; }
.studio-select-group { padding: 10px 12px 4px; color: #9b9ea6; font-size: 10px; }
.studio-select-option { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 36px; padding: 9px 12px; border: 0; border-radius: 14px; color: #626672; background: transparent; text-align: left; font-size: 12px; line-height: 1.45; }
.studio-select-option:hover, .studio-select-option:focus-visible { background: #edeff4; }
.studio-select-option[aria-selected="true"] { color: var(--ink); background: #e9ecf2; }
.studio-select-option:disabled { opacity: .4; cursor: default; }
.studio-select-check { flex: 0 0 14px; height: 14px; opacity: 0; background: var(--menu-check-icon) center / contain no-repeat; }
.studio-select-option[aria-selected="true"] .studio-select-check { opacity: 1; }
.studio-select-footer { flex: 0 0 auto; margin-top: 7px; padding-top: 7px; border-top: 1px solid #e4e7ef; }
.studio-select-level-button { width: 100%; min-height: 35px; padding: 8px 12px; border: 0; border-radius: 14px; color: #626672; background: #edeff4; text-align: left; font-size: 12px; }
.studio-select-level-button:hover, .studio-select-level-button:focus-visible { color: var(--ink); background: #e5e9f1; }
@keyframes menu-appear { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.composer-note { display: flex; justify-content: space-between; gap: 10px; margin: 8px 0 0; color: #a6a9b1; font-size: 9px; }
.composer-note b { margin: 0 5px; color: #c1c4cd; font-weight: 400; }
.keyboard-hint { color: #b0b3bd; }
.keyboard-hint > span { margin-left: 5px; font-size: 12px; }
.reference-preview { min-width: 0; margin: 10px 0 4px; }
.reference-gallery { display: flex; gap: 12px; overflow-x: auto; padding: 6px 6px 4px 0; scrollbar-width: thin; }
.reference-tile { position: relative; flex: 0 0 64px; }
.reference-preview img { display: block; width: 64px; height: 64px; border: 1px solid #eceef3; border-radius: var(--radius-small); background: #fff; object-fit: contain; }
.reference-image-button { display: block; width: 64px; height: 64px; padding: 0; border: 0; border-radius: var(--radius-small); background: transparent; cursor: zoom-in; }
.reference-image-button:hover { opacity: .85; }
.reference-remove { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; width: 21px; height: 21px; padding: 0; border: 2px solid #fff; border-radius: 50%; color: #fff; background: #9499a5; font-size: 13px; }
.reference-add { display: grid; place-content: center; gap: 3px; flex: 0 0 64px; width: 64px; height: 64px; padding: 0; border: 1px dashed #dadee7; border-radius: var(--radius-small); color: #858b99; background: #f8f9fb; font-size: 10px; }
.reference-add span { font-size: 22px; line-height: 1; }
.reference-add:hover { background: #f0f2f6; }
.reference-help { margin: 5px 0 0; color: #959ba8; font-size: 10px; line-height: 1.5; }
.tier-menu { position: absolute; z-index: 8; bottom: calc(100% + 13px); left: 0; display: grid; gap: 5px; width: 300px; max-height: min(420px, calc(100dvh - 180px)); overflow-y: auto; padding: 10px; border: 1px solid #fff; border-radius: var(--radius-panel); background: rgba(247, 248, 250, .97); box-shadow: 0 14px 44px #2327391a; backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
.tier-option { display: grid; grid-template-columns: 34px 82px 1fr 14px; align-items: center; width: 100%; min-height: 44px; padding: 12px; border: 0; border-radius: 14px; color: #7f8490; background: transparent; text-align: left; }
.tier-option:hover { background: #eceef3; }
.tier-option.active { color: var(--ink); background: #e9ecf2; }
.tier-option::after { width: 14px; height: 14px; opacity: 0; background: var(--menu-check-icon) center / contain no-repeat; content: ""; }
.tier-option.active::after { opacity: 1; }
.tier-option strong { font-size: 12px; font-weight: 600; }
.tier-option span { font-size: 11px; }
.tier-option small { font-size: 10px; }
.free-mode-option, .shape-mode-option { grid-template-columns: 1fr auto 14px; gap: 8px; margin-bottom: 3px; }
.settings-dialog, .delete-dialog { padding: 0; border: 1px solid #fff; border-radius: 32px; color: var(--ink); background: rgba(250, 251, 253, .96); box-shadow: 0 30px 90px #20253230; backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); }
.settings-dialog { width: min(570px, calc(100vw - 32px)); max-height: min(90dvh, 850px); overflow: hidden; }
.settings-dialog::backdrop, .delete-dialog::backdrop { background: #292d3929; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.settings-panel { max-height: min(90dvh, 850px); padding: 30px 30px 0; overflow-y: auto; }
.settings-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.settings-head .eyebrow { color: #a0a3ad; font-size: 9px; }
.settings-head h2 { margin: 10px 0 0; font-size: 25px; font-weight: 600; letter-spacing: -.04em; }
.dialog-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0 0 2px; border: 0; border-radius: 50%; color: #858993; background: #eceef3; font-size: 22px; }
.dialog-close:hover { color: var(--ink); background: #e3e6ed; }
.setting-group { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.setting-title, .switch-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.setting-title h3, .switch-row h3 { margin: 0; color: #373b44; font-size: 13px; font-weight: 550; }
.setting-title > span { color: #9b9ea8; font-size: 10px; }
.check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.check-grid label { position: relative; }
.check-grid input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.check-grid span { display: block; padding: 11px; border: 0; border-radius: var(--radius-pill); color: #858993; background: #eceef3; text-align: center; font-size: 12px; cursor: pointer; }
.check-grid input:checked + span { color: #fff; background: var(--accent); }
.check-grid input:focus-visible + span { box-shadow: inset 0 0 0 1.5px #bcc2ce; }
.select-label { display: block; margin-top: 16px; color: #858993; font-size: 11px; }
.select-label select { display: block; width: 100%; min-height: 44px; margin-top: 9px; padding: 12px 35px 12px 17px; border: 1px solid transparent; border-radius: var(--radius-pill); color: #535762; background-color: #eceef3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23888d98' stroke-width='1.5'%3E%3Cpath d='m3 5 3 3 3-3'/%3E%3C/svg%3E"); background-position: right 17px center; background-repeat: no-repeat; appearance: none; font-size: 12px; cursor: pointer; }
.select-label select:hover { border-color: #dce0e8; }
.select-label > .studio-select { width: 100%; margin-top: 9px; }
.select-label .studio-select-trigger { min-height: 44px; padding: 12px 17px; color: #535762; background: #eceef3; font-size: 12px; }
.select-label .studio-select-trigger:hover, .select-label .studio-select-trigger[aria-expanded="true"] { background: #e5e8ef; }
select option { color: #535762; background: #fff; }
.two-selects { display: grid; grid-template-columns: 1.35fr .65fr; gap: 10px; }
.switch-row p, .helper-text { margin: 6px 0 0; color: #969aa4; font-size: 10px; line-height: 1.6; }
.creativity-helper { margin-top: 12px; color: #757d8d; font-size: 11px; }
.switch { position: relative; flex-shrink: 0; width: 44px; height: 27px; }
.switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.switch > span { position: absolute; inset: 0; border-radius: var(--radius-pill); background: #d7dae2; cursor: pointer; }
.switch > span::before { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #25283620; transition: transform .2s; content: ""; }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { transform: translateX(17px); }
.switch input:focus-visible + span { box-shadow: inset 0 0 0 1.5px #bcc2ce; }
.handle-group.disabled #handleControls { display: none; }
.shape-helper { margin: 9px 0 12px; color: #969aa4; font-size: 10px; line-height: 1.6; }
.shape-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.shape-tools { display: flex; align-items: center; gap: 7px; min-width: 0; }
.shape-search { width: 154px; min-width: 0; padding: 8px 11px; border: 1px solid #e1e4ec; border-radius: var(--radius-pill); background: #f2f3f6; color: var(--ink); font: inherit; font-size: 11px; }
.shape-tools .secondary-button { white-space: nowrap; padding: 8px 11px; font-size: 10px; }
.shape-gallery { --shape-card-height: 156px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: var(--shape-card-height); gap: 10px; max-height: calc(3 * var(--shape-card-height) + 20px + 8px); padding: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border-radius: var(--radius-small); background: #eff1f5; }
.shape-gallery:empty { display: none; }
.lining-panel { margin: 20px 0; padding: 18px; border: 1px solid #e5e7ee; border-radius: 20px; background: #f8f9fc; }
.lining-panel[hidden] { display: none; }
.lining-panel .switch-row h3 { margin: 0; font-size: 14px; }
.lining-panel .switch-row p { margin: 4px 0 0; font-size: 11px; color: #999dac; }
.lining-selection { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 14px; }
.lining-opening-preview { padding: 6px; border: 1px solid #e5e7ee; border-radius: 16px; background: white; cursor: zoom-in; overflow: hidden; }
.lining-opening-preview img { display: block; width: 100%; height: 90px; object-fit: contain; border-radius: 10px; }
.lining-opening-preview span { display: block; font-size: 10px; color: #888d9e; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 5px; }
.lining-material-control { min-width: 0; }
.lining-panel .webbing-trigger { width: 100%; }
.lining-panel .webbing-menu { width: 100%; }
.lining-panel .helper-text { font-size: 11px; line-height: 1.7; }
.shape-tile { min-width: 0; overflow: hidden; display: flex; flex-direction: column; border: 1.5px solid #e6e8ee; border-radius: var(--radius-card); background: #f2f3f6; }
.shape-option { position: relative; display: grid; gap: 5px; min-width: 0; width: 100%; padding: 7px; border: 0; border-radius: var(--radius-small); color: #858993; background: transparent; text-align: left; }
.shape-option img { display: block; width: 100%; height: 87px; border-radius: var(--radius-small); background: #fff; object-fit: contain; }
.shape-option span { overflow: hidden; padding: 0 2px; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.shape-option:hover { background: #eceef3; }
.shape-option.active { border-color: #c9ced8; color: var(--ink); background: #fff; }
.shape-option.active::after { position: absolute; top: 13px; right: 13px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; color: #fff; background: var(--accent); font-size: 11px; content: "✓"; }
.shape-tile:has(.shape-option.active) { border-color: var(--accent); }
.shape-tile-actions { display: flex; justify-content: flex-end; gap: 3px; padding: 0 6px 5px; margin-top: auto; }
.shape-tile-actions button { padding: 4px 5px; border: 0; border-radius: 8px; background: transparent; color: #9398a3; font-size: 9px; }
.shape-tile-actions button:hover { color: var(--ink); background: #e6e9ef; }
.shape-tile-actions button:last-child:hover { color: var(--accent); }
.shape-operation-status { color: #535762; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.shape-operation-status.error { color: #d73b58; }
.shape-library-notice { margin-top: 8px; }
.shape-edit-dialog { z-index: 20; }
.webbing-trigger { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; margin-top: 9px; padding: 9px 17px; border: 1px solid transparent; border-radius: var(--radius-pill); color: #535762; background: #eceef3; text-align: left; font-size: 12px; }
.webbing-trigger:hover, .webbing-trigger[aria-expanded="true"] { border-color: #dce0e8; }
.webbing-trigger > span:last-child { margin-left: auto; color: #858993; }
.webbing-trigger > img { width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; object-fit: cover; }
.webbing-trigger > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.webbing-menu { margin-top: 10px; padding: 10px; border: 1px solid #e6e8ee; border-radius: var(--radius-card); background: #fff; box-shadow: 0 5px 18px #25283608; }
.webbing-search { display: block; width: 100%; min-height: 38px; margin-bottom: 8px; padding: 10px 14px; border: 0; border-radius: var(--radius-pill); background: #f0f1f5; color: var(--ink); font-size: 12px; }
.webbing-search:focus-visible { box-shadow: inset 0 0 0 1.5px #bcc2ce; }
.webbing-options { display: grid; gap: 5px; max-height: 270px; overflow-y: auto; overscroll-behavior: contain; }
.webbing-option { display: flex; align-items: center; gap: 11px; width: 100%; min-height: 58px; padding: 7px 10px; border: 1px solid transparent; border-radius: var(--radius-small); color: #626672; background: #f7f8fa; text-align: left; font-size: 11px; }
.webbing-option:hover { background: #eceef3; }
.webbing-option[aria-selected="true"] { color: var(--ink); background: #e9ecf2; }
.webbing-option::after { flex: 0 0 14px; height: 14px; margin-left: auto; opacity: 0; background: var(--menu-check-icon) center / contain no-repeat; content: ""; }
.webbing-option[aria-selected="true"]::after { opacity: 1; }
.webbing-option > img, .webbing-auto-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 11px; object-fit: cover; }
.webbing-auto-icon { display: grid; place-items: center; background: #eceef3; color: var(--accent); }
.webbing-option > span:not(.webbing-auto-icon) { min-width: 0; overflow-wrap: anywhere; }
.tier-menu, .webbing-menu { padding: 9px; border: 1px solid #ffffffed; border-radius: var(--radius-card); background: rgba(248, 249, 252, .96); box-shadow: 0 12px 40px #252a3a16, 0 2px 8px #252a3a08; backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); }
.rule-card { display: flex; gap: 10px; padding: 15px 17px; border-radius: var(--radius-card); color: #8b8f99; background: #eceef3; font-size: 10px; line-height: 1.8; }
.rule-card > span { color: var(--accent); font-size: 17px; }
.rule-card p { margin: 0; }
.rule-card strong { color: #70747e; font-weight: 400; }
.settings-actions { position: sticky; z-index: 2; bottom: 0; display: flex; justify-content: flex-end; gap: 10px; margin: 22px -30px 0; padding: 17px 30px 23px; border-top: 1px solid var(--line); background: #fafbfdf2; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.settings-actions button { min-width: 94px; min-height: 42px; }
.confirm-button, .danger-button { padding: 11px 21px; border: 0; border-radius: var(--radius-pill); color: #fff; background: var(--accent); font-size: 12px; font-weight: 500; }
.confirm-button:hover, .danger-button:hover { background: var(--accent-hover); }
.delete-dialog { width: min(420px, calc(100vw - 32px)); }
.delete-panel { padding: 30px; }
.delete-panel h2 { margin: 0 0 14px; font-size: 20px; font-weight: 600; }
.delete-panel p { margin: 0; color: #858993; font-size: 12px; line-height: 1.8; }
.delete-panel strong { color: #535762; font-weight: 500; }
.delete-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 27px; }
.project-name-field { display: grid; gap: 9px; margin-top: 20px; color: #858993; font-size: 12px; }
.project-name-input { width: 100%; min-height: 46px; padding: 12px 16px; border: 0; border-radius: 16px; color: var(--ink); background: #eceef3; font: inherit; }
.delete-panel .rename-error { margin-top: 9px; color: var(--accent); }
.scene-dialog { width: min(640px, calc(100vw - 32px)); max-height: 90dvh; overflow: auto; }
.scene-panel { padding: 28px; }
.scene-product { display: flex; align-items: center; gap: 16px; margin: 20px 0; }
.scene-product > img { width: 86px; height: 86px; flex: 0 0 86px; border-radius: 18px; object-fit: contain; background: #fff; }
.scene-product strong { font-size: 14px; font-weight: 550; }
.scene-product p { margin: 8px 0 0; color: var(--subtle); font-size: 11px; line-height: 1.7; }
.scene-modes { display: flex; gap: 7px; }
.scene-modes > button { flex: 1; min-height: 42px; padding: 8px; border: 0; border-radius: var(--radius-pill); background: #eceef4; color: var(--muted); font-size: 12px; }
.scene-modes > button[aria-pressed="true"] { color: #fff; background: var(--accent); }
.scene-description-field { display: grid; gap: 10px; margin: 20px 0; color: var(--muted); font-size: 12px; }
.scene-description-field textarea { width: 100%; min-height: 100px; max-height: 220px; padding: 15px; border: 0; border-radius: 18px; resize: vertical; background: #eceef4; color: var(--ink); font-size: 13px; line-height: 1.7; }
.scene-upload-panel { margin: 16px 0; }
.scene-upload-preview { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.scene-upload-preview img { width: 76px; height: 76px; border-radius: 16px; object-fit: contain; background: #fff; }
.scene-upload-preview span { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--muted); font-size: 11px; }
.scene-output-note { margin: 22px 0 0; color: var(--subtle); font-size: 11px; line-height: 1.8; }
.scene-error { color: var(--accent); font-size: 12px; }
.scene-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.result-actions { flex-wrap: wrap; }
.multiview-count-label { margin: 24px 0 12px; color: var(--muted); font-size: 12px; }
.multiview-counts { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.multiview-counts button { min-height: 46px; padding: 8px 0; border: 0; border-radius: 16px; color: var(--muted); background: #eceef4; font-size: 15px; }
.multiview-counts button[aria-pressed="true"] { color: #fff; background: var(--accent); }
.multiview-rule { margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.9; }
.multiview-thumbnails button { flex-basis: 108px; width: 108px; }
.image-dialog { width: min(920px, calc(100vw - 32px)); max-height: 92dvh; padding: 0; border: 1px solid #fff; border-radius: 28px; color: var(--ink); background: #fafbfdf5; box-shadow: 0 30px 90px #20253230; overflow: auto; }
.image-dialog::backdrop { background: #292d394d; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.image-preview-panel { padding: 20px; }
.image-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.image-preview-head h2 { margin: 0; font-size: 16px; font-weight: 550; }
.image-preview-head .dialog-close { flex-shrink: 0; }
.image-preview-panel > img { display: block; width: 100%; max-height: calc(92dvh - 132px); border-radius: var(--radius-card); object-fit: contain; background: #fff; }
.image-preview-panel > p { margin: 12px 0 0; color: var(--subtle); font-size: 11px; text-align: center; }
@media (min-width: 1450px) {
  .app-shell { grid-template-columns: 290px minmax(0, 1fr); gap: 24px; padding: 20px; }
  .history-sidebar { padding: 33px 18px 23px; }
  .topbar { padding-inline: 28px; }
  .chat-scroll { padding-top: 28px; }
}
@media (max-width: 1200px) {
  .app-shell { grid-template-columns: 238px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .sidebar-brand strong { font-size: 18px; }
  .history-item { padding-left: 9px; gap: 9px; }
  .history-thumb { flex-basis: 36px; height: 43px; }
  .chat-scroll { padding-inline: 24px; }
  .composer-inner { padding: 15px 18px 12px; }
  .design-preview { grid-template-columns: minmax(160px, .9fr) minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 760px) {
  .app-shell, .app-shell.sidebar-collapsed { display: flex; padding: 8px; }
  .conversation { flex: 1; border-radius: var(--radius-panel); }
  .history-sidebar { position: fixed; z-index: 22; inset: 8px auto 8px 8px; width: 262px; padding-top: 28px; background: #edeff4f5; }
  .sidebar-scrim:not([hidden]) { position: fixed; z-index: 21; inset: 0; display: block; background: #363b4929; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
  .topbar { min-height: 74px; padding: 14px 12px; }
  .header-identity { gap: 10px; }
  .header-identity strong { font-size: 13px; gap: 6px; }
  .header-project { max-width: 125px; font-size: 11px; }
  .header-identity .eyebrow { font-size: 9px; }
  .workspace-status { display: none; }
  .chat-scroll { padding: 16px 13px 25px; }
  .welcome-card { padding: 18px 2px 26px; }
  .welcome-card h1 { font-size: 26px; }
  .welcome-description { font-size: 12px; }
  .welcome-rules { gap: 5px; }
  .welcome-rules span { padding-inline: 8px; font-size: 9px; }
  .starter-prompts { grid-template-columns: 1fr; gap: 8px; margin-top: 26px; }
  .starter-prompts button { min-height: 43px; font-size: 11px; }
  .message { gap: 9px; }
  .avatar { flex-basis: 29px; height: 29px; }
  .bubble { padding: 13px; }
  .bubble p { font-size: 12px; }
  .result-card { width: calc(100% - 38px); margin-left: 38px; }
  .result-avatar { left: -38px; width: 29px; }
  .result-head { flex-wrap: wrap; }
  .result-head h2 { font-size: 23px; }
  .result-head .eyebrow { font-size: 8px; }
  .result-demo { display: none; }
  .regenerate-button { padding: 9px 12px; font-size: 10px; }
  .design-preview { grid-template-columns: 1fr; gap: 6px; padding-top: 24px; margin-bottom: 24px; }
  .result-details { grid-column: 1; grid-row: 2; }
  .preview-copy { padding-top: 0; }
  .image-result-frame { grid-column: 1; grid-row: 1; padding: 10px; }
  .image-result-content, .image-generating-placeholder { min-height: 235px; }
  .design-image { max-height: 320px; }
  .preview-copy p { margin-top: 12px; }
  .result-details .material-row { grid-template-columns: .65fr 1.35fr 1fr; gap: 9px; font-size: 10px; }
  .result-details .material-table { max-height: none; overflow: visible; scrollbar-gutter: auto; }
  .result-details .material-row:first-child { position: static; }
  .section-heading > span { font-size: 9px; }
  .composer-wrap { padding: 12px 5px 7px; }
  .composer-inner { padding: 13px 14px 11px; border-radius: var(--radius-panel); }
  .quick-settings { gap: 5px; flex-wrap: wrap; }
  .edit-basis-copy { max-width: 125px; }
  .quick-chip { padding: 7px 9px; min-height: 32px; font-size: 10px; }
  .quick-chip .icon { width: 13px; height: 13px; }
  .tier-trigger { min-width: 100px; }
  .composer textarea { font-size: 12px; }
  .composer-footer { align-items: flex-end; gap: 8px; }
  .output-control { min-height: 32px; padding-inline: 8px; }
  .output-control select { min-height: 32px; }
  .output-control .studio-select-trigger { min-height: 32px; }
  .send-button { flex-basis: 32px; width: 32px; height: 32px; }
  .send-button .icon { width: 21px; height: 21px; }
  .composer-note { font-size: 8px; }
  .keyboard-hint { display: none; }
  .tier-menu { width: 282px; }
  .settings-panel { padding: 26px 22px 0; }
  .settings-actions { margin: 20px -22px 0; padding: 15px 22px 20px; }
  .shape-gallery { --shape-card-height: 144px; }
  .shape-option img { height: 75px; }
  .shape-search { width: 120px; }
}
@media (max-height: 680px) and (min-width: 761px) {
  .welcome-card { padding-block: 10px; }
  .welcome-icon { width: 46px; height: 46px; margin-bottom: 15px; }
  .welcome-description { margin-block: 14px; }
  .starter-prompts { margin-top: 25px; }
  .topbar { min-height: 70px; padding-block: 12px; }
}

/* Compact but touch-friendly composer; custom select popovers remain viewport-bound. */
@media (max-width: 760px) {
  .conversation { min-width: 0; }
  .topbar { flex-wrap: wrap; gap: 10px; }
  .header-identity { min-width: 0; max-width: 100%; }
  .topbar-actions { width: 100%; }
  .composer-wrap { padding: 8px 0 max(7px, env(safe-area-inset-bottom)); }
  .composer-inner { padding: 12px; column-gap: 8px; border-radius: 22px; }
  .composer textarea { font-size: 16px; line-height: 1.5; max-height: 100px; }
  .composer-inner.is-expanded { max-height: 55dvh; overflow-y: auto; }
  .composer-inner.is-expanded .composer-footer { display: grid; grid-template-columns: minmax(0, 1fr) 44px; align-items: end; }
  .composer-inner.is-expanded .output-settings { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; }
  .composer-inner.is-expanded .output-settings > .upload-button { width: 40px; height: 40px; }
  .composer-inner.is-expanded .model-control { grid-column: 2 / -1; }
  .composer-inner.is-expanded .output-control { display: grid; gap: 2px; min-width: 0; padding: 6px 8px; border-radius: 14px; }
  .composer-inner.is-expanded .output-control > span { font-size: 9px; line-height: 1.4; }
  .composer-inner.is-expanded .output-control .studio-select { width: 100%; min-width: 0; max-width: 100%; }
  .composer-inner.is-expanded .output-control .studio-select-trigger { width: 100%; min-width: 0; min-height: 28px; font-size: 11px; }
  .composer-inner.is-expanded .output-control select { width: 100%; min-width: 0; min-height: 28px; }
  .composer-inner.is-expanded .output-control.has-full-trigger { gap: 0; padding: 0; }
  .composer-inner.is-expanded .output-control.has-full-trigger .studio-select-trigger { display: grid; grid-template-columns: minmax(0, 1fr) 7px; gap: 2px 6px; min-height: 52px; padding: 7px 8px; border-radius: 14px; }
  .composer-inner.is-expanded .output-control.has-full-trigger .studio-select-label { grid-column: 1 / -1; font-size: 9px; line-height: 1.4; }
  .composer-inner.is-expanded .output-control.has-full-trigger .studio-select-value { grid-column: 1; grid-row: 2; max-width: 100%; }
  .composer-inner.is-expanded .output-control.has-full-trigger .studio-select-chevron { grid-column: 2; grid-row: 2; }
  .custom-output-settings .output-control.has-full-trigger .studio-select-trigger { min-height: 44px; }
  .studio-select-option { min-height: 44px; }
  .send-button { width: 44px; height: 44px; flex-basis: 44px; }
  .composer-note { flex-wrap: wrap; gap: 4px; font-size: 9px; line-height: 1.6; }
  .result-thumbnails button { flex-basis: 104px; width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}