:root{
  --bg:#0f1420; --bg2:#161c2b; --panel:#1b2233; --panel2:#232c42;
  --text:#e7ecf5; --muted:#9aa6bd; --line:#2a3350;
  --primary:#5b8cff; --primary2:#4577f0; --accent:#ffb454;
  --pops:#7dd3a0; --danger:#ff6b6b; --ok:#43c884; --warn:#ffb454;
  --radius:14px; --shadow:0 6px 24px rgba(0,0,0,.35);
}
[data-theme="light"]{
  --bg:#eef1f7; --bg2:#e3e8f2; --panel:#ffffff; --panel2:#f2f5fb;
  --text:#1a2233; --muted:#5b6680; --line:#d7deec;
  --primary:#3b6ef0; --primary2:#2f5fdd; --accent:#e08a1e;
  --pops:#1f9d61; --shadow:0 6px 24px rgba(30,50,90,.12);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
.hidden{display:none !important}
.screen{height:100dvh;width:100%}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:15px}

/* ---------- AUTH ---------- */
#auth,#pending{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%,var(--bg2),var(--bg));padding:20px}
.auth-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;width:100%;max-width:380px;box-shadow:var(--shadow)}
.auth-card.center{text-align:center}
.brand{display:flex;align-items:center;gap:10px;justify-content:center}
.brand h1{margin:0;font-size:26px;letter-spacing:.5px}
.logo{font-size:26px}.logo.big{font-size:54px;display:block;margin-bottom:8px}
.tagline{color:var(--muted);text-align:center;margin:8px 0 18px;font-size:14px}
.tabs{display:flex;gap:6px;background:var(--bg2);padding:4px;border-radius:10px;margin-bottom:16px}
.tab{flex:1;padding:9px;border:0;background:transparent;color:var(--muted);border-radius:8px;font-weight:600}
.tab.active{background:var(--panel2);color:var(--text)}
.auth-form{display:flex;flex-direction:column;gap:10px}
.auth-form input,.auth-form select{padding:12px;border-radius:10px;border:1px solid var(--line);
  background:var(--bg2);color:var(--text)}
.btn{padding:11px 16px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);
  color:var(--text);font-weight:600}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary2)}
.btn.ghost{background:transparent}
.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.small{padding:6px 10px;font-size:13px}
.form-msg{font-size:13px;min-height:18px;color:var(--danger)}
.form-msg.ok{color:var(--ok)}
.theme-toggle{position:fixed;top:14px;right:14px;border:1px solid var(--line);background:var(--panel);
  color:var(--text);border-radius:10px;padding:8px 10px;font-size:16px}

/* ---------- APP LAYOUT ---------- */
#app{display:flex;height:100dvh;overflow:hidden}
.sidebar{width:270px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;height:100dvh}
/* Header (2026-09-15, Robbie): row height set to EXACTLY the center panel's
   header height (64px, border-box) so the divider lines under "Ax-Pops" and under
   the room title line up, and flex:0 0 auto so the sidebar (a flex column) can
   never shrink it — that shrinking was what broke the alignment. The name is back
   at its original 17px and STRETCHED to the edges with a horizontal scale, not
   enlarged: "it just needed to be stretched to the edges." */
.sidebar-head{display:flex;align-items:center;justify-content:center;gap:12px;height:64px;box-sizing:border-box;flex:0 0 auto;padding:0 6px;border-bottom:1px solid var(--line);font-size:17px;position:relative}
.sidebar-head .logo{font-size:26px;flex:0 0 auto}
.sidebar-head b{font-size:24px;font-weight:700;line-height:1;white-space:nowrap;letter-spacing:.3px}
.close-sidebar{position:absolute;top:12px;right:10px;margin-left:0;display:none}
/* The calendar row never scrolls, so it does not reserve a scrollbar gutter —
   that gutter (about 16px on the right) is what kept the row off-center and
   short of the full sidebar width. With the gutter gone the button spans the
   area evenly on both sides. */
#calendar-section{overflow-y:visible;padding:8px 10px 8px 6px;flex:0 0 auto;border-bottom:1px solid var(--line)}
.sidebar-search{padding:10px 10px 6px}
.sidebar-search input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:7px 10px;font-size:13px;outline:0}
.sidebar-search input::placeholder{color:var(--muted)}
.sidebar-search input:focus{border-color:var(--primary)}
.side-section{padding:12px 10px;overflow-y:auto}
.side-section:has(.side-title.collapsible[aria-expanded=false]){padding-bottom:4px}
.side-title{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--muted);
  padding:4px 8px;font-weight:700;display:flex;align-items:center;gap:6px;cursor:default}
