/* Production containment and responsive adjustments for the supplied home. */
#sv-home { position:fixed; inset:0; min-width:0; overflow:hidden; }
#sv-home *, #sv-home *::before, #sv-home *::after { box-sizing:border-box; }
#sv-home button, #sv-home input, #sv-home textarea { max-width:100%; }
#sv-home button { white-space:normal; }
#sv-home button:focus-visible, #sv-home a:focus-visible, #sv-home [role="button"]:focus-visible { outline:2px solid var(--sv-violet-bright); outline-offset:3px; }
#sv-home .m-main { min-width:0; }
#sv-home .m-home { grid-template-columns:minmax(0,1fr) clamp(290px,26vw,440px) !important; }
#sv-home .m-home > div { min-width:0; }
#sv-home .m-home > div:first-child { padding-left:clamp(18px,3vw,72px) !important; padding-right:clamp(18px,3vw,72px) !important; }
#sv-home .m-topbar .m-tabs { min-width:0; max-width:none; flex-direction:row; flex-wrap:nowrap !important; overflow:visible; }
#sv-home .m-topbar { min-height:64px; }
#sv-home .m-topbar button { flex-shrink:0; }
#sv-home .m-topbar [data-on-click="toggleAcct"] .m-hide { max-width:180px; overflow:hidden; }
#sv-home .m-topbar [data-on-click="toggleAcct"] .m-hide > span { max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sv-home [data-on-click="toggleAcct"] { min-width:0; }
#sv-home .sv-status { position:relative; padding:9px 18px; border-bottom:1px solid var(--sv-line); background:var(--sv-panel); font-size:16px; }
#sv-home .sv-status button { color:var(--sv-violet-bright); background:transparent; border:0; text-decoration:underline; cursor:pointer; }
#sv-home .sv-feature-card { padding:clamp(22px,4vw,36px); background:var(--sv-panel); border:1px solid var(--sv-line); box-shadow:inset 0 0 0 4px var(--sv-bg),inset 0 0 0 5px rgba(var(--sv-accent-rgb),.1); animation:sv-home-rise .5s ease both; }
#sv-home .sv-feature-card h2 { font-family:var(--sv-font-display); font-size:clamp(20px,3vw,28px); font-weight:600; margin:0 0 12px; overflow-wrap:anywhere; }
#sv-home .sv-feature-card p { font-size:18px; line-height:1.65; color:var(--sv-text-muted); margin:0 0 20px; }
#sv-home .sv-empty { max-width:760px; padding:clamp(24px,6vw,64px); text-align:center; }
#sv-home .sv-empty-glyph { display:grid; place-items:center; width:64px; height:64px; margin:0 auto 20px; border:1px dashed var(--sv-line-strong); border-radius:50%; color:var(--sv-violet-bright); font-size:28px; animation:sv-home-drift 4s ease-in-out infinite; }
#sv-home .sv-empty-note { padding:12px; color:var(--sv-text-muted); font-size:17px; }
#sv-home .sv-action-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
#sv-home .sv-primary, #sv-home .sv-outline { padding:12px 16px; border:1px solid var(--sv-line-strong); border-radius:9px; background:transparent; color:var(--sv-violet-bright); cursor:pointer; font-family:var(--sv-font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; transition:transform .18s,border-color .18s; }
#sv-home .sv-primary { background:var(--sv-grad-primary); color:var(--sv-on-primary); }
#sv-home .sv-primary:hover, #sv-home .sv-outline:hover { transform:translateY(-2px); border-color:var(--sv-violet-bright); }
#sv-home .sv-admin-links { display:flex; flex-wrap:wrap; gap:8px; }
#sv-home .sv-admin-links .sv-outline { padding:9px 12px; }
#sv-home .sv-popover { max-width:calc(100% - 24px) !important; max-height:calc(100% - 88px); overflow-y:auto; overscroll-behavior:contain; }
#sv-home .sv-toast { max-width:calc(100% - 28px); white-space:normal !important; text-align:center; overflow-wrap:anywhere; }
#sv-home .sv-motion-paused *, #sv-home.sv-motion-paused * { animation-play-state:paused !important; }
#sv-home.sv-motion-reduced * { animation:none !important; transition:none !important; }
@media(max-width:1100px) {
 #sv-home .m-tabs { display:none !important; }
 #sv-home .m-topbar .m-spacer { flex:1 1 auto !important; }
 #sv-home .m-social { grid-template-columns:minmax(250px,35%) minmax(0,1fr) !important; }
}
@media(max-width:800px) {
 #sv-home .m-home { grid-template-columns:1fr !important; grid-template-rows:auto auto !important; overflow-y:auto !important; }
 #sv-home .m-home > div:first-child { overflow:visible !important; padding-bottom:24px !important; }
 #sv-home .m-home > div:last-child { border-left:0 !important; border-top:1px solid var(--sv-line-soft); overflow:visible !important; }
 #sv-home .m-home > div:last-child > div:last-child { overflow:visible !important; flex:none !important; }
 #sv-home .m-stack { grid-template-columns:1fr !important; }
}
@media(max-width:720px) {
 #sv-home .m-main { height:calc(100% - 64px - env(safe-area-inset-bottom)) !important; }
 #sv-home .m-social { grid-template-columns:1fr !important; }
 #sv-home .m-topbar { gap:7px !important; }
 #sv-home .sv-toast { bottom:calc(76px + env(safe-area-inset-bottom)) !important; }
 #sv-home .m-home #rail { min-height:270px; }
 #sv-home .sv-feature-card { padding:24px 20px; }
 #sv-home .sv-selected-actions { flex-wrap:wrap; }
 #sv-home .sv-selected-actions > * { min-width:140px; }
 #sv-home .m-settings > div:last-child > div > div > div { flex-wrap:wrap; }
}
@media(max-width:360px) {
 #sv-home .m-topbar .m-anima { max-width:92px; overflow:hidden; font-size:9px !important; padding:6px 8px !important; }
 #sv-home .m-topbar > button:first-child { width:40px !important; height:40px !important; }
 #sv-home .m-topbar [data-on-click="toggleAcct"] { padding-right:6px !important; }
 #sv-home .m-bottom { padding-left:2px !important; padding-right:2px !important; }
 #sv-home .m-bottom button, #sv-home .m-bottom a { font-size:7px !important; letter-spacing:.04em !important; }
}
@media(max-height:540px) {
 #sv-home .sv-popover { top:62px !important; max-height:calc(100% - 74px); }
 #sv-home .m-topbar { height:56px !important; min-height:56px; }
 #sv-home #rail { height:240px !important; }
 #sv-home aside { max-height:100%; }
}
#sv-home .sv-drawer-nav { display:grid; gap:5px; }
#sv-home .sv-drawer-nav .sv-outline { text-align:left; padding:12px 14px; }

