:root { color: #18202f; background: #f5f7fb; font-family: Inter, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif; } * { box-sizing: border-box; } body { margin: 0; } button, input, select, textarea { font: inherit; } .client-auth-shell { display: grid; min-height: 100vh; padding: 24px; background: #f8fafc; color: #111827; place-items: center; } .client-auth-panel { display: grid; width: min(360px, 100%); gap: 16px; padding: 28px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: 0 18px 52px rgb(15 23 42 / 12%); } .client-auth-logo { display: grid; width: 34px; height: 34px; border-radius: 50%; background: #101010; color: #fff; font-size: 12px; font-weight: 800; place-items: center; } .client-auth-panel h1 { margin: 0; font-size: 24px; letter-spacing: 0; } .client-auth-panel p { margin: 6px 0 0; color: #6b7280; font-size: 13px; } .client-auth-panel label { display: grid; gap: 7px; color: #374151; font-size: 13px; font-weight: 700; } .client-auth-panel input { height: 38px; min-width: 0; padding: 0 11px; border: 1px solid #d1d5db; border-radius: 8px; background: #fff; color: #111827; font: inherit; } .client-auth-panel input:focus { border-color: #111827; outline: 2px solid rgb(17 24 39 / 10%); } .client-auth-panel button { height: 38px; border: 0; border-radius: 8px; background: #111827; color: #fff; font-weight: 700; cursor: pointer; } .client-auth-panel button:disabled { cursor: default; opacity: 0.62; } .client-auth-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 4px; border: 1px solid #e5e7eb; border-radius: 8px; background: #f8fafc; } .client-auth-tabs button { background: transparent; color: #4b5563; } .client-auth-tabs button.is-active { background: #111827; color: #fff; } .client-auth-code-row { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 10px; align-items: end; } .client-auth-code-row button { padding: 0 10px; white-space: nowrap; } .client-auth-status { min-height: 18px; overflow-wrap: anywhere; } .launcher-shell { display: grid; grid-template-columns: 48px minmax(0, 1fr); min-height: 100vh; background: #fff; color: #171717; } .launcher-sidebar { position: sticky; top: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 18px; height: 100vh; padding: 16px 0 18px; border-right: 1px solid #eceef2; background: #fff; overflow: visible; } .launcher-brand { display: grid; place-items: center; } .launcher-logo { display: grid; width: 24px; height: 24px; border-radius: 50%; background: #101010; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0; place-items: center; } .launcher-sidebar nav { display: grid; gap: 13px; justify-items: center; } .launcher-sidebar-bottom { position: relative; z-index: 60; display: grid; justify-items: center; gap: 13px; margin-top: auto; } .launcher-sidebar button, .launcher-project-list button, .launcher-promo button, .launcher-account-bar button, .launcher-prompt-card button, .launcher-model-pills button { border: 0; cursor: pointer; } .launcher-sidebar nav button, .launcher-config-button { display: grid; width: 28px; height: 28px; padding: 0; border-radius: 8px; background: transparent; color: #161616; font-size: 17px; place-items: center; } .launcher-sidebar .launcher-nav-active { background: #f3f4f6; } .launcher-account-nav, .launcher-help-nav { position: relative; } .launcher-help-menu { position: absolute; top: auto; bottom: -4px; left: 36px; display: grid; min-width: 150px; gap: 5px; padding: 8px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: 0 14px 34px rgb(15 23 42 / 14%); z-index: 90; } .launcher-sidebar .launcher-help-menu button, .launcher-sidebar .launcher-account-popover button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; height: 30px; padding: 0 9px; border-radius: 7px; background: transparent; color: #1f2937; font-size: 12px; white-space: nowrap; } .launcher-sidebar .launcher-help-menu button:hover, .launcher-sidebar .launcher-help-menu button:focus-visible, .launcher-sidebar .launcher-account-popover button:hover, .launcher-sidebar .launcher-account-popover button:focus-visible { background: #f3f4f6; } .launcher-config-button { font-size: 15px; } .launcher-config-button:hover { background: #f3f4f6; } .launcher-help-nav .launcher-config-button, .launcher-help-nav .launcher-config-button:hover, .launcher-help-nav .launcher-config-button:focus, .launcher-help-nav .launcher-config-button:focus-visible, .launcher-help-nav .launcher-config-button:active, .launcher-help-nav .launcher-config-button[aria-expanded='true'] { background: transparent !important; } .launcher-main { position: relative; display: grid; grid-template-rows: auto auto auto; align-content: start; min-width: 0; min-height: 100vh; padding: 0 0 42px; overflow: hidden; } .launcher-promo { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 220px 0 24px; background: #dfff4b; color: #111; font-size: 13px; white-space: nowrap; } .launcher-promo strong { font-weight: 700; } .launcher-promo button { padding: 0; background: transparent; color: #111; font-weight: 700; text-decoration: underline; } .launcher-countdown { display: grid; min-width: 18px; height: 20px; padding: 0 5px; border-radius: 7px; background: #fff; place-items: center; } .launcher-account-bar { position: absolute; top: 16px; right: 22px; display: flex; align-items: center; gap: 0; z-index: 2; } .launcher-main-with-promo .launcher-account-bar { top: 44px; } .launcher-account-bar button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 26px; padding: 0 9px; border: 0; border-radius: 0; background: #fff; color: #1f2937; font-size: 12px; } .launcher-wallet-group { display: inline-flex; align-items: center; overflow: visible; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgb(15 23 42 / 5%); } .launcher-wallet-group > button, .launcher-wallet-group .launcher-wallet-anchor > button { border: 0; border-radius: 0; } .launcher-wallet-group .launcher-wallet-anchor > button { border-radius: 8px 0 0 8px; font-weight: 500; } .launcher-wallet-group > button { border-left: 1px solid #e5e7eb; border-radius: 0 8px 8px 0; } .launcher-wallet-anchor { position: relative; display: flex; } .launcher-account-popover, .launcher-wallet-popover { position: absolute; top: 34px; right: 0; display: grid; width: 220px; gap: 7px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; box-shadow: 0 16px 38px rgb(15 23 42 / 14%); color: #111827; z-index: 90; } .launcher-account-nav .launcher-account-popover { top: auto; right: auto; bottom: -4px; left: 36px; width: 218px; gap: 6px; padding: 10px; } .launcher-account-popover strong, .launcher-wallet-popover strong { font-size: 13px; } .launcher-account-popover span, .launcher-wallet-popover span, .launcher-account-popover small, .launcher-wallet-popover small { color: #6b7280; font-size: 11px; } .launcher-account-popover button, .launcher-wallet-popover button { justify-content: flex-start; width: 100%; height: 30px; padding: 0 8px; border: 0; background: transparent; color: #111827; } .launcher-wallet-popover p { margin: 2px 0 4px; font-size: 20px; font-weight: 750; } .launcher-wallet-ledger { display: grid; gap: 5px; max-height: 132px; overflow: auto; } .launcher-wallet-ledger div { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .launcher-wallet-ledger div span { color: #111827; font-size: 12px; font-weight: 700; } .launcher-hero { display: grid; align-content: start; justify-items: center; gap: 13px; min-height: 374px; padding: 103px 24px 18px; } .launcher-main-with-promo .launcher-hero { padding-top: 135px; } .launcher-hero-title { display: flex; align-items: center; gap: 12px; text-align: center; } .launcher-hero-logo { display: grid; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; background: #060606; color: #fff; font-size: 11px; font-weight: 700; place-items: center; } .launcher-hero-title h1 { margin: 0; font-size: 27px; font-weight: 750; letter-spacing: 0; } .launcher-hero-title p { margin-top: 12px; color: #a0a0a0; font-size: 13px; } .launcher-prompt-card { display: grid; grid-template-rows: minmax(42px, auto) auto auto; width: min(488px, calc(100vw - 110px)); min-height: 80px; padding: 13px 12px 8px; border: 1px solid #e1e4e8; border-radius: 18px; background: #fff; box-shadow: 0 8px 24px rgb(15 23 42 / 8%); } .launcher-prompt-card textarea { width: 100%; min-height: 36px; padding: 0; resize: none; border: 0; outline: 0; background: transparent; color: #171717; font-size: 13px; } .launcher-attachment-queue { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 4px; } .launcher-attachment-queue span { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; min-height: 24px; padding: 0 7px; border: 1px solid #e5e7eb; border-radius: 7px; background: #f8fafc; color: #374151; font-size: 11px; } .launcher-attachment-queue button { width: 18px; height: 18px; color: #6b7280; } .launcher-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .launcher-prompt-card textarea::placeholder { color: #bababa; } .launcher-prompt-actions { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; color: #777; font-size: 12px; } .launcher-prompt-actions button { display: grid; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: transparent; color: #666; place-items: center; } .launcher-prompt-actions button:last-child { background: #f1f1f1; color: #9a9a9a; } .launcher-prompt-actions button:disabled { cursor: not-allowed; opacity: 0.55; } .launcher-model-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; width: min(488px, calc(100vw - 110px)); } .launcher-model-pills button { display: inline-flex; align-items: center; gap: 5px; min-height: 27px; padding: 0 12px; border: 1px solid #d6d6d6; border-radius: 999px; background: #fff; color: #333; font-size: 12px; } .launcher-model-pills .launcher-pill-active { border-color: #8b5cf6; background: #f8f2ff; color: #7c3aed; } .launcher-project-list { display: grid; gap: 14px; width: min(1054px, calc(100vw - 122px)); margin: 0 auto; } .launcher-project-list header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .launcher-project-list h2 { margin: 0; color: #111827; font-size: 15px; } .launcher-project-status { margin: 4px 0 0; color: #8b8b8b; font-size: 12px; } .launcher-project-list header button, .launcher-project-list-empty > button { padding: 0; background: transparent; color: #888; font-size: 12px; } .launcher-project-list-actions { display: flex; align-items: center; gap: 10px; } .launcher-project-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; overflow: hidden; } .launcher-project-card { display: grid; min-width: 0; } .launcher-project-card > div, .launcher-project-card > button { position: relative; height: 116px; width: 100%; overflow: hidden; border: 1px solid #e1e4e8; border-radius: 8px; background: #f7f7f7; cursor: pointer; } .launcher-project-card-main { display: grid; align-content: start; justify-items: start; gap: 6px; padding: 12px; text-align: left; } .launcher-project-card-main:disabled { cursor: not-allowed; opacity: 0.58; } .launcher-project-card-main > span { display: grid; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: #f26d2d; font-size: 16px; font-weight: 700; place-items: center; } .launcher-project-card strong { min-width: 0; color: #111; font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .launcher-project-card small { margin-top: -5px; color: #8b8b8b; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .launcher-project-create > button { display: grid; border-style: dashed; color: #777; place-items: center; } .launcher-project-thumb { display: grid; place-items: center; } .launcher-project-thumb span { display: grid; width: 54px; height: 54px; border-radius: 14px; background: #fff; color: #f26d2d; font-size: 18px; font-weight: 800; place-items: center; box-shadow: 0 8px 22px rgb(242 109 45 / 16%); } .launcher-showcase { display: grid; gap: 14px; width: min(1054px, calc(100vw - 122px)); margin: 22px auto 0; } .launcher-showcase header { display: flex; align-items: center; justify-content: flex-start; gap: 12px; } .launcher-section-title { display: grid; gap: 4px; } .launcher-section-title span { display: inline-flex; align-items: center; gap: 6px; } .launcher-showcase h2 { margin: 0; color: #111827; font-size: 15px; } .launcher-showcase p { margin: 4px 0 0; color: #8b8b8b; font-size: 12px; } .launcher-showcase-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; } .launcher-showcase-grid article, .launcher-showcase-empty { overflow: hidden; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; } .launcher-showcase-grid article { display: grid; gap: 7px; padding-bottom: 10px; } .launcher-showcase-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #f3f4f6; } .launcher-showcase-grid strong, .launcher-showcase-grid small { min-width: 0; padding: 0 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .launcher-showcase-grid strong { color: #111827; font-size: 12px; } .launcher-showcase-grid small, .launcher-showcase-empty { color: #6b7280; font-size: 11px; } .launcher-showcase-empty { display: grid; min-height: 96px; place-items: center; } .launcher-page { display: grid; gap: 22px; width: min(1054px, calc(100vw - 122px)); margin: 0 auto; padding: 118px 0 0; } .launcher-page header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .launcher-page h1 { margin: 0; color: #111827; font-size: 28px; letter-spacing: 0; } .launcher-page p { margin: 8px 0 0; color: #8b8b8b; font-size: 13px; } .launcher-page-actions { display: flex; flex-wrap: wrap; gap: 8px; } .launcher-project-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin: 16px 0 14px; padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; } .launcher-project-form label { display: grid; gap: 6px; min-width: 0; color: #6b7280; font-size: 12px; } .launcher-project-list-empty { display: grid; justify-items: center; gap: 10px; padding: 18px 0 32px; } .launcher-project-list-empty h2 { color: #111827; font-size: 16px; } .launcher-project-form input { min-width: 0; height: 34px; padding: 0 10px; border: 1px solid #d8dde5; border-radius: 8px; color: #111827; background: #fff; } .launcher-page-actions button, .launcher-project-table article > button, .launcher-empty-projects button { height: 32px; padding: 0 12px; border: 1px solid #d8dde5; border-radius: 8px; background: #fff; color: #111827; font-size: 12px; } .launcher-page-actions button:last-child { border-color: #111827; background: #111827; color: #fff; } .launcher-project-table { display: grid; gap: 8px; } .launcher-project-table article { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 10px; min-height: 62px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; } .launcher-project-table article > .launcher-project-row-main { display: grid; justify-items: start; height: auto; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; } .launcher-project-table article strong { display: block; color: #111827; font-size: 14px; } .launcher-project-table article small { display: block; margin-top: 4px; color: #8b8b8b; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .launcher-project-table article span { color: #6b7280; font-size: 12px; white-space: nowrap; } .launcher-empty-projects { display: grid; justify-items: center; gap: 12px; min-height: 220px; padding: 44px; border: 1px dashed #d8dde5; border-radius: 8px; color: #6b7280; } .launcher-empty-projects strong { color: #111827; font-size: 15px; } .launcher-help-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .launcher-help-cards article { display: grid; min-height: 118px; padding: 18px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #111827; font-size: 14px; font-weight: 700; align-content: end; } .launcher-agent-chat-page { padding-top: 92px; } .launcher-agent-chat-layout { display: grid; grid-template-columns: minmax(220px, 0.3fr) minmax(0, 1fr); gap: 12px; min-height: min(620px, calc(100vh - 168px)); } .launcher-agent-chat-sidebar, .launcher-agent-chat-main { min-width: 0; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; } .launcher-agent-chat-sidebar { display: grid; align-content: start; gap: 12px; padding: 12px; } .launcher-agent-chat-project { display: grid; gap: 10px; } .launcher-agent-chat-project label { display: grid; gap: 6px; color: #6b7280; font-size: 12px; } .launcher-agent-chat-project input { min-width: 0; height: 34px; padding: 0 10px; border: 1px solid #d8dde5; border-radius: 8px; color: #111827; background: #fff; } .launcher-agent-picker { display: grid; gap: 8px; max-height: 450px; overflow: auto; } .launcher-agent-picker button { display: grid; justify-items: start; gap: 5px; min-width: 0; padding: 10px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #111827; text-align: left; } .launcher-agent-picker .launcher-agent-active { border-color: #8b5cf6; background: #f8f2ff; } .launcher-agent-picker strong, .launcher-agent-picker span, .launcher-agent-picker small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .launcher-agent-picker strong { font-size: 13px; } .launcher-agent-picker span, .launcher-agent-picker small { color: #6b7280; font-size: 11px; } .launcher-agent-chat-main { display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; overflow: hidden; } .launcher-agent-chat-main > header { display: flex; justify-content: space-between; gap: 12px; padding: 14px; border-bottom: 1px solid #e5e7eb; } .launcher-agent-chat-main h2, .launcher-agent-chat-main p { margin: 0; } .launcher-agent-chat-main h2 { color: #111827; font-size: 16px; } .launcher-agent-chat-main p, .launcher-agent-chat-main small { color: #6b7280; font-size: 12px; } .launcher-agent-chat-messages { display: grid; align-content: start; gap: 10px; padding: 14px; overflow: auto; } .launcher-agent-chat-messages .message { max-width: min(720px, 88%); margin: 0; } .launcher-agent-chat-messages .message--user { justify-self: end; } .launcher-agent-chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 12px; border-top: 1px solid #e5e7eb; } .launcher-agent-chat-composer input { min-width: 0; height: 36px; padding: 0 12px; border: 1px solid #d8dde5; border-radius: 8px; color: #111827; background: #fff; } .launcher-agent-chat-composer button { height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: #111827; color: #fff; } .agent-llm-warning { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 14px 0; padding: 10px 12px; border: 1px solid #f4c7a1; border-radius: 8px; background: #fff7ed; color: #8a3b12; font-size: 13px; } .agent-llm-warning strong { min-width: 0; font-weight: 700; overflow-wrap: anywhere; } .agent-llm-warning button { flex: 0 0 auto; height: 30px; padding: 0 10px; border: 1px solid #f4c7a1; border-radius: 7px; background: #fff; color: #8a3b12; } .launcher-project-development { padding-top: 92px; } .launcher-development-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .launcher-development-grid article, .launcher-development-canvas, .launcher-development-assets { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; } .launcher-development-grid article { display: grid; align-content: start; gap: 8px; min-height: 108px; padding: 14px; } .launcher-development-grid span, .launcher-development-assets h2 { color: #6b7280; font-size: 12px; font-weight: 500; } .launcher-development-grid strong { min-width: 0; color: #111827; font-size: 15px; overflow-wrap: anywhere; } .launcher-development-grid small { color: #8b8b8b; font-size: 11px; } .launcher-development-canvas { display: grid; min-height: 300px; background: linear-gradient(#f3f4f6 1px, transparent 1px), linear-gradient(90deg, #f3f4f6 1px, transparent 1px), #fff; background-size: 24px 24px; place-items: center; } .launcher-development-canvas > div { display: grid; justify-items: center; gap: 8px; color: #6b7280; } .launcher-development-canvas strong { color: #111827; font-size: 16px; } .launcher-development-assets { display: grid; gap: 8px; padding: 14px; } .launcher-development-assets h2, .launcher-development-assets p { margin: 0; } .launcher-development-assets div { display: grid; grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr); gap: 12px; min-height: 32px; align-items: center; } .launcher-development-assets span, .launcher-development-assets small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .launcher-development-assets span { color: #111827; font-size: 12px; } .launcher-development-assets small, .launcher-development-assets p { color: #6b7280; font-size: 12px; } .launcher-card-collage { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; } .launcher-card-collage span:nth-child(1) { background: radial-gradient(circle at 45% 38%, #6b5c43 0 18%, transparent 19%), radial-gradient(circle at 62% 54%, #2f2a23 0 25%, transparent 26%), linear-gradient(135deg, #91a17e, #2c3327); } .launcher-card-collage span:nth-child(2) { background: radial-gradient(circle at 58% 45%, #b28b5a 0 16%, transparent 17%), radial-gradient(circle at 48% 55%, #302114 0 24%, transparent 25%), linear-gradient(135deg, #d9e8ef, #9fb0a0); } .launcher-card-collage span:nth-child(3) { background: radial-gradient(circle at 50% 54%, #eac9c0 0 22%, transparent 23%), linear-gradient(135deg, #f7d9d5, #dab6aa); } .launcher-card-collage span:nth-child(4) { background: radial-gradient(circle at 56% 50%, #32271b 0 22%, transparent 23%), linear-gradient(135deg, #8e6c4e, #2b211b); } .launcher-card-ui > div { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; padding: 16px; background: #fff7f2; } .launcher-card-ui span { border-radius: 4px; background: linear-gradient(#ff8d5c 0 0) 12px 12px / 40px 4px no-repeat, linear-gradient(#ffd4c2 0 0) 12px 24px / 70px 4px no-repeat, linear-gradient(#fee4d8, #fff); box-shadow: inset 0 0 0 1px #fed7c8; } .launcher-card-pattern > div { display: grid; grid-template-columns: repeat(2, 1fr); background: linear-gradient(45deg, transparent 46%, #fff 46% 54%, transparent 54%), linear-gradient(135deg, #55405a, #e4b2a7); } .launcher-card-pattern span { display: grid; color: #fff; font-size: 38px; place-items: center; text-shadow: 0 2px 8px rgb(0 0 0 / 18%); } .launcher-card-orange > div { display: grid; grid-template-columns: 1.1fr 1fr; background: #fff8ee; } .launcher-card-orange span:first-child { display: grid; color: #ff7a1a; font-size: 32px; font-weight: 900; place-items: start; padding: 18px; } .launcher-card-orange span:last-child { display: grid; color: #f06d3d; font-size: 96px; font-weight: 900; line-height: 1; place-items: center; } @media (max-width: 760px) { .launcher-shell { grid-template-columns: 48px minmax(0, 1fr); } .launcher-main { grid-template-rows: auto auto auto; overflow: visible; } .launcher-promo { justify-content: flex-start; min-height: 38px; padding: 7px 10px; overflow: hidden; font-size: 11px; } .launcher-promo span:not(.launcher-countdown):not(:nth-child(3)):not(:nth-child(6)):not(:nth-child(9)) { display: none; } .launcher-promo strong { overflow: hidden; text-overflow: ellipsis; } .launcher-account-bar { position: static; justify-content: flex-end; padding: 18px 14px 0; } .launcher-account-bar span { max-width: 148px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .launcher-hero { align-content: start; gap: 16px; min-height: auto; padding: 84px 14px 34px; } .launcher-main-with-promo .launcher-hero { padding-top: 84px; } .launcher-hero-title { flex-direction: column; gap: 10px; } .launcher-hero-title h1 { font-size: 22px; } .launcher-prompt-card, .launcher-model-pills, .launcher-project-list { width: min(100%, calc(100vw - 76px)); } .launcher-project-grid { grid-template-columns: 1fr; overflow: visible; } .launcher-project-form { grid-template-columns: 1fr; } .launcher-project-card > div, .launcher-project-card > button { height: 132px; } .launcher-showcase, .launcher-page { width: min(100%, calc(100vw - 76px)); } .launcher-showcase-grid, .launcher-development-grid { grid-template-columns: 1fr; } .launcher-development-assets div { grid-template-columns: 1fr; } } .launcher-dialog-backdrop { position: fixed; inset: 0; z-index: 200; display: grid; padding: 24px; background: rgb(0 0 0 / 56%); place-items: center; } .launcher-dialog { width: min(420px, 100%); padding: 20px; border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #171717; box-shadow: 0 18px 52px rgb(0 0 0 / 18%); } .launcher-dialog h2 { margin: 0 0 10px; font-size: 18px; } .launcher-dialog p { margin: 0; color: #6b7280; overflow-wrap: anywhere; } .launcher-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } .launcher-dialog-actions button { height: 34px; padding: 0 14px; border: 1px solid #d1d5db; border-radius: 6px; background: #fff; color: #171717; cursor: pointer; } .launcher-dialog-actions button:last-child { border-color: #111827; background: #111827; color: #fff; } .app-shell { min-height: 100vh; background: #f5f7fb; } .app-shell--user { display: flex; justify-content: center; padding: 24px; } .app-shell--dev { display: grid; grid-template-columns: minmax(360px, 0.85fr) minmax(520px, 1.15fr); gap: 1px; background: #d9dee8; } .chat-pane { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px; background: #fff; } .app-shell--user .chat-pane { width: min(900px, 100%); min-height: calc(100vh - 48px); border: 1px solid #d9dee8; } .app-shell--dev .chat-pane { min-height: 100vh; } .chat-header, .panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .chat-header-title { display: grid; gap: 4px; min-width: 0; } .chat-header-actions { display: flex; flex-wrap: wrap; gap: 8px; } .chat-quick-actions { display: flex; flex-wrap: wrap; gap: 8px; } .panel-header { margin-bottom: 10px; } .panel-actions { display: flex; flex-wrap: wrap; gap: 8px; } .panel-header button, .chat-header button, .chat-quick-actions button, .local-project-form button, .panel-actions select { height: 32px; padding: 0 12px; border: 1px solid #cfd7e6; border-radius: 6px; } .panel-header button, .chat-header button, .chat-quick-actions button, .local-project-form button { color: #fff; background: #1f6feb; } .panel-actions select { background: #fff; } h1, h2, p { margin: 0; } h1 { font-size: 24px; } h2 { margin-bottom: 14px; font-size: 16px; } .chat-header span, .chat-header small, .task-pane span, .log-pane p { color: #647084; } .chat-header small { overflow-wrap: anywhere; } .run-history { display: flex; flex-wrap: wrap; gap: 8px; max-height: 190px; overflow: auto; } .run-history button { display: grid; gap: 2px; min-width: 150px; max-width: 100%; padding: 7px 9px; border: 1px solid #dce3ee; border-radius: 6px; background: #f8fafc; color: #18202f; text-align: left; } .run-history button[aria-current='true'], .trace-history button[aria-current='true'] { border-color: #1f6feb; background: #eef5ff; } .run-history small { color: #647084; overflow-wrap: anywhere; } .run-history-more { align-self: center; } .settings-overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 18px; background: rgb(24 32 47 / 36%); } .settings-panel { display: grid; gap: 10px; width: min(760px, 100%); max-height: calc(100vh - 36px); padding: 18px; overflow: auto; border: 1px solid #cfd7e6; background: #fff; } .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .settings-grid label { display: grid; gap: 6px; min-width: 0; color: #647084; font-size: 13px; } .settings-grid input, .settings-grid select { min-width: 0; height: 36px; padding: 0 10px; border: 1px solid #cfd7e6; border-radius: 6px; color: #18202f; background: #fff; } .settings-checkbox { grid-template-columns: auto 1fr; align-items: center; align-self: end; } .settings-checkbox input { width: 18px; height: 18px; padding: 0; } .message-list { flex: 1; border: 1px solid #dde3ee; padding: 14px; overflow: auto; } .message + .message { margin-top: 10px; } .message-history-more { width: 100%; min-height: 32px; margin-bottom: 10px; border: 1px solid #cfd7e6; border-radius: 6px; color: #647084; background: #f8fafd; } .message { overflow-wrap: anywhere; white-space: pre-wrap; } .message--user { color: #1f6feb; } .message-action { min-height: 32px; margin-top: 6px; border: 1px solid #cfd7e6; border-radius: 6px; color: #334155; background: #f8fafd; } .pending-command { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px; border: 1px solid #dde3ee; background: #f8fafd; } .pending-command span { display: grid; gap: 3px; min-width: 0; margin-right: auto; color: #647084; } .pending-command small { overflow-wrap: anywhere; font-size: 12px; } .pending-command button { height: 32px; padding: 0 12px; border: 1px solid #cfd7e6; border-radius: 6px; color: #fff; background: #1f6feb; } .composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; } .composer input, .composer button, .composer-upload-button { height: 40px; border: 1px solid #cfd7e6; border-radius: 6px; } .composer input { min-width: 0; padding: 0 12px; } .composer button, .composer-upload-button { display: inline-grid; padding: 0 18px; place-items: center; color: #fff; background: #1f6feb; cursor: pointer; } .composer-upload-button input { display: none; } .agent-status-pane { display: grid; gap: 10px; padding-top: 4px; } .agent-status-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; max-height: 220px; overflow: auto; } .agent-status-list button { display: grid; gap: 4px; min-width: 0; padding: 9px; border: 1px solid #dce3ee; border-radius: 6px; background: #fff; color: #18202f; text-align: left; } .agent-status-list span, .agent-status-list small { color: #647084; font-size: 12px; } .agent-status-list small { overflow-wrap: anywhere; } .agent-conversation-panel { display: grid; gap: 10px; width: min(640px, 100%); max-height: calc(100vh - 36px); padding: 18px; overflow: auto; border: 1px solid #cfd7e6; background: #fff; } .agent-conversation-list { min-height: 220px; max-height: 420px; padding: 12px; overflow: auto; border: 1px solid #dde3ee; } .agent-memory-box { display: grid; gap: 6px; max-height: 180px; padding: 10px; overflow: auto; border: 1px solid #dde3ee; background: #f8fafd; } .agent-memory-box pre { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; } .agent-memory-box small button { height: 24px; margin-left: 8px; padding: 0 8px; border: 1px solid #cfd7e6; border-radius: 6px; background: #fff; color: #1f6feb; cursor: pointer; } .agent-conversation-panel .composer { grid-template-columns: minmax(0, 1fr) auto; } .workspace-panel { display: grid; gap: 12px; width: min(680px, 100%); max-height: calc(100vh - 36px); padding: 18px; overflow: auto; border: 1px solid #cfd7e6; background: #fff; } .workspace-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; } .workspace-picker input, .workspace-picker button, .workspace-list button { min-width: 0; height: 36px; border: 1px solid #cfd7e6; border-radius: 6px; } .workspace-picker input { padding: 0 10px; } .workspace-picker button { padding: 0 14px; color: #fff; background: #1f6feb; } .workspace-list { display: grid; gap: 8px; } .workspace-list button { padding: 0 10px; overflow: hidden; background: #fff; color: #18202f; text-align: left; text-overflow: ellipsis; white-space: nowrap; } .developer-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 1px; min-width: 0; background: #d9dee8; } .developer-panel { min-width: 0; padding: 18px; background: #fff; } .developer-panel--wide { grid-column: 1 / -1; } .task-pane article { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid #edf1f7; } .capability-pane article { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 8px 0; border-bottom: 1px solid #edf1f7; } .capability-pane span { color: #647084; font-size: 12px; } .trace-pane article { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid #edf1f7; } .trace-pane span, .trace-pane small { color: #647084; } .trace-pane small { overflow-wrap: anywhere; font-size: 12px; } .trace-error { margin-bottom: 10px; padding: 8px; border: 1px solid #efb3b3; border-radius: 6px; color: #8a1f1f; background: #fff5f5; overflow-wrap: anywhere; } .trace-artifacts { display: grid; gap: 4px; margin-bottom: 10px; } .trace-task-graph { display: grid; gap: 4px; margin-bottom: 10px; padding: 8px; border: 1px solid #dce3ee; border-radius: 6px; background: #f8fafc; } .trace-history { display: flex; flex-wrap: wrap; gap: 6px; max-height: 180px; margin-bottom: 10px; overflow: auto; } .trace-history button { min-width: 0; max-width: 100%; padding: 5px 8px; overflow-wrap: anywhere; border: 1px solid #cfd7e6; border-radius: 6px; background: #fff; color: #18202f; font-size: 12px; text-align: left; } .asset-pane code { display: block; margin-bottom: 10px; padding: 9px 10px; border: 1px solid #e1e7f0; background: #f8fafd; } .local-project-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-bottom: 10px; } .local-project-form input, .local-project-form button { min-width: 0; height: 36px; border: 1px solid #cfd7e6; border-radius: 6px; } .local-project-form input { padding: 0 10px; } .asset-register-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; } .asset-register-form input, .asset-register-form select, .asset-register-form button { min-width: 0; height: 34px; border: 1px solid #cfd7e6; border-radius: 6px; } .asset-register-form input, .asset-register-form select { padding: 0 10px; } .asset-register-form button { color: #fff; background: #1f6feb; } .status-line, .manifest-path { margin-bottom: 10px; color: #647084; font-size: 13px; } .manifest-path { overflow-wrap: anywhere; } .file-pane input, .file-pane textarea, .memory-pane textarea { display: block; width: 100%; margin-bottom: 10px; padding: 10px; border: 1px solid #cfd7e6; border-radius: 6px; } .file-pane input { height: 36px; } .file-pane textarea, .memory-pane textarea { min-height: 150px; resize: vertical; } .file-list { display: flex; flex-wrap: wrap; gap: 8px; } .file-list button { display: grid; gap: 2px; padding: 6px 10px; border: 1px solid #cfd7e6; border-radius: 6px; background: #fff; text-align: left; } .file-list button small { color: #647084; } .checkpoint-list-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid #cfd7e6; border-radius: 6px; background: #fff; } .checkpoint-summary { display: inline-flex; min-width: 160px; flex-direction: column; gap: 2px; } .checkpoint-summary small { color: #64748b; } .limited-command-list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .limited-command-list button { height: 32px; padding: 0 12px; border: 1px solid #cfd7e6; border-radius: 6px; color: #fff; background: #1f6feb; } .project-log-content { max-height: 180px; margin: 0 0 10px; padding: 10px; overflow: auto; border: 1px solid #dde3ee; background: #f8fafd; white-space: pre-wrap; } .preview-frame { display: grid; width: 100%; min-height: 180px; place-items: center; border: 1px solid #cfd7e6; background: #101827; color: #d9e7ff; } iframe.preview-frame { display: block; height: 180px; } @media (max-width: 1100px) { .app-shell--user { padding: 0; } .app-shell--user .chat-pane { min-height: 100vh; border: 0; } .app-shell--dev { grid-template-columns: 1fr; } .developer-pane { grid-template-columns: 1fr; } .developer-panel--wide { grid-column: auto; } .settings-grid { grid-template-columns: 1fr; } .composer { grid-template-columns: 1fr auto; } .composer-upload-button { grid-column: 1 / -1; } }