/**
 * Matteen AI — application shell
 *
 * Token set derived from the HumanCharts brand as it exists in
 * astro-engine.css, human-design.css and hdr-member-library.css:
 * miami/sunrise/rolex/matt, Bebas Neue + DM Sans + DM Serif Display.
 * See Phase 0 audit §M for the derivation and the resolved conflict with
 * the legacy #225F75 / #e67e22 palette.
 *
 * Everything is namespaced --ma-* and scoped under .matteen-ai so it cannot
 * collide with --ae-* (WP Astrology Engine) or --hd-* (HDR) when several
 * plugins render on one page.
 */

/* ══════════════════════════════════════════════════════════════
   TOKENS
══════════════════════════════════════════════════════════════ */

.matteen-ai {
    /* Brand */
    --ma-miami:   #00a2c8;
    --ma-sunrise: #f6b40e;
    --ma-rolex:   #7184a6;
    --ma-matt:    #5698a4;

    /* Surfaces — dark by default */
    --ma-bg:          #0d1117;
    --ma-bg-sidebar:  #0b0f16;
    --ma-surface:     #111926;
    --ma-surface-alt: #0d1320;
    --ma-border:      rgba(148, 148, 148, 0.15);

    /* Text */
    --ma-text:       #e8edf5;
    --ma-text-body:  #e5e7eb;
    --ma-text-muted: #9aa6ba;

    /* States */
    --ma-accent:       #00a2c8;
    --ma-accent-hover: #00b8e0;
    /* Label colour for anything sitting on the brand gradient. White is
       what the existing plugins use, but it only reaches 3.0:1 on miami —
       below the 4.5:1 needed for a 16px label. Dark ink keeps the gradient
       exactly on-brand and reaches 6.3:1. */
    --ma-on-accent:    #0d1117;
    --ma-accent-2:     #f6b40e;
    --ma-error:        #ef4444;
    --ma-success:      #4ade80;

    /* Type */
    --ma-font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
    --ma-font-body:    'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ma-font-accent:  'DM Serif Display', Georgia, serif;
    --ma-text-base:    15px;
    --ma-leading:      1.6;

    /* Space — 4px scale */
    --ma-s1: 4px;
    --ma-s2: 8px;
    --ma-s3: 12px;
    --ma-s4: 16px;
    --ma-s5: 24px;
    --ma-s6: 32px;
    --ma-s7: 48px;
    --ma-s8: 64px;

    /* Shape */
    --ma-radius:    12px;
    --ma-radius-sm: 6px;
    --ma-radius-lg: 16px;
    --ma-shadow:    0 2px 24px rgba(0, 0, 0, 0.4);
    --ma-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5);
    --ma-ease:       cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ma-transition: 0.2s var(--ma-ease);

    /* Layout */
    --ma-sidebar-w:    280px;
    --ma-icon-size:    40px; /* sprite icons render at this fixed size */
    --ma-content-max:  760px;
    --ma-detail-max:   1040px; /* detail tables need more room than prose */
    --ma-app-height:   720px; /* only used when height="" is passed */
    --ma-safe-bottom:  env(safe-area-inset-bottom, 0px);
}

/* ══════════════════════════════════════════════════════════════
   LIGHT THEME

   Same token names, light values — everything else in this file
   reads --ma-* custom properties rather than hard-coded colours, so
   overriding the tokens here is the whole theme; no component rules
   need to know which theme is active. Brand tokens (miami/sunrise/
   rolex/matt) and --ma-on-accent are unchanged: the gradient they
   sit on doesn't change between themes, so the contrast reasoning
   that chose dark ink for --ma-on-accent still applies here.
══════════════════════════════════════════════════════════════ */

.matteen-ai[data-theme="light"] {
    --ma-bg:          #ffffff;
    --ma-bg-sidebar:  #f6f7f9;
    --ma-surface:     #ffffff;
    --ma-surface-alt: #f1f3f6;
    --ma-border:      rgba(15, 23, 42, 0.12);

    --ma-text:       #0f172a;
    --ma-text-body:  #1f2937;
    --ma-text-muted: #64748b;

    --ma-accent-hover: #0089ab;
    --ma-shadow:    0 2px 24px rgba(15, 23, 42, 0.08);
    --ma-shadow-lg: 0 16px 48px rgba(15, 23, 42, 0.12);
}

/* ══════════════════════════════════════════════════════════════
   SCOPED RESET

   Targeted, not `all: initial`. The goal is to stop an opinionated
   theme restyling the app, without severing inheritance for font
   rendering and without resetting properties we then have to set
   back one by one.
══════════════════════════════════════════════════════════════ */

.matteen-ai,
.matteen-ai *,
.matteen-ai *::before,
.matteen-ai *::after {
    box-sizing: border-box;
}

.matteen-ai {
    font-family: var(--ma-font-body);
    font-size: var(--ma-text-base);
    font-weight: 400;
    line-height: var(--ma-leading);
    color: var(--ma-text-body);
    background: var(--ma-bg);
    border-radius: var(--ma-radius);
    overflow: hidden;
    isolation: isolate;
    text-align: left;
}

.matteen-ai h1,
.matteen-ai h2,
.matteen-ai p,
.matteen-ai ul,
.matteen-ai li {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    color: inherit;
    font-family: inherit;
    letter-spacing: normal;
    text-transform: none;
}

.matteen-ai button,
.matteen-ai textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    -webkit-appearance: none;
    appearance: none;
}

.matteen-ai button {
    cursor: pointer;
    text-align: left;
}

/* Appearance only — deliberately NO width or height here.
   `.matteen-ai svg` (0,1,1) outranks every per-icon class like
   `.ma-btn__icon` (0,1,0), so setting 100% here silently overrode every
   icon size in the app. The nav icons escaped it only because their
   flex-basis happened to fix their width; the New chat plus had no flex
   basis, so it stretched to fill the button. Sizes now live on the
   components, and the two places that genuinely want a filling icon ask
   for it explicitly. */
.matteen-ai svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Icon buttons are a fixed square with padding; the glyph fills what's
   left. */
.ma-icon-btn svg {
    width: 100%;
    height: 100%;
}

.matteen-ai .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Keyboard focus is always visible — never removed, only restyled. */
.matteen-ai :focus-visible {
    outline: 2px solid var(--ma-accent-hover);
    outline-offset: 2px;
    border-radius: var(--ma-radius-sm);
}

/* ══════════════════════════════════════════════════════════════
   APP FRAME
══════════════════════════════════════════════════════════════ */

.ma-app {
    display: grid;
    grid-template-columns: var(--ma-sidebar-w) 1fr;
    height: var(--ma-app-height);
    position: relative;
}

.matteen-ai--viewport .ma-app {
    height: 100vh;
    height: 100dvh;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR
══════════════════════════════════════════════════════════════ */

/* The whole panel scrolls as one column. Previously only Recents did,
   which meant that on a short viewport the nav itself could be cut off
   with no way to reach it. */
.ma-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--ma-s4);
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--ma-s5) var(--ma-s4) var(--ma-s4);
    background: var(--ma-bg-sidebar);
    border-right: 1px solid var(--ma-border);
}

