/* UI-09 Soul, Identity and Memory (public/persona.js) and the PA-01 main
   agent badge. Neutral surfaces use the shared untinted tokens; the Soul and
   Memory cards carry Muse's colour on purpose (Tray's reference), muted so
   white text stays readable in both themes. */

.persona { display:flex; flex-direction:column; gap:12px; min-width:0; }

.persona-card { display:flex; flex-direction:column; gap:12px; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--panel-2); min-width:0; }
.persona-card-head { display:flex; align-items:flex-start; gap:12px; min-width:0; }
.persona-avatar { position:relative; flex:none; width:48px; height:48px; border-radius:50%; display:grid; place-items:center; overflow:visible; }
.persona-avatar > svg, .persona-avatar > img { width:48px; height:48px; border-radius:50%; }
.persona-avatar-edit { position:absolute; right:-4px; bottom:-4px; width:24px; height:24px; display:grid; place-items:center; border-radius:50%; border:2px solid var(--panel-2); background:var(--raise); color:var(--ink); cursor:pointer; padding:0; }
.persona-avatar-edit:hover { background:var(--hover-2); }
.persona-card-copy { display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.persona-name { font-size:16px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.persona-emoji { position:absolute; opacity:0; pointer-events:none; }
.persona-vibe-label { margin-top:8px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.persona-vibe { margin:0; font-size:14px; line-height:1.45; color:var(--ink-2); }
.persona-edit { display:inline-flex; align-items:center; justify-content:center; gap:6px; width:100%; border-radius:999px; }

.persona-tiles { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.persona-tile { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:4px; min-height:132px; padding:14px; border:0; border-radius:18px; color:#ffffff; text-align:left; cursor:pointer; overflow:hidden; isolation:isolate; font:inherit; }
.persona-tile::after { content:""; position:absolute; inset:0; z-index:-1; background:radial-gradient(120% 90% at 85% 110%, rgba(255,255,255,.18), transparent 60%); }
.persona-tile:hover { filter:brightness(1.08); }
.persona-tile:focus-visible { outline:2px solid var(--ink); outline-offset:2px; }
.persona-tile-soul { background:linear-gradient(160deg, #b8373f 0%, #8e1f2a 100%); }
.persona-tile-memory { background:linear-gradient(160deg, #3a56b8 0%, #1d2f8a 100%); }
.persona-tile-title { font-size:17px; font-weight:700; letter-spacing:.02em; }
.persona-tile-care { font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.78; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; }
.persona-tile-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:13px; opacity:.9; }
.persona-tile-flag { font-family:inherit; font-size:10.5px; padding:2px 6px; border-radius:999px; background:rgba(0,0,0,.28); }

.persona-more { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.persona-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 14px; border:0; border-top:1px solid var(--line); background:transparent; color:var(--ink); font:inherit; font-size:13px; text-align:left; cursor:pointer; }
.persona-row:first-child { border-top:0; }
.persona-row:hover { background:var(--hover); }
.persona-row .sub { color:var(--ink-3); font-size:12px; }

/* Editor overlay */
.persona-editor-scrim .modal.persona-editor { width:min(860px, calc(100vw - 32px)); max-width:none; max-height:calc(100vh - 48px); display:flex; flex-direction:column; }
.persona-editor-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.persona-editor-head > strong { font-size:15px; }
.persona-toolbar { display:flex; align-items:center; gap:2px; flex-wrap:nowrap; margin-left:auto; margin-right:8px; overflow-x:auto; scrollbar-width:none; }
.persona-tool { flex:none; white-space:nowrap; min-width:30px; height:28px; padding:0 7px; border:0; border-radius:7px; background:transparent; color:var(--ink-2); font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.persona-tool:hover:not(:disabled) { background:var(--hover-2); color:var(--ink); }
.persona-tool:disabled { opacity:.4; cursor:default; }
.persona-tool-sep { width:1px; height:18px; margin:0 4px; background:var(--line-2); }
.persona-mode { margin-left:auto; background:var(--quiet, var(--hover)); }
.persona-editor-body { display:flex; flex-direction:column; gap:14px; overflow:auto; min-height:0; }
.persona-about { margin:0; padding:2px 0 2px 14px; border-left:3px solid var(--line-3); font-style:italic; font-size:14px; line-height:1.55; color:var(--ink-2); }
.persona-about strong { font-style:italic; color:var(--ink); }
.persona-source { width:100%; min-height:min(52vh, 460px); resize:vertical; padding:14px 16px; border:1px solid var(--line-2); border-radius:12px; background:var(--bg-input); color:var(--ink); font:inherit; font-size:15px; line-height:1.6; }
.persona-source:focus { outline:none; border-color:var(--line-3); }
.persona-preview { min-height:120px; font-size:15px; line-height:1.6; color:var(--ink); border-radius:12px; }
.persona-preview.is-editable { cursor:text; padding:2px 4px; margin:0 -4px; }
.persona-preview.is-editable:hover { background:var(--hover); }
.persona-preview.is-editable:focus-visible { outline:2px solid var(--line-3); outline-offset:2px; }
.persona-preview h1 { font-size:24px; margin:4px 0 10px; }
.persona-preview h2 { font-size:19px; margin:16px 0 8px; }
.persona-preview h3 { font-size:16px; margin:14px 0 6px; }
.persona-readonly { margin:0; }
.persona-proposal { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--line-2); border-radius:12px; background:var(--panel-2); font-size:13px; }
.persona-proposal-actions { display:flex; gap:6px; }
.persona-editor-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.persona-meta { margin-right:auto; color:var(--ink-3); }
.persona-history { display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:1px solid var(--line); font-size:13px; }
.persona-history-row { display:flex; align-items:center; justify-content:space-between; gap:8px; color:var(--ink-2); }

/* PA-01 main agent badge (agents list and chat rail). The name always wins:
   in the narrow chat rail the badge is a dot (its words stay in the label),
   and in the agents list it becomes a dot on phones. */
.main-agent-badge { display:inline-flex; align-items:center; height:18px; margin-left:6px; padding:0 7px; border-radius:999px; border:1px solid var(--line-2); color:var(--ink-2); font-size:10.5px; font-weight:600; letter-spacing:.02em; vertical-align:middle; white-space:nowrap; flex:none; }
.agent-rail-heading .lbl { min-width:0; }
.agent-rail-heading .main-agent-badge, .main-agent-badge.is-dot { width:7px; height:7px; min-width:7px; margin:0 2px 0 6px; padding:0; border:0; border-radius:50%; background:var(--ink-2); align-self:center; }
.agent-rail-heading .main-agent-badge-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (max-width: 520px) {
  .product-agent-copy .main-agent-badge { width:7px; height:7px; min-width:7px; padding:0; border:0; border-radius:50%; background:var(--ink-2); }
  .product-agent-copy .main-agent-badge-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* PA-02 invite: "Their role" */
.invite-role-field { display:flex; flex-direction:column; gap:4px; margin-top:10px; font-size:13px; }
.invite-role-field > span:first-child { font-weight:600; color:var(--ink); }
.invite-role-field textarea { width:100%; resize:vertical; min-height:56px; }

@media (max-width: 520px) {
  .persona-tile { min-height:112px; padding:12px; }
  .persona-toolbar { margin-left:0; order:3; width:100%; }
  .persona-tool { min-width:28px; padding:0 5px; }
  .persona-tool-sep { margin:0 2px; }
  .persona-source { min-height:46vh; }
}