/* Authored scenario copy can be much longer than the design's sample hooks. */
#sv-home .sv-starter-card { min-width:0; }
#sv-home .sv-starter-numeral { flex:0 0 auto; margin-bottom:12px; line-height:1.25; }
#sv-home .sv-starter-title { flex:0 0 auto; min-height:2.5em; overflow-wrap:anywhere; }
#sv-home .sv-starter-hook { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; overflow:hidden; overflow-wrap:anywhere; }

/* The delivered memory-settings layout, including narrow and short screens. */
#sv-home .sv-memory-settings { min-width:0; overscroll-behavior:contain; }
#sv-home .sv-memory-settings > div { width:100%; }
#sv-home .sv-memory-system { width:100%; min-width:0; }
#sv-home .sv-memory-system:focus-visible { outline:2px solid var(--sv-violet-bright); outline-offset:3px; }
#sv-home .sv-memory-system:disabled,
#sv-home .sv-memory-depth button:disabled,
#sv-home .sv-memory-option button:disabled { cursor:not-allowed; }
#sv-home .sv-memory-system:disabled:hover { border-color:var(--sv-line) !important; }
#sv-home .sv-memory-context input[type="range"] { min-height:24px; cursor:pointer; }
#sv-home .sv-memory-context input[type="range"]:disabled { cursor:not-allowed; }
#sv-home .sv-memory-option > span:first-child { min-width:0; }
#sv-home .sv-memory-depth { flex-wrap:wrap; justify-content:flex-end; }
#sv-home .sv-memory-depth button { white-space:nowrap; }
#sv-home .sv-memory-status,
#sv-home .sv-memory-coverage { font-size:15px; line-height:1.5; color:var(--sv-text-muted); }
@media (max-width:600px) {
 #sv-home .sv-memory-system { padding:16px 14px !important; gap:12px !important; }
 #sv-home .sv-memory-option { flex-wrap:wrap; }
 #sv-home .sv-memory-option > span:first-child { flex:1 1 170px; }
 #sv-home .sv-memory-depth { flex:1 1 100%; justify-content:flex-start; }
 #sv-home .sv-memory-depth button { flex:1 1 70px; padding:8px 10px !important; }
 #sv-home .sv-memory-weight { flex-wrap:wrap; gap:8px !important; }
 #sv-home .sv-memory-weight > span:first-child { width:auto !important; }
 #sv-home .sv-memory-weight > span:last-child { width:auto !important; min-width:70px; }
 #sv-home .sv-memory-weight-bar { min-width:40px; }
 #sv-home .sv-memory-context > div:first-child { align-items:flex-start !important; }
 #sv-home .sv-memory-context > div:first-child > span:first-child { min-width:0; }
 #sv-home .sv-memory-context-ticks { gap:6px; font-size:9px !important; }
}

