
          :host { display:block; margin: 0 0 24px; font-family: var(--ai-font-family, "Nunito", Arial, sans-serif); color: var(--ai-color, #242424); }
          * { box-sizing:border-box; }
          .shell { background:var(--ai-card-background, #fff9e8); border:0; border-radius:14px; box-shadow:var(--ai-card-shadow, 0 4px 14px rgba(33,27,22,.07)); height:auto; min-height:0; padding:14px 16px 12px; position:relative; transition:min-height .18s ease; }
          .designer-credit { bottom:3px; color:#918981; font-size:8px; font-weight:400; line-height:1; margin:0; opacity:.78; position:absolute; right:10px; text-align:right; }
          h2 { font-size:19px; font-weight:700; letter-spacing:-.01em; line-height:1.25; margin:0 0 5px; }
          p { line-height:1.45; }
          .intro { color:#756e67; font-size:13px; margin:0 0 10px; }
          .product-context { color:#777069; display:flex; flex-wrap:wrap; font-size:12px; gap:4px; margin:0 0 4px; }
          .product-context strong { color:var(--ai-color, #242424); font-size:12px; line-height:1.35; }
          label { display:block; font-size:14px; font-weight:700; }
          textarea, select, input { width:100%; border:1px solid #cfc6be; border-radius:10px; background:#fff; color:#242424; font:inherit; margin-top:6px; padding:11px 12px; }
          textarea::placeholder, input::placeholder { color:#aaa39d; font-weight:400; opacity:.62; }
          .prompt-box textarea::placeholder { color:#aaa39d; font-size:16px; font-weight:300; opacity:.44; }
          textarea:focus::placeholder { color:transparent; opacity:0; }
          textarea { font-size:16px; line-height:1.5; min-height:96px; resize:vertical; }
          textarea:focus, select:focus { outline:2px solid #242424; outline-offset:1px; }
          button:focus { outline:0; }
          button:focus-visible { outline:2px solid #242424; outline-offset:2px; }
          .prompt-box { background:#fff; border:1px solid #d9d3cd; border-radius:14px; display:block; padding:4px 5px; transition:border-color .2s, box-shadow .2s; }
          .prompt-state { display:flex; flex-direction:column; }
          .prompt-state .prompt-box { display:flex; flex-direction:column; min-height:112px; }
          .prompt-box:focus-within { border-color:#222; box-shadow:0 0 0 1px #222; }
          .prompt-box textarea { border:0; flex:1; font-size:16px; font-weight:400; line-height:1.5; margin:0; min-height:42px; outline:0; overflow:auto; padding:6px 5px 4px; resize:none; }
          .prompt-box textarea:focus { outline:0; }
          .brief-summary { display:flex; flex-wrap:wrap; gap:5px; padding:2px 5px 5px; }
          .brief-summary[hidden] { display:none; }
          .brief-summary:has(.brief-item:only-child) { display:none; }
          .brief-item { align-items:center; background:#f4f0ec; border:1px solid #e3dbd4; border-radius:999px; color:#514a44; display:inline-flex; font-size:12px; gap:4px; line-height:1.1; max-width:100%; overflow:hidden; padding:3px 7px; text-overflow:ellipsis; white-space:nowrap; }
          .brief-item > span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
          .brief-item strong { color:#2d2925; }
          .brief-remove { align-items:center; background:transparent; border-radius:50%; color:#756d66; display:inline-flex; flex:0 0 16px; height:16px; justify-content:center; min-height:16px; padding:0; width:16px; }
          .brief-remove svg { fill:none; height:11px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:var(--ui-icon-stroke,2); width:11px; }
          .brief-remove:hover { background:#e5ddd6; color:#242424; }
          .brief-color { background:var(--brief-color); border:1px solid rgba(0,0,0,.14); border-radius:50%; flex:0 0 9px; height:9px; width:9px; }
          .revision-option { align-items:center; background:#f7f4f1; border-radius:9px; display:flex; gap:8px; margin:5px; padding:7px 9px; }
          .revision-option input { flex:0 0 auto; margin:0; width:auto; }
          .revision-option span { display:flex; flex-direction:column; }
          .revision-option strong { font-size:11px; }
          .revision-option small { color:#817970; font-size:10px; font-weight:400; }
          .prompt-actions { align-items:center; display:flex; flex-wrap:nowrap; gap:4px; justify-content:space-between; padding:0 1px; position:relative; }
          .helper { color:#7a726b; display:inline-block; font-size:12px; font-weight:500; line-height:1.2; }
          .briefing-chat { display:flex; flex-direction:column; gap:5px; padding:5px 7px 2px; }
          .briefing-message { color:#39342f; font-size:14px; line-height:1.5; max-width:88%; padding:6px 8px; }
          .briefing-message.customer { align-self:flex-end; background:#f1ede9; border-radius:10px 10px 3px 10px; }
          .briefing-message.ai { align-self:flex-start; background:color-mix(in srgb, var(--ai-primary, #c71920) 8%, #fff); border-radius:10px 10px 10px 3px; }
          .briefing-message.ai.current { color:#302a26; }
          .analysis-status { align-items:center; color:#756d66; display:inline-flex; font-size:9.5px; line-height:1.2; margin-left:auto; margin-right:2px; min-height:24px; white-space:nowrap; }
          .briefing-force-link { background:transparent; color:#6d665f; font-size:9.5px; font-weight:600; min-height:24px; padding:2px 4px; text-decoration:underline; text-underline-offset:2px; }
          .briefing-force-link:hover { color:var(--ai-primary, #c71920); }
          .add-menu { position:static; }
          .add-menu > summary { align-items:center; background:transparent; border:0; border-radius:50%; cursor:pointer; display:grid; font-size:18px; height:24px; list-style:none; min-height:24px; padding:0; place-items:center; width:24px; }
          .add-menu > summary:hover { background:#f4f0ec; }
          .add-symbol { align-items:center; display:flex; height:24px; justify-content:center; line-height:1; width:24px; }
          .add-symbol::before{content:"";display:inline-block;width:20px;height:20px;flex:0 0 20px;background:currentColor;mask:url("/lucide-plus.svg?v=1") center/contain no-repeat;border:0;}
          .add-menu[open] .add-symbol::before{content:"";mask-image:url("/lucide-minus.svg?v=1")}
          .add-menu > summary::-webkit-details-marker, .info-fields > summary::-webkit-details-marker { display:none; }
          .menu-panel { background:#fff; border:1px solid #e4ddd6; border-radius:12px; box-shadow:0 8px 24px rgba(28,22,18,.11); display:grid; gap:3px 6px; grid-template-columns:repeat(2, minmax(0, 1fr)); left:0; max-height:min(420px, 62vh); max-width:100%; overflow:auto; padding:6px; position:absolute; right:0; top:40px; width:100%; z-index:20; }
          .add-menu.open-up .menu-panel { bottom:34px; top:auto; }
          .menu-title { color:#7a726b; font-size:10px; font-weight:500; grid-column:1/-1; margin:1px 6px 3px; }
          .menu-file, .menu-select, .menu-readonly, .info-fields > summary { align-items:center; border-radius:7px; cursor:pointer; display:flex; gap:6px; padding:5px 6px; }
          .menu-file { overflow:hidden; position:relative; }
          .menu-file:hover, .menu-select:hover, .info-fields > summary:hover { background:#f7f4f1; }
          .menu-file input[type="file"] { cursor:pointer; height:100%; inset:0; opacity:0; position:absolute; width:100%; z-index:2; }
          .menu-file:focus-within { background:#f7f4f1; outline:1px solid #2d2926; outline-offset:-1px; }
          .menu-icon { align-items:center; background:#f1ece7; border-radius:6px; display:flex; flex:0 0 24px; font-size:12px; height:24px; justify-content:center; }
          .menu-file span:nth-child(2), .menu-select > span, .info-fields > summary > span:last-child { display:flex; flex:1; flex-direction:column; }
          .menu-file strong, .menu-select strong, .info-fields strong { font-size:10.5px; font-weight:600; line-height:1.2; }
          .menu-file small, .menu-select small, .info-fields small { color:#837b74; font-size:9px; font-weight:400; line-height:1.2; margin-top:1px; }
          .menu-divider { border-top:1px solid #eee8e3; grid-column:1/-1; margin:4px; }
          .menu-select select { flex:0 0 102px; font-size:10px; margin:0; padding:5px; width:102px; }
          .menu-readonly { cursor:default; grid-column:1/-1; }
          .menu-readonly > span { display:flex; flex:1; flex-direction:column; }
          .menu-readonly strong { font-size:10.5px; font-weight:600; }
          .menu-readonly small { color:#837b74; font-size:9px; font-weight:400; margin-top:1px; }
          .menu-readonly output { background:#f4f0ec; border-radius:7px; color:#514a44; flex:0 0 135px; font-size:9.5px; padding:6px; text-align:center; }
          .info-fields { grid-column:1/-1; margin-top:2px; }
          .info-fields > summary { list-style:none; }
          .field-grid { background:#faf8f6; border-radius:9px; display:grid; gap:5px; grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); margin:3px; max-width:100%; padding:6px; width:calc(100% - 6px); }
          .field-grid label { font-size:9.5px; font-weight:500; min-width:0; }
          .field-grid input { font-size:10.5px; margin-top:3px; padding:6px 7px; }
          .field-grid .wide { grid-column:1/-1; }
          .palette-fields { background:#faf8f6; border-radius:9px; display:block; grid-column:1/-1; margin:3px; min-width:0; padding:7px; }
          .palette { border:0; margin:0; min-width:0; padding:0; }
          .palette legend { color:#514a44; font-size:9.5px; font-weight:600; margin-bottom:5px; }
          .palette legend small { color:#8a8179; font-size:8.5px; font-weight:400; margin-left:5px; }
          .swatches { display:grid; gap:4px; grid-template-columns:repeat(auto-fill, 22px); justify-content:start; }
          .swatch { align-items:center; background:#fff; border:1px solid #d8d0c9; border-radius:50%; display:flex; height:22px; justify-content:center; min-height:22px; padding:2px; position:relative; width:22px; }
          .swatch span { background:var(--swatch); border:1px solid rgba(0,0,0,.12); border-radius:50%; display:block; height:16px; width:16px; }
          .swatch:hover { border-color:#756d66; transform:scale(1.08); }
          .swatch[aria-pressed="true"] { border-color:var(--ai-primary, #c71920); box-shadow:0 0 0 2px color-mix(in srgb, var(--ai-primary, #c71920) 24%, transparent); }
          .swatch[data-color-rank]::after { align-items:center; background:#242424; border-radius:50%; color:#fff; content:attr(data-color-rank); display:flex; font-size:7px; font-weight:700; height:11px; justify-content:center; position:absolute; right:-4px; top:-4px; width:11px; }
          .chip { align-items:center; background:#f4f0ec; border:1px solid #e3dbd4; border-radius:999px; color:#4b4540; display:inline-flex; font-size:12px; font-weight:700; min-height:34px; padding:0 10px; }
          .chip select { appearance:none; background:transparent; border:0; color:inherit; font-size:12px; font-weight:700; margin:0; padding:0 2px; width:auto; }
          .chip select:focus { outline:0; }
          .file-chip input { display:none; }
          .footer { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:12px 16px; margin-top:18px; }
          .footer p, .fineprint, .support { color:#6d665f; font-size:13px; margin:0; }
          .fineprint { margin-top:7px; text-align:center; font-size:11px; }
          button { border:0; border-radius:var(--ai-button-radius, 10px); font:inherit; font-weight:700; min-height:44px; padding:11px 18px; }
          .primary { background:var(--ai-primary, #c71920); color:var(--ai-primary-text, #fff); max-width:100%; transition:background-color .18s ease, transform .18s ease; }
          .primary:hover { background:var(--ai-primary-hover, #a9141a); transform:translateY(-1px); }
          .send-button { align-items:center; aspect-ratio:1/1; background:var(--ai-primary, #c71920); border-radius:50%; color:var(--ai-primary-text, #fff); display:inline-flex; flex:0 0 24px; height:24px; justify-content:center; margin-left:auto; max-height:24px; max-width:24px; min-height:24px; min-width:24px; padding:0; transition:background-color .18s ease, transform .18s ease; width:24px; }
          .send-button svg { fill:none; height:15px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:var(--ui-icon-stroke,2); width:15px; }
          .send-button:hover { background:var(--ai-primary-hover, #a9141a); box-shadow:none; transform:scale(1.04); }
          .send-button:active { box-shadow:none; transform:translateY(0) scale(.97); }
          .send-button.is-thinking { border-radius:50%; cursor:wait; opacity:.9; }
          .thinking-icon { align-items:center; display:flex; flex:0 0 auto; gap:2px; justify-content:center; }
          .thinking-icon i { animation:ai-thinking 1s ease-in-out infinite; background:currentColor; border-radius:50%; height:3px; width:3px; }
          .thinking-icon i:nth-child(2) { animation-delay:.14s; }
          .thinking-icon i:nth-child(3) { animation-delay:.28s; }
          @keyframes ai-thinking { 0%, 60%, 100% { opacity:.35; transform:translateY(0); } 30% { opacity:1; transform:translateY(-2px); } }
          .secondary { background:var(--ai-secondary, #f0ebe6); color:var(--ai-secondary-text, #332e2a); transition:background-color .18s ease, transform .18s ease; }
          .secondary:hover { background:var(--ai-secondary-hover, #e5ddd6); transform:translateY(-1px); }
          .configuration-dialog { background:#fff; border:0; border-radius:12px; box-shadow:0 14px 42px rgba(20,17,15,.26); color:var(--ai-color, #242424); font-family:var(--ai-font-family, Arial, sans-serif); max-width:min(90vw, 360px); padding:14px; }
          .configuration-dialog::backdrop { background:rgba(20,17,15,.58); }
          .configuration-dialog h3 { font-size:15px; line-height:1.25; margin:0 0 4px; }
          .configuration-dialog p { color:#625c56; font-size:10.5px; margin:3px 0; }
          .configuration-dialog > strong { background:#f7f4f1; border:0; border-radius:7px; display:block; font-size:10.5px; margin:8px 0; padding:7px 8px; }
          .dialog-actions { display:grid; gap:6px; grid-template-columns:1fr 1fr; margin-top:9px; }
          .dialog-button { align-items:center; display:inline-flex; font-size:11px; gap:5px; justify-content:center; min-height:34px; padding:7px 10px; }
          .confirm-generate { background:var(--ai-continue-color, #69af32); color:var(--ai-continue-text, #fff); }
          .confirm-generate:hover { background:var(--ai-continue-hover, #578f26); transform:translateY(-1px); }
          .error { color:#b3261e; font-size:10.5px; height:14px; line-height:14px; margin:3px 0 0; min-height:14px; overflow:hidden; }
          .prompt-preview-button { background:transparent; color:var(--ai-primary, #c71920); font-size:12px; min-height:32px; padding:4px 0; }
          .prompt-preview { background:#282522; border-radius:10px; color:#fff; font:12px/1.5 ui-monospace, Consolas, monospace; margin:8px 0 0; max-height:260px; overflow:auto; padding:12px; white-space:pre-wrap; }
          .technical-preview-tools { margin-top:18px; }
          .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
          .artwork { align-items:start; display:grid; grid-template-columns:minmax(0, 1fr) 184px; gap:13px; }
          .artwork-copy { display:flex; flex-direction:column; min-height:184px; min-width:0; }
          .artwork h2 { margin-bottom:0; }
          .artwork .product { margin-top:0; }
          .expiration-notice { align-items:center; border:1px solid #dddfe3; border-radius:999px; color:#555; display:flex; font-size:9px; gap:7px; justify-content:center; line-height:1.1; margin:4px 0 8px; min-height:31px; padding:4px 10px; text-align:center; }
          .countdown { align-items:flex-start; display:inline-flex; gap:3px; }
          .countdown > i { color:#777; font-size:11px; font-style:normal; font-weight:700; line-height:16px; }
          .countdown-unit { align-items:center; display:flex; flex-direction:column; min-width:25px; }
          .countdown-unit strong { background:#66707c; border-radius:3px; color:#fff; font-size:11px; font-variant-numeric:tabular-nums; line-height:16px; min-width:25px; padding:0 3px; }
          .countdown-unit small { color:#67707a; font-size:5px; line-height:7px; margin-top:1px; }
          .expiration-date strong { color:#242424; font-weight:700; }
          .version-gallery { display:flex; flex:0 0 auto; gap:5px; margin-left:auto; }
          .version-thumb { aspect-ratio:1; background:#fff; border:1px solid #ddd5ce; border-radius:7px; height:38px; min-height:38px; overflow:hidden; padding:3px; position:relative; width:38px; }
          .version-thumb img { border-radius:4px; height:100%; object-fit:contain; width:100%; }
          .version-thumb span { align-items:center; background:rgba(30,27,25,.78); border-radius:999px; bottom:2px; color:#fff; display:flex; font-size:8px; height:14px; justify-content:center; position:absolute; right:2px; width:14px; }
          .version-thumb.selected { border-color:#202124; box-shadow:0 0 0 1px #202124; }
          .version-thumb:hover { border-color:#817970; box-shadow:0 2px 6px rgba(33,27,22,.12); transform:translateY(-1px); }
          .version-thumb.selected:hover { border-color:#202124; box-shadow:0 2px 6px rgba(33,27,22,.14), 0 0 0 1px #202124; }
          figure { aspect-ratio:1; background:#fff; border-radius:10px; margin:0; overflow:hidden; width:100%; }
          figure > .preview-thumb img, figure > .placeholder { aspect-ratio:1; background:#fff; border-radius:8px; height:100%; object-fit:contain; width:100%; }
          .placeholder { display:grid; place-items:center; color:#746d66; }
          .product { color:#716a64; font-size:10px; line-height:1.3; margin:3px 0 12px; }
          .preview-thumb { aspect-ratio:1; background:#fff; border:0; cursor:zoom-in; display:block; min-height:0; padding:5px; transition:box-shadow .18s ease, transform .18s ease; width:100%; }
          .preview-thumb:hover { box-shadow:0 3px 8px rgba(33,27,22,.12); transform:translateY(-1px); }
          .preview-thumb:focus, .preview-thumb:focus-visible, .preview-thumb:active { box-shadow:none; outline:0; }
          .preview-thumb img { display:block; }
          .preview-dialog { background:transparent; border:0; max-height:94vh; max-width:min(92vw, 1100px); overflow:visible; padding:0; }
          .preview-dialog::backdrop { background:rgba(20,17,15,.82); }
          .preview-dialog img { border-radius:10px; display:block; max-height:90vh; max-width:90vw; object-fit:contain; }
          .preview-close { align-items:center; background:#fff; border-radius:50%; color:#292522; display:flex; font-size:22px; height:36px; justify-content:center; min-height:36px; padding:0; position:absolute; right:-12px; top:-12px; width:36px; z-index:2; }
          .actions { display:flex; flex-wrap:wrap; gap:8px; }
          .artwork .actions { display:grid; gap:6px; grid-template-columns:repeat(2, minmax(0, 1fr)); margin-top:auto; width:100%; }
          .artwork-bottom { align-items:center; display:flex; gap:6px; grid-column:1/-1; min-width:0; }
          .artwork-bottom .artwork-action { flex:1 1 auto; width:auto; }
          .artwork-action { align-items:center; display:inline-flex; font-size:11px; gap:6px; justify-content:center; min-height:38px; min-width:0; overflow:hidden; padding:8px 10px; text-overflow:ellipsis; white-space:nowrap; width:100%; }
          .artwork-action:disabled { cursor:not-allowed; opacity:.52; }
          .artwork [data-use] { background:var(--ai-continue-color, #69aF32); color:var(--ai-continue-text, #fff); }
          .artwork [data-use]:hover { background:var(--ai-continue-hover, #578f26); }
          .artwork [data-use].is-preparing { cursor:wait; justify-content:center; opacity:.64; pointer-events:none; }
          .button-spinner { animation:ai-spin .8s linear infinite; border:2px solid rgba(255,255,255,.45); border-radius:50%; border-top-color:#fff; flex:0 0 14px; height:14px; width:14px; }
          .artwork-error { color:#b3261e; font-size:10px; line-height:1.25; margin:4px 0 0; min-height:0; }
          .tertiary { background:var(--ai-tertiary, #fff); border:1px solid #ded6cf; color:var(--ai-tertiary-text, #5c554f); }
          .tertiary:hover { background:var(--ai-tertiary-hover, #f7f3ef); border-color:#cfc4bb; color:var(--ai-tertiary-text, #5c554f); transform:translateY(-1px); }
          .button-icon { align-items:center; display:inline-flex; flex:0 0 15px; height:15px; justify-content:center; line-height:1; width:15px; }
          .button-icon svg { display:block; fill:none; height:15px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:var(--ui-icon-stroke,2); width:15px; }
          .requires-login .label-hover, .requires-login .icon-login { display:none; }
          .requires-login:hover .label-default { display:none; }
          .requires-login:hover .icon-default { display:none; }
          .requires-login:hover .icon-login { display:inline-flex; }
          .requires-login:hover .label-hover { display:inline; }
          .login-submit { margin-top:12px; }
          .steps { margin:10px 0 2px; }
          .loading-state { align-items:center; display:flex; flex-direction:column; justify-content:center; text-align:center; }
          .loading-state .steps { text-align:left; }
          .steps p { align-items:center; color:#817970; display:flex; font-size:10.5px; font-weight:400; gap:7px; line-height:1.25; margin:6px 0; }
          .steps span { border:0; border-radius:50%; display:grid; flex:0 0 16px; font-size:10px; height:16px; line-height:1; place-items:center; width:16px; }
          .steps .done { color:#6f786f; font-weight:400; }
          .steps .done span { background:#2e9d62; border:0; color:#fff; }
          .steps .done span svg { fill:none; height:12px; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:var(--ui-icon-stroke,2); width:12px; }
          .steps .current { color:#242424; font-weight:700; }
          .steps .current span { border:2px solid #d7d0ca; }
          .steps .current .spinner { animation:ai-spin .8s linear infinite; border-color:#d7d0ca; border-top-color:var(--ai-primary, #c71920); box-shadow:none; }
          @keyframes ai-spin { to { transform:rotate(360deg); } }
          @media (max-width:600px) {
            .shell { border-radius:12px; height:auto; min-height:0; padding:15px; }
            h2 { font-size:21px; margin-bottom:15px; }
            .artwork { grid-template-columns:1fr; row-gap:15px; }
            .artwork-copy { min-height:0; }
            .artwork figure { justify-self:center; max-width:115px; order:-1; width:100%; }
            .artwork .actions { grid-template-columns:repeat(2, minmax(0, 1fr)); }
            .artwork .version-gallery { justify-self:auto; }
            .product-context { flex-wrap:nowrap; font-size:11px; gap:3px; white-space:nowrap; }
            .product-context strong { flex:0 0 auto; font-size:11px; white-space:nowrap; }
            .footer { align-items:stretch; flex-direction:column; }
            .footer button { width:100%; }
            .menu-panel { grid-template-columns:1fr; max-height:390px; width:min(340px, calc(100vw - 40px)); }
            .menu-title, .menu-divider, .menu-readonly, .info-fields { grid-column:1; }
            .menu-panel { grid-template-columns:1fr; }
            .field-grid { grid-template-columns:repeat(auto-fit, minmax(118px, 1fr)); max-width:100%; width:calc(100% - 6px); }
            .palette-fields { grid-template-columns:1fr; }
          }
        

   :host{margin:0;--ai-primary:#75ec16;--ai-primary-hover:#66d10e;--ai-primary-text:#17390e;font-family:inherit}
   [hidden]{display:none!important}.shell{box-shadow:none;padding:0;background:transparent}.designer-credit{display:none}
   .product-context{white-space:normal;flex-wrap:wrap;margin-bottom:8px}.product-context strong{white-space:normal}
   h2{font-size:17px;margin-bottom:6px}.send-button,.add-menu>summary{width:26px;height:26px;min-width:26px;min-height:26px;max-width:26px;max-height:26px;flex-basis:26px}
   .brief-summary:has(.brief-item:only-child){display:flex}.brief-remove:hover{background:#b3261e;color:white}
   .brief-item{align-items:center;min-height:26px;padding:3px 6px;gap:5px;line-height:1.2}.brief-item>span{display:inline-flex;align-items:center;min-height:18px}.brief-color{width:12px;height:12px;flex-basis:12px}.brief-remove{display:grid;place-items:center;font:16px/1 var(--ai-font-family, "Nunito", Arial, sans-serif);margin:0;min-width:18px;width:18px;height:18px;min-height:18px;padding:0}
   .menu-panel{max-width:100%;width:100%}.briefing-chat:empty,.error:empty{display:none}.menu-readonly output{flex-basis:auto;max-width:50%}
   @media(max-width:600px){textarea,input,select,.field-grid input,.menu-select select{font-size:16px}.menu-panel{max-height:55vh}h2{font-size:17px}.helper{font-size:12px}}
  
.briefing-chat[hidden],.briefing-force-link[hidden]{display:none}.briefing-chat{max-height:280px;overflow-y:auto;overscroll-behavior:contain}.briefing-message{white-space:pre-wrap;overflow-wrap:anywhere;flex-shrink:0}

.briefing-message.ai.progress{color:#777;background:#f2f2f2;font-weight:400}
.briefing-message.ai.error{color:#8f242b;background:#fff0ef;border-radius:10px;line-height:1.45;height:auto;min-height:0;overflow:visible;white-space:pre-wrap}
@media(prefers-reduced-motion:reduce){.thinking-icon i{animation:none}}

/* Brand action: AI send arrow remains white, including hover. */
.send-button{--ai-primary:#c8102e;--ai-primary-hover:#a30d26;--ai-primary-text:#fff}

/* Same palette and field tokens as the storefront, including inside Shadow DOM. */
.brief-remove,.briefing-force-link,.prompt-preview-button{color:var(--store-accent,#ad4b00)}
.brief-remove:is(:hover,:focus-visible){background:#c8102e;color:#fff}
.briefing-force-link:is(:hover,:focus-visible){background:var(--store-highlight,#fff3cc);color:var(--store-accent,#ad4b00)}
.menu-panel{box-shadow:var(--store-shadow,0 2px 5px #0002)}
.menu-select{display:flex;flex-direction:column;align-items:stretch;gap:6px;min-width:0;cursor:default}
.menu-select>span{gap:2px}.menu-select strong{font-size:12px}.menu-select small{font-size:10px}
.composer-select{position:relative;min-width:0;width:100%}
.composer-select-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:40px;padding:9px 12px;border:1px solid var(--field-border-color,#bcc8c1);border-radius:var(--field-radius,10px);background:#fff;color:#333;font-size:13px;font-weight:400;text-align:left;cursor:pointer}
.composer-select-trigger:after{content:"";display:inline-block;width:14px;height:14px;flex:0 0 14px;background:currentColor;mask:url("/lucide-chevron-down.svg?v=1") center/contain no-repeat;border:0;margin-left:auto;transform:none}
.composer-select-trigger[aria-expanded=true]:after{transform:translateY(2px) rotate(225deg)}
.composer-select-trigger:focus-visible{outline:none;border-color:var(--field-focus-color);box-shadow:var(--field-focus-shadow)}
.composer-select-list{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:30;display:grid;gap:2px;max-height:220px;overflow:auto;padding:5px;background:#fff;border:1px solid #e4ddc9;border-radius:12px;box-shadow:var(--store-shadow,0 2px 5px #0002)}
.composer-select-list button{width:100%;min-height:36px;padding:9px 10px;border:0;border-radius:7px;background:#fff;color:#333;font-size:13px;font-weight:400;text-align:left;cursor:pointer}
.composer-select-list button:is(:hover,:focus-visible,[aria-selected=true]){background:var(--store-highlight,#fff3cc);color:var(--store-accent,#ad4b00)}
.composer-select-list button:focus-visible{outline:1px solid var(--field-focus-color);outline-offset:-1px}
.composer-select-trigger:disabled,.composer-select-list button:disabled{opacity:.5;cursor:default}
/* Compact prompt controls; these are buttons, so smaller type does not zoom mobile inputs. */
.composer-select-trigger{min-height:32px;padding:6px 9px;font-size:12px}
.composer-select-list{gap:0;max-height:none;overflow:visible;padding:4px}
.composer-select-list button{min-height:26px;padding:5px 9px;font-size:12px;line-height:16px}
@media(pointer:coarse){.composer-select-trigger,.composer-select-list button{min-height:36px;font-size:13px}}

/* Assistant replies keep a speech-bubble corner, including progress and checks. */
.briefing-message.ai{border-bottom-left-radius:0!important}

.briefing-message.ai.check-result{background:var(--product-soft-background,#faf7f3)!important;color:#454545}

.art-chat-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px;margin-top:10px}.art-chat-actions button{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:0;border-radius:8px;padding:7px 10px;min-height:32px;font-family:inherit;font-weight:600;font-size:12px;line-height:1.3;cursor:pointer}.art-chat-actions .art-chat-buy{background:#75ec16;color:#173b11}.art-chat-actions .art-chat-cart{background:#c6f3a7;color:#173b11}.art-chat-actions .art-chat-adapt{background:#ffe445;color:#ad4b00}.art-chat-actions .art-chat-adapt:hover{background:#ffdc16}.art-chat-actions .art-chat-buy:hover{background:#66d10e}.art-chat-actions .art-chat-cart:hover{background:#b4eb90}.art-chat-actions svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:var(--ui-icon-stroke,2)}.art-chat-actions button:focus-visible{outline:2px solid #ad4b00;outline-offset:2px}@media(pointer:coarse){.art-chat-actions button{min-height:36px}}

/* Compact text actions in Pri's conversation. */
.art-chat-actions{gap:4px;flex-wrap:wrap}.art-chat-actions button{min-height:28px;padding:5px 6px;font-size:11px;font-weight:600;background:transparent!important;white-space:nowrap}.art-chat-actions .art-chat-buy,.art-chat-actions .art-chat-cart{color:#397d18}.art-chat-actions .art-chat-buy:hover,.art-chat-actions .art-chat-cart:hover{background:#d7f7be!important}.art-chat-actions .art-chat-adapt{color:#ad4b00}.art-chat-actions .art-chat-adapt:hover{background:#ffe445!important}.art-chat-actions svg{width:14px;height:14px;flex-shrink:0}.art-chat-actions button:focus-visible{background:#fff3cc!important}

/* Keep the two purchase actions on one row, including narrow phones. */
.briefing-message.ai.check-result{box-sizing:border-box;width:100%;max-width:100%;min-width:0}.art-chat-actions{flex-wrap:nowrap;gap:4px;white-space:normal}.art-chat-actions button{flex:0 1 auto;width:auto;min-width:0;padding:5px 4px;gap:4px;letter-spacing:normal}.art-chat-actions svg{width:13px;height:13px;flex:0 0 13px}@media(max-width:380px){.art-chat-actions{gap:2px}.art-chat-actions button{font-size:10px;padding-inline:1px;gap:2px}}

/* Single purchase action in the prompt. */
.art-chat-actions .art-chat-buy{font-size:12px;min-height:34px;padding:7px 10px;gap:6px}.art-chat-actions .art-chat-buy svg{width:15px;height:15px;flex-basis:15px}

/* Consistent mobile reply alignment and readable copy. */
@media(max-width:600px){
 .briefing-chat{padding:6px;gap:8px}
 .briefing-message.ai{box-sizing:border-box;width:100%;max-width:100%;padding:10px 12px;font-size:14px;line-height:1.5;background:var(--product-soft-background,#faf7f3)}
 .art-chat-actions{margin-top:8px;align-items:center;justify-content:flex-end}
 .art-chat-actions .art-chat-buy{font-size:13px;min-height:36px;padding:7px 8px}
}

/* Readable invitation without competing with the conversation. */
.prompt-box textarea::placeholder{color:#76706b;opacity:1;font-weight:400}

/* Continuous conversation; input remains outside the scroll region. */
.briefing-chat{max-height:360px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;overflow-anchor:none}.briefing-message.generated-art img{max-width:100%;max-height:220px;object-fit:contain;display:block;margin:auto}.generated-art button{display:block;margin:8px 0 0 auto;border:0;border-radius:8px;background:#fff0b0;color:#a54c00;padding:7px 10px;cursor:pointer}.previous-result{opacity:.75}@media(max-width:600px){.briefing-chat{max-height:42dvh}}

.briefing-message.ai.check-result.format-warning{color:#a31a35;background:#fff0f2!important}

.art-check-pages{display:block;margin-top:8px;font-size:12px;line-height:1.5}

/* Compact actions remain visually attached to the assistant response. */
.briefing-message .art-chat-actions{margin-top:3px;gap:4px;align-items:center;justify-content:flex-end}
.briefing-message .art-chat-actions button,.briefing-message .art-chat-actions .art-chat-buy{min-height:26px;height:auto;padding:3px 5px;font-size:12px;line-height:1.25;gap:4px;margin:0}
.briefing-message .art-chat-actions svg,.briefing-message .art-chat-actions .art-chat-buy svg{width:14px;height:14px;flex:0 0 14px}
@media(pointer:coarse){.briefing-message .art-chat-actions button,.briefing-message .art-chat-actions .art-chat-buy{min-height:32px;padding-block:5px}}

/* Shadow DOM uses the same locally bundled Lucide shapes. */
svg.lucide{fill:none;stroke:currentColor;stroke-width:var(--ui-icon-stroke,2);stroke-linecap:round;stroke-linejoin:round;pointer-events:none}.menu-icon>.lucide{width:15px;height:15px}.brief-remove>.lucide{width:12px;height:12px;margin:0}
