{"version":3,"file":"message-composer.css.cjs","names":[],"sources":["../../../src/inputs/message-composer/message-composer.css?inline"],"sourcesContent":["/*\n * Unlike the first version of this component, the field here is a plain `<textarea>` owned\n * directly by this stylesheet — not a nested `ore-textarea` with its own chrome suppressed via\n * `::part()` overrides. There is exactly one implementation of \"what the field looks like\" to\n * maintain (this file), not two.\n */\n@layer refine.base {\n  :host {\n    /* --_bg/--_border-color are set per-variant in @layer refine.variants below (every host\n       matches exactly one variant rule, including the implicit \"no attribute\" default) — no\n       fallback needed here. --_padding/--_font-size/--_gap are set per-size by\n       sizeVariantMixin(MESSAGE_COMPOSER_SIZE_PRESET) (see message-composer.ts's `styles`); this\n       is the `--message-composer-padding` public-override fallback for the \"md\" tier, matching\n       the same pattern `ore-textarea` uses for `--textarea-padding`. */\n    --_radius: var(--message-composer-radius, var(--rounded-2xl));\n    --_padding: var(--message-composer-padding, var(--size-3));\n    --_surface: var(--_bg);\n\n    display: flex;\n    width: fit-content;\n    max-width: 100%;\n  }\n\n  :host([fullwidth]) {\n    width: 100%;\n  }\n\n  .composer {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: var(--message-composer-gap, var(--_gap));\n    width: 100%;\n    padding: var(--_padding);\n    background: var(--_surface);\n    border: var(--border) solid var(--_border-color);\n    border-radius: var(--_radius);\n    box-shadow: var(--shadow-2xs);\n    transition:\n      background var(--transition-fast),\n      border-color var(--transition-fast),\n      box-shadow var(--transition-fast);\n  }\n\n  /* `flat` excluded — it gets its own theme-tinted hover/focus recipe below instead of the\n     plain canvas-background one every other variant shares (mirrors `ore-textarea`). */\n  :host(:not([disabled], [variant='bordered'], [variant='flat'])) .composer:hover {\n    border-color: var(--color-contrast-400);\n  }\n\n  :host([error]:not([error=''])) .composer {\n    border-color: var(--color-error);\n  }\n\n  :host([success]) .composer {\n    border-color: var(--color-success);\n  }\n\n  /* ========================================\n       Status Icon (error/success — never color alone)\n       ======================================== */\n\n  .status-icon {\n    position: absolute;\n    inset-block-start: var(--_padding);\n    inset-inline-end: var(--_padding);\n    display: none;\n    align-items: center;\n    justify-content: center;\n    width: var(--size-5);\n    height: var(--size-5);\n  }\n\n  :host([error]:not([error=''])) .status-icon,\n  :host([success]) .status-icon {\n    display: flex;\n  }\n\n  .status-icon[data-status='error'] {\n    color: var(--color-error);\n  }\n\n  .status-icon[data-status='success'] {\n    color: var(--color-success);\n  }\n\n  .field {\n    box-sizing: border-box;\n    width: 100%;\n    min-width: 0;\n\n    /* Floor so an inline `height` from auto-resize (JS, set on `<textarea>` directly — see\n       auto-resize.ts) can never visually collapse the field below one line, e.g. before the\n       first `scrollHeight` read has actually happened. `ore-textarea` has the equivalent\n       `--_min-height` for the same reason. */\n    min-height: var(--message-composer-min-height, 1lh);\n    padding: 0;\n    font: inherit;\n    font-size: var(--_font-size);\n    line-height: var(--leading-relaxed);\n    color: var(--text-color-body);\n    resize: none;\n    outline: none;\n    background: transparent;\n    border: none;\n  }\n\n  .field::placeholder {\n    color: var(--message-composer-placeholder-color, var(--color-contrast-500));\n  }\n\n  .helper-text[hidden] {\n    display: none;\n  }\n\n  .helper-text {\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: color-mix(in oklch, var(--color-contrast-500) 80%, var(--color-canvas));\n  }\n\n  .counter {\n    align-self: flex-end;\n    padding-inline: 2px;\n    font-size: var(--text-xs);\n    line-height: var(--leading-tight);\n    color: var(--color-contrast-400);\n  }\n\n  .counter.near-limit {\n    color: var(--color-warning);\n  }\n\n  .counter.at-limit {\n    color: var(--color-error);\n  }\n\n  .toolbar {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .toolbar-start,\n  .toolbar-end {\n    display: flex;\n    gap: var(--message-composer-gap, var(--_gap));\n    align-items: center;\n    min-width: 0;\n  }\n\n  .send-btn {\n    flex-shrink: 0;\n  }\n}\n\n/*\n * The solid/flat/bordered/outline/ghost variant switch (previously `@layer refine.variants`\n * here) now lives in `fieldVariantMixin({ container: '.composer', text: '.field', tokenPrefix:\n * 'message-composer' })` in `message-composer.ts`'s `styles` array — shared with `ore-input`/\n * `ore-textarea` instead of hand-duplicated across all three (see the mixin's own doc comment\n * for what it covers and why).\n */\n\n/*\n * Focus/error/success `box-shadow` on `.composer` — kept in `refine.variants` (alongside\n * `fieldVariantMixin`'s rest-state `box-shadow` for solid/outline/ghost) rather than\n * `refine.base`, so normal specificity decides the winner. Cascade layers beat specificity\n * outright, so a `refine.base` box-shadow here always lost to every variant's unconditional\n * rest-state `box-shadow`, focused/error/success or not — the same bug class fixed for\n * `ore-otp-input`'s focus ring.\n */\n@layer refine.variants {\n  :host(:not([disabled], [variant='flat'])) .composer:focus-within {\n    --_surface: var(--color-canvas);\n\n    border-color: var(--_theme-focus);\n    box-shadow: var(--_theme-shadow);\n  }\n\n  :host([error]:not([error=''])) .composer:focus-within {\n    border-color: var(--color-error);\n    box-shadow: var(--color-error-focus-shadow);\n  }\n\n  :host([success]) .composer:focus-within {\n    border-color: var(--color-success);\n    box-shadow: var(--color-success-focus-shadow);\n  }\n}\n\n/* ========================================\n     Disabled / Loading overrides — intentionally unlayered\n     ======================================== */\n\n/*\n * The shared `disabledLoadingMixin` treats `[disabled]` and `[loading]` identically: bare,\n * unlayered `opacity: 0.5` plus `pointer-events: none` on every direct child (this component's\n * template root is a single `.composer` div, so that means the whole card). Cascade layers always\n * lose to unlayered rules regardless of source order or specificity, so these overrides have to\n * stay unlayered too, to actually win — see `ore-input`'s `input.css` for the same pattern.\n *\n * `loading` here documents itself as \"blocks further sends... without disabling editing\" (see\n * the `loading` prop's own doc comment) — the send button already disables itself via\n * `composer.canSend`. Inheriting the generic mixin's `[loading]` treatment silently broke that:\n * `pointer-events: none` on `.composer` cascades (it's an inherited property) to the `<textarea>`\n * itself, blocking typing during every in-flight send. `:not([disabled])` keeps a real `disabled`\n * still fully blocking, exactly like every other field.\n */\n:host([loading]:not([disabled])) {\n  opacity: 1;\n}\n\n:host([loading]:not([disabled])) .composer {\n  pointer-events: auto;\n}\n\n:host([disabled]) {\n  opacity: 1;\n}\n\n:host([disabled]) .composer {\n  background: var(--color-contrast-100);\n  border-color: var(--color-contrast-200);\n  box-shadow: none;\n}\n\n:host([disabled]) .field {\n  color: var(--color-contrast-400);\n}\n\n:host([disabled]) .field::placeholder {\n  color: var(--color-contrast-300);\n}\n"],"mappings":""}