#sv-home .sv-memory-adventure { display:flex; align-items:center; gap:14px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--sv-line-soft); }
#sv-home .sv-memory-adventure > span { flex:0 0 auto; font-family:var(--sv-font-mono); font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:var(--sv-text-dim); }
#sv-home .sv-memory-adventure select { flex:1 1 auto; min-width:0; max-width:100%; padding:9px 12px; border:1px solid var(--sv-line-strong); border-radius:8px; background:var(--sv-bg); color:var(--sv-text); font-family:var(--sv-font-body); font-size:16px; text-overflow:ellipsis; }
#sv-home .sv-memory-adventure select:focus-visible { outline:2px solid var(--sv-violet-bright); outline-offset:2px; }
#sv-home .sv-memory-adventure select:disabled { cursor:not-allowed; }
#sv-home .sv-memory-status[role="alert"] { color:var(--sv-danger); }
@media (max-width:420px) { #sv-home .sv-memory-adventure { flex-wrap:wrap; gap:8px; } #sv-home .sv-memory-adventure select { flex-basis:100%; } }

/* Ink catalog and order review. */
#sv-home .sv-billing-heading { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:20px; }
#sv-home .sv-billing-heading h2 { margin:0; font-family:var(--sv-font-display); font-size:26px; }
#sv-home .sv-billing-heading > span, #sv-home .sv-billing-kicker { font-family:var(--sv-font-mono); font-size:10px; letter-spacing:.1em; color:var(--sv-text-muted); }
#sv-home .sv-billing-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
#sv-home .sv-billing-plans { grid-template-columns:repeat(3,minmax(0,1fr)); }
#sv-home .sv-billing-regional { font-size:18px; color:var(--sv-violet-bright); line-height:1.5; }
#sv-home .sv-billing-card { min-width:0; display:flex; flex-direction:column; padding:20px; border:1px solid var(--sv-line); background:var(--sv-panel); box-shadow:inset 0 0 0 4px var(--sv-bg),inset 0 0 0 5px rgba(var(--sv-accent-rgb),.1); }
#sv-home .sv-billing-card.is-best, #sv-home .sv-billing-card.is-current { border-color:var(--sv-violet-bright); background:linear-gradient(150deg,rgba(var(--sv-deep-rgb),.24),var(--sv-panel)); }
#sv-home .sv-billing-badge { min-height:30px; font:10px var(--sv-font-mono); color:var(--sv-violet-bright); line-height:1.5; }
#sv-home .sv-billing-glyph { font-size:34px; color:var(--sv-violet-bright); margin:8px 0 16px; }
#sv-home .sv-billing-card h3, #sv-home .sv-billing-review h2 { font-family:var(--sv-font-display); font-size:24px; margin:0 0 20px; }
#sv-home .sv-billing-quantity { font-family:var(--sv-font-display); font-size:30px; margin:0; }
#sv-home .sv-billing-quantity span { display:block; font-family:var(--sv-font-body); font-size:15px; color:var(--sv-text-muted); line-height:1.5; }
#sv-home .sv-billing-detail { font-size:15px; color:var(--sv-text-muted); line-height:1.5; }
#sv-home .sv-billing-price { font-family:var(--sv-font-display); font-size:27px; margin-top:auto; padding-top:20px; }
#sv-home .sv-billing-price span { display:block; font-family:var(--sv-font-body); font-size:15px; color:var(--sv-text-muted); }
#sv-home .sv-billing-button { width:100%; min-height:44px; padding:12px; border:1px solid var(--sv-violet); border-radius:8px; background:rgba(var(--sv-accent-rgb),.15); color:var(--sv-text); cursor:pointer; font:11px var(--sv-font-mono); line-height:1.5; }
#sv-home .sv-billing-button:hover:not(:disabled) { background:rgba(var(--sv-accent-rgb),.3); border-color:var(--sv-violet-bright); }
#sv-home .sv-billing-button:disabled { cursor:default; opacity:.65; }
#sv-home .sv-billing-policy { color:var(--sv-text-muted); font-size:16px; line-height:1.65; max-width:820px; }
#sv-home .sv-billing-review { max-width:620px; padding:clamp(18px,3vw,32px); border:1px solid var(--sv-violet); background:var(--sv-panel); border-radius:12px; }
#sv-home .sv-billing-back { background:none; border:0; color:var(--sv-violet-bright); padding:8px 0; cursor:pointer; font:12px var(--sv-font-mono); margin-bottom:20px; }
#sv-home .sv-billing-total { display:flex; justify-content:space-between; gap:16px; padding:20px 0; margin:20px 0; border-block:1px solid var(--sv-line); font-size:20px; }
@media (max-width:1100px) { #sv-home .sv-billing-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px) { #sv-home .sv-billing-grid { grid-template-columns:minmax(0,1fr); } }

/* --- Discover / Hub templates ------------------------------------------- */
#sv-home .sv-discover-grid .sv-starter-card { border-radius: var(--sv-r-md, 12px); }
/* The scenario art bleeds to the card edge, so the card has to clip it or the
   picture squares off the rounded top corners. */
#sv-home .sv-discover-grid .sv-starter-card { overflow: hidden; }
#sv-home .sv-discover-grid .sv-starter-card:hover,
#sv-home .sv-discover-grid .sv-starter-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--sv-violet-bright);
}
#sv-home .sv-discover-grid .sv-starter-card:active { transform: translateY(-1px); }
@media (max-width: 560px) {
  #sv-home .sv-discover-grid { grid-template-columns: 1fr !important; }
}
@media (prefers-reduced-motion: reduce) {
  #sv-home .sv-discover-grid .sv-starter-card { transition: border-color .2s; }
  #sv-home .sv-discover-grid .sv-starter-card:hover { transform: none; }
}

/* ---- Editable thumbnails (a player's OWN tales only) --------------------
   The Library card is a plain div with no click handler of its own, so its art
   band can take the click outright. The Home rail card already selects on
   click, so there the art gets a small corner button instead of swallowing it. */
#sv-home .sv-art-edit {
  display: block; position: relative; width: 100%; height: 150px;
  margin: 0 0 14px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--sv-line); border-radius: var(--sv-r-sm, 8px);
  background: linear-gradient(180deg, rgba(var(--sv-plum-rgb),.55), rgba(var(--sv-ground-rgb),.85));
  transition: border-color .2s;
}
#sv-home .sv-art-edit:hover,
#sv-home .sv-art-edit:focus-visible { border-color: var(--sv-line-hover); }
#sv-home .sv-art-edit img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* No art yet — the band still invites one, which is how a tale made before
   any of this existed gets its thumbnail. */
