/* Client portal (spec 113) — shapes on the six18 tokens only. Hairline borders, radii 2–4 px,
   no card shadows; gold is an accent, warning is orange; every number is mono + tabular.
   Light mode follows [data-appearance="light"] through the tokens automatically. */

/* ── Identity chip in the portal topbar ─────────────────────────────────── */
.cp-identity { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; }
.cp-identity__avatar {
    width: 28px; height: 28px; border-radius: var(--hz-radius-control);
    background: var(--hz-raised); border: 1px solid var(--hz-border-strong);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--hz-font-mono); font-size: 0.7rem; color: var(--hz-text-muted); flex-shrink: 0;
}
.cp-identity__name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.cp-signout { margin-top: auto; }

/* ── Feed ───────────────────────────────────────────────────────────────── */
.cp-feed { display: flex; flex-direction: column; gap: 0.9rem; max-width: 760px; }
.cp-feed__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.cp-feed__sub { font-size: 0.85rem; color: var(--hz-text-muted); }

.cp-post {
    background: var(--hz-card); border: 1px solid var(--hz-border); border-radius: var(--hz-radius-card);
    padding: 1rem 1.15rem; display: flex; flex-direction: column; gap: 0.5rem; position: relative;
}
.cp-post--hero::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: var(--hz-brand-gradient); border-radius: var(--hz-radius-card) var(--hz-radius-card) 0 0;
}
.cp-post__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cp-post__time { margin-left: auto; }
.cp-post__title {
    font-family: var(--hz-font-display); font-weight: 600; font-size: 1.05rem; margin: 0;
    color: var(--hz-text); text-decoration: none;
}
.cp-post__title:hover { color: var(--hz-brand-strong); }
.cp-post--detail .cp-post__title { font-size: 1.4rem; }
.cp-post__author { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--hz-text-muted); }
.cp-post__excerpt { color: var(--hz-text-muted); font-size: 0.88rem; line-height: 1.55; margin: 0; }
.cp-post__body { font-size: 0.95rem; line-height: 1.65; display: flex; flex-direction: column; gap: 0.75rem; }
.cp-post__body p { margin: 0; }
.cp-post__attcount { display: flex; align-items: center; gap: 0.35rem; color: var(--hz-text-faint); font-size: 0.78rem; }

.cp-new {
    font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
    color: var(--hz-on-brand); background: var(--hz-brand); padding: 1px 6px; border-radius: var(--hz-radius-badge);
}
.cp-pin { display: inline-flex; align-items: center; gap: 0.3rem; color: var(--hz-brand-strong); font-size: 0.74rem; font-weight: 600; }

.cp-avatar {
    width: 22px; height: 22px; border-radius: var(--hz-radius-control);
    display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--hz-font-mono); font-size: 0.6rem; flex-shrink: 0;
    background: var(--hz-raised); border: 1px solid var(--hz-border-strong); color: var(--hz-text-muted);
}
.cp-avatar--firm { background: var(--hz-brand); border-color: var(--hz-brand); color: var(--hz-on-brand); }

/* ── Attachments ────────────────────────────────────────────────────────── */
.cp-attachments { display: flex; flex-direction: column; gap: 0.4rem; }
.cp-att {
    display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; font-size: 0.8rem;
    border: 1px solid var(--hz-border); border-radius: var(--hz-radius-badge); background: var(--hz-bg);
}
.cp-att__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-att__size { margin-left: auto; font-family: var(--hz-font-mono); font-size: 0.7rem; color: var(--hz-text-faint); }
.cp-att__img { max-width: 100%; border: 1px solid var(--hz-border); border-radius: var(--hz-radius-badge); display: block; }
.cp-uploader { display: flex; flex-direction: column; gap: 0.4rem; }
.cp-uploader__hint { font-family: var(--hz-font-mono); font-size: 0.7rem; color: var(--hz-text-faint); }
.cp-uploader input[type="file"] { font-size: 0.8rem; color: var(--hz-text-muted); }