.ma-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ma-s3);
}

.ma-wordmark {
    font-family: var(--ma-font-display);
    font-size: 26px;
    letter-spacing: 0.06em;
    line-height: 1;
    color: var(--ma-text);
}

.ma-sidebar__close {
    display: none;
}

/* ── New chat ─────────────────────────────────────────────── */

.ma-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ma-s2);
    padding: var(--ma-s3) var(--ma-s5);
    font-family: var(--ma-font-display);
    font-size: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ma-on-accent);
    background: linear-gradient(135deg, var(--ma-miami), var(--ma-matt));
    border: 2px solid transparent;
    border-radius: var(--ma-radius-sm);
    box-shadow: 0 4px 20px rgba(0, 162, 200, 0.28);
    transition: transform var(--ma-transition), box-shadow var(--ma-transition);
}

.ma-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(0, 162, 200, 0.4);
}

.ma-btn:active:not(:disabled) {
    transform: translateY(0);
}

.ma-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.ma-btn--new {
    width: 100%;
}

.ma-btn__icon {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

/* ── Nav ──────────────────────────────────────────────────── */

.ma-nav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ma-nav__item {
    display: flex;
    align-items: center;
    gap: var(--ma-s3);
    width: 100%;
    padding: var(--ma-s3);
    color: var(--ma-text-muted);
    border-radius: var(--ma-radius-sm);
    transition: background var(--ma-transition), color var(--ma-transition);
}

.ma-nav__item:hover:not(:disabled),
.ma-nav__item[aria-current='true'] {
    color: var(--ma-text);
    background: var(--ma-surface-alt);
}

.ma-nav__item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Sprite icons. Fixed size rather than filling their container, so a
   symbol with a different intrinsic aspect ratio can't stretch. Sized off
   --ma-icon-size so it stays adjustable from the token block. */
.ma-nav__icon {
    flex: 0 0 var(--ma-icon-size);
    width: var(--ma-icon-size);
    height: var(--ma-icon-size);
}

.ma-nav__label {
    font-size: 14px;
}

/* ── Recents ──────────────────────────────────────────────── */

/* No inner scroller: a scroll area inside a scroll area is a trap on
   touch, where the outer one stops responding once your thumb lands on
   the inner. Recents grows, and the sidebar scrolls. */
.ma-recents {
    flex: 0 0 auto;
    padding-top: var(--ma-s3);
    border-top: 1px solid var(--ma-border);
}

.ma-recents__title {
    font-size: 12px;
    font-weight: 500;
    color: var(--ma-text-muted);
    margin-bottom: var(--ma-s2);
}

.ma-recents__empty {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ma-text-muted);
    opacity: 0.75;
}

/* ── Member footer ────────────────────────────────────────── */

/* In the scroll flow, but pinned to the bottom edge while scrolling —
   so Sign out never disappears behind a long Recents list. */
.ma-sidebar__foot {
    position: sticky;
    bottom: calc(var(--ma-s4) * -1);
    margin-top: auto;
    padding-top: var(--ma-s3);
    padding-bottom: var(--ma-s4);
    margin-bottom: calc(var(--ma-s4) * -1);
    background: var(--ma-bg-sidebar);
    border-top: 1px solid var(--ma-border);
}

/* ── Theme toggle ─────────────────────────────────────────── */

.ma-theme-toggle {
    display: flex;
    align-items: center;
    gap: var(--ma-s2);
    width: 100%;
    padding: var(--ma-s2) var(--ma-s3);
    font-size: 13px;
    color: var(--ma-text-muted);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-sm);
    transition: color var(--ma-transition), background var(--ma-transition);
}

.ma-theme-toggle:hover {
    color: var(--ma-text);
    background: var(--ma-surface-alt);
}

.ma-theme-toggle__icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

/* Only one glyph shows at a time, matching the theme CURRENTLY active
   (moon while dark, sun while light) — a straightforward "this is
   where you are" indicator, driven entirely by data-theme so no JS
   is needed to keep it in sync with the actual applied theme. */
.ma-theme-toggle__icon--sun { display: none; }

.matteen-ai[data-theme="light"] .ma-theme-toggle__icon--moon { display: none; }
.matteen-ai[data-theme="light"] .ma-theme-toggle__icon--sun  { display: block; }

.ma-member {
    display: flex;
    align-items: center;
    gap: var(--ma-s3);
    padding: var(--ma-s2);
}

.ma-member__avatar {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
}

.ma-member__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ma-font-display);
    font-size: 14px;
    line-height: 1;
    color: var(--ma-text);
}

.ma-member__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--ma-text-body);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-member__action {
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--ma-text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--ma-transition), border-color var(--ma-transition);
}

.ma-member__action:hover,
.ma-member__action:focus-visible {
    color: var(--ma-accent-hover);
    border-bottom-color: currentColor;
}

/* Sign in — same primary treatment as New chat, so the one live action in
   a signed-out shell reads as the obvious next step. */
.ma-btn--signin {
    width: 100%;
    text-decoration: none;
}

.ma-welcome__cta {
    margin-top: var(--ma-s5);
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════
   MAIN
══════════════════════════════════════════════════════════════ */

.ma-main {
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-width: 0;
    min-height: 0;
    background: var(--ma-bg);
}

.ma-topbar {
    display: flex;
    align-items: center;
    gap: var(--ma-s3);
    padding: var(--ma-s3) var(--ma-s5);
    border-bottom: 1px solid var(--ma-border);
}

.ma-topbar__menu {
    display: none;
}

.ma-topbar__title {
    font-family: var(--ma-font-display);
    font-size: 20px;
    letter-spacing: 0.06em;
    color: var(--ma-text);
}

.ma-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 8px;
    color: var(--ma-text-muted);
    border-radius: var(--ma-radius-sm);
    transition: background var(--ma-transition), color var(--ma-transition);
}

.ma-icon-btn:hover:not(:disabled) {
    color: var(--ma-text);
    background: var(--ma-surface-alt);
}

.ma-icon-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ── Canvas ───────────────────────────────────────────────── */

/* Scroll container.
   
   This must NOT centre on the block axis with justify-content or
   align-items. When a flex child is taller than a centred scroll
   container, the overflow spills equally in both directions and the top
   becomes unreachable — no scrollbar reaches it, because scrolling only
   ever moves toward the end edge. That is what was hiding the welcome
   block, the view header and everything above the activation tables.

   Auto margins are the safe way to centre in a scroll container: they
   only consume free space when there IS free space, and collapse to zero
   once the content overflows. */
.ma-canvas {
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--ma-s6) var(--ma-s5);
}