.side-title.collapsible{cursor:pointer;user-select:none}
.side-title .chevron{font-size:12px;transition:transform .15s;color:var(--muted);display:inline-block}
.side-title[aria-expanded=false] .chevron{transform:rotate(-90deg)}
.side-title.hidden{display:none}
.side-link{
  background:transparent; border:none; color:var(--text); font:inherit;
  display:flex; align-items:center; justify-content:flex-start; gap:8px;
  padding:6px 4px 6px 0; width:100%;
  text-align:left; border-radius:9px; cursor:pointer;
  font-size:16px; font-weight:700; line-height:1.2; white-space:nowrap; letter-spacing:.2px;
}
.side-link:hover{ background:var(--panel2); }


.list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:2px}
.list.hidden{display:none}
.fav-toggle{background:var(--panel2);border:1px solid var(--line);border-radius:6px;color:var(--muted);cursor:pointer;font-size:11px;line-height:1;padding:2px 5px;margin-left:auto;opacity:.55;transition:opacity .15s}
.list li:hover .fav-toggle{opacity:1}
.fav-toggle.active,.fav-toggle:hover{color:var(--accent);border-color:var(--accent)}
.fav-toggle.active{opacity:1}
#fav-section{display:none}
#fav-section:not(.hidden){display:block}
.list li{padding:9px 10px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:14px}
.list li:hover{background:var(--panel2)}
.list li.active{background:var(--primary);color:#fff}
.list li .hash{color:var(--muted)}
.list li.active .hash{color:#fff}
.dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex-shrink:0}
.dot.online{background:var(--ok)}
.unread{margin-left:auto;background:var(--accent);color:#111;border-radius:10px;padding:0 7px;font-size:11px;font-weight:700}
.sidebar-foot{margin-top:auto;border-top:1px solid var(--line);padding:12px}
.me{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:10px}
.badge{background:var(--accent);color:#111;border-radius:6px;padding:1px 7px;font-size:11px;font-weight:700}
.foot-actions{display:flex;gap:6px;flex-wrap:wrap;max-width:100%}
/* ---- message reactions ---- */
.reactions{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:6px;min-height:20px}
.icon-wrap{position:relative;display:inline-flex}
.foot-badge{position:absolute;top:-2px;right:-4px;background:var(--danger,#e5534b);color:#fff;border-radius:9px;font-size:9px;line-height:1;padding:2px 5px;font-weight:700;pointer-events:none}
.react-chip{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:1px 8px;font-size:12px;cursor:pointer;user-select:none}
.react-chip.me{background:var(--primary);color:#fff;border-color:var(--primary)}
.react-add{background:transparent;border:1px dashed var(--line);border-radius:12px;padding:0 7px;font-size:12px;cursor:pointer;color:var(--muted)}
.react-add:hover{color:var(--text);border-color:var(--muted)}
.react-menu{display:flex;flex-wrap:wrap;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px;margin-top:4px;max-width:200px;box-shadow:var(--shadow)}
.react-menu button{background:transparent;border:0;font-size:18px;padding:2px 5px;border-radius:6px;cursor:pointer}
.react-menu button:hover{background:var(--panel2)}
/* ---- message edit/delete menu ---- */
.msg-menu{background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:16px;padding:0 2px;opacity:0.85;transition:opacity .15s}
.msg-menu:hover{color:var(--text)}
.msg-menu-popup{display:flex;flex-direction:column;position:absolute;top:100%;right:0;background:var(--panel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden;z-index:10}
.msg-menu-popup button{background:transparent;border:0;color:var(--text);padding:8px 14px;text-align:left;cursor:pointer;font-size:13px}
.msg-menu-popup button:hover{background:var(--panel2)}
.msg-menu-popup button[data-action="delete"]{color:var(--danger)}
.msg .body, .msg .who{position:relative}
.edit-box{background:var(--bg2);border:1px solid var(--line);border-radius:8px;color:var(--text);padding:8px;min-width:0;resize:vertical;min-height:40px;font:inherit;margin:4px 0}
.edited-tag,.deleted-tag{font-size:11px;color:var(--muted);margin-top:4px}
.deleted-text{font-style:italic;color:var(--muted)}
.icon-btn{background:transparent;border:1px solid transparent;color:var(--text);border-radius:9px;
  padding:7px 9px;font-size:16px}
.icon-btn:hover{background:var(--panel2)}

/* ---------- CHAT ---------- */
.chat{flex:1;display:flex;flex-direction:column;height:100dvh;min-width:0;min-height:0;overflow:hidden}
.chat-body-wrap{flex:1;display:flex;min-height:0;min-width:0;overflow:hidden}
.chat-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line);
  background:var(--panel)}
.chat-title{font-weight:700;font-size:16px}
.menu-btn{display:none}
.presence{margin-left:auto;color:var(--muted);font-size:13px}
.roster-toggle{border-color:var(--line);font-size:14px}
.roster-panel{width:270px;flex:0 0 270px;overflow-y:auto;background:var(--panel);border-left:1px solid var(--line);padding:14px}
.roster-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.roster-title{font-weight:700}
.close-roster{padding:3px 7px}
.roster-section{margin-bottom:20px}
.roster-section-title{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;margin-bottom:8px}
.roster-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.roster-item{display:flex;align-items:center;gap:8px;padding:7px 6px;border-radius:8px;font-size:13px;min-width:0}
.roster-item.ai-item{cursor:pointer}
.roster-item.ai-item:hover{background:var(--panel2)}
.roster-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.roster-handle{margin-left:auto;color:var(--muted);font-size:11px}
.roster-empty{padding:6px;color:var(--muted);font-size:12px;font-style:italic}
.messages{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.empty-hint{color:var(--muted);text-align:center;margin:auto;font-size:15px}
.msg{display:flex;gap:10px;max-width:min(720px,92%)}
.msg .avatar{width:34px;height:34px;border-radius:50%;background:var(--panel2);display:flex;
  align-items:center;justify-content:center;font-size:32px;line-height:1;flex-shrink:0;font-weight:700}
.msg .body{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 12px;min-width:0}
.msg .who{font-size:12px;color:var(--muted);margin-bottom:2px;display:flex;gap:6px;align-items:center;position:relative;flex-wrap:wrap}
.msg-date{font-size:10px;color:var(--muted);font-weight:500;white-space:nowrap}
.msg-time{font-size:10px;color:var(--muted);font-weight:500;white-space:nowrap}
.cost-text{font-size:10px;color:var(--muted);font-weight:700;white-space:nowrap}
.model-name{font-size:10px;color:var(--text);font-weight:700;white-space:nowrap;background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:0 5px}
.donate-btn{background:transparent;border:1px solid var(--line);border-radius:8px;color:#1ab86c;font-weight:800;text-decoration:none;font-size:12px;line-height:1.5;padding:0 5px;cursor:pointer;display:inline-flex;align-items:center}
.donate-btn:hover{background:var(--line);border-color:#1ab86c}
.play-btn{background:transparent;border:0;cursor:pointer;font-size:13px;color:var(--muted);padding:0 2px}
.play-btn:hover{color:var(--text)}
.who-actions{display:flex;gap:6px;align-items:center;margin-left:auto}
.who-actions .msg-menu{margin-left:0}
.cost-donate{display:flex;gap:0;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cost-donate .cost-text{padding:0 5px 0 6px;font-size:10px;color:var(--muted);font-weight:700;white-space:nowrap}
.cost-donate .donate-btn{border:0;border-radius:0;border-left:1px solid var(--line);padding:0 5px}
.msg .who b{color:var(--text)}
.msg .text{white-space:pre-wrap;word-wrap:break-word;line-height:1.45}
.meta-grid{display:grid;grid-template-columns:max-content 1fr;gap:8px 14px;margin-bottom:16px;font-size:14px}
.meta-grid .label{color:var(--muted);font-weight:600}
.meta-grid .value{color:var(--text)}
.request-detail-content{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:14px;color:var(--text);white-space:pre-wrap;word-wrap:break-word;line-height:1.5;max-height:min(60vh,420px);overflow-y:auto}
.msg.mine{align-self:flex-end;flex-direction:row-reverse}
.msg.mine .body{background:var(--primary);border-color:var(--primary);color:#fff}
.msg.mine .who{color:#dbe6ff}
.msg.pops .avatar{background:var(--pops);color:#08301c}
.msg.pops .body{background:linear-gradient(180deg,var(--panel2),var(--panel));border-color:var(--pops)}
.msg.pops .who b{color:var(--pops)}
.tag{font-size:10px;background:var(--bg2);border:1px solid var(--line);border-radius:6px;padding:0 6px;color:var(--muted)}
.cursor{display:inline-block;width:7px;background:var(--pops);animation:blink 1s steps(2) infinite;margin-left:1px}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.typing-row{min-height:20px;padding:0 18px;color:var(--muted);font-size:13px;font-style:italic}
.composer{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--line);background:var(--panel);align-items:flex-end}
.composer textarea{flex:1;resize:none;max-height:140px;padding:11px;border-radius:12px;
  border:1px solid var(--line);background:var(--bg2);color:var(--text);line-height:1.4}
.send{white-space:nowrap}
#pops-btn{border:1px solid var(--line);color:var(--pops);font-weight:700;font-size:13px}

/* ---------- MODALS ---------- */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;
  justify-content:center;padding:16px;z-index:50}
.modal-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  width:100%;max-width:480px;max-height:90dvh;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.modal-box.wide{max-width:820px}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0}
.modal-tabs{display:flex;gap:6px;padding:12px 16px 0}
.mtab{padding:8px 12px;border:0;background:transparent;color:var(--muted);border-radius:8px;font-weight:600}
.mtab.active{background:var(--panel2);color:var(--text)}
.modal-body{padding:16px;overflow:auto}
/* Themed replacements for the browser's confirm/alert/prompt windows */
.appdialog-box{max-width:440px}
.appdialog-text{white-space:pre-wrap;line-height:1.5;margin:0 0 14px}
.appdialog-input{width:100%;padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg2);color:var(--text);margin-bottom:14px}
.appdialog-actions{display:flex;gap:8px;justify-content:flex-end}
/* Direct Message picker (people + personas) */
.dm-new-btn{margin-left:auto;font-size:13px;padding:2px 6px}
.picker-list{display:flex;flex-direction:column;gap:2px;max-height:min(60vh,420px);overflow-y:auto;margin-top:10px}
.picker-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;border:1px solid transparent}
.picker-item:hover{background:var(--panel2);border-color:var(--line)}
.picker-item .pav{width:28px;height:28px;border-radius:50%;background:var(--panel2);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.picker-item .pname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picker-item .ptag{font-size:10px;color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:0 6px}
.picker-empty{color:var(--muted);font-size:13px;padding:10px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:8px;border-bottom:1px solid var(--line);white-space:nowrap}
th{color:var(--muted);font-weight:600}
.status-pill{padding:2px 8px;border-radius:8px;font-size:12px;font-weight:600}
.status-approved{background:rgba(67,200,132,.18);color:var(--ok)}
.status-pending{background:rgba(255,180,84,.18);color:var(--warn)}
.status-rejected,.status-suspended{background:rgba(255,107,107,.18);color:var(--danger)}
.row-actions{display:flex;gap:4px;flex-wrap:wrap}
.inline-form{display:flex;gap:8px;margin-bottom:14px}
.inline-form input{flex:1;padding:10px;border-radius:9px;border:1px solid var(--line);background:var(--bg2);color:var(--text)}
.admin-rooms li{justify-content:space-between}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;font-size:14px;color:var(--muted)}
.field input{padding:10px;border-radius:9px;border:1px solid var(--line);background:var(--bg2);color:var(--text);max-width:160px}
.chk{display:flex;align-items:center;gap:4px;font-size:12px}
h4{margin:18px 0 8px}

/* mention popup */
.mention-pop{position:fixed;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  box-shadow:var(--shadow);z-index:60;overflow:hidden}
.mention-item{padding:9px 14px;cursor:pointer}
.mention-item:hover,.mention-item.sel{background:var(--primary);color:#fff}

/* ---------- RESPONSIVE ---------- */
@media(max-width:760px){
  .sidebar{position:fixed;left:0;top:0;z-index:40;transform:translateX(-100%);transition:transform .2s;
    box-shadow:var(--shadow)}
  .sidebar.open{transform:translateX(0)}
  .close-sidebar{display:block}
  .menu-btn{display:block}
  .msg{max-width:100%}
  .roster-panel{position:absolute;right:0;top:0;bottom:0;z-index:10;box-shadow:var(--shadow)}
}

/* ---------- Phase 2: voice ---------- */
.play-btn {
  background: transparent; border: none; cursor: pointer;
  font-size: 0.9rem; line-height: 1; padding: 0 4px; margin-left: 6px;
  opacity: 0.7; transition: opacity 0.15s, transform 0.1s;
}
.play-btn:hover { opacity: 1; transform: scale(1.15); }
#mic-btn.recording {
  color: var(--danger, #e5484d);
  animation: micpulse 1s ease-in-out infinite;
}
@keyframes micpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }



/* ---------- Phase 3: personas ---------- */
/* Image avatars anywhere an emoji/initial can appear. Every image is boxed and
   cropped by its .pav wrapper so a picture never changes a row's size. */
.msg .avatar img,
.pav img,
.mention-av img { width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; }
.pav{ display:inline-flex; width:22px; height:22px; border-radius:50%; background:var(--panel2);
  align-items:center; justify-content:center; font-size:21px;line-height:1; vertical-align:middle; overflow:hidden; }
.msg .avatar{ overflow:hidden; }
/* Sidebar / roster / picker avatars: one fixed box, the same footprint as an
   emoji, sitting inline so the name stays beside it. */
.list li .pav,
.roster-item .pav,
.picker-item .pav {
  width:17px; height:17px; min-width:17px; max-width:17px; min-height:17px; max-height:17px;
  flex:0 0 17px; font-size:16px; line-height:1; border-radius:50%; overflow:hidden;
}
.list li .pav img,
.roster-item .pav img,
.picker-item .pav img { width:17px; height:17px; border-radius:50%; object-fit:cover; display:block; }

.muted{ color:var(--muted); }
.small{ font-size:12px; }

/* Persona form: full-width fields (override the narrow admin-settings inputs) */
#persona-form .field{ color:var(--text); }
#persona-form .field span{ color:var(--muted); font-size:13px; }
#persona-form .field input,
#persona-form .field textarea{ max-width:none; width:100%; padding:10px; border-radius:9px;
  border:1px solid var(--line); background:var(--bg2); color:var(--text); font:inherit; }
#persona-form textarea{ resize:vertical; line-height:1.4; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.form-row{ display:flex; gap:20px; flex-wrap:wrap; margin:6px 0 14px; }
.check{ display:flex; align-items:center; gap:7px; font-size:14px; color:var(--text); cursor:pointer; }
.check input{ width:auto; }
.form-actions{ display:flex; align-items:center; gap:12px; margin-top:8px; }
fieldset{ border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0 0 16px; }
fieldset legend{ padding:0 6px; font-weight:600; color:var(--text); font-size:13px; }
.scope-list{ display:flex; flex-direction:column; gap:6px; margin:8px 0; }
.persona-cap{ margin-top:12px; }

/* Mention popup rows with avatars */
.mention-item{ display:flex; align-items:center; gap:8px; }
.mention-av{ display:inline-flex; width:22px; height:22px; border-radius:50%; background:var(--panel2);
  align-items:center; justify-content:center; font-size:13px; overflow:hidden; flex-shrink:0; }
.mention-name{ font-weight:600; }
.mention-handle{ color:var(--muted); font-size:12px; }
.mention-item:hover .mention-handle{ color:#e7ecff; }

@media(max-width:600px){ .form-grid{ grid-template-columns:1fr; } }

/* Voice notice: shown in the chat header when a persona cannot speak in its real
   cloned voice, so the person knows why instead of wondering what broke. */
.voice-notice{
  margin-left:auto; margin-right:8px; max-width:min(58%, 460px);
  font-size:12px; line-height:1.35; padding:5px 9px; border-radius:9px;
  border:1px solid var(--line); background:var(--panel2); color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:default;
}
.voice-notice.warn{ border-color:#8a6d1f; background:rgba(138,109,31,.18); color:#f0d894; }
.voice-notice.hidden{ display:none; }
@media(max-width:820px){ .voice-notice{ display:none; } }

/* Account window: the notification switch sits in its own column to the right of
   Sound alerts, so the two settings read side by side. */
.acct-cols{ display:grid; grid-template-columns:1fr 1fr; gap:14px 22px; margin:4px 0 10px; align-items:start; }
.acct-col h4{ margin-top:0; }
.acct-col .sound-pref{ display:block; margin:6px 0; }
@media(max-width:640px){ .acct-cols{ grid-template-columns:1fr; } }

/* ---------- shared photos and files in messages ---------- */

/* The 📎 button is a normal composer button; it only looks busy while a file is
   on its way up, so a slow upload on a phone is visible instead of silent. */
#attach-btn.busy { opacity: .45; }

/* The waiting-file strip sits just above the message box. */
.attach-pending {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 6px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  font-size: 13px;
  min-width: 0;
}
.attach-pending-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}
.attach-pending .icon-btn { flex: 0 0 auto; }

/* A shared photo in the conversation. Never wider than the bubble, never taller
   than most of the screen, and it keeps its own shape. */
.msg-photo {
  display: block;
  max-width: min(320px, 100%);
  max-height: 360px;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
  cursor: zoom-in;
  background: var(--panel);
}

/* A shared file that is not a photo: a small card with the name and a button. */
.msg-file {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: min(340px, 100%);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  text-decoration: none;
  color: var(--text);
}
.msg-file-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}
.msg-file-size {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
}
.msg-file-action {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--accent);
}

/* The full-size photo view. */
.photo-viewer {
  position: relative;
  max-width: 92vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
#photo-full {
  max-width: 92vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line);
}
.photo-close {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 50%;
}
.photo-caption {
  font-size: 12px;
  color: var(--muted);
  text-align: center;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- searching old messages ---------- */

.search-section {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  margin: 12px 0 6px;
}
.search-section:first-child { margin-top: 0; }
.search-result-short { padding: 8px 10px; }
.search-result-short .search-result-where { font-size: 13px; font-weight: 600; }

.search-result {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--panel);
}
.search-result:hover { border-color: var(--accent); }
.search-result-head {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 11px; color: var(--muted);
}
.search-result-where { font-weight: 600; }
.search-result-when { flex: 0 0 auto; }
.search-result-who { font-size: 12px; color: var(--accent); margin-top: 2px; }
.search-result-text { font-size: 13px; margin-top: 4px; line-height: 1.4; }
.search-result-file { font-size: 12px; margin-top: 4px; color: var(--muted); }
.search-result mark {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}

/* The message a search result opened flashes briefly so the eye finds it. */
.msg.search-hit {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 10px;
  transition: outline-color .4s ease;
}

/* Birthday pickers in the Account window. */
.birth-select {
  margin-left: 6px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  font: inherit;
}

/* ---------- theme-correct form controls ---------- */

/* The option list a dropdown opens is painted by the browser, not by CSS. Without
   declaring which colour scheme the page uses, the browser draws that list white
   even in the dark theme, and the text becomes unreadable. This is what makes the
   month/day/year popups match the theme instead of going white. */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }

/* The list a dropdown opens is drawn by the browser, and on some systems it is
   drawn white even when the page is dark — light text on a white list, unreadable.
   The colour scheme above fixes it where the browser honours it; setting the
   option colours explicitly covers the rest, so the open list is always the
   theme's own panel with the theme's own text. This applies to every dropdown in
   the app, sign-up included. */
select option, select optgroup {
  background: var(--panel);
  color: var(--text);
}

/* Birthday: one block under the Relation / Age / Status line, with the three
   dropdowns across horizontally. Each cell carries its own small label above it
   so the row stays clean at any width; on a narrow phone the three fold into one
   column so nothing is squeezed. */
.birth-block { margin: 4px 0 14px; }
.birth-block h4 { margin-top: 0; }
.birth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  align-items: end;
}
.birth-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.birth-label { font-size: 12px; color: var(--muted); }
.birth-select {
  width: 100%;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg2);
  color: var(--text);
  font: inherit;
  color-scheme: dark;
}
[data-theme="light"] .birth-select { color-scheme: light; }
.birth-select:focus { outline: none; border-color: var(--primary); }
@media(max-width:520px){ .birth-grid{ grid-template-columns:1fr; } }

/* ---------- shared family calendar ---------- */
.calendar-view{ display:flex; flex-direction:column; gap:10px; padding:14px 16px; overflow:auto; }
.cal-head{ display:flex; align-items:center; gap:8px; }
.cal-title{ font-weight:700; flex:1; }
.cal-nav, .cal-add{ font-size:16px; }
.cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; text-align:center; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal-cell{ min-height:74px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:5px; display:flex; flex-direction:column; gap:3px; overflow:hidden; cursor:pointer; }
.cal-empty{ background:transparent; border-color:transparent; cursor:default; }
.cal-today{ border-color:var(--primary); }
.cal-sel{ outline:2px solid var(--primary); }
.cal-num{ font-size:12px; font-weight:700; color:var(--muted); }
.cal-chip{ font-size:11px; line-height:1.25; background:var(--panel); border:1px solid var(--line); color:var(--text); border-radius:6px; padding:2px 5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-chip-bday{ background:var(--accent-soft); border-color:var(--accent); color:var(--text); }
.cal-more{ font-size:10px; color:var(--muted); }
.cal-day-title{ font-weight:700; margin-top:6px; }
.cal-day-list{ display:flex; flex-direction:column; gap:6px; }
.cal-day-row{ display:flex; align-items:center; gap:8px; background:var(--bg2); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.cal-row-left{ flex:1; min-width:0; }
.cal-row-title{ font-size:13px; font-weight:600; }
.cal-row-sub{ font-size:11px; color:var(--muted); }
.cal-row-by{ font-size:13px; font-weight:700; color:var(--muted); margin-right:6px; }
.cal-del{ flex:0 0 auto; }
.cal-edit{ flex:0 0 auto; }
.cal-form-head{ grid-column:1/-1; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
.cal-none{ color:var(--muted); font-size:12px; }
@media(max-width:520px){ .cal-cell{ min-height:52px; } }

/* Calendar "add event" themed form (replaces the native browser prompts so it
   matches the app theme like every other control). */
.cal-add-form{ display:grid; grid-template-columns:1fr 1fr; gap:8px; background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:10px; }
.cal-add-form input{ background:var(--bg2); color:var(--text); border:1px solid var(--line); border-radius:8px; padding:8px 10px; font:inherit; color-scheme:dark; }
.cal-add-form input:focus{ outline:none; border-color:var(--primary); }
.cal-add-form .cal-form-btns{ display:flex; gap:6px; justify-content:flex-end; grid-column:1/-1; }
.cal-add-form #cal-add-title{ grid-column:1/-1; }
@media(max-width:520px){ .cal-add-form{ grid-template-columns:1fr; } .cal-add-form .cal-form-btns{ grid-column:auto; } }

/* ---------- your own picture (Account window) ---------- */
/* The preview box is larger than a list row's avatar so a person can see what
   they are about to save, while the picture itself stays cropped to the circle. */
.acct-pic{display:flex;gap:14px;align-items:flex-start;margin:14px 0 4px}
.acct-pic .pav.big-pav{width:64px;height:64px;font-size:60px;line-height:1;flex:0 0 auto}
.acct-pic .pav.big-pav img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.acct-pic-actions{flex:1 1 auto;min-width:0}
.acct-pic-actions h4{margin:0 0 6px}
.acct-pic-btns{display:flex;gap:8px;flex-wrap:wrap}
.acct-pic-actions .muted{margin:6px 0 0}

/* ---------- photo album ---------- */
/* Every photo shared in the app, newest first, grouped by the month it was
   shared. The grid is the same visual language as the rest of the app. */
.album-view{ display:flex; flex-direction:column; gap:10px; padding:14px 16px; overflow:auto; }
.album-hint{ font-size:12px; color:var(--muted); }
.album-grid{ display:flex; flex-direction:column; gap:14px; }
.album-month{ font-size:12px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); }
.album-strip{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
.album-cell{ position:relative; padding:0; border:1px solid var(--line); background:var(--panel2);
  border-radius:10px; overflow:hidden; cursor:pointer; aspect-ratio:1/1; }
.album-cell img{ width:100%; height:100%; object-fit:cover; display:block; }
.album-cell:hover{ border-color:var(--primary); }
.album-cap{ position:absolute; left:0; right:0; bottom:0; font-size:11px; padding:3px 6px;
  background:rgba(0,0,0,.55); color:#fff; text-align:left; }
/* The day selector matches the theme, and its popup calendar is dark too. */
.album-filter,.album-date{ background:var(--panel2); border:1px solid var(--line); border-radius:8px;
  color:var(--text); padding:5px 8px; font-size:13px; color-scheme:dark; }
.album-date{ flex:0 0 auto; }
.album-filter option{ background:var(--panel2); color:var(--text); }

/* ---------- weekly note from Pops (Account window) ---------- */
.summary-block{ margin-top:16px; }
.summary-grid{ display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; margin-top:6px; }
.summary-grid .birth-cell{ flex:1 1 150px; }
.summary-try-cell{ flex:0 0 auto !important; }