/* Composer (round 26c MAG-7): x-sc.composer + js/magic/composer.js.
   One rounded surface: attachments on top (r.861), the textarea (autogrows from
   --sc-composer-rows to 8 lines, r.857), one row below with '+', model pill, org pill and
   the round send button. Semantic tokens only (both themes); the only px sizes are the
   component sizes 14/16 (icon), 20 (thumb), 32 ('+' and send) and 40 (attachment).
   Round 28e (r.543–550, V22): no border, '+' and send as 32 circles, .sc-composer--stage,
   the ghost prompt line (setPrompts). */

.sc-composer {
    --sc-composer-rows: 1;
    min-width: 0;
    --sc-input-bg: transparent;
    --sc-input-border: transparent;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem;
    border: 0;
    border-radius: var(--sc-radius-lg);
    background: var(--sc-color-surface);
    color: var(--sc-color-text-strong);
    font-family: var(--sc-font-sans);
    transition: opacity var(--sc-dur-fast) var(--sc-ease-out);
}
.sc-composer--rows-3 {
    --sc-composer-rows: 3;
}
.sc-composer.is-disabled {
    opacity: .5;
    pointer-events: none;
}

/* Scope strip (Magic): thumb + 'In {scope}'. */
.sc-composer-scope {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--sc-color-text-subtle);
    font-size: .75rem;
}
.sc-composer-scope[hidden] {
    display: none;
}
.sc-composer .sc-composer-scope img {
    width: 20px;
    height: 20px;
    border-radius: var(--sc-radius-sm);
    object-fit: cover;
}

/* The field: transparent through the scoped input tokens (r.69). Input and ghost share
   font, line-height and padding so the ghost prompt sits exactly on the first text line. */
.sc-composer :is(.sc-composer-input, .sc-composer-ghost) {
    padding: 0;
    font: inherit;
    font-size: 1rem !important; /* shared.css sets font-size/line-height !important on textarea */
    line-height: 1.5 !important;
}
.sc-composer .sc-composer-input {
    display: block;
    width: 100%;
    min-height: calc(var(--sc-composer-rows) * 1lh) !important; /* shared.css sets min-height: auto !important */
    max-height: calc(8 * 1lh);
    border: 0;
    border-color: var(--sc-input-border);
    background: var(--sc-input-bg);
    box-shadow: none;
    color: inherit;
    resize: none;
    overflow-y: hidden;
    outline: none;
    field-sizing: content;
}
.sc-composer .sc-composer-input::placeholder {
    color: var(--sc-color-text-subtle);
}
.sc-composer .sc-composer-input:is(:focus, :focus-visible, :active, :hover) {
    border-color: var(--sc-input-border);
    box-shadow: none;
}

/* Ghost prompt (r.544): one line leaves upwards, the next enters from below; gone with text. */
.sc-composer-field {
    position: relative;
}
.sc-composer-ghost {
    position: absolute;
    inset: 0;
    overflow: hidden;
    color: var(--sc-color-text-subtle);
    pointer-events: none;
    transition: opacity var(--sc-dur-fast) var(--sc-ease-out);
}
.sc-composer-ghost-line {
    position: absolute;
    inset: 0 0 auto;
    transition: transform var(--sc-dur-base) var(--sc-ease-out), opacity var(--sc-dur-base) var(--sc-ease-out);
}
.sc-composer-ghost-line.is-enter {
    opacity: 0;
    transform: translateY(.5lh);
    transition: none;
}
.sc-composer-ghost-line.is-leave {
    opacity: 0;
    transform: translateY(-.5lh);
}
.sc-composer.has-value .sc-composer-ghost {
    opacity: 0;
}
.sc-composer.is-field .sc-composer-ghost {
    display: none;
}

/* Section variant (r.543/547/548): larger text on glass with more room. */
.sc-composer--stage {
    padding: 1.25rem 1.25rem 1rem;
    background: var(--sc-glass-bg);
    -webkit-backdrop-filter: var(--sc-glass-blur);
    backdrop-filter: var(--sc-glass-blur);
}
.sc-composer--stage :is(.sc-composer-input, .sc-composer-ghost) {
    font-size: 16px !important;
}

.sc-composer-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
}
.sc-composer-tools {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .375rem;
    margin-left: auto;
}