.ma-welcome {
    width: 100%;
    max-width: var(--ma-content-max);
    /* Vertically centred only while it fits — see .ma-canvas above. */
    margin: auto 0;
    text-align: center;
}

.ma-welcome__title {
    font-family: var(--ma-font-display);
    font-size: clamp(44px, 6vw, 72px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: 0.04em;
    color: var(--ma-text);
    margin-bottom: var(--ma-s4);
}

.ma-welcome__lede {
    font-family: var(--ma-font-accent);
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1.5;
    color: var(--ma-text-body);
    max-width: 46ch;
    margin: 0 auto var(--ma-s5);
}

.ma-welcome__status {
    font-size: 14px;
    color: var(--ma-text-muted);
    max-width: 52ch;
    margin: 0 auto;
}

/* ── Composer ─────────────────────────────────────────────── */

.ma-composer {
    padding: var(--ma-s4) var(--ma-s5);
    padding-bottom: calc(var(--ma-s4) + var(--ma-safe-bottom));
    border-top: 1px solid var(--ma-border);
}

.ma-composer__inner {
    display: flex;
    align-items: flex-end;
    gap: var(--ma-s2);
    max-width: var(--ma-content-max);
    margin: 0 auto;
    padding: var(--ma-s2) var(--ma-s2) var(--ma-s2) var(--ma-s4);
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-lg);
}

.ma-composer__input {
    flex: 1 1 auto;
    min-height: 36px;
    max-height: 200px;
    padding: var(--ma-s2) 0;
    font-size: var(--ma-text-base);
    line-height: 1.5;
    color: var(--ma-text-body);
    background: transparent;
    resize: none;
    overflow-y: auto;
}

.ma-composer__input::placeholder {
    color: var(--ma-text-muted);
    opacity: 0.8;
}

.ma-composer__input:disabled {
    cursor: not-allowed;
}

.ma-composer__send {
    flex: 0 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBARS
══════════════════════════════════════════════════════════════ */

.ma-sidebar::-webkit-scrollbar,
.ma-canvas::-webkit-scrollbar,
.ma-composer__input::-webkit-scrollbar {
    width: 8px;
}

.ma-sidebar::-webkit-scrollbar-thumb,
.ma-canvas::-webkit-scrollbar-thumb,
.ma-composer__input::-webkit-scrollbar-thumb {
    background: var(--ma-border);
    border-radius: 4px;
}

.matteen-ai {
    scrollbar-width: thin;
    scrollbar-color: var(--ma-border) transparent;
}

/* ══════════════════════════════════════════════════════════════
   SCRIM
══════════════════════════════════════════════════════════════ */

.ma-scrim {
    display: none;
}

/* ══════════════════════════════════════════════════════════════
   TABLET / MOBILE — drawer at 768px
══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ma-app {
        grid-template-columns: 1fr;
    }

    .ma-sidebar {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 3;
        width: min(var(--ma-sidebar-w), 84vw);
        box-shadow: var(--ma-shadow-lg);
        transform: translateX(-100%);
        transition: transform 0.24s var(--ma-ease);
        will-change: transform;
    }

    .matteen-ai[data-drawer='open'] .ma-sidebar {
        transform: translateX(0);
    }

    .ma-sidebar__close,
    .ma-topbar__menu {
        display: inline-flex;
    }

    .ma-scrim {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 2;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.24s var(--ma-ease);
    }

    .matteen-ai[data-drawer='open'] .ma-scrim {
        opacity: 1;
        pointer-events: auto;
    }

    .ma-scrim[hidden] {
        display: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   SMALL MOBILE — full bleed at 480px
══════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
    .matteen-ai {
        border-radius: 0;
    }

    .ma-topbar {
        padding: var(--ma-s3) var(--ma-s4);
    }

    .ma-canvas {
        padding: var(--ma-s5) var(--ma-s4);
        align-items: flex-start;
    }

    .ma-composer {
        padding: var(--ma-s3) var(--ma-s4);
        padding-bottom: calc(var(--ma-s3) + var(--ma-safe-bottom));
    }

    .ma-composer__inner {
        border-radius: var(--ma-radius);
    }

    /* 16px is the smallest size iOS Safari will not zoom into on focus. */
    .ma-composer__input {
        font-size: 16px;
    }
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .matteen-ai *,
    .matteen-ai *::before,
    .matteen-ai *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 4 — MY CHARTS
══════════════════════════════════════════════════════════════ */

.ma-view {
    width: 100%;
    max-width: var(--ma-content-max);
    margin: 0 auto;
    /* Detail views are long. Pin to the top of the scroll area so the
       header is always the first thing reachable. */
    align-self: flex-start;
}

.ma-view--wide {
    max-width: var(--ma-detail-max);
}

.ma-view__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ma-s4);
    flex-wrap: wrap;
    margin-bottom: var(--ma-s5);
}

.ma-view__title {
    font-family: var(--ma-font-display);
    font-size: 34px;
    font-weight: 400;
    letter-spacing: 0.05em;
    line-height: 1;
    color: var(--ma-text);
}

.ma-view__actions {
    display: flex;
    align-items: center;
    gap: var(--ma-s2);
}

.ma-btn--small {
    padding: var(--ma-s2) var(--ma-s4);
    font-size: 14px;
}

.ma-btn-text {
    padding: var(--ma-s2) var(--ma-s3);
    font-size: 14px;
    color: var(--ma-text-muted);
    border-radius: var(--ma-radius-sm);
    transition: color var(--ma-transition);
}

.ma-btn-text:hover {
    color: var(--ma-text);
}

.ma-select {
    padding: var(--ma-s2) var(--ma-s3);
    font-size: 14px;
    color: var(--ma-text-body);
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-sm);
}

.ma-muted {
    font-size: 14px;
    color: var(--ma-text-muted);
}

/* ── Chart cards ──────────────────────────────────────────── */

.ma-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--ma-s4);
}

.ma-card {
    position: relative;
    padding: var(--ma-s5) var(--ma-s4) var(--ma-s4);
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius);
    overflow: hidden;
}

/* The signature gradient bar, carried over from the existing plugins'
   card treatment so Matteen AI reads as part of the same family. */
.ma-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: linear-gradient(90deg, var(--ma-miami), var(--ma-sunrise));
}

.ma-card__title {
    font-family: var(--ma-font-display);
    font-size: 18px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ma-text);
    margin-bottom: var(--ma-s3);
}

.ma-card__list {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--ma-s2) var(--ma-s3);
    margin: 0;
}

.ma-card__term {
    font-size: 13px;
    color: var(--ma-text-muted);
}

.ma-card__value {
    margin: 0;
    font-size: 14px;
    color: var(--ma-text-body);
    text-align: right;
}

/* ── Bodygraph ────────────────────────────────────────────── */

.ma-bodygraph {
    margin-top: var(--ma-s5);
    padding: var(--ma-s4);
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius);
    overflow-x: auto;
}

/* The base reset forces stroke:currentColor on every svg, which would
   flatten a rendered bodygraph's own colours. */