#sv-home .sv-art-empty {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--sv-font-mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--sv-text-dim);
}
#sv-home .sv-art-hint {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 10px;
  font-family: var(--sv-font-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sv-text); text-align: right;
  background: linear-gradient(180deg, transparent, rgba(var(--sv-ground-rgb),.92));
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
#sv-home .sv-art-edit:hover .sv-art-hint,
#sv-home .sv-art-edit:focus-visible .sv-art-hint { opacity: 1; }
/* An empty band always shows its label; there is no picture to read under it. */
#sv-home .sv-art-edit:has(.sv-art-empty) .sv-art-hint { display: none; }

#sv-home .sv-art-pen {
  position: absolute; top: 10px; right: 10px; z-index: 3;
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0;
  border: 1px solid var(--sv-line-strong); border-radius: 50%;
  background: rgba(var(--sv-ground-rgb),.82); color: var(--sv-violet-bright);
  font-size: 13px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity .2s, border-color .2s, background .2s;
}
#sv-home #rail > div:hover .sv-art-pen,
#sv-home .sv-art-pen:focus-visible { opacity: 1; }
#sv-home .sv-art-pen:hover { border-color: var(--sv-line-hover); background: rgba(var(--sv-plum-rgb),.95); }
/* Touch has no hover, so the affordance has to be permanently visible there. */
@media (hover: none) {
  #sv-home .sv-art-pen { opacity: 1; }
  #sv-home .sv-art-hint { opacity: 1; }
}