/* One-field mode: only the field and the send button. */
.sc-composer.is-field :is(.sc-composer-add, .sc-composer-attachments, .sc-composer-model, .sc-composer-org) {
    display: none;
}

/* Shared button reset for every control in the row. */
.sc-composer :is(.sc-composer-add, .sc-composer-attachment-open, .sc-composer-attachment-remove, .sc-composer-model, .sc-composer-org, .sc-composer-send) {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: background-color var(--sc-dur-fast) var(--sc-ease-out), color var(--sc-dur-fast) var(--sc-ease-out), opacity var(--sc-dur-fast) var(--sc-ease-out);
}
.sc-composer :is(.sc-composer-add, .sc-composer-attachment-open, .sc-composer-attachment-remove, .sc-composer-model, .sc-composer-org, .sc-composer-send):focus-visible {
    outline: none;
    box-shadow: var(--sc-ring);
}
.sc-composer :is(i.icon:not(.sc-composer-check), img:not(.sc-avatar-img), .sc-composer-arrow) {
    flex: none;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
}

/* '+': 32 circle, transparent at rest, 16 icon, no border (r.549). */
.sc-composer .sc-composer-add {
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--sc-radius-full);
    background: transparent;
    color: var(--sc-color-text-muted);
}
.sc-composer .sc-composer-add:hover {
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text-strong);
}

/* Attachments above the field (r.861/869): one card per item, the strip scrolls sideways. */
.sc-composer-attachments {
    display: flex;
    gap: .5rem;
    overflow-x: auto;
    scrollbar-width: thin;
}
.sc-composer-attachments[hidden] {
    display: none;
}
.sc-composer-attachment {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    max-width: 16rem;
    padding: .375rem 2rem .375rem .375rem;
    border-radius: var(--sc-radius-md);
    background: var(--sc-color-surface-alt);
}
.sc-composer .sc-composer-attachment-open {
    gap: .5rem;
    min-width: 0;
    text-align: left;
}
.sc-composer-attachment-visual {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    overflow: hidden;
    border-radius: var(--sc-radius-sm);
    background: var(--sc-color-panel-bg);
}
.sc-composer .sc-composer-attachment-visual img {
    width: 40px;
    height: 40px;
    object-fit: cover;
}
.sc-composer-attachment-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.2;
}
.sc-composer-attachment-title,
.sc-composer-attachment-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sc-composer-attachment-title {
    font-size: .8125rem;
    font-weight: var(--sc-font-weight-ui);
}
.sc-composer-attachment-sub {
    color: var(--sc-color-text-subtle);
    font-size: .75rem;
}
.sc-composer .sc-composer-attachment-remove {
    position: absolute;
    top: .375rem;
    right: .375rem;
    color: var(--sc-color-text-subtle);
}
.sc-composer .sc-composer-attachment-remove i.icon {
    width: 14px;
    height: 14px;
    font-size: 14px;
}
.sc-composer .sc-composer-attachment-remove:hover {
    color: var(--sc-color-text-strong);
}

/* Model and org pills: small and muted (r.74). */
.sc-composer :is(.sc-composer-model, .sc-composer-org) {
    padding: .25rem .5rem;
    border-radius: var(--sc-radius-full);
    color: var(--sc-color-text-subtle);
    font-size: .75rem;
}
.sc-composer :is(.sc-composer-model, .sc-composer-org):hover {
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text-strong);
}
/* r.864: the model icon in the pill 14 and muted. */
.sc-composer .sc-composer-model :is(img, i.icon:not(.icon-arrow-bottom-small)) {
    width: 14px;
    height: 14px;
    font-size: 14px;
    opacity: .7;
}

/* Send (r.550): one fill in every state; empty = .4, ready = 1 (hover .85), busy = stop glyph. */
.sc-composer .sc-composer-send {
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: var(--sc-radius-full);
    background: var(--sc-color-primary);
    color: var(--sc-color-white);
}
.sc-composer .sc-composer-send:not(:disabled):hover {
    opacity: .85;
}
.sc-composer .sc-composer-send:disabled {
    opacity: .4;
    cursor: default;
}
.sc-composer-stop {
    display: none;
    width: .625rem;
    height: .625rem;
    border-radius: var(--sc-radius-sm);
    background: currentColor;
}
.sc-composer.is-busy .sc-composer-send .sc-composer-arrow {
    display: none;
}
.sc-composer.is-busy .sc-composer-send .sc-composer-stop {
    display: block;
}
.sc-composer.is-busy .sc-composer-send {
    opacity: 1;
    pointer-events: none;
}