.ma-bodygraph svg {
    stroke: revert;
    fill: revert;
}

/* ── Bodygraph layout ─────────────────────────────────────────
   SvgRenderer::render() returns a three-column flex row, not a bare
   SVG:

     .ae-hd-bodygraph-inner
       .ae-hd-col.ae-hd-col-design        ← left, red
       .ae-hd-bodygraph-centre            ← the chart
       .ae-hd-col.ae-hd-col-personality   ← right, black

   Those class names are styled in the Swiss plugin's human-design.css,
   which Matteen AI does not load — so without this the flex row
   collapsed to blocks and the two tables stacked above and below the
   chart. Ported here rather than enqueuing the other plugin's
   stylesheet, which would drag its whole cascade into the app.
   Values mirror human-design.css so the two render identically. */

.ma-bodygraph .ae-hd-bodygraph-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    height: 481px;
    max-height: 481px;
    gap: 16px;
}

.ma-bodygraph .ae-hd-bodygraph-centre {
    flex: 0 1 auto;
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ma-bodygraph .ae-hd-bodygraph-centre svg,
.ma-bodygraph .ae-hd-bodygraph-centre .ae-hd-bodygraph {
    display: block;
    height: 100%;
    width: auto;
    max-width: 100%;
}

/* The original styles these with --ae-font-display, which is Bebas Neue
   — condensed. Substituting the body face (DM Sans) made "PERSONALITY"
   wider than the 70px column and it spilled out of the black panel. */
.ma-bodygraph .ae-hd-col {
    flex: 0 0 70px;
    width: 70px;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: var(--ma-font-display);
    font-size: 11px;
    overflow: hidden;
}

.ma-bodygraph .ae-hd-col-design      { background: #cc0000; }
.ma-bodygraph .ae-hd-col-personality { background: #000000; }

.ma-bodygraph .ae-hd-col-title {
    flex: 0 0 auto;
    min-width: 0;
    padding: 6px 4px;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Belt and braces behind the condensed face: the longer of the two
       titles must never escape its panel, whatever font actually loads. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.ma-bodygraph .ae-hd-col-row {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.ma-bodygraph .ae-hd-col-row:last-child {
    border-bottom: none;
}

.ma-bodygraph .ae-hd-col-gate {
    flex: 1 1 auto;
    font-weight: 700;
}

.ma-bodygraph .ae-hd-col-personality .ae-hd-col-gate {
    text-align: right;
}

/* Fixing-state marker (Exalted ▲ / Detriment ▼ / Juxtaposed star),
   drawn as the same 10px icons BodyGraph uses. The slot keeps its
   width when empty (state None) so gate numbers stay aligned. */
.ma-bodygraph .ae-hd-col-arrow {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    line-height: 0;
}

.ma-bodygraph .ae-hd-col-arrow svg {
    display: block;
    width: 10px;
    height: 10px;
}

.ma-bodygraph .ae-hd-col-glyph {
    font-family: serif;
    font-size: 13px;
}

@media (max-width: 768px) {
    .ma-bodygraph .ae-hd-bodygraph-inner {
        gap: 8px;
    }

    .ma-bodygraph .ae-hd-col {
        flex-basis: 50px;
        width: 50px;
        font-size: 9px;
    }

    .ma-bodygraph .ae-hd-col-row {
        padding: 0 4px;
        gap: 2px;
    }

    .ma-bodygraph .ae-hd-col-title {
        font-size: 10px;
        padding: 4px 2px;
        letter-spacing: 0.02em;
    }

    .ma-bodygraph .ae-hd-col-glyph {
        font-size: 11px;
    }

    .ma-bodygraph .ae-hd-col-arrow,
    .ma-bodygraph .ae-hd-col-arrow svg {
        flex-basis: 8px;
        width: 8px;
        height: 8px;
    }
}

/* ── Bodygraph on a light surface ──────────────────────────────
   SvgRenderer draws every INACTIVE channel half as a plain #ffffff
   shape with no outline (renderChannelFills(): fill="#ffffff", no
   stroke) — a convention that assumes a dark canvas. On the light
   theme's white card those shapes are invisible: the channel network
   disappears, and a half-active channel shows as a black or red stub
   floating in empty space, so the chart no longer reads as a
   bodygraph.

   Inactive channels are the only #ffffff shapes inside the channel
   groups (the only groups the renderer gives a fill="#ffffff"
   attribute; centre groups carry none), so this targets exactly them.
   A CSS fill outranks the presentation attribute; nothing else in the
   chart — active channels, centres, gate badges, arrows, the side
   columns — is touched, and the dark theme keeps the original white. */
.matteen-ai[data-theme="light"] .ma-bodygraph .ae-hd-bodygraph g[fill="#ffffff"] > [fill="#ffffff"],
.matteen-ai[data-theme="light"] .ma-bodygraph .ae-hd-bodygraph g[fill="#fff"] > [fill="#fff"] {
    fill: #d5dbe2;
}

/* ── Diagrams: astrology wheel, Places map ─────────────────────
   Both SVGs carry their own colour rules (reading --ma-* tokens), so
   this block only handles layout and undoes the app-wide svg reset:
   `.matteen-ai svg` gives every svg stroke:currentColor, which would
   outline every glyph and dot in these charts. */

.matteen-ai svg.ma-wheel,
.matteen-ai svg.ma-places-map__svg {
    fill: none;
    stroke: none;
    stroke-width: 1;
    width: 100%;
    height: auto;
}

.ma-diagram__body {
    margin-top: var(--ma-s3);
}

.ma-diagram--wheel .ma-diagram__body {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.ma-places-map {
    display: flex;
    flex-direction: column;
    gap: var(--ma-s3);
}

.ma-places-map__svg {
    border-radius: var(--ma-radius-sm);
    border: 1px solid var(--ma-border);
}

.ma-places-map__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ma-s2);
}

.matteen-ai .ma-places-map__key {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--ma-text);
    background: var(--ma-surface-alt);
    border: 1px solid var(--ma-border);
    border-radius: 999px;
    transition: opacity var(--ma-transition), border-color var(--ma-transition);
}

.matteen-ai .ma-places-map__key:hover {
    border-color: var(--planet);
}

.ma-places-map__key[aria-pressed="false"] {
    opacity: 0.45;
}

.ma-places-map__swatch {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: var(--planet);
}

.ma-places-map__key[aria-pressed="false"] .ma-places-map__swatch {
    background: transparent;
    outline: 1px dashed var(--planet);
}

.ma-places-map__key-note {
    font-size: 12px;
    color: var(--ma-text-muted);
}

/* Land tones per theme — the map's own fallbacks are light-theme values. */
.matteen-ai {
    --ma-map-land:  #2a3547;
    --ma-map-coast: #3b4a60;
}

.matteen-ai[data-theme="light"] {
    --ma-map-land:  #d5dbe3;
    --ma-map-coast: #b3bcc8;
}

@media (max-width: 768px) {
    .ma-places-map__key {
        font-size: 12px;
        padding: 3px 8px;
    }
}

/* ── Deeper Points ───────────────────────────────────────────── */

/* The "NOT gates, gifts or talents" line has to read as a warning, not
   as another note: it's the one thing the documents insist on.
   Prefixed with .matteen-ai: the base `.matteen-ai p/ul/li` reset
   (0,1,1) otherwise wins and strips the padding and margins. */
.matteen-ai .ma-deeper__framing {
    margin: 0 0 var(--ma-s3);
    padding: var(--ma-s2) var(--ma-s3);
    font-size: 13px;
    font-weight: 600;
    color: var(--ma-text);
    background: var(--ma-surface-alt);
    border-left: 3px solid var(--ma-rolex);
    border-radius: var(--ma-radius-sm);
}

.ma-deeper__framing--chiron { border-left-color: var(--ma-matt); }
.ma-deeper__framing--lilith { border-left-color: var(--ma-sunrise); }

.matteen-ai .ma-deeper__list {
    display: grid;
    gap: var(--ma-s2);
    margin: var(--ma-s3) 0 0;
    padding: 0;
    list-style: none;
}

.matteen-ai .ma-deeper__item {
    padding: var(--ma-s2) var(--ma-s3);
    font-size: 14px;
    color: var(--ma-text-body);
    background: var(--ma-surface-alt);
    border-radius: var(--ma-radius-sm);
}

.ma-deeper__item strong {
    color: var(--ma-text);
}

.matteen-ai .ma-deeper__missing .ma-card__note {
    margin: 0;
}

/* North Node Activation Point — a once-in-a-lifetime marker, shown once
   inside Deeper Points and again in Astrology Timing's own Personal
   Markers card; both read this same style for the date line. */
.matteen-ai .ma-deeper__nnap {
    border-left: 3px solid var(--ma-sunrise);
}

.matteen-ai .ma-deeper__nnap-dates {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ma-text);
}

/* ── Form ─────────────────────────────────────────────────── */

.ma-form {
    max-width: 520px;
}

.ma-form__title {
    font-family: var(--ma-font-display);
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--ma-text);
    margin-bottom: var(--ma-s2);
}

.ma-form__lede {
    margin-bottom: var(--ma-s5);
}

.ma-field {
    margin-bottom: var(--ma-s4);
}

.ma-field label {
    display: block;
    margin-bottom: var(--ma-s1);
    font-size: 13px;
    color: var(--ma-text-muted);
}

.ma-field input {
    width: 100%;
    padding: var(--ma-s3);
    font-family: var(--ma-font-body);
    /* 16px so iOS Safari doesn't zoom the page on focus. */
    font-size: 16px;
    color: var(--ma-text-body);
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-sm);
    transition: border-color var(--ma-transition);
}