/* ── Messages ───────────────────────────────────────────────────────────── */
.cp-thread-panel { display: flex; flex-direction: column; min-height: 60vh; max-width: 860px; }
.cp-thread { flex-grow: 1; padding: 1.1rem; display: flex; flex-direction: column; gap: 0.85rem; overflow-y: auto; }
.cp-day { align-self: center; }
.cp-msg { display: flex; gap: 0.6rem; max-width: 76%; }
.cp-msg__col { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cp-msg__bubble {
    padding: 0.55rem 0.75rem; border-radius: var(--hz-radius-card); font-size: 0.88rem; line-height: 1.5;
    border: 1px solid var(--hz-border); background: var(--hz-raised); overflow-wrap: anywhere;
}
.cp-msg__bubble p { margin: 0; }
.cp-msg__bubble p + p { margin-top: 0.5rem; }
.cp-msg--mine { align-self: flex-end; flex-direction: row-reverse; }
.cp-msg--mine .cp-msg__col { align-items: flex-end; }
.cp-msg--mine .cp-msg__bubble { background: var(--hz-brand-soft); border-color: rgba(228, 157, 37, 0.35); }
.cp-msg--new .cp-msg__bubble { border-color: var(--hz-brand); }
.cp-composer { border-top: 1px solid var(--hz-border); padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.cp-composer__row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.cp-composer__send { margin-left: auto; }
.cp-load-earlier { align-self: center; }

/* ── Admin inbox ────────────────────────────────────────────────────────── */
.cp-inbox { display: grid; grid-template-columns: 340px minmax(0, 1fr); min-height: 70vh; }
.cp-inbox__list { border-right: 1px solid var(--hz-border); display: flex; flex-direction: column; min-width: 0; overflow-y: auto; }
.cp-inbox__pane { display: flex; flex-direction: column; min-width: 0; }
.cp-thread-row {
    display: flex; gap: 0.6rem; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--hz-border);
    align-items: flex-start; text-align: left; width: 100%; background: transparent; border-left: 0; border-right: 0; border-top: 0;
    color: var(--hz-text); cursor: pointer; font-family: var(--hz-font);
}
.cp-thread-row:hover { background: var(--hz-brand-soft); }
.cp-thread-row.is-active { background: var(--hz-brand-soft); box-shadow: inset 2px 0 0 var(--hz-brand); }
.cp-thread-row__body { min-width: 0; flex-grow: 1; }
.cp-thread-row__top { display: flex; align-items: baseline; gap: 0.5rem; }
.cp-thread-row__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-thread-row__time { margin-left: auto; white-space: nowrap; }
.cp-thread-row__org { font-size: 0.74rem; color: var(--hz-text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-thread-row__preview { font-size: 0.8rem; color: var(--hz-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.cp-thread-row--unread .cp-thread-row__preview { color: var(--hz-text); }
.cp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hz-brand); flex-shrink: 0; margin-top: 6px; }
.cp-dot--none { background: transparent; }

/* ── Settings ───────────────────────────────────────────────────────────── */
.cp-settings { display: flex; flex-direction: column; gap: 1rem; max-width: 720px; }
.cp-toggle-row { display: flex; align-items: center; gap: 0.9rem; }
.cp-toggle-row__text { flex-grow: 1; }
.cp-toggle-row__hint { font-size: 0.8rem; color: var(--hz-text-muted); }

/* ── Roster / editor helpers ────────────────────────────────────────────── */
.cp-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-items: end; }
.cp-two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; }
.cp-editor { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; }
.cp-editor__aside { display: flex; flex-direction: column; gap: 1rem; }
.cp-invite-error { color: var(--hz-danger); font-size: 0.78rem; display: flex; align-items: center; gap: 0.3rem; }
.cp-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cp-chip--selected { border-color: var(--hz-brand); color: var(--hz-brand-strong); background: var(--hz-brand-soft); }
.cp-radio { display: flex; gap: 0.6rem; align-items: flex-start; }
.cp-radio input { margin-top: 3px; accent-color: var(--hz-brand); }
.cp-textarea { min-height: 280px; font-family: var(--hz-font); font-size: 0.92rem; line-height: 1.5; }
.cp-unavailable { text-align: center; padding: 2.5rem 1rem; color: var(--hz-text-muted); }

/* ── Phone width (SC-008) ──────────────────────────────────────────────── */
@media (max-width: 720px) {
    .cp-inbox { grid-template-columns: 1fr; }
    .cp-inbox__list { border-right: 0; border-bottom: 1px solid var(--hz-border); max-height: 40vh; }
    .cp-editor, .cp-two-col, .cp-form-grid { grid-template-columns: 1fr; }
    .cp-msg { max-width: 92%; }
    .cp-identity__name { display: none; }
}