/* Popover menus ('+' and model): the huisstijl floating layer. */
.sc-composer-menu,
.sc-composer-model-menu {
    position: fixed;
    inset: auto;
    margin: .375rem 0;
    min-width: 16rem;
    max-width: 22rem;
    padding: .375rem;
    border: thin solid var(--sc-color-hairline);
    border-radius: var(--sc-radius-lg);
    background: var(--sc-color-bg);
    color: var(--sc-color-text);
    box-shadow: var(--sc-shadow-pop);
    font-family: var(--sc-font-sans);
    position-area: top span-right;
    position-try-fallbacks: flip-block, flip-inline;
}
.sc-composer-model-menu {
    position-area: top span-left;
}
.sc-composer-menu:popover-open,
.sc-composer-model-menu:popover-open {
    animation: sc-composer-in var(--sc-dur-base) var(--sc-ease-out);
}
.sc-composer-menu-title {
    padding: .375rem .5rem;
    color: var(--sc-color-text-muted);
    font-size: .75rem;
    font-weight: var(--sc-font-weight-ui);
}
.sc-composer-menu-item,
.sc-composer-model-item {
    display: flex;
    align-items: center;
    gap: .625rem;
    width: 100%;
    padding: .5rem;
    border: 0;
    border-radius: var(--sc-radius-md);
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background-color var(--sc-dur-fast) var(--sc-ease-out);
}
.sc-composer-menu-item:hover,
.sc-composer-model-item:not(:disabled):hover {
    background: var(--sc-color-surface-alt);
}
.sc-composer-menu-item:focus-visible,
.sc-composer-model-item:focus-visible {
    outline: none;
    box-shadow: var(--sc-ring);
}
.sc-composer-model-item:disabled {
    cursor: default;
}
.sc-composer-menu-item i.icon {
    width: 16px;
    font-size: 16px;
}
.sc-composer-model-item :is(img, i.icon:not(.sc-composer-check)) {
    flex: none;
    width: 16px;
    height: 16px;
    font-size: 16px;
    line-height: 1;
}
.sc-composer-model-item:disabled :is(img, i.icon, .sc-composer-menu-label) {
    opacity: .5;
}
.sc-composer-menu-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    line-height: 1.2;
}
.sc-composer-menu-label {
    font-size: .875rem;
    font-weight: var(--sc-font-weight-ui);
}
.sc-composer-menu-description {
    color: var(--sc-color-text-muted);
    font-size: .75rem;
}
.sc-composer-check {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--sc-color-text-strong);
    font-size: 14px;
    line-height: 1;
}
.sc-composer-check[hidden] {
    display: none;
}
/* 'Binnenkort': the v2 grey pill (ui-pill.css bg-grey-1). */
.sc-composer-soon {
    flex: none;
    padding: .125rem .5rem;
    border-radius: var(--sc-radius-full);
    background: var(--sc-color-surface-alt);
    color: var(--sc-color-text-muted);
    font-size: .6875rem;
    font-weight: var(--sc-font-weight-ui);
}

@keyframes sc-composer-in {
    from { opacity: 0; transform: translateY(.25rem); }
    to { opacity: 1; transform: none; }
}

@supports not (anchor-name: --a) {
    .sc-composer-menu,
    .sc-composer-model-menu {
        inset: auto 0 0 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: var(--sc-radius-lg) var(--sc-radius-lg) 0 0;
    }
}

@media screen and (max-width: 47.9375em) {
    .sc-composer-menu,
    .sc-composer-model-menu {
        inset: auto 0 0 0;
        width: 100%;
        max-width: none;
        margin: 0;
        border-radius: var(--sc-radius-lg) var(--sc-radius-lg) 0 0;
        position-area: none;
    }
    .sc-composer-org-name {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sc-composer,
    .sc-composer *,
    .sc-composer-menu,
    .sc-composer-model-menu,
    .sc-composer-menu-item,
    .sc-composer-model-item {
        transition: none;
        animation: none;
    }
}