.ma-field input:focus {
    border-color: var(--ma-accent);
    outline: none;
}

.ma-field input:focus-visible {
    outline: 2px solid var(--ma-accent-hover);
    outline-offset: 1px;
}

.ma-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ma-s3);
}

.ma-field--place {
    position: relative;
}

.ma-field__note {
    margin-top: var(--ma-s1);
    font-size: 12px;
    color: var(--ma-matt);
}

.ma-places {
    position: absolute;
    z-index: 4;
    left: 0;
    right: 0;
    max-height: 220px;
    margin-top: var(--ma-s1);
    overflow-y: auto;
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-sm);
    box-shadow: var(--ma-shadow);
}

.ma-places__item,
.ma-places__empty {
    padding: var(--ma-s3);
    font-size: 14px;
    color: var(--ma-text-body);
    cursor: pointer;
    transition: background var(--ma-transition);
}

.ma-places__empty {
    color: var(--ma-text-muted);
    cursor: default;
}

.ma-places__item:hover,
.ma-places__item:focus-visible {
    background: var(--ma-surface-alt);
}

.ma-form__error {
    margin-bottom: var(--ma-s3);
    font-size: 14px;
    color: var(--ma-error);
}

.ma-form__actions {
    display: flex;
    align-items: center;
    gap: var(--ma-s2);
}

@media (max-width: 480px) {
    .ma-field-row {
        grid-template-columns: 1fr;
    }

    .ma-view--wide {
    max-width: var(--ma-detail-max);
}

.ma-view__head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ══════════════════════════════════════════════════════════════
   PHASE 4.5 — GROUPED NAV
══════════════════════════════════════════════════════════════ */

.ma-nav__group {
    margin-bottom: var(--ma-s2);
}

/* The group heading is a label, not a control — it doesn't navigate
   anywhere, so it isn't a button and doesn't take focus. */
.ma-nav__grouplabel {
    display: flex;
    align-items: center;
    gap: var(--ma-s3);
    padding: var(--ma-s2) var(--ma-s3);
    font-family: var(--ma-font-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--ma-text);
}

/* Sub-items carry no icon of their own. Indentation and the group
   heading already state the relationship, and at 40px a second column of
   icons would read as five peers rather than one parent and four
   children. The rule aligns them under the heading's label. */
.ma-nav__sublist {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-left: calc(var(--ma-icon-size) / 2 + var(--ma-s3));
    padding-left: var(--ma-s3);
    border-left: 1px solid var(--ma-border);
}

.ma-nav__item--sub {
    padding: var(--ma-s2) var(--ma-s3);
}

.ma-nav__item--sub .ma-nav__label {
    font-size: 13px;
}

.ma-nav__item--sub[aria-current='true'] {
    color: var(--ma-text);
    background: var(--ma-surface-alt);
    box-shadow: inset 2px 0 0 var(--ma-accent);
}

/* ══════════════════════════════════════════════════════════════
   PHASE 4.5 — DETAIL TABLES
══════════════════════════════════════════════════════════════ */

.ma-card--wide {
    grid-column: 1 / -1;
}

.ma-card__note {
    margin-bottom: var(--ma-s3);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ma-text-muted);
}

/* Wide tables scroll horizontally rather than forcing the whole layout
   wider. The activation tables have six columns and will not fit a
   phone at a readable size. */
.ma-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ma-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ma-table th,
.ma-table td {
    padding: var(--ma-s2) var(--ma-s3);
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid var(--ma-border);
}

.ma-table th {
    font-family: var(--ma-font-body);
    font-weight: 500;
    color: var(--ma-text-muted);
}

.ma-table td {
    color: var(--ma-text-body);
}

.ma-table tbody tr:last-child td {
    border-bottom: 0;
}

.ma-table tbody tr:hover td {
    background: var(--ma-surface-alt);
}

.ma-pattern {
    padding: var(--ma-s3) 0;
    border-bottom: 1px solid var(--ma-border);
}

.ma-pattern:last-child {
    border-bottom: 0;
}

.ma-pattern__name {
    font-family: var(--ma-font-display);
    font-size: 16px;
    letter-spacing: 0.06em;
    color: var(--ma-text);
}

