/* Artemii: message branches, plan & usage, team workspaces, tainted-chat note, synced prompt library.
   Loaded last. Restrained: hairlines, soft surfaces, amber only as a tiny accent. Light and dark come from the shared tokens. */

/* ============================== message branches ============================== */
.branch-sw { display: inline-flex; align-items: center; gap: 0; height: 30px; margin-right: 2px; font: 500 12.5px/1 var(--font); color: var(--muted); font-variant-numeric: tabular-nums; }
.bsw-btn { width: 26px; height: 30px; display: grid; place-items: center; border: 0; background: transparent; color: var(--muted); border-radius: 50%; cursor: pointer; padding: 0; }
.bsw-btn:hover:not([aria-disabled="true"]) { background: var(--bg-soft2); color: var(--text); }
.bsw-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.bsw-count { min-width: 30px; text-align: center; color: var(--text); letter-spacing: 0.01em; }
/* the switcher is always visible; the other action buttons appear on hover as before */
.msg-actions.has-branch { opacity: 1; }
.msg-actions.has-branch > :not(.branch-sw) { opacity: 0; transition: opacity 0.15s; }
.msg:hover .msg-actions.has-branch > *, .msg:focus-within .msg-actions.has-branch > *, .msg.is-last .msg-actions.has-branch > * { opacity: 1; }
@media (hover: none) { .msg-actions.has-branch > * { opacity: 1; } }
.bsw-del:hover { color: var(--danger); }
.msg-user .msg-actions.has-branch { justify-content: flex-end; flex-wrap: wrap; }

/* ============================== tainted-chat note ============================== */
.taint-note { display: flex; align-items: flex-start; gap: 10px; align-self: stretch; margin: 2px 0 0; padding: 9px 10px 9px 14px; border-radius: 16px; background: var(--bg-soft); color: var(--muted); font: 400 13px/1.5 var(--font); }
.taint-note > svg { flex: none; margin-top: 3px; color: var(--muted); }
.taint-note p { margin: 0; flex: 1; }
.taint-x { flex: none; width: 26px; height: 26px; }

/* ============================== prompts (synced) ============================== */
.pl-badge { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font: 500 10.5px/1.5 var(--font); vertical-align: 1px; }
.pl-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.pl-tag { padding: 0 8px; border-radius: 999px; background: var(--bg-soft2); color: var(--muted); font: 500 11px/18px var(--font); }
.pl-banner-host:empty { display: none; }
.pl-banner { display: flex; align-items: center; gap: 10px; margin: 0 14px 8px; padding: 9px 12px; border-radius: 14px; background: var(--bg-soft); color: var(--muted); font: 13px/1.45 var(--font); }
.pl-banner.warn { align-items: flex-start; background: var(--warn-bg); color: var(--warn-text); }
.pl-banner.warn ul { margin: 4px 0; padding-left: 18px; }
.pl-banner > div { flex: 1; min-width: 0; }
.pl-banner > svg { flex: none; }
.pl-banner .btn { margin-left: auto; flex: none; }
.pl-form textarea { width: 100%; }
.pl-form-actions { display: flex; gap: 8px; }
.pl-error:empty { display: none; }

