@layer components {
  /* ================================================================ */
  /* SIDEBAR                                                          */
  /* ================================================================ */
  .sidebar { display: flex; flex-direction: column; background: var(--sb-bg); overflow: hidden; }

  .sb-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-3) var(--s-4); flex-shrink: 0;
  }
  .sb-brand { font-size: var(--fs-sm); font-weight: 600; color: var(--sb-text); letter-spacing: -0.01em; }
  .sb-new {
    display: flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem; border-radius: var(--r);
    background: var(--sb-text); color: var(--sb-bg);
    font-size: var(--fs-lg); line-height: 1; flex-shrink: 0;
    transition: opacity .12s ease;
  }
  .sb-new:hover { opacity: .85; }

  .sb-label {
    padding: var(--s-3) var(--s-4) var(--s-1);
    font-size: 0.6875rem; color: var(--sb-muted); font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.06em;
  }

  .sb-rooms { flex: 1; overflow-y: auto; padding: 0 var(--s-2); }
  .sb-room {
    display: block; padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm); font-size: var(--fs-sm);
    color: var(--sb-muted); margin-bottom: 1px;
    transition: background .12s, color .12s;
  }
  .sb-room:hover { background: var(--sb-hover); color: var(--sb-text); }
  .sb-room--active { background: var(--sb-active); color: var(--sb-text); font-weight: 500; }

  .sb-nav {
    display: flex; flex-direction: column; gap: 1px;
    padding: var(--s-2); border-top: 1px solid var(--sb-border); flex-shrink: 0;
  }
  .sb-link {
    display: block; padding: var(--s-2) var(--s-3);
    border-radius: var(--r-sm); font-size: var(--fs-sm);
    color: var(--sb-muted); transition: background .12s, color .12s;
  }
  .sb-link:hover { background: var(--sb-hover); color: var(--sb-text); }
  .sb-link--active { background: var(--sb-active); color: var(--sb-text); font-weight: 500; }

  .sb-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--s-3) var(--s-4); border-top: 1px solid var(--sb-border); flex-shrink: 0;
  }
  .sb-user { font-size: var(--fs-xs); color: var(--sb-muted); }
  .sb-logout {
    font-size: var(--fs-xs); color: #f87171; padding: var(--s-1) var(--s-2);
    border-radius: var(--r-sm); transition: background .12s;
  }
  .sb-logout:hover { background: var(--sb-hover); }

  /* ================================================================ */
  /* PAGE HEADER                                                      */
  /* ================================================================ */
  .page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-4); margin-bottom: var(--s-6);
  }
  .page-head h1 { font-size: var(--fs-xl); font-weight: 600; }
  .page-head__actions { display: flex; gap: var(--s-2); flex-shrink: 0; }

  /* ================================================================ */
  /* BUTTONS — clear, tappable, real buttons                          */
  /* ================================================================ */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
    height: var(--ctrl); padding: 0 var(--s-4);
    border-radius: var(--r); border: 1px solid var(--border-strong);
    background: var(--surface); color: var(--text);
    font-size: var(--fs-sm); font-weight: 500; white-space: nowrap;
    transition: all .15s ease; user-select: none;
  }
  .btn:hover { background: var(--surface-2); border-color: var(--muted); }
  .btn:active { transform: scale(.97); }

  .btn--primary {
    background: var(--primary); color: var(--on-primary); border-color: var(--primary);
    box-shadow: var(--shadow-primary);
  }
  .btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }

  .btn--danger { color: var(--danger); border-color: var(--border); }
  .btn--danger:hover { background: var(--danger-bg); border-color: var(--danger); }

  .btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
  .btn--ghost:hover { background: var(--surface-2); color: var(--text); }

  .btn--sm { height: var(--ctrl-sm); padding: 0 var(--s-3); font-size: var(--fs-xs); border-radius: var(--r-sm); }
  .btn--lg { height: var(--ctrl-lg); font-size: var(--fs-base); }
  .btn--block { width: 100%; }

  /* ================================================================ */
  /* FORMS                                                            */
  /* ================================================================ */
  .field { display: flex; flex-direction: column; gap: var(--s-2); }
  .field__row { display: flex; align-items: center; gap: var(--s-2); }
  .field__label { font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); }

  .input, .textarea, .select {
    width: 100%; padding: 0.5625rem var(--s-3);
    border-radius: var(--r); border: 1px solid var(--border-strong);
    background: var(--surface); font-size: var(--fs-sm);
    transition: border-color .15s, box-shadow .15s;
  }
  .textarea { min-height: 6rem; resize: vertical; line-height: 1.5; }
  .textarea--tall { min-height: 12rem; }
  .input::placeholder, .textarea::placeholder { color: var(--placeholder); }
  .input:focus, .textarea:focus, .select:focus {
    border-color: var(--primary); box-shadow: var(--ring);
  }
  .select {
    cursor: pointer; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.75rem center; padding-right: 2.25rem;
  }

  .check {
    display: flex; align-items: center; gap: var(--s-2);
    font-size: var(--fs-sm); color: var(--text-2); cursor: pointer;
  }
  .check input { width: 1.0625rem; height: 1.0625rem; accent-color: var(--primary); cursor: pointer; }

  /* ================================================================ */
  /* CARDS                                                            */
  /* ================================================================ */
  .card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--s-5);
    display: flex; flex-direction: column; gap: var(--s-3);
  }
  .card--hover { transition: box-shadow .15s, border-color .15s; }
  .card--hover:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); }

  .card--pick { cursor: pointer; user-select: none; position: relative; transition: all .15s; }
  .card--pick:hover { border-color: var(--muted); }
  .card--pick input { position: absolute; opacity: 0; }
  .card--pick:has(input:checked) {
    border-color: var(--primary); background: var(--primary-bg);
    box-shadow: 0 0 0 1px var(--primary);
  }
  .card--pick:has(input:checked) .card__title { color: var(--primary); }

  .card__title { font-size: var(--fs-base); font-weight: 600; }
  .card__meta { font-size: var(--fs-xs); color: var(--muted); display: flex; gap: var(--s-3); flex-wrap: wrap; }

  /* ================================================================ */
  /* BADGES & TAGS                                                    */
  /* ================================================================ */
  .badge {
    display: inline-flex; align-items: center; gap: var(--s-1);
    padding: 0.125rem var(--s-2); border-radius: var(--r-full);
    font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em;
  }
  .badge--primary { background: var(--primary-bg); color: var(--primary); }
  .badge--success { background: var(--success-bg); color: var(--success); }
  .badge--warning { background: var(--warning-bg); color: var(--warning); }
  .badge--danger  { background: var(--danger-bg);  color: var(--danger); }

  .tag {
    display: inline-block; padding: 0.1875rem 0.5rem;
    border-radius: var(--r-sm); font-size: 0.6875rem; font-weight: 500;
    background: var(--surface-2); color: var(--text-2);
  }
  .tag--mono { font-family: var(--font-mono); font-size: 0.625rem; }

  .mode-tag {
    display: inline-flex; padding: 0.1875rem var(--s-2); border-radius: var(--r-full);
    font-size: 0.6875rem; font-weight: 600;
  }
  .mode-tag--parallel     { background: var(--c-persona-bg); color: var(--c-persona); }
  .mode-tag--sequential   { background: var(--c-user-bg);    color: var(--c-user); }
  .mode-tag--multi_sample { background: var(--warning-bg);   color: var(--warning); }
  .mode-tag--persona_debate { background: var(--c-external-bg); color: var(--c-external); }
  .mode-tag--pro_con_debate  { background: var(--danger-bg);  color: var(--danger); }
  .mode-tag--free          { background: var(--success-bg);  color: var(--success); }

  /* ================================================================ */
  /* FLASH                                                            */
  /* ================================================================ */
  .flash { padding: var(--s-3) var(--s-8); flex-shrink: 0; display: flex; flex-direction: column; gap: var(--s-2); }
  .flash__item {
    padding: var(--s-3) var(--s-4); border-radius: var(--r);
    font-size: var(--fs-sm); font-weight: 500;
  }
  .flash__item--notice { background: var(--success-bg); color: #15803d; border: 1px solid rgb(34 197 94 / 0.2); }
  .flash__item--alert  { background: var(--danger-bg);  color: #b91c1c; border: 1px solid rgb(239 68 68 / 0.2); }

  /* ================================================================ */
  /* AUTH                                                             */
  /* ================================================================ */
  .auth {
    display: flex; align-items: center; justify-content: center;
    min-height: 100dvh; background: var(--bg);
  }
  .auth__card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
    padding: var(--s-10); max-width: 24rem; width: 100%;
    display: flex; flex-direction: column; gap: var(--s-5);
  }
  .auth__title { text-align: center; font-size: var(--fs-xl); font-weight: 700; color: var(--primary); }
  .auth__link { color: var(--primary); font-weight: 500; }

  /* ================================================================ */
  /* CHAT                                                             */
  /* ================================================================ */
  .chat { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

  .chat-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s-3); padding: var(--s-3) var(--s-5);
    background: var(--surface); border-bottom: 1px solid var(--border);
    flex-shrink: 0;
  }
  .chat-bar__meta { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; min-width: 0; }
  .chat-bar__title { font-size: var(--fs-sm); font-weight: 600; }
  .chat-bar__btns { display: flex; gap: var(--s-1); flex-shrink: 0; align-items: center; }

  .chat-strip {
    display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-2) var(--s-5); background: var(--surface);
    border-bottom: 1px solid var(--border); flex-shrink: 0; flex-wrap: wrap;
  }
  .chat-strip__label { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }

  .chat-body { flex: 1; overflow-y: auto; scroll-behavior: smooth; padding: var(--s-5) 0; }
  .chat-body__inner {
    max-width: var(--content-w); margin: 0 auto; padding: 0 var(--s-4);
    display: flex; flex-direction: column; gap: var(--s-1);
  }

  .chat-foot { flex-shrink: 0; padding: var(--s-3) var(--s-4) var(--s-5); background: var(--bg); }
  .chat-foot__inner { max-width: var(--content-w); margin: 0 auto; }

  /* ================================================================ */
  /* MESSAGES                                                         */
  /* ================================================================ */
  .msg { padding: var(--s-3) var(--s-4); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: var(--s-1); }
  .msg__head { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--muted); }
  .msg__name { font-weight: 600; font-size: var(--fs-sm); }
  .msg__body { font-size: var(--fs-base); line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
  .msg__info { font-size: var(--fs-xs); color: var(--muted); font-family: var(--font-mono); margin-top: var(--s-1); }
  .msg__branch {
    margin-left: auto;
    font-size: var(--fs-xs);
    color: var(--muted);
    opacity: 0;
    transition: opacity .12s;
    text-decoration: none;
    padding: 0 var(--s-1);
  }
  .msg:hover .msg__branch { opacity: 1; }
  .msg__branch:hover { color: var(--primary); }

  .msg--user     { background: var(--c-user-bg); }
  .msg--user .msg__name { color: var(--c-user); }
  .msg--persona  { background: var(--surface); border: 1px solid var(--border); }
  .msg--persona .msg__name { color: var(--c-persona); }
  .msg--external { background: var(--c-external-bg); }
  .msg--external .msg__name { color: var(--c-external); }
  .msg--system {
    align-self: center; background: var(--surface-2); color: var(--muted);
    padding: var(--s-2) var(--s-4); border-radius: var(--r-full); max-width: 90%; text-align: center;
  }
  .msg--system .msg__body { font-size: var(--fs-sm); color: var(--muted); }

  /* ================================================================ */
  /* COMPOSER                                                         */
  /* ================================================================ */
  .composer {
    display: flex; align-items: flex-end; gap: var(--s-2);
    padding: var(--s-2); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s;
  }
  .composer:focus-within { border-color: var(--primary); box-shadow: var(--ring), var(--shadow-sm); }
  .composer__input {
    flex: 1; padding: var(--s-2); border: none; background: transparent;
    font-size: var(--fs-base); resize: none; min-height: 2.75rem; max-height: 12rem;
    outline: none; line-height: 1.5;
  }
  .composer__input::placeholder { color: var(--placeholder); }
  .composer__send {
    flex-shrink: 0; height: var(--ctrl); padding: 0 var(--s-5);
    border-radius: var(--r); background: var(--primary); color: var(--on-primary);
    font-size: var(--fs-sm); font-weight: 600; box-shadow: var(--shadow-primary);
    transition: all .15s;
  }
  .composer__send:hover { background: var(--primary-hover); transform: translateY(-1px); }
  .composer__send:active { transform: scale(.97); }

  /* ================================================================ */
  /* EMPTY STATE                                                      */
  /* ================================================================ */
  .empty { text-align: center; padding: var(--s-12) var(--s-4); color: var(--muted); }
  .empty__title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--s-2); color: var(--text-2); }

  /* ================================================================ */
  /* TABLE                                                            */
  /* ================================================================ */
  .table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
  .table th {
    text-align: start; padding: var(--s-3); border-bottom: 2px solid var(--border-strong);
    font-size: var(--fs-xs); font-weight: 600; color: var(--text-2);
    text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap;
  }
  .table td { padding: var(--s-3); border-bottom: 1px solid var(--border); }
  .table tbody tr:hover { background: var(--surface-2); }

  /* ================================================================ */
  /* STAT                                                             */
  /* ================================================================ */
  .stat {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--r-lg); padding: var(--s-5);
    display: flex; flex-direction: column; gap: var(--s-1);
  }
  .stat__label { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
  .stat__value { font-size: var(--fs-2xl); font-weight: 700; letter-spacing: -0.02em; }

  /* ================================================================ */
  /* SECTION TITLE                                                    */
  /* ================================================================ */
  .section-title { font-size: var(--fs-lg); font-weight: 600; margin-bottom: var(--s-4); }

  /* ================================================================ */
  /* PERSONA SELECTOR                                                 */
  /* ================================================================ */
  .ps-btn {
    border: 1px solid var(--border) !important;
    background: var(--surface) !important;
    color: var(--text-2) !important;
    box-shadow: none !important;
    transition: all .12s ease;
  }
  .ps-btn:hover { border-color: var(--primary) !important; }
  .ps-btn--active {
    background: var(--primary) !important;
    color: var(--on-primary) !important;
    border-color: var(--primary) !important;
    box-shadow: var(--shadow-primary) !important;
  }
}