.ma-pattern__planets {
    margin-top: var(--ma-s1);
    font-size: 13px;
    color: var(--ma-accent);
}

.ma-pattern__meaning {
    margin-top: var(--ma-s2);
    font-family: var(--ma-font-accent);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ma-text-body);
}

/* ══════════════════════════════════════════════════════════════
   PHASE 5 — MY REPORTS
══════════════════════════════════════════════════════════════ */

.ma-reports {
    display: flex;
    flex-direction: column;
    gap: var(--ma-s3);
}

/* The whole card is the submit button — clicking anywhere downloads. */
.ma-report {
    display: block;
}

.ma-report__button {
    display: flex;
    flex-direction: column;
    gap: var(--ma-s1);
    width: 100%;
    padding: var(--ma-s4);
    text-align: left;
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius);
    transition: border-color var(--ma-transition), transform var(--ma-transition);
}

.ma-report__button:hover {
    border-color: var(--ma-accent);
    transform: translateY(-1px);
}

.ma-report__title {
    font-family: var(--ma-font-display);
    font-size: 18px;
    letter-spacing: 0.05em;
    color: var(--ma-text);
}

.ma-report__meta {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ma-text-body);
}

.ma-report__cta {
    margin-top: var(--ma-s2);
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ma-accent);
}

/* ── Empty and unavailable states ─────────────────────────── */

.ma-empty {
    max-width: 520px;
    padding: var(--ma-s5);
    background: var(--ma-surface-alt);
    border: 1px dashed var(--ma-border);
    border-radius: var(--ma-radius);
}

.ma-empty__title {
    font-family: var(--ma-font-display);
    font-size: 20px;
    letter-spacing: 0.05em;
    color: var(--ma-text);
    margin-bottom: var(--ma-s2);
}

.ma-empty__body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ma-text-muted);
}

/* ══════════════════════════════════════════════════════════════
   PHASE 6 — CONVERSATIONS
══════════════════════════════════════════════════════════════ */

.ma-recents__list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ma-recents__item {
    display: block;
    width: 100%;
    padding: var(--ma-s2) var(--ma-s3);
    font-size: 13px;
    color: var(--ma-text-muted);
    border-radius: var(--ma-radius-sm);
    /* Conversation titles are the member's own first words and can be
       any length. One line, clipped — the sidebar is not the place to
       read them. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background var(--ma-transition), color var(--ma-transition);
}

.ma-recents__item:hover {
    color: var(--ma-text);
    background: var(--ma-surface-alt);
}

.ma-recents__item[aria-current='true'] {
    color: var(--ma-text);
    background: var(--ma-surface-alt);
    box-shadow: inset 2px 0 0 var(--ma-accent);
}

.ma-recents__more {
    margin-top: var(--ma-s2);
    font-size: 12px;
}

/* ── Thread ───────────────────────────────────────────────── */

.ma-view--thread {
    max-width: var(--ma-content-max);
}

.ma-thread {
    display: flex;
    flex-direction: column;
    gap: var(--ma-s5);
}

.ma-msg {
    display: flex;
    flex-direction: column;
    gap: var(--ma-s1);
}

/* Holds the who-said-this label and the save toggle on one line,
   replacing the bare .ma-msg__who that used to sit alone. */
.ma-msg__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ma-s2);
}

.ma-msg__who {
    font-family: var(--ma-font-display);
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ma-text-muted);
}

.ma-msg--assistant .ma-msg__who {
    color: var(--ma-accent);
}

.ma-msg__save {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 15px;
    line-height: 1;
    color: var(--ma-text-muted);
    border-radius: var(--ma-radius-sm);
    transition: color var(--ma-transition), background var(--ma-transition);
}

.ma-msg__save:hover {
    color: var(--ma-sunrise);
    background: var(--ma-surface-alt);
}

.ma-msg__save--on {
    color: var(--ma-sunrise);
}

.ma-msg__body p {
    font-size: 15px;
    line-height: 1.65;
    color: var(--ma-text-body);
}

.ma-msg__body p + p {
    margin-top: var(--ma-s3);
}

/* The member's own turns sit in a panel so a long thread reads as an
   alternation rather than one undifferentiated column of text. */
.ma-msg--user .ma-msg__body {
    padding: var(--ma-s3) var(--ma-s4);
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius);
}

.ma-thread__earlier {
    display: block;
    margin: 0 auto var(--ma-s4);
    font-size: 12px;
}

.ma-thread__notice {
    margin-top: var(--ma-s5);
    padding: var(--ma-s3) var(--ma-s4);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ma-text-muted);
    background: var(--ma-surface-alt);
    border: 1px dashed var(--ma-border);
    border-radius: var(--ma-radius);
}

/* ── Thinking indicator ───────────────────────────────────────
   Shared by the pending chat reply and the Code run button — a spinner
   plus a phrase that changes every few seconds, so a wait of unknown
   length (a model reply, a Code reading) reads as active rather than
   stalled. Real motion, not just an opacity pulse on static text. */

.ma-thinking {
    display: inline-flex;
    align-items: center;
    gap: var(--ma-s2);
}

.ma-msg--pending .ma-msg__body {
    color: var(--ma-text-muted);
    font-style: italic;
}

.ma-thinking__spinner {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid var(--ma-border);
    border-top-color: var(--ma-accent);
    border-radius: 50%;
    animation: ma-spin 0.7s linear infinite;
}

@keyframes ma-spin {
    to { transform: rotate(360deg); }
}

/* General-purpose spinner, same visual as .ma-thinking__spinner but
   under its own name for contexts that aren't a "thinking" message
   bubble — opening a conversation, creating a new one. */
.ma-spinner {
    display: inline-block;
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid var(--ma-border);
    border-top-color: var(--ma-accent);
    border-radius: 50%;
    animation: ma-spin 0.7s linear infinite;
}

.ma-loading-indicator {
    display: flex;
    align-items: center;
    gap: var(--ma-s2);
    padding: var(--ma-s4) 0;
    color: var(--ma-text-muted);
    font-size: 14px;
}

/* The send button shows the same spin while its own request is in
   flight (starting a brand-new conversation the member typed straight
   into, before the "thinking" bubble has anywhere to attach yet) —
   the icon fades out rather than being removed, so the button keeps
   its size and doesn't jump. .ma-icon-btn has no background of its
   own (plain text-coloured icon, not on the accent gradient), so this
   reuses the same border/accent colours as the general .ma-spinner
   rather than an on-accent variant. */
.ma-composer__send--busy svg {
    opacity: 0;
}

.ma-composer__send--busy {
    position: relative;
}

.ma-composer__send--busy::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    margin: -7px 0 0 -7px;
    border: 2px solid var(--ma-border);
    border-top-color: var(--ma-accent);
    border-radius: 50%;
    animation: ma-spin 0.7s linear infinite;
}

