@layer components {
  .chat__composer {
    padding: 6px 8px;
    background-color: var(--color-canvas);
    border-top: var(--border);

    @media (min-width: 768px) {
      padding: var(--block-space-half);
    }
  }

  .chat__composer-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .chat__composer-input {
    flex: 1;
    min-width: 0;
    position: relative;
    border: 1px solid var(--color-ink-lighter);
    border-radius: 20px;
    background-color: var(--color-ink-lightest);
    transition: background-color 0.15s ease, border-color 0.15s ease;

    &:has(.chat__shared-toggle) .chat__composer-textarea {
      padding-inline-end: 40px;
    }

    &:focus-within {
      background-color: var(--color-canvas);
      border-color: var(--color-link);
    }
  }

  .chat__composer-textarea {
    resize: none;
    min-height: 36px;
    border: none;
    background: transparent;
    padding: 7px 14px;
    flex: 1;
    min-width: 0;
    width: 100%;
    font-size: var(--text-normal);
    scrollbar-width: none;

    &:focus {
      background: transparent;
      box-shadow: none;
      outline: none;
      border: none;
    }

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .chat__shared-toggle {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 6px;
    transform: translateY(-50%);
  }

  .chat__shared-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--color-ink-medium);
    cursor: pointer;
    font-size: 14px;
    transition: color 0.15s ease, background-color 0.15s ease;

    &:hover {
      background-color: oklch(var(--lch-black) / 5%);
      color: var(--color-ink);
    }

    &.active {
      color: var(--color-link);
    }
  }

  .chat__attach-toggle {
    padding: 0.375rem 0.35rem;
  }

  .chat__composer-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .chat__mindhub-notice {
    font-size: var(--text-small);
    text-align: center;
    padding: 0.25rem;
    margin-block-start: var(--block-space-half);
    background: oklch(var(--lch-yellow-lightest));
    border: 1px solid oklch(var(--lch-yellow-lighter));
    border-radius: var(--radius);
    color: oklch(var(--lch-yellow-darkest));
  }
}