/*
  Wortic macOS UI Kit — Composer
  wm-composer — caixa de entrada de mensagem/prompt. Cobre Composer,
  Attachment Composer, Voice Composer.

  Glowup 2026 "Liquid Glass": cápsula flutuante de vidro/branco elevado
  com sombra em camadas, borda interna clara e foco com anel duplo —
  estética de app de AI premium, não formulário web.
*/

@layer components {
  .wm-composer {
    /* ---- knobs locais (light) ---- */
    --wm-composer-bg: var(--wm-material-popover-bg);
    --wm-composer-shadow:
      inset 0 0 0 0.5px rgba(255, 255, 255, 0.4),
      0 0 0 0.5px rgba(0, 0, 0, 0.07),
      0 2px 6px rgba(0, 0, 0, 0.05),
      0 14px 36px -10px rgba(0, 0, 0, 0.16);
    --wm-composer-shadow-raised:
      inset 0 0 0 0.5px rgba(255, 255, 255, 0.45),
      0 0 0 0.5px rgba(0, 0, 0, 0.08),
      0 3px 9px rgba(0, 0, 0, 0.06),
      0 20px 44px -12px rgba(0, 0, 0, 0.2);

    display: flex;
    flex-direction: column;
    gap: var(--wm-space-3);
    padding: var(--wm-space-5) var(--wm-space-5) var(--wm-space-4);
    border-radius: var(--wm-radius-panel);
    background: var(--wm-composer-bg);
    -webkit-backdrop-filter: blur(var(--wm-material-blur-heavy, 40px))
      saturate(var(--wm-material-saturate));
    backdrop-filter: blur(var(--wm-material-blur-heavy, 40px))
      saturate(var(--wm-material-saturate));
    box-shadow: var(--wm-composer-shadow);
    transition:
      box-shadow var(--wm-duration-normal) var(--wm-ease-emphasized),
      transform var(--wm-duration-normal) var(--wm-ease-emphasized);
  }
  .wm-composer:hover {
    box-shadow: var(--wm-composer-shadow-raised);
  }
  .wm-composer:focus-within {
    box-shadow:
      var(--wm-composer-shadow-raised),
      0 0 0 1px var(--wm-accent),
      0 0 0 var(--wm-focus-halo-width) var(--wm-accent-fill);
  }

  .wm-composer__attachments {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wm-space-3);
  }
  .wm-composer__attachment {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-3);
    height: 26px;
    padding-inline: var(--wm-space-4);
    border-radius: var(--wm-radius-pill);
    background: var(--wm-surface-elevated);
    box-shadow:
      0 0 0 0.5px var(--wm-separator),
      0 1px 2px rgba(0, 0, 0, 0.05);
    font-size: var(--wm-font-size-caption);
    font-weight: var(--wm-font-weight-medium);
    color: var(--wm-label-secondary);
  }
  .wm-composer__attachment .wm-icon:first-child {
    color: var(--wm-accent);
  }
  .wm-composer__attachment button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    color: var(--wm-label-tertiary);
    transition:
      background var(--wm-duration-fast) var(--wm-ease-standard),
      color var(--wm-duration-fast) var(--wm-ease-standard);
  }
  .wm-composer__attachment button:hover {
    background: var(--wm-fill-primary);
    color: var(--wm-label-primary);
  }

  .wm-composer__input {
    width: 100%;
    min-height: 22px;
    max-height: 160px;
    border: none;
    outline: none;
    resize: none;
    background: transparent;
    font-family: var(--wm-font-family);
    font-size: var(--wm-font-size-body);
    color: var(--wm-label-primary);
    line-height: var(--wm-line-height-relaxed);
    scrollbar-width: thin;
    scrollbar-color: var(--wm-scrollbar-thumb) transparent;
  }
  .wm-composer__input::placeholder {
    color: var(--wm-label-tertiary);
  }
  .wm-composer__input::-webkit-scrollbar {
    width: 6px;
  }
  .wm-composer__input::-webkit-scrollbar-thumb {
    border-radius: var(--wm-radius-pill);
    background: var(--wm-scrollbar-thumb);
  }

  .wm-composer__toolbar {
    display: flex;
    align-items: center;
    gap: var(--wm-space-2);
  }

  .wm-composer__send {
    margin-inline-start: auto;
  }

  /* Enviando: o texto continua visível (prova do que está indo), mas o
     campo e os botões ficam com o atributo disabled de verdade. A cápsula
     para de "subir" no hover — superfície ocupada não convida a clicar. */
  .wm-composer--sending,
  .wm-composer--sending:hover {
    box-shadow: var(--wm-composer-shadow);
  }
  .wm-composer__input:disabled {
    color: var(--wm-label-tertiary);
    cursor: not-allowed;
  }
  .wm-composer__status {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-3);
    margin-inline-start: auto;
    font-size: var(--wm-font-size-caption);
    color: var(--wm-label-tertiary);
  }
  /* Quando o status está na barra, é ELE quem empurra para a direita;
     o botão de enviar volta a respeitar só o gap da toolbar. */
  .wm-composer__status ~ .wm-composer__send {
    margin-inline-start: 0;
  }

  /* Voice composer state */
  .wm-composer--recording {
    flex-direction: row;
    align-items: center;
    box-shadow:
      var(--wm-composer-shadow),
      0 0 0 1px var(--wm-error),
      0 0 0 var(--wm-focus-halo-width) var(--wm-error-fill),
      0 8px 24px -8px color-mix(in srgb, var(--wm-error) 30%, transparent);
  }
  .wm-composer--recording:focus-within {
    box-shadow:
      var(--wm-composer-shadow-raised),
      0 0 0 1px var(--wm-error),
      0 0 0 var(--wm-focus-halo-width) var(--wm-error-fill);
  }
  .wm-composer__waveform {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 22px;
  }
  .wm-composer__waveform span {
    width: 2.5px;
    border-radius: var(--wm-radius-pill);
    background: linear-gradient(
      180deg,
      var(--wm-error) 0%,
      color-mix(in srgb, var(--wm-error) 60%, transparent) 100%
    );
    animation: wm-waveform var(--wm-duration-waveform) var(--wm-ease-standard) infinite alternate;
  }
  .wm-composer__waveform span:nth-child(odd) {
    animation-delay: 0.15s;
  }
  @keyframes wm-waveform {
    from {
      height: 30%;
    }
    to {
      height: 100%;
    }
  }
  .wm-composer__timer {
    margin-inline-start: var(--wm-space-4);
    font-size: var(--wm-font-size-caption);
    font-variant-numeric: tabular-nums;
    color: var(--wm-error);
  }
  .wm-composer__stop {
    margin-inline-start: auto;
  }

  /* ---- Dark mode: vidro escuro, sombras mais profundas ---- */
  :root[data-theme="dark"] .wm-composer {
    --wm-composer-bg: var(--wm-material-popover-bg);
    --wm-composer-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
      0 0 0 0.5px rgba(0, 0, 0, 0.45),
      0 3px 9px rgba(0, 0, 0, 0.32),
      0 16px 40px -10px rgba(0, 0, 0, 0.55);
    --wm-composer-shadow-raised:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.12),
      0 0 0 0.5px rgba(0, 0, 0, 0.5),
      0 4px 12px rgba(0, 0, 0, 0.36),
      0 22px 52px -12px rgba(0, 0, 0, 0.62);
  }
  :root[data-theme="dark"] .wm-composer__attachment {
    box-shadow:
      inset 0 0.5px 0 rgba(255, 255, 255, 0.08),
      0 0 0 0.5px var(--wm-separator),
      0 1px 2px rgba(0, 0, 0, 0.3);
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wm-composer {
      --wm-composer-bg: var(--wm-material-popover-bg);
      --wm-composer-shadow:
        inset 0 0.5px 0 rgba(255, 255, 255, 0.1),
        0 0 0 0.5px rgba(0, 0, 0, 0.45),
        0 3px 9px rgba(0, 0, 0, 0.32),
        0 16px 40px -10px rgba(0, 0, 0, 0.55);
      --wm-composer-shadow-raised:
        inset 0 0.5px 0 rgba(255, 255, 255, 0.12),
        0 0 0 0.5px rgba(0, 0, 0, 0.5),
        0 4px 12px rgba(0, 0, 0, 0.36),
        0 22px 52px -12px rgba(0, 0, 0, 0.62);
    }
    :root:not([data-theme="light"]) .wm-composer__attachment {
      box-shadow:
        inset 0 0.5px 0 rgba(255, 255, 255, 0.08),
        0 0 0 0.5px var(--wm-separator),
        0 1px 2px rgba(0, 0, 0, 0.3);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .wm-composer,
    .wm-composer__attachment button {
      transition: none;
    }
    .wm-composer__waveform span {
      animation: none;
      height: 60%;
    }
  }

  /* Toda classe que define display precisa do par [hidden] — sem isto,
     esconder um pedaço via atributo hidden perde para o display da classe. */
  .wm-composer[hidden],
  .wm-composer__attachments[hidden],
  .wm-composer__attachment[hidden],
  .wm-composer__toolbar[hidden],
  .wm-composer__waveform[hidden],
  .wm-composer__status[hidden],
  .wm-composer__timer[hidden] {
    display: none;
  }
}