.home-composer { width: 50%; margin: 0 auto 24px; min-width: 0; color: var(--text-primary, #202329); }
.home-composer-heading { margin: 40px 0 24px; text-align: center; font-size: 28px; font-weight: 600; letter-spacing: -.6px; }
/* Crop only the source image's transparent margins, preserving the supplied lettering. */
.home-composer-heading .home-composer-wordmark { display: block; width: min(100%, 520px); height: auto; aspect-ratio: 2202 / 210; object-fit: cover; object-position: center 48%; margin: 0 auto; }
html[data-theme="dark"] .home-composer-wordmark, body.dark-mode .home-composer-wordmark { filter: invert(1) hue-rotate(180deg); }
.home-composer-tabs { display: inline-flex; padding: 3px 3px 0; margin-left: 28px; background: #e9ecf1; border-radius: 20px 20px 0 0; }
.home-composer-tabs button { min-width: 108px; padding: 9px 18px; border: 0; border-radius: 18px; background: transparent; color: #969ca6; font-size: 13px; font-weight: 400; line-height: 20px; cursor: pointer; }
.home-composer-tabs button[aria-selected="true"] { position: relative; z-index: 1; border-radius: 18px 18px 0 0; background: #fff; color: #25282e; box-shadow: 0 2px 0 #fff; }
.home-composer-tabs button:hover { color: #25282e; }
.home-composer-box { position: relative; padding: 24px 24px 18px; border: 1px solid var(--border-color, #e7e9ed); border-radius: 24px; background: var(--surface, #fff); box-shadow: 0 5px 20px #25385804; }
.home-composer-editor { display: flex; gap: 22px; min-height: 110px; }
.home-composer-upload { flex: 0 0 68px; width: 68px; height: 82px; margin: 5px 3px 8px; border: 1px solid #e9ebee; border-radius: 9px; background: #f4f5f7; color: #979da6; transform: rotate(-7deg); cursor: pointer; }
.home-composer-upload:hover { background: #edf4ff; color: #3488eb; }
.home-composer-upload svg { width: 24px; height: 24px; }
.home-composer-prompt { flex: 1; width: 100%; min-width: 0; min-height: 105px; padding: 7px 0; overflow-y: hidden; resize: none; field-sizing: content; background: transparent; color: inherit; border: 0; outline: none; font: inherit; font-size: 16px; line-height: 1.8; box-shadow: none; }
.home-composer-prompt::placeholder { color: #a3a7af; }
.home-composer-toolbar, .home-composer-controls { display: flex; align-items: center; gap: 8px; }
.home-composer-toolbar { justify-content: space-between; margin-top: 10px; }
.home-composer-controls { flex-wrap: wrap; min-width: 0; }
.home-composer button, .home-composer summary { -webkit-tap-highlight-color: transparent; }
.home-composer button:focus-visible, .home-composer summary:focus-visible, .home-composer-prompt:focus-visible { outline: 2px solid #4b9af1; outline-offset: 3px; }
.home-composer-select { position: relative; }
.home-composer-select > summary, .home-composer-material { display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 8px 11px; border: 0; border-radius: 10px; color: inherit; background: transparent; font-size: 13px; font-weight: 400; list-style: none; cursor: pointer; white-space: nowrap; }
.home-composer-select > summary::-webkit-details-marker { display: none; }
.home-composer-select > summary:hover, .home-composer-material:hover { background: #f3f4f6; }
.home-composer-select svg, .home-composer-material svg { width: 17px; height: 17px; flex-shrink: 0; }
.home-composer-ratio-shape { display: inline-grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; color: currentColor; opacity: .66; }
.home-composer-ratio-shape::before { content: ""; display: block; box-sizing: border-box; width: var(--home-ratio-width, 20px); height: var(--home-ratio-height, 20px); border: 1.5px solid currentColor; border-radius: 3px; }
.home-composer-ratio-shape.is-auto::before { content: "A"; display: grid; place-items: center; width: 20px; height: 15px; border-style: dashed; border-radius: 4px; font-size: 10px; font-weight: 500; line-height: 1; }
.home-composer-select[data-home-setting="ratio"] .home-composer-menu button[aria-checked="true"] .home-composer-ratio-shape { opacity: 1; }
.home-composer-select .home-composer-chevron { width: 13px; height: 13px; color: #9aa1aa; }
.home-composer-select[open] .home-composer-chevron { transform: rotate(180deg); }
.home-composer-menu { position: absolute; top: calc(100% + 10px); left: 0; z-index: 130; width: 224px; max-height: 320px; overflow-y: auto; padding: 7px; border: 1px solid #eff0f3; border-radius: 17px; background: #fff; color: #24272c; box-shadow: 0 10px 35px #202b4014; }
.home-composer-menu-title { display: block; padding: 10px 14px 6px; color: #9a9ca2; font-size: 13px; font-weight: 400; }
.home-composer-menu button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: 11px; text-align: left; background: transparent; color: inherit; font-size: 15px; font-weight: 400; cursor: pointer; }
.home-composer-menu button:hover, .home-composer-menu button[aria-checked="true"] { background: #f1f1f2; }
.home-composer-menu button:disabled { opacity: .45; cursor: not-allowed; }
.home-composer-menu button .home-composer-check { margin-left: auto; }
.home-composer-menu button img { width: 30px; height: 30px; border-radius: 5px; object-fit: cover; }
.home-composer .home-composer-model-logo { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 5px; object-fit: contain; }
.home-composer .home-composer-menu .home-composer-model-logo { width: 25px; height: 25px; flex-basis: 25px; }
.home-composer [data-home-setting="model"] .home-composer-menu { width: 280px; }
.home-composer-model-status { padding: 8px 11px; color: #8d929c; font-size: 13px; font-weight: 400; }
.home-composer-divider { width: 1px; height: 19px; margin: 0 3px; background: #e9ebee; }
.home-composer-send { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #20242b; color: #fff; cursor: pointer; }
.home-composer-send:disabled { background: #e9eaec; color: #fff; cursor: default; }
.home-composer-send svg { width: 23px; height: 23px; }
.home-composer-box > .speech-input-control-layer { right: 72px; bottom: 24px; width: min(208px, calc(100% - 168px)); }
.home-composer-files { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0 8px 8px; }
.home-composer-file { position: relative; width: 64px; margin: 0; }
.home-composer-file img { width: 64px; height: 64px; object-fit: cover; border: 1px solid #e5e7eb; border-radius: 9px; cursor: zoom-in; }
.home-composer-file figcaption { font-size: 12px; font-weight: 400; text-align: center; color: #8c929c; }
.home-composer-file button { position: absolute; right: -5px; top: -5px; display: grid; place-items: center; width: 21px; height: 21px; padding: 0; border: 1px solid #e6e8ec; border-radius: 50%; background: #fff; color: #6b7280; cursor: pointer; }
.home-composer-file button svg { width: 12px; height: 12px; }
.home-composer-status { margin: 7px 5px 0; min-height: 17px; font-size: 12px; font-weight: 400; color: #8d929c; }
.home-composer-status:empty { display: none; }
.home-composer-box.is-dragover::after { content: ""; position: absolute; inset: -5px; border: 2px dashed #5a9cf0; border-radius: inherit; z-index: 2; pointer-events: none; }
.home-composer [hidden] { display: none !important; }
body:is(.feature-focus-mode, .works-focus-mode, .library-focus-mode, .section-focus-mode, .agent-conversation-mode, .video-workspace-mode) .home-composer,
html[data-mobile-workbench="true"] .home-composer { display: none; }
html[data-theme="dark"] .home-composer-box, body.dark-mode .home-composer-box { background: #202124; border-color: #35363a; color: #ededed; }
html[data-theme="dark"] .home-composer-menu, body.dark-mode .home-composer-menu { background: #28292d; color: #ededed; border-color: #393a3e; }
html[data-theme="dark"] .home-composer-menu button:hover, html[data-theme="dark"] .home-composer-menu button[aria-checked="true"],
html[data-theme="dark"] .home-composer-upload, html[data-theme="dark"] .home-composer-tabs { background: #35363b; }
html[data-theme="dark"] body .home-composer [data-home-mode] :is(#home-mode-image, #home-mode-video, #home-mode-agent) { background: transparent !important; color: #969ca6 !important; }
html[data-theme="dark"] body .home-composer [data-home-mode] :is(#home-mode-image, #home-mode-video, #home-mode-agent)[aria-selected="true"] { background: #202124 !important; color: #ededed !important; box-shadow: 0 2px 0 #202124; }
html[data-theme="dark"] body .home-composer [data-home-mode] :is(#home-mode-image, #home-mode-video, #home-mode-agent):hover { color: #ededed; }
@media (max-width: 1100px) { .home-composer-heading { font-size: 24px; } .home-composer-box { padding: 20px 18px 16px; } .home-composer-select > summary { padding: 7px; } }
@media (max-width: 1400px) { .home-composer { width: min(100%, 760px); } }