/* The button's own spinner needs to sit on light text, not the muted
   border colour used everywhere else — it is on the accent gradient. */
.ma-btn.ma-thinking .ma-thinking__spinner {
    border-color: rgba(13, 17, 23, 0.35);
    border-top-color: var(--ma-on-accent);
}

@media (prefers-reduced-motion: reduce) {
    .ma-thinking__spinner {
        animation: none;
        border-top-color: var(--ma-border);
    }
}

/* ══════════════════════════════════════════════════════════════
   CODES
══════════════════════════════════════════════════════════════ */

.ma-view__lede {
    max-width: 60ch;
    margin-bottom: var(--ma-s5);
}

/* One Code's content, shown at a time — the sidebar sub-item picks
   which, the same way the four chart-system sub-items pick which chart
   system fills .ma-cards. No grid: unlike the chart cards, a Code
   folder is a single column (description, action, past readings). */
.ma-code-folder {
    position: relative;
    padding-top: var(--ma-s3);
}

.ma-code-folder::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    width: 64px;
    background: linear-gradient(90deg, var(--ma-miami), var(--ma-sunrise));
}

/* A locked/draft folder keeps the same signature bar rather than fading
   it — hiding the accent hides the very thing that would make someone
   come back once it has a reading. */
.ma-code-folder--locked::before {
    background: var(--ma-border);
}

.ma-code__desc {
    max-width: 60ch;
    margin-bottom: var(--ma-s4);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ma-text-body);
}

.ma-code__reason {
    margin-bottom: var(--ma-s4);
    font-size: 13px;
    color: var(--ma-sunrise);
}

/* ── Recents folders ──────────────────────────────────────── */

.ma-recents__folder {
    margin-bottom: var(--ma-s3);
}

.ma-recents__folder-label {
    padding: var(--ma-s1) var(--ma-s3);
    font-family: var(--ma-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ma-text-muted);
}

.ma-recents__folder-list,
.ma-recents__flat {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ma-recents__folder-empty {
    padding: var(--ma-s2) var(--ma-s3);
    font-size: 12px;
    font-style: italic;
    color: var(--ma-text-muted);
    opacity: 0.7;
}

/* ── Past readings inside a Code folder ──────────────────────
   Reuses .ma-recents__item for the conversation buttons themselves —
   conversationButton() is the same function Recents uses. */

.ma-code__past-heading {
    margin-top: var(--ma-s4);
    padding-top: var(--ma-s3);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ma-text-muted);
    border-top: 1px solid var(--ma-border);
}

.ma-code__conversations {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: var(--ma-s1);
}

.ma-code__past-empty {
    margin-top: var(--ma-s4);
    padding-top: var(--ma-s3);
    font-size: 13px;
    border-top: 1px solid var(--ma-border);
}

/* ── Sidebar search ───────────────────────────────────────── */

.ma-search {
    position: relative;
    display: flex;
    align-items: center;
}

.ma-search__icon {
    position: absolute;
    left: var(--ma-s3);
    width: 15px;
    height: 15px;
    color: var(--ma-text-muted);
    pointer-events: none;
}

.ma-search__input {
    width: 100%;
    padding: var(--ma-s2) var(--ma-s3) var(--ma-s2) calc(var(--ma-s3) * 2 + 15px);
    font-size: 13px;
    color: var(--ma-text-body);
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-sm);
    transition: border-color var(--ma-transition);
}

.ma-search__input::placeholder {
    color: var(--ma-text-muted);
}

.ma-search__input:focus {
    border-color: var(--ma-accent);
    outline: none;
}

/* Search results replace Recents in place rather than pushing it down —
   the sidebar shows one or the other, never both at once. */
.ma-search__results {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ma-search__result-btn {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: var(--ma-s2) var(--ma-s3);
    text-align: left;
    border-radius: var(--ma-radius-sm);
    transition: background var(--ma-transition);
}

.ma-search__result-btn:hover {
    background: var(--ma-surface-alt);
}

.ma-search__result-title {
    font-size: 13px;
    color: var(--ma-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-search__result-snippet {
    font-size: 12px;
    line-height: 1.4;
    color: var(--ma-text-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ma-search__empty {
    padding: var(--ma-s2) var(--ma-s3);
    font-size: 12px;
    font-style: italic;
    color: var(--ma-text-muted);
}

/* Sits above a detail-view card grid rather than centred as a full
   empty state — full width, and pulled out from under grid-column
   sizing so it reads as a notice, not one of the cards. */
.ma-empty--inline {
    max-width: none;
    grid-column: 1 / -1;
    margin-bottom: var(--ma-s4);
}

/* ── Saved ────────────────────────────────────────────────── */

.ma-saved {
    display: flex;
    flex-direction: column;
    gap: var(--ma-s3);
}

.ma-saved__item {
    padding: var(--ma-s4);
    background: var(--ma-surface);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius);
}

.ma-saved__snippet {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ma-text-body);
}

.ma-saved__snippet:hover {
    color: var(--ma-text);
}

.ma-saved__note {
    margin-top: var(--ma-s2);
    padding: var(--ma-s2) var(--ma-s3);
    font-size: 13px;
    font-style: italic;
    color: var(--ma-text-muted);
    background: var(--ma-surface-alt);
    border-radius: var(--ma-radius-sm);
}

.ma-saved__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: var(--ma-s3);
    padding-top: var(--ma-s2);
    border-top: 1px solid var(--ma-border);
}

.ma-saved__date {
    font-size: 12px;
    color: var(--ma-text-muted);
}

.ma-saved__remove {
    font-size: 12px;
}

.ma-saved__more {
    margin-top: var(--ma-s4);
}

/* ══════════════════════════════════════════════════════════════
   Chat organisation — Pinned / Folders / Recent, the ⋯ menu,
   inline rename, toast, and the Code page's New chat action.
   Append to the end of matteen-ai.css.
   ══════════════════════════════════════════════════════════════ */

.ma-i {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Sidebar sections ─────────────────────────────────────── */

.ma-side__sec {
    margin-bottom: var(--ma-s3);
}

.ma-side__heading {
    margin: 0 0 var(--ma-s1);
    padding: 0 var(--ma-s3);
    font-family: var(--ma-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ma-text-muted);
}

.ma-side__headrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: var(--ma-s1);
}

.ma-side__headrow .ma-side__heading {
    margin-bottom: 0;
}

.ma-side__add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--ma-text-muted);
    border-radius: var(--ma-radius-sm);
    transition: color var(--ma-transition), background var(--ma-transition);
}

.ma-side__add:hover,
.ma-side__add:focus-visible {
    color: var(--ma-text);
    background: var(--ma-surface-alt);
}

.ma-side__hint {
    padding: var(--ma-s1) var(--ma-s3);
    font-size: 12px;
    line-height: 1.45;
    color: var(--ma-text-muted);
    opacity: 0.8;
}

