.shcl-content-composer {
    position: fixed;
    margin: 0 !important;
    z-index: 36;
    left: calc((100% + 264px) / 2);
    bottom: 24px;
    width: min(900px, calc(100% - 312px));
    transform: translateX(-50%);
    display: grid;
    gap: 10px;
    padding: 14px 16px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 22px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 14px 48px rgb(15 23 42 / 22%), 0 4px 14px rgb(15 23 42 / 10%);
}
.shcl-content-composer [hidden] { display: none !important; }
.shcl-content-composer [data-menu].hidden { display: none !important; }
.shcl-content-composer__header,
.shcl-content-composer__footer,
.shcl-content-composer__toolbar,
.shcl-content-composer__settings-fields { display: flex; align-items: center; gap: 10px; min-width: 0; }
.shcl-content-composer__header,
.shcl-content-composer__footer { justify-content: space-between; }
.shcl-content-composer__identity { display: flex; align-items: center; gap: 8px; min-width: 0; }
.shcl-content-composer__avatar { width: 40px; height: 40px; flex-shrink: 0; border-radius: 11px; object-fit: cover; object-position: top; }
.shcl-content-composer__modes { display: inline-flex; flex-shrink: 0; gap: 2px; min-height: 40px; padding: 3px; border-radius: 12px; background: #f1f5f9; }
.shcl-content-composer__modes button { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 12px; border-radius: 9px; font-size: 13px; color: #64748b; white-space: nowrap; }
.shcl-content-composer__modes button[aria-pressed="true"] { background: #fff; color: var(--color-indigo-700, #4338ca); box-shadow: 0 1px 4px rgb(15 23 42 / 10%); }
.shcl-content-composer__inspire { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 9px; border-radius: 10px; color: var(--color-indigo-700, #4338ca); font-size: 12px; white-space: nowrap; }
.shcl-content-composer__inspire:hover,
.shcl-content-composer__inspire[aria-expanded="true"] { background: #f5f3ff; }
.shcl-content-composer svg { width: 18px; height: 18px; flex-shrink: 0; }
.shcl-content-composer__modes svg { width: 15px; height: 15px; }
.shcl-content-composer__editor { min-height: calc(1.8em + 6px); max-height: 108px; padding: 3px 2px; overflow-y: auto; overflow-wrap: anywhere; white-space: pre-wrap; font-size: 16px; line-height: 1.8; border-radius: 5px; }
.shcl-content-composer__editor:empty::before { content: attr(data-placeholder); color: #94a3b8; pointer-events: none; }
.shcl-content-composer__editor:focus { outline: none; }
.shcl-content-composer__tag { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; margin: 2px 3px; padding: 2px 5px 2px 9px; border: 1px solid #ddd6fe; border-radius: 8px; background: #f5f3ff; color: var(--color-indigo-700, #4338ca); font-size: 12px; line-height: 1.5; vertical-align: baseline; white-space: normal; }
.shcl-content-composer__tag button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 5px; font-size: 17px; }
.shcl-content-composer__tag button:hover { background: #ede9fe; }
.shcl-content-composer__toolbar { gap: 8px; }
.shcl-content-composer__desktop-settings { min-width: 0; }
.shcl-content-composer__settings-fields { gap: 12px; flex-wrap: wrap; }
.shcl-content-composer__setting { position: relative; display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: #64748b; }
.shcl-content-composer__setting:has(> .shcl-content-composer__setting-toggle:not([hidden])) > :is(svg, .shcl-content-composer__setting-label) { display: none; }
.shcl-content-composer__setting-toggle { display: inline-flex; align-items: center; gap: 5px; max-width: 160px; min-height: 36px; padding: 4px; border-radius: 7px; color: #475569; font-size: 13px; white-space: nowrap; }
.shcl-content-composer__setting-toggle:hover,
.shcl-content-composer__setting-toggle:active,
.shcl-content-composer__setting-toggle[aria-expanded="true"] { background: #f1f5f9; }
.shcl-content-composer__setting-toggle > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.shcl-content-composer__setting-toggle > svg { width: 14px; height: 14px; }
.shcl-content-composer__setting-toggle > .shcl-content-composer__setting-icon { width: 18px; height: 18px; }
.shcl-content-composer__setting-menu { position: absolute; z-index: 4; bottom: calc(100% + 10px); left: 0; width: 200px; max-width: calc(100vw - 24px); max-height: min(360px, 50dvh); overflow-y: auto; padding: 7px; border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; color: #334155; box-shadow: 0 14px 36px rgb(15 23 42 / 24%), 0 3px 10px rgb(15 23 42 / 10%); }
.shcl-content-composer__setting-heading { display: flex; align-items: center; gap: 7px; padding: 7px 9px 9px; color: #94a3b8; font-size: 12px; }
.shcl-content-composer__setting-menu > button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 37px; padding: 8px 9px; border-radius: 8px; text-align: left; font-size: 13px; line-height: 1.4; }
.shcl-content-composer__setting-menu > button:hover { background: #f8fafc; }
.shcl-content-composer__setting-menu > button[aria-pressed="true"] { background: #f1f5f9; color: var(--color-indigo-700, #4338ca); }
.shcl-content-composer__setting-menu > button[aria-pressed="false"] > svg { visibility: hidden; }
.shcl-content-composer__setting-menu > button:disabled { color: #94a3b8; cursor: not-allowed; }
.shcl-content-composer__setting-label { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; color: #94a3b8; }
.shcl-content-composer__setting-label > span { display: none; }
.shcl-content-composer__setting select { min-width: 0; max-width: 146px; min-height: 36px; padding: 4px 0; border: 0; border-radius: 6px; background-color: transparent; color: #475569; font-size: 13px; }
.shcl-content-composer__settings-toggle { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; }
.shcl-content-composer__actions { display: flex; align-items: center; flex-shrink: 0; gap: 8px; padding: 3px 3px 3px 12px; border-radius: 999px; background: #f1f5f9; }
.shcl-content-composer__credits { font-size: 12px; font-weight: 500; color: #64748b; white-space: nowrap; }
.shcl-content-composer__generate { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; background: var(--color-indigo-700, #4338ca); color: #fff; }
.shcl-content-composer__generate svg { width: 22px; height: 22px; }
.shcl-content-composer__generate:hover { background: var(--color-indigo-600, #4f46e5); }
.shcl-content-composer__generate:disabled { cursor: wait; }
.shcl-content-composer__generate[aria-busy="true"] svg { animation: shcl-composer-pulse 1s ease-in-out infinite alternate; }
@keyframes shcl-composer-pulse { to { opacity: 0.35; } }
.shcl-content-composer__popup { position: absolute; z-index: 2; right: 0; bottom: calc(100% + 10px); display: flex; flex-direction: column; gap: 10px; width: 340px; max-width: calc(100vw - 24px); max-height: min(390px, calc(100dvh - var(--shcl-persona-composer-height, 210px) - 64px)); padding: 12px; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 16px; background: #fff; box-shadow: 0 16px 40px rgb(15 23 42 / 24%), 0 4px 12px rgb(15 23 42 / 10%); }
.shcl-content-composer__popup-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; font-size: 13px; }
.shcl-content-composer__popup-header button { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 7px; background: #f1f5f9; color: #64748b; font-size: 20px; }
.shcl-content-composer__categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; flex-shrink: 0; }
.shcl-content-composer__categories button { display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; padding: 7px 2px; border-radius: 8px; background: #f8fafc; color: #64748b; font-size: 12px; white-space: nowrap; }
.shcl-content-composer__categories svg { width: 12px; height: 12px; }
.shcl-content-composer__categories button[aria-pressed="true"] { background: #ede9fe; color: var(--color-indigo-700, #4338ca); }
.shcl-content-composer__popup input { width: 100%; min-width: 0; flex-shrink: 0; padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 13px; }
#personaInspirationMenu { height: 390px; }
.shcl-content-composer__inspiration-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.shcl-content-composer__inspiration-list [data-composer-tag-choice] { display: block; width: 100%; padding: 9px 10px; border-radius: 7px; text-align: left; color: #475569; font-size: 13px; }
.shcl-content-composer__inspiration-list [data-composer-tag-choice]:hover { background: #f5f3ff; color: var(--color-indigo-700, #4338ca); }
.shcl-content-composer__history { padding: 3px; }
.shcl-content-composer__history button,
.shcl-content-composer [data-history-retry] { display: block; width: 100%; min-height: 42px; padding: 9px 10px; border-radius: 7px; text-align: left; color: #475569; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.shcl-content-composer__history button:hover,
.shcl-content-composer [data-history-retry]:hover { background: #f5f3ff; color: var(--color-indigo-700, #4338ca); }
.shcl-content-composer__history button span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shcl-content-composer__history time { display: block; margin-top: 3px; color: #94a3b8; font-size: 11px; font-weight: 400; }
.shcl-content-composer__group-heading { display: flex; align-items: center; gap: 7px; padding: 12px 10px 5px; color: #94a3b8; font-size: 11px; font-weight: 600; letter-spacing: 0.035em; text-transform: uppercase; }
.shcl-content-composer__group-heading svg { width: 15px; height: 15px; }
.shcl-content-composer__empty,
.shcl-content-composer__note { font-size: 12px; color: #64748b; line-height: 1.5; }
.shcl-content-composer__error { padding: 7px 10px; border-radius: 8px; background: #fff1f2; color: #be123c; font-size: 12px; line-height: 1.5; }
.shcl-content-composer :is(button, select, input):focus-visible { outline: 2px solid var(--color-indigo-500, #6366f1); outline-offset: 2px; }
body.shcl-persona-composer-visible .shcl-app-main { padding-bottom: calc(var(--shcl-persona-composer-height, 210px) + 64px); }
body.shcl-persona-composer-visible #toastStack { bottom: calc(var(--shcl-persona-composer-height, 210px) + 40px); }
body.shcl-nav-is-loading .shcl-content-composer,
body:has(#sidebar.shcl-sidebar-open) .shcl-content-composer,
body:has(#mobileStudioDock .shcl-dock-menu:not(.hidden)) .shcl-content-composer { visibility: hidden; }
@media (max-width: 1023px) {
    .shcl-content-composer { left: 0; right: 0; bottom: max(var(--shcl-composer-dock-offset, var(--shcl-mobile-dock-height, 79px)), var(--shcl-composer-keyboard-inset, 0px)); width: 100%; transform: none; padding: 10px max(12px, env(safe-area-inset-right, 0px)) 14px max(12px, env(safe-area-inset-left, 0px)); border-width: 1px 0 0; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 38px rgb(15 23 42 / 20%), 0 -3px 12px rgb(15 23 42 / 8%); }
    .shcl-content-composer__header { gap: 6px; }
    .shcl-content-composer__modes button { min-height: 34px; padding: 6px 7px; font-size: 12px; }
    .shcl-content-composer__modes svg { width: 14px; height: 14px; }
    .shcl-content-composer__identity { gap: 5px; }
    .shcl-content-composer__avatar { width: 40px; height: 40px; border-radius: 10px; }
    .shcl-content-composer__inspire { gap: 4px; padding: 5px; font-size: 12px; }
    .shcl-content-composer__inspire > span { display: none; }
    .shcl-content-composer__inspire::after { content: 'Inspire'; }
    .shcl-content-composer__inspire svg { width: 15px; height: 15px; }
    .shcl-content-composer__editor { max-height: 100px; font-size: 16px; }
    .shcl-content-composer__toolbar { gap: 6px; }
    .shcl-content-composer__settings-toggle { display: inline-flex; }
    .shcl-content-composer__setting select { max-width: 110px; min-height: 40px; font-size: 14px; }
    .shcl-content-composer__setting-toggle { min-height: 40px; max-width: 120px; font-size: 13px; }
    .shcl-content-composer__toolbar > .shcl-content-composer__setting > .shcl-content-composer__setting-toggle { padding: 0 10px; border: 1px solid #e2e8f0; border-radius: 10px; }
    .shcl-content-composer__toolbar > .shcl-content-composer__setting svg { width: 16px; height: 16px; }
    .shcl-content-composer__settings-popup { left: 8px; right: 8px; width: auto; }
    .shcl-content-composer__popup { right: 8px; bottom: calc(100% + 10px - var(--shcl-composer-popup-overlap, 0px)); max-width: calc(100vw - 16px); max-height: min(360px, calc(100dvh - var(--shcl-persona-composer-height, 210px) - max(var(--shcl-composer-dock-offset, var(--shcl-mobile-dock-height, 79px)), var(--shcl-composer-keyboard-inset, 0px)) - var(--shcl-composer-topbar-height, 65px) - 24px + var(--shcl-composer-popup-overlap, 0px))); }
    .shcl-content-composer__popup input { font-size: 16px; }
    .shcl-content-composer__settings-popup .shcl-content-composer__settings-fields { flex-direction: column; align-items: stretch; gap: 5px; }
    .shcl-content-composer__settings-popup .shcl-content-composer__setting { justify-content: space-between; gap: 12px; }
    .shcl-content-composer__settings-popup [data-composer-mobile-settings] { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
    .shcl-content-composer__settings-popup .shcl-content-composer__setting { display: block; width: 100%; padding: 6px 0; }
    /* Keep the outline and its offset inside the scrollable option rows. */
    .shcl-content-composer__settings-popup .shcl-content-composer__setting-menu { position: static; display: flex; gap: 4px; width: 100%; max-width: none; max-height: none; overflow-x: auto; padding: 7px 5px 5px; border: 0; border-radius: 0; box-shadow: none; }
    .shcl-content-composer__settings-popup .shcl-content-composer__setting-menu > button { flex: 1 0 auto; justify-content: center; gap: 0; width: auto; min-height: 36px; padding: 7px 5px; border: 1px solid #e2e8f0; background: #f8fafc; font-size: 12px; white-space: nowrap; }
    .shcl-content-composer__settings-popup .shcl-content-composer__setting-menu > button[aria-pressed="true"] { border-color: #c4b5fd; background: #ede9fe; }
    .shcl-content-composer__settings-popup .shcl-content-composer__setting-menu > button > svg,
    .shcl-content-composer__settings-popup .shcl-content-composer__setting-restriction { display: none; }
    .shcl-content-composer__settings-popup .shcl-content-composer__setting-heading { display: none; }
    .shcl-content-composer__settings-popup .shcl-content-composer__setting-label { font-size: 13px; color: #64748b; }
    .shcl-content-composer__settings-popup .shcl-content-composer__setting-label > span { display: inline; }
    .shcl-content-composer__settings-popup select { width: 65%; max-width: none; padding: 6px; background: #f8fafc; font-size: 16px; }
    .shcl-content-composer__credits { font-size: 11px; }
    .shcl-content-composer__actions { gap: 5px; padding-left: 9px; }
    body.shcl-persona-composer-visible .shcl-app-main { padding-bottom: calc(var(--shcl-persona-composer-height, 210px) + var(--shcl-persona-composer-dock-height, 79px) + 37px); }
    body.shcl-persona-composer-visible #toastStack { bottom: calc(var(--shcl-persona-composer-height, 210px) + var(--shcl-persona-composer-dock-height, 79px) + 12px); }
}
@media (max-width: 359px) {
    .shcl-content-composer__categories svg { display: none; }
    .shcl-content-composer__modes button { padding: 6px 5px; font-size: 11px; }
    .shcl-content-composer__inspire { padding: 5px 1px; }
    .shcl-content-composer__inspire::after { content: ''; }
}
@media (prefers-reduced-motion: reduce) { .shcl-content-composer__generate[aria-busy="true"] svg { animation: none; } }