/* ==================== Social: the inbox (WhatsApp-shaped) ====================
   Left: one list of CONVERSATIONS (every friend as a DM, every group), search,
   unread, previews. Right: the open thread. On phones the two are one column
   and the thread slides over the list with a Back button. Namespaced .sv-ib-*. */
#sv-home .sv-ib { flex:1; min-height:0; display:grid; grid-template-columns:360px minmax(0,1fr); }
#sv-home .sv-ib-list { min-height:0; display:flex; flex-direction:column; border-right:1px solid var(--sv-line-soft); background:rgba(var(--sv-ground-rgb),.45); }
#sv-home .sv-ib-head { padding:16px 16px 10px; display:flex; flex-direction:column; gap:10px; }
#sv-home .sv-ib-title { display:flex; align-items:center; gap:8px; font-family:var(--sv-font-display); font-weight:600; font-size:22px; }
#sv-home .sv-ib-title .sv-ib-n { font-family:var(--sv-font-mono); font-size:10px; letter-spacing:.2em; color:var(--sv-text-dim); }
#sv-home .sv-ib-actions { margin-left:auto; display:flex; gap:6px; }
#sv-home .sv-ib-icon { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--sv-line-2); border-radius:50%; background:none; cursor:pointer; color:var(--sv-violet-bright); font-size:15px; transition:border-color .15s, background .15s; }
#sv-home .sv-ib-icon:hover { border-color:var(--sv-line-hover); background:var(--sv-fill-hover); }
#sv-home .sv-ib-tabs { display:flex; gap:4px; padding:2px; border:1px solid var(--sv-line-soft); border-radius:999px; background:rgba(var(--sv-ground-rgb),.5); }
#sv-home .sv-ib-tab { flex:1; padding:7px 10px; border:0; border-radius:999px; background:none; cursor:pointer; font-family:var(--sv-font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--sv-text-dim); display:inline-flex; align-items:center; justify-content:center; gap:6px; }
#sv-home .sv-ib-tab.on { background:var(--sv-grad-primary); color:var(--sv-on-primary); }
#sv-home .sv-ib-badge { min-width:17px; padding:0 5px; border-radius:999px; background:var(--sv-violet-bright); color:var(--sv-bg); font-family:var(--sv-font-mono); font-size:9px; letter-spacing:0; line-height:16px; text-align:center; }
#sv-home .sv-ib-tab.on .sv-ib-badge { background:var(--sv-bg); color:var(--sv-violet-bright); }
#sv-home .sv-ib-search { padding:10px 12px; background:rgba(var(--sv-ground-rgb),.6); border:1px solid var(--sv-line-2); border-radius:10px; color:var(--sv-text); font-family:var(--sv-font-read,'Literata',Georgia,serif); font-size:15.5px; outline:none; width:100%; box-sizing:border-box; }
#sv-home .sv-ib-search:focus { border-color:var(--sv-line-hover); }
#sv-home .sv-ib-scroll { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; padding:0 8px 18px; }
#sv-home .sv-ib-sec { padding:12px 10px 6px; font-family:var(--sv-font-mono); font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--sv-text-dim); }

