@use "../../styles/tokens" as t;
@use "../../styles/mixins" as m;

@include m.scoped {
  .page { min-width: 0; }
  .page, .page * { box-sizing: border-box; }
  .actions, .cardHeader, .footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .divider { height: 3px; border-radius: t.$radius-pill; background: t.$surface; box-shadow: t.$shadow-track; }
  .layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
  .workspace { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; min-width: 0; }
  .card { padding: 24px; min-width: 0; border: 1px solid t.$border; border-radius: t.$radius-2xl; background: t.$surface; box-shadow: t.$shadow-card; }
  .card h2, .card h3 { margin: 0; color: t.$text; @include m.text(16, t.$weight-bold); }
  .card p { color: t.$text-secondary; font-size: 13px; line-height: 1.6; }
  .eyebrow { @include m.eyebrow; color: t.$text-soft; }
  .templateList {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    padding: 16px 10px;
    border: 1px solid t.$border;
    border-radius: t.$radius-2xl;
    background: t.$surface;
    box-shadow: t.$shadow-card;
  }
  .templateList > span { padding: 0 10px; }
  .templateGroup { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .templateGroup + .templateGroup { padding-top: 16px; border-top: 1px solid t.$border; }
  .groupHeading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 8px;
    padding: 0 10px;
    color: t.$text;
    @include m.text(13, t.$weight-bold);
  }
  .groupHeading span { min-width: 0; overflow-wrap: anywhere; }
  .groupHeading .groupCount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border: 1px solid t.$border;
    border-radius: t.$radius-pill;
    background: t.$surface-subtle;
    color: t.$text-soft;
    @include m.text(11, t.$weight-semibold);
  }
  .templateList .templateItem {
    @include m.button-reset;
    @include m.wp-reset-button;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 10px;
    border: 1px solid transparent;
    border-radius: t.$radius-lg;
    color: t.$text-secondary;
    @include m.text(12, t.$weight-medium);
    text-align: left;
    transition: background t.$duration t.$ease, color t.$duration t.$ease, border-color t.$duration t.$ease;
    &:hover:not(:disabled) { background: t.$hover-surface; border-color: t.$hover-border; color: t.$text; }
    &.active { background: t.$primary-surface; border-color: t.$primary-border; color: t.$primary-strong; font-weight: t.$weight-semibold; }
    &:focus-visible { @include m.focus-ring; }
    &:disabled { cursor: default; opacity: .6; }
  }
  .templateIcon { flex: 0 0 16px; width: 16px; height: 16px; color: t.$text-soft; }
  .templateName { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .templateArrow { flex: 0 0 14px; width: 14px; height: 14px; color: t.$text-placeholder; }
  .active .templateIcon, .active .templateArrow { color: t.$primary; }
  .unsavedBadge {
    flex-shrink: 0;
    padding: 2px 5px;
    border: 1px solid t.$warning-border;
    border-radius: t.$radius-pill;
    background: t.$warning-surface;
    color: t.$warning-text;
    @include m.text(11, t.$weight-medium);
  }
  .modes button { border: 1px solid transparent; border-radius: t.$radius-lg; background: transparent; color: t.$text-secondary; padding: 12px; text-align: left; cursor: pointer; font: inherit; font-size: 13px; }
  .modes .active { color: t.$primary; background: t.$surface; border-color: t.$border; box-shadow: t.$shadow-raised-sm; }
  button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible { @include m.focus-ring-raised; }
  button:disabled { cursor: default; opacity: .6; }
  .field { display: flex; flex-direction: column; gap: 10px; margin: 24px 0; color: t.$text; font-size: 13px; font-weight: 600; }
  .field input, .editor textarea { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid t.$border-field; border-radius: t.$radius-lg; background: t.$surface; color: t.$text; box-shadow: t.$shadow-field; font: inherit; }
  .modes { display: flex; padding: 3px; border-radius: t.$radius-lg; background: t.$surface-subtle; }
  .modes button { padding: 7px 12px; }
  .editor { margin-top: 16px; }
  .editor textarea { font: 12px/1.7 monospace; resize: vertical; }
  .editor :global(.ql-toolbar) { border-color: t.$border; border-radius: 12px 12px 0 0; }
  .editor :global(.ql-container) { height: auto; border-color: t.$border; border-radius: 0 0 12px 12px; font-family: inherit; font-size: 14px; }
  .editor :global(.ql-editor) { min-height: 320px; overflow-wrap: anywhere; }
  .parameters { margin-top: 24px; padding-top: 20px; border-top: 1px solid t.$border; }
  .parameters summary { cursor: pointer; font-size: 13px; font-weight: 600; color: t.$text; }
  .parameters dl { margin: 12px 0 0; }
  .parameters dl > div { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 0; border-top: 1px solid t.$border; font-size: 12px; }
  .parameters dt { color: t.$primary; overflow-wrap: anywhere; }
  .parameters dd { margin: 0; color: t.$text-secondary; }
  .footer { justify-content: flex-end; margin-top: 24px; }
  .subject { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; margin-top: 20px; border-top: 1px solid t.$border; font-size: 13px; overflow-wrap: anywhere; }
  .subject span { color: t.$text-soft; }
  .subject strong { color: t.$text; }
  .preview iframe { width: 100%; height: 480px; background: #fff; border: 1px solid t.$border; border-radius: t.$radius-lg; }
  .message { display: flex; align-items: center; gap: 16px; padding: 14px 18px; margin: 0; border: 1px solid t.$border; border-radius: t.$radius-lg; color: t.$text-secondary; font-size: 13px; }
  @media (max-width: 735px) { .layout { grid-template-columns: 1fr; } .card { padding: 20px; } }
}