/* ============================== plan & usage ============================== */
.plan-top-section { margin: 14px 0 18px; }
.plan-card { padding: 18px 20px; border-radius: var(--card-radius, 26px); background: var(--card, var(--panel)); }
.plan-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plan-name { font: 600 22px/1.2 var(--font); letter-spacing: -0.01em; }
.plan-sub { margin-top: 3px; font-size: 13.5px; }
.plan-note { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 10px 12px; border-radius: 14px; background: var(--accent-soft); color: var(--text); font: 13px/1.5 var(--font); }
.plan-note svg { flex: none; margin-top: 2px; color: var(--accent-text); }
.plan-usage { padding: 4px 4px 0; }
.plan-usage .usage-row + .usage-row { margin-top: 16px; }
.plan-list { list-style: none; margin: 0; padding: 0; }
.plan-list li, .plan-feats li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 18px; border-top: 1px solid var(--hair); font-size: 14.5px; }
.plan-list li:first-child, .plan-feats li:first-child { border-top: 0; }
.plan-val { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.plan-feats { list-style: none; margin: 0; padding: 0; }
.plan-feats li { justify-content: flex-start; }
.plan-feats li svg { flex: none; color: var(--ok, #1e7a3a); }
.plan-feats li.off { color: var(--muted); }
.plan-feats li.off svg { color: var(--muted); }
.plan-feats li .muted { margin-left: auto; }
.plan-billing { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.plan-billing svg { flex: none; margin-top: 3px; }
.plan-billing p { margin: 0; }

/* ============================== workspaces: sidebar ============================== */
.sb-ws { padding: 0 10px 2px; }
.sb-ws[hidden] { display: none; }
.ws-switch { display: flex; align-items: center; gap: 9px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: 500 13.5px/1 var(--font); cursor: pointer; text-align: left; }
.ws-switch[hidden] { display: none; }
.ws-switch:hover { background: var(--side-hover); }
.ws-sw-ico { display: inline-flex; color: var(--muted); }
.ws-sw-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-switch > svg:last-child { color: var(--muted); flex: none; }
.ws-badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #1a1100; font: 700 11px/18px var(--font); text-align: center; }
.ws-item .ci-title { flex: 1; }
.ws-item > svg { flex: none; color: var(--muted); }
.ws-owner { flex: none; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; }
.ws-paused { padding-top: 2px; }
.ci-team { display: inline-flex; flex: none; color: var(--muted); }
.ci-team.shared { opacity: 0.8; }
.ws-chip { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }

/* ============================== workspaces: invitations, tab, page ============================== */
.ws-invites { display: grid; gap: 8px; margin: 0 0 14px; }
.ws-invites[hidden] { display: none; }
.home-center > .ws-invites { width: min(100%, 720px); margin: 0 auto 14px; }
.ws-invite { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 18px; background: var(--bg-soft); border: 1px solid var(--hair); }
.ws-invite-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--bg-soft2); color: var(--text); flex: none; }
.ws-invite-text { flex: 1; min-width: 0; display: grid; gap: 1px; font: 13.5px/1.4 var(--font); }
.ws-invite-text strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-inv-err { color: var(--danger); font-size: 12.5px; }
.ws-inv-err:empty { display: none; }
.ws-invite-act { display: flex; gap: 6px; flex: none; }
.ws-home-note { display: flex; align-items: center; gap: 8px; width: min(100%, 720px); margin: 0 auto 10px; padding: 0 6px; color: var(--muted); font: 13px/1.4 var(--font); }
.ws-home-note[hidden] { display: none; }
.ws-home-note svg { flex: none; }
.ws-list { list-style: none; margin: 0; padding: 0; }
.ws-li { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--hair); }
.ws-li:first-child { border-top: 0; }
.ws-li-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ws-li-name { color: var(--text); font-weight: 550; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-li-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ws-empty { padding: 16px 18px; margin: 0; }

.ws-view { display: flex; flex-direction: column; min-height: 0; }
.ws-scroll { flex: 1; overflow-y: auto; padding: 8px 20px 40px; }
.ws-inner { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.ws-title { margin: 0; font: 600 16px/1 var(--font); letter-spacing: -0.005em; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-actions { display: inline-flex; align-items: center; gap: 8px; }
.ws-banners { display: grid; gap: 8px; }
.ws-banners:empty { display: none; }
.ws-banner { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: 16px; background: var(--bg-soft); color: var(--text); font: 13.5px/1.5 var(--font); }
.ws-banner.warn { background: var(--warn-bg); color: var(--warn-text); }
.ws-banner svg { flex: none; margin-top: 2px; }
.ws-banner span { color: inherit; opacity: 0.85; }
.ws-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-soft); width: fit-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.ws-tabs::-webkit-scrollbar { display: none; }
.ws-tab { height: 32px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 500 13.5px/1 var(--font); cursor: pointer; white-space: nowrap; }
.ws-tab:hover { color: var(--text); }
.ws-tab.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow-sm); }
.ws-body { display: grid; gap: 6px; padding-top: 6px; }
.ws-body > .set-h { margin: 14px 4px 4px; }
.ws-body .set-card { overflow: hidden; }
.ws-members { list-style: none; margin: 0; padding: 0; }
.ws-member { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-top: 1px solid var(--hair); min-height: 58px; }
.ws-member:first-child { border-top: 0; }
.ws-m-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ws-m-name { font-size: 14.5px; font-weight: 500; color: var(--text); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.ws-m-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.ws-m-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--bg-soft2); color: var(--muted); flex: none; }
.ws-inv-row { display: flex; gap: 8px; padding: 12px 14px 4px; flex-wrap: wrap; }
.ws-inv-row input { flex: 1; min-width: 200px; }
.ws-inv-note { margin: 0; padding: 0 16px 12px; }
.ws-invite-form .field-error { padding: 0 16px; margin: 0; }
.ws-rules-note { margin: 2px 4px 0; }
.ws-shared-info { max-width: 760px; margin: 0 auto 6px; padding: 0 2px; }
.ws-shared-note { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; padding: 10px 14px; border-radius: 16px; background: var(--bg-soft); font: 13.5px/1.5 var(--font); }
.ws-shared-note svg { flex: none; color: var(--muted); }
.ws-shared-note .pill { flex: none; }
.ws-shared-thread { padding-bottom: 40px; }
.ws-stor .stor-top { margin-bottom: 8px; }
.ws-stor .bar { margin: 6px 0 4px; }