/* one conversation row */
#sv-home .sv-ib-row { display:flex; align-items:center; gap:11px; width:100%; padding:10px 10px; border:0; border-radius:10px; background:none; cursor:pointer; text-align:left; color:var(--sv-text); transition:background .15s; }
#sv-home .sv-ib-row:hover { background:var(--sv-fill-hover); }
#sv-home .sv-ib-row.on { background:rgba(var(--sv-accent-rgb),.16); }
#sv-home .sv-ib-av { position:relative; width:42px; height:42px; flex:0 0 auto; }
#sv-home .sv-ib-av > span:first-child { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:rgba(var(--sv-plum-rgb),.9); border:1px solid rgba(var(--sv-accent-rgb),.4); font-family:var(--sv-font-display); font-weight:700; font-size:15px; color:var(--sv-text-soft); }
#sv-home .sv-ib-av.group > span:first-child { border-radius:12px; background:linear-gradient(180deg,rgba(var(--sv-deep-rgb),.45),rgba(var(--sv-plum-rgb),.9)); font-size:16px; }
#sv-home .sv-ib-dot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; border:2px solid var(--sv-bg); }
#sv-home .sv-ib-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
#sv-home .sv-ib-line { display:flex; align-items:baseline; gap:8px; }
#sv-home .sv-ib-name { flex:1; min-width:0; font-size:16.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sv-home .sv-ib-when { font-family:var(--sv-font-mono); font-size:9px; letter-spacing:.1em; color:var(--sv-text-dim); flex:0 0 auto; }
#sv-home .sv-ib-row.unread .sv-ib-when { color:var(--sv-violet-bright); }
#sv-home .sv-ib-prev { font-size:14px; color:var(--sv-text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--sv-font-read,'Literata',Georgia,serif); }
#sv-home .sv-ib-row.unread .sv-ib-prev { color:var(--sv-text-soft); }
#sv-home .sv-ib-prev i { font-style:italic; color:var(--sv-text-dim); }
#sv-home .sv-ib-prev b { font-weight:600; color:var(--sv-text-muted); }
#sv-home .sv-ib-prev .tick { color:var(--sv-text-dim); margin-right:3px; }
#sv-home .sv-ib-prev .tick.seen { color:#5aa6e0; }

/* friends tab rows reuse the row, with actions on hover */
#sv-home .sv-ib-row .sv-ib-x { width:28px; height:28px; display:grid; place-items:center; border:1px solid transparent; border-radius:50%; background:none; cursor:pointer; color:var(--sv-text-dim); font-size:12px; opacity:0; transition:opacity .15s; }
#sv-home .sv-ib-row:hover .sv-ib-x { opacity:1; }
#sv-home .sv-ib-x:hover { color:var(--sv-danger); border-color:rgba(220,90,78,.5); }
#sv-home .sv-ib-req { border:1px dashed rgba(var(--sv-glow-rgb),.4); margin:0 0 6px; }
#sv-home .sv-ib-ok, #sv-home .sv-ib-no { width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:13px; }
#sv-home .sv-ib-ok { border:1px solid rgba(147,181,111,.6); background:rgba(147,181,111,.12); color:var(--sv-success); }
#sv-home .sv-ib-no { border:1px solid rgba(220,90,78,.5); background:none; color:var(--sv-danger); }
#sv-home .sv-ib-empty { padding:40px 22px; text-align:center; color:var(--sv-text-dim); font-size:15.5px; line-height:1.6; }
#sv-home .sv-ib-empty b { display:block; font-family:var(--sv-font-display); font-size:19px; color:var(--sv-text); margin-bottom:6px; }

/* ---- the thread pane ---- */
#sv-home .sv-ib-thread { min-height:0; display:flex; flex-direction:column; position:relative; }
#sv-home .sv-ib-bar { display:flex; align-items:center; gap:12px; padding:10px clamp(14px,2.4vw,24px); border-bottom:1px solid var(--sv-line-soft); background:rgba(var(--sv-ground-rgb),.4); min-height:64px; }
#sv-home .sv-ib-bar .sv-ib-av { width:38px; height:38px; }
#sv-home .sv-ib-bar .sv-ib-av > span:first-child { width:38px; height:38px; font-size:14px; }
#sv-home .sv-ib-bar-main { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.15; cursor:pointer; }
#sv-home .sv-ib-bar-name { font-size:17px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sv-home .sv-ib-bar-sub { font-size:13.5px; color:var(--sv-text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sv-home .sv-ib-back { display:none; }

