/* =============================================================================
   COMPONENT: composer — the Care Notebook composer sheet + optional mobile
   thumb-zone bar (REQ-0061). Desktop: Post update lives in the notebook card.
   ========================================================================== */
@layer components {
  .composer-host { display: contents; }

  /* Mobile thumb-zone Post update sits directly under the notebook section;
     desktop uses .notebook__post inside the feed card (prototype). */
  .composer {
    display: flex;
    margin-block-start: var(--space-sm);
    padding: var(--space-sm) max(var(--space-md), var(--safe-left));
    padding-block-end: max(var(--space-sm), var(--safe-bottom));
    background: var(--surface-sunken);
    border-block-start: var(--border-width) solid var(--color-border);
  }

  .composer__field,
  .notebook__post {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2xs);
    min-inline-size: 0;
    min-block-size: var(--touch-target);
    padding-inline: var(--space-md);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    background: var(--surface);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    cursor: pointer;
    white-space: nowrap;

    &:hover { border-color: var(--accent); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  }

  .composer-sheet .sheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-block-end: var(--space-xs);
  }

  .sheet__title {
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
  }

  .sheet__close {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--touch-target);
    block-size: var(--touch-target);
    min-inline-size: var(--touch-target);
    min-block-size: var(--touch-target);
    padding: 0;
    color: var(--color-text-muted);
    background: var(--surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: 50%;
    aspect-ratio: 1;
    cursor: pointer;
    text-decoration: none;

    &:hover { border-color: var(--color-border-strong); color: var(--color-text); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  }

  .composer-types { flex-wrap: nowrap; }

  .composer-type {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xs);
    min-block-size: var(--touch-target);
    padding-inline: var(--space-xs);
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    cursor: pointer;

    &:hover { border-color: var(--color-border-strong); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    &.is-selected { background: var(--accent-tint); color: var(--accent); border-color: var(--accent); }
    &.is-locked { cursor: default; opacity: 1; }
  }

  .composer-body-wrap { position: relative; }
  .composer-body-wrap textarea { padding-inline-end: calc(var(--space-xl) + var(--space-2xs)); }

  .composer-mic {
    position: absolute;
    inset-block-start: var(--space-xs);
    inset-inline-end: var(--space-xs);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.875rem;
    block-size: 1.875rem;
    padding: 0;
    color: var(--color-text-muted);
    background: var(--surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;

    &:hover { border-color: var(--color-border-strong); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    &.is-listening { color: var(--status-danger-fg); background: var(--status-danger-bg); border-color: var(--status-danger-fg); }
    &:disabled { opacity: 0.5; cursor: not-allowed; }
  }

  .composer-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
  .composer-thumbs:empty { display: none; }

  .composer-thumb-item { position: relative; inline-size: 4rem; block-size: 4rem; }

  .composer-thumb {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border-radius: var(--radius-md);
  }

  .composer-thumb-remove {
    position: absolute;
    inset-block-start: calc(var(--space-2xs) * -1);
    inset-inline-end: calc(var(--space-2xs) * -1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    line-height: 1;
    color: var(--color-text);
    background: var(--surface);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    cursor: pointer;

    &::before {
      content: "";
      position: absolute;
      inset: calc((1.5rem - var(--touch-target)) / 2);
    }

    &:hover { background: var(--surface-sunken); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  }

  /* Camera square + accent-outline submit (prototype footer row). */
  .composer-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-start: var(--space-xs);
  }

  .composer-camera {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    padding: 0;
    color: var(--color-text);
    background: var(--surface);
    border: var(--border-width) solid var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;

    &:hover { border-color: var(--accent); }
    &:focus-visible { outline: none; box-shadow: var(--focus-ring); }
  }

  .composer-camera--spacer {
    visibility: hidden;
    pointer-events: none;
  }

  .composer-submit {
    flex: 1;
    justify-content: center;
    border-width: 2px;
    border-color: var(--accent);
    color: var(--accent);
    background: var(--surface);

    &:hover { background: var(--accent-tint); }
  }

  @media (min-width: 48rem) {
    .composer { display: none; }

    .composer-sheet {
      max-inline-size: 28rem;
    }
  }
}