.ma-side__folders {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* ── A chat row: open button + ⋯ ──────────────────────────── */

.ma-convo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: var(--ma-radius-sm);
}

.ma-convo:hover,
.ma-convo:focus-within {
    background: var(--ma-surface-alt);
}

.ma-convo .ma-recents__item {
    display: flex;
    align-items: center;
    gap: var(--ma-s2);
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    text-align: left;
}

.ma-convo__title {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-convo__pin {
    width: 13px;
    height: 13px;
    color: var(--ma-miami);
}

.ma-convo__tag {
    flex: 0 0 auto;
    max-width: 50%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 6px;
    font-size: 10px;
    letter-spacing: 0.03em;
    color: var(--ma-text-muted);
    border: 1px solid var(--ma-border);
    border-radius: 999px;
}

.ma-convo__menu {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-right: 2px;
    color: var(--ma-text-muted);
    border-radius: var(--ma-radius-sm);
    opacity: 0;
    transition: opacity var(--ma-transition), color var(--ma-transition), background var(--ma-transition);
}

.ma-convo:hover .ma-convo__menu,
.ma-convo:focus-within .ma-convo__menu,
.ma-folder__head:hover .ma-convo__menu,
.ma-folder__head:focus-within .ma-convo__menu,
.ma-convo__menu[aria-expanded='true'] {
    opacity: 1;
}

.ma-convo__menu:hover,
.ma-convo__menu[aria-expanded='true'] {
    color: var(--ma-text);
    background: var(--ma-border);
}

/* No hover on touch: the menu button is always there. */
@media (hover: none) {
    .ma-convo__menu {
        opacity: 1;
    }
}

/* ── Folders ──────────────────────────────────────────────── */

.ma-folder__head {
    display: flex;
    align-items: center;
    gap: 2px;
    border-radius: var(--ma-radius-sm);
}

.ma-folder__head:hover,
.ma-folder__head:focus-within {
    background: var(--ma-surface-alt);
}

.ma-folder__toggle {
    display: flex;
    align-items: center;
    gap: var(--ma-s2);
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--ma-s2) var(--ma-s3);
    font-size: 14px;
    text-align: left;
    color: var(--ma-text);
}

.ma-folder__caret {
    width: 12px;
    height: 12px;
    color: var(--ma-text-muted);
}

.ma-folder__icon {
    color: var(--ma-text-muted);
}

.ma-folder__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-folder__count {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--ma-text-muted);
}

.ma-folder__chats {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 1px 0 var(--ma-s2) var(--ma-s4);
    padding-left: var(--ma-s2);
    border-left: 1px solid var(--ma-border);
}

.ma-folder--new {
    padding: 0 var(--ma-s1);
}

/* ── Inline name field (rename, new folder) ───────────────── */

.ma-inline-edit {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    padding: var(--ma-s2) var(--ma-s3);
    font: inherit;
    font-size: 14px;
    color: var(--ma-text);
    background: var(--ma-bg-sidebar);
    border: 1px solid var(--ma-miami);
    border-radius: var(--ma-radius-sm);
    outline: none;
}

.ma-inline-edit:focus {
    box-shadow: 0 0 0 3px rgba(0, 162, 200, 0.2);
}

/* ── The ⋯ menu ───────────────────────────────────────────── */

.ma-menu {
    position: fixed;
    z-index: 1000;
    min-width: 220px;
    max-width: min(300px, calc(100vw - 16px));
    max-height: min(420px, calc(100vh - 16px));
    overflow-y: auto;
    padding: var(--ma-s1);
    color: var(--ma-text);
    background: var(--ma-surface, var(--ma-bg-sidebar));
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-sm);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}

.ma-menu__item,
.ma-menu__back {
    display: flex;
    align-items: center;
    gap: var(--ma-s3);
    width: 100%;
    min-height: 36px;
    padding: var(--ma-s2) var(--ma-s3);
    font-size: 14px;
    text-align: left;
    color: inherit;
    border-radius: var(--ma-radius-sm);
}

.ma-menu__item:hover,
.ma-menu__item:focus-visible,
.ma-menu__back:hover,
.ma-menu__back:focus-visible {
    background: var(--ma-surface-alt);
    outline: none;
}

.ma-menu__item--danger {
    color: var(--ma-danger, #d64545);
}

.ma-menu__icon {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    color: var(--ma-text-muted);
}

.ma-menu__item--danger .ma-menu__icon {
    color: inherit;
}

.ma-menu__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ma-menu__trail {
    width: 14px;
    height: 14px;
    color: var(--ma-text-muted);
}

.ma-menu__item[aria-checked='true'] .ma-menu__trail {
    color: var(--ma-miami);
}

.ma-menu__back {
    margin-bottom: var(--ma-s1);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ma-text-muted);
}

.ma-menu__divider {
    height: 1px;
    margin: var(--ma-s1) 0;
    background: var(--ma-border);
}

.ma-menu__note {
    padding: var(--ma-s1) var(--ma-s3) var(--ma-s2);
    font-size: 12px;
    line-height: 1.45;
    color: var(--ma-text-muted);
}

.ma-menu__error {
    padding: var(--ma-s1) var(--ma-s3);
    font-size: 12px;
    color: var(--ma-danger, #d64545);
}

.ma-menu__form {
    display: flex;
    flex-direction: column;
    gap: var(--ma-s2);
    padding: var(--ma-s1) var(--ma-s2) var(--ma-s2);
}

.ma-menu__submit {
    align-self: flex-end;
    padding: var(--ma-s2) var(--ma-s4);
    font-size: 13px;
    color: var(--ma-on-accent);
    background: linear-gradient(135deg, var(--ma-miami), var(--ma-matt));
    border-radius: var(--ma-radius-sm);
}

.ma-menu__submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Toast ────────────────────────────────────────────────── */

.ma-toast {
    position: fixed;
    left: 50%;
    bottom: var(--ma-s5);
    z-index: 1001;
    max-width: min(420px, calc(100vw - 32px));
    padding: var(--ma-s3) var(--ma-s4);
    font-size: 13px;
    color: var(--ma-text);
    background: var(--ma-surface, var(--ma-bg-sidebar));
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-sm);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    transform: translateX(-50%);
}

.ma-toast[hidden] {
    display: none;
}

/* ── Code page actions ────────────────────────────────────── */

.ma-code__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ma-s3);
    margin-bottom: var(--ma-s4);
}

.ma-code__newchat {
    padding: var(--ma-s2) var(--ma-s4);
    font-size: 13px;
    color: var(--ma-text);
    border: 1px solid var(--ma-border);
    border-radius: var(--ma-radius-sm);
    transition: background var(--ma-transition), border-color var(--ma-transition);
}

.ma-code__newchat:hover:not(:disabled) {
    background: var(--ma-surface-alt);
    border-color: var(--ma-miami);
}

.ma-code__newchat:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Code page lists reuse the sidebar row; give them room to breathe. */
.ma-code__conversations {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 640px;
}