#sv-home .sv-ib-log { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; padding:16px clamp(14px,2.4vw,24px); display:flex; flex-direction:column; gap:2px; background:radial-gradient(ellipse 70% 50% at 50% 0%, rgba(var(--sv-tint-indigo-rgb),.35), transparent 70%); }
#sv-home .sv-ib-day { align-self:center; margin:14px 0 8px; padding:4px 10px; border-radius:999px; border:1px solid var(--sv-line-soft); background:rgba(var(--sv-ground-rgb),.7); font-family:var(--sv-font-mono); font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--sv-text-dim); }
#sv-home .sv-ib-sys { align-self:center; margin:6px 0; padding:3px 10px; border-radius:999px; background:rgba(var(--sv-plum-rgb),.5); font-size:12.5px; font-style:italic; color:var(--sv-text-dim); text-align:center; }
#sv-home .sv-ib-msg { max-width:min(72%,560px); display:flex; flex-direction:column; align-items:flex-start; margin-top:2px; }
#sv-home .sv-ib-msg.mine { align-self:flex-end; align-items:flex-end; }
#sv-home .sv-ib-msg.first { margin-top:10px; }
#sv-home .sv-ib-from { font-family:var(--sv-font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--sv-violet-bright); margin:0 0 3px 12px; }
#sv-home .sv-ib-bub { position:relative; padding:8px 12px 6px; border:1px solid var(--sv-line-2); border-radius:14px; background:rgba(var(--sv-plum-rgb),.72); font-family:var(--sv-font-read,'Literata',Georgia,serif); font-size:16px; line-height:1.5; color:var(--sv-text); white-space:pre-wrap; overflow-wrap:anywhere; animation:sv-home-rise .2s ease both; }
#sv-home .sv-ib-msg.first .sv-ib-bub { border-top-left-radius:4px; }
#sv-home .sv-ib-msg.mine .sv-ib-bub { background:rgba(var(--sv-deep-rgb),.36); border-color:rgba(var(--sv-accent-rgb),.45); }
#sv-home .sv-ib-msg.mine.first .sv-ib-bub { border-top-left-radius:14px; border-top-right-radius:4px; }
#sv-home .sv-ib-meta { display:flex; justify-content:flex-end; gap:5px; margin-top:3px; font-family:var(--sv-font-mono); font-size:8.5px; letter-spacing:.12em; color:var(--sv-text-dim); }
#sv-home .sv-ib-meta .tick.seen { color:#5aa6e0; }
#sv-home .sv-ib-typing { align-self:flex-start; padding:10px 14px; border-radius:14px; border:1px solid var(--sv-line-2); background:rgba(var(--sv-plum-rgb),.7); display:flex; gap:5px; }
#sv-home .sv-ib-typing span { width:6px; height:6px; border-radius:50%; background:var(--sv-violet-bright); animation:sv-home-blink 1s ease-in-out infinite; }
#sv-home .sv-ib-typing span:nth-child(2) { animation-delay:.2s; } #sv-home .sv-ib-typing span:nth-child(3) { animation-delay:.4s; }

#sv-home .sv-ib-compose { display:flex; gap:8px; align-items:flex-end; padding:12px clamp(14px,2.4vw,24px); border-top:1px solid var(--sv-line-soft); background:rgba(var(--sv-ground-rgb),.4); }
#sv-home .sv-ib-input { flex:1; min-width:0; max-height:140px; padding:11px 14px; background:rgba(var(--sv-ground-rgb),.6); border:1px solid var(--sv-line-2); border-radius:12px; color:var(--sv-text); font-family:var(--sv-font-read,'Literata',Georgia,serif); font-size:16px; line-height:1.45; outline:none; resize:none; }
#sv-home .sv-ib-input:focus { border-color:var(--sv-line-hover); }
#sv-home .sv-ib-send { width:44px; height:44px; flex:0 0 auto; display:grid; place-items:center; border:1px solid var(--sv-violet-deep); border-radius:50%; cursor:pointer; color:var(--sv-on-primary); background:var(--sv-grad-primary); font-size:16px; }
#sv-home .sv-ib-send:disabled { opacity:.45; cursor:default; }