/* comments on a shared chat */
.msg-comments { display: grid; gap: 8px; margin: -8px 0 4px 6px; padding-left: 14px; border-left: 2px solid var(--hair); font-family: var(--font); }
.msg-comments:empty { display: none; }
.cmt { display: flex; gap: 10px; align-items: flex-start; }
.cmt-av { width: 26px; height: 26px; font-size: 10.5px; }
.cmt-text { flex: 1; min-width: 0; }
.cmt-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; }
.cmt-text p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.cmt-add { display: inline-flex; align-items: center; gap: 6px; width: fit-content; color: var(--muted); font-size: 12.5px; }
.cmt-form { display: grid; gap: 6px; }
.cmt-form textarea { width: 100%; }
.cmt-form-act { display: flex; gap: 6px; justify-content: flex-end; }

/* the sharing dialog */
.ws-share select { width: 100%; margin-bottom: 8px; }
.ws-perm { margin: 6px 0; }

@media (max-width: 700px) {
  .ws-scroll { padding: 6px 14px 90px; }
  .ws-title { max-width: 38vw; }
  .ws-invite { flex-wrap: wrap; }
  .ws-invite-text { flex-basis: calc(100% - 60px); }
  .ws-invite-act { width: 100%; justify-content: flex-end; }
  .ws-inv-row input { min-width: 100%; }
  .ws-inv-row .btn, .ws-inv-row select { flex: 1; }
  .ws-li { flex-wrap: wrap; }
  .ws-li .btn { flex: none; }
  .ws-member { padding: 10px 12px; }
  .msg-comments { margin-left: 2px; }
  .ws-actions .btn { padding: 0 10px; }
  .ws-switch { height: 44px; font-size: 15.5px; border-radius: 14px; }
  .sb-ws { padding: 0 12px 4px; }
}

/* spacing between stacked sections on a workspace page */
.ws-body .set-h { margin: 18px 4px 6px; }
.ws-body > .set-h:first-child, .ws-body > section:first-child > .set-h { margin-top: 6px; }
.ws-body section + section { margin-top: 2px; }
.tb-actions:has(> .ws-actions:empty) { display: none; }
/* read-only rules: same look, quieter, so it is clear they cannot be changed here */
.ws-body .switch[disabled], .ws-body .switch[aria-disabled="true"] { opacity: 0.55; cursor: default; }