/* ---- the info drawer (group members / friend profile) ---- */
#sv-home .sv-ib-panel { position:absolute; top:0; right:0; bottom:0; width:min(340px,100%); z-index:5; display:flex; flex-direction:column; border-left:1px solid var(--sv-line-soft); background:rgba(var(--sv-ground-rgb),.96); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:sv-home-slide .25s ease both; }
#sv-home .sv-ib-panel-h { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--sv-line-soft); font-family:var(--sv-font-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--sv-violet); }
#sv-home .sv-ib-panel-h .sv-ib-icon { margin-left:auto; width:30px; height:30px; }
#sv-home .sv-ib-panel-b { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; padding:16px; display:flex; flex-direction:column; gap:14px; }
#sv-home .sv-ib-hero { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; padding:6px 0 4px; }
#sv-home .sv-ib-hero .sv-ib-av { width:64px; height:64px; } #sv-home .sv-ib-hero .sv-ib-av > span:first-child { width:64px; height:64px; font-size:24px; }
#sv-home .sv-ib-hero-name { font-family:var(--sv-font-display); font-weight:600; font-size:20px; }
#sv-home .sv-ib-hero-sub { font-size:13.5px; color:var(--sv-text-dim); }
#sv-home .sv-ib-rename { display:flex; gap:6px; } #sv-home .sv-ib-rename .sv-ib-search { flex:1; }
#sv-home .sv-ib-mem { display:flex; align-items:center; gap:10px; padding:8px 6px; border-radius:8px; }
#sv-home .sv-ib-mem:hover { background:var(--sv-fill-hover); }
#sv-home .sv-ib-mem .sv-ib-av { width:32px; height:32px; } #sv-home .sv-ib-mem .sv-ib-av > span:first-child { width:32px; height:32px; font-size:12px; }
#sv-home .sv-ib-mem-name { flex:1; min-width:0; font-size:15.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sv-home .sv-ib-tag { font-family:var(--sv-font-mono); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; padding:2px 6px; border:1px solid var(--sv-line-2); border-radius:4px; color:var(--sv-text-dim); }
#sv-home .sv-ib-btn { padding:10px 14px; border:1px solid var(--sv-line-strong); border-radius:9px; background:rgba(var(--sv-accent-rgb),.08); cursor:pointer; font-family:var(--sv-font-mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--sv-violet-bright); }
#sv-home .sv-ib-btn:hover { border-color:var(--sv-line-hover); }
#sv-home .sv-ib-btn.primary { border-color:var(--sv-violet-deep); background:var(--sv-grad-primary); color:var(--sv-on-primary); }
#sv-home .sv-ib-btn.danger { border-color:rgba(220,90,78,.5); color:var(--sv-danger); background:none; }
#sv-home .sv-ib-btn:disabled { opacity:.45; cursor:default; }
#sv-home .sv-ib-pick { display:flex; flex-direction:column; gap:2px; max-height:260px; overflow-y:auto; scrollbar-width:thin; border:1px solid var(--sv-line-soft); border-radius:10px; padding:4px; }
#sv-home .sv-ib-pick label { display:flex; align-items:center; gap:10px; padding:7px 8px; border-radius:8px; cursor:pointer; font-size:15px; }
#sv-home .sv-ib-pick label:hover { background:var(--sv-fill-hover); }
#sv-home .sv-ib-pick input { accent-color:var(--sv-violet); }
#sv-home .sv-ib-chips { display:flex; flex-wrap:wrap; gap:6px; }
#sv-home .sv-ib-chip { padding:4px 10px; border-radius:999px; border:1px solid var(--sv-line-2); font-size:13px; color:var(--sv-text-soft); }

/* ---- new group modal ---- */
#sv-home .sv-ib-modal { position:absolute; inset:0; z-index:40; display:grid; place-items:center; background:rgba(var(--sv-ground-rgb),.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
#sv-home .sv-ib-card { width:min(440px,calc(100% - 32px)); padding:22px; border:1px solid var(--sv-line-strong); border-radius:14px; background:var(--sv-bg); box-shadow:var(--sv-shadow-pop); display:flex; flex-direction:column; gap:12px; animation:sv-home-rise .25s ease both; }
#sv-home .sv-ib-card h3 { margin:0; font-family:var(--sv-font-display); font-weight:600; font-size:22px; }
#sv-home .sv-ib-card .row { display:flex; gap:8px; justify-content:flex-end; }

/* ---- responsive ---- */
@media (max-width:1100px) { #sv-home .sv-ib { grid-template-columns:minmax(260px,36%) minmax(0,1fr); } }
@media (max-width:720px) {
  #sv-home .sv-ib { grid-template-columns:1fr; }
  #sv-home .sv-ib-list { border-right:0; }
  #sv-home .sv-ib.open .sv-ib-list { display:none; }
  #sv-home .sv-ib:not(.open) .sv-ib-thread { display:none; }
  #sv-home .sv-ib-back { display:grid; }
  #sv-home .sv-ib-msg { max-width:84%; }
  #sv-home .sv-ib-panel { width:100%; border-left:0; }
  #sv-home .sv-ib-row .sv-ib-x { opacity:1; }
}