:root {
  /* Neumorphism palette */
  --bg: #e9eef5;           /* page background (soft bluish gray) */
  --card: #e9eef5;         /* surfaces match bg for blended relief */
  --card-lt: #f4f7fb;      /* slightly lighter surface */
  --card-hover: #eef3f9;   /* hover tint */
  --ink: #1e2430;          /* primary text */
  --muted: #6f7c93;        /* secondary text */
  --bd: #e6edf6;           /* borders (nearly invisible) */
  --icon: #5f6f86;         /* icon tint */

  /* Neumorphism shadows */
  --neu-light: #ffffff;
  --neu-dark: #b6c2d3;
  --neu-elev-1: 8px 8px 16px var(--neu-dark), -8px -8px 16px var(--neu-light);
  --neu-elev-2: 10px 10px 22px var(--neu-dark), -10px -10px 22px var(--neu-light);
  --neu-press: inset 6px 6px 12px rgba(182,194,211,.85), inset -6px -6px 12px rgba(255,255,255,.9);
  --neu-inset-1: inset 5px 5px 10px rgba(182,194,211,.65), inset -5px -5px 10px rgba(255,255,255,.95);
}




*{box-sizing:border-box}
html,body{height:100%}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif;
  font-weight:200;
}

.textnote { padding:.75rem .9rem; border-radius:.75rem; background:rgba(0,0,0,.04); margin-bottom: 16px; box-shadow: var(--neu-inset-1); }
ul { padding-left:1.25rem; margin:0.5rem 0 1rem; }
h1 {margin-bottom:10px;}
h2 {margin-bottom:8px;}
h3 {margin-top:1rem; margin-bottom:.5rem; font-weight:600;}
blockquote { margin:0.8rem 0; padding-left:1rem; border-left:3px solid var(--muted); color:var(--muted); font-style:italic; }

.btn.back-btn {
  display:inline-flex;
  align-items:center;
  padding:12px 19px 12px 13px;
  font-weight:500;
  border-radius:10px;
  text-decoration:none;
  background:var(--card);
  color:var(--ink);
  border:1px solid var(--bd);
  /* box-shadow:0 6px 22px rgba(0,0,0,.08); */
  box-shadow: var(--neu-elev-1);
  transition:background-color .25s ease, transform .15s ease, box-shadow .25s ease;
}
.btn.back-btn svg {vertical-align:middle;margin-right:2px; flex:0 0 auto;}
.btn.back-btn:hover {background:var(--card-hover); transform:translateY(-1px); text-decoration:none; box-shadow: var(--neu-elev-2);}
.btn.back-btn:active {transform:translateY(0); box-shadow: var(--neu-press);}

.glowlink { color:purple; transition:0.5s; text-decoration:none; }
.glowlink:hover { color:#9b87ff; text-decoration:none; }

.wrap {max-width:900px; margin:0 auto; padding:40px 20px}

.brand{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.logo-topnav-topnav{margin:auto; text-align:center;}
.logo-topnav-topnav img{max-height:54px; width:auto}
.badge-owner{background:darkorange;border-radius: 999px;padding:4px 12px;font-size:.8rem;margin-left: 8px; font-weight: 500;}
.badge-conn{background:#2563eb;border-radius: 999px;padding:4px 12px;font-size:.8rem;margin-left: 8px; font-weight: 500; color: #fff}
.hint{color:#666;margin:.5rem 0}
 .conn .card .card-actions{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px}
 .card-row .card-actions {margin-bottom: 8px;}
 .conn .card .card-row{align-items:flex-start}
#access-card span {margin-bottom: 12px;}


/* GRID */
.card-grid{display:grid; gap:12px; grid-template-columns:1fr;}
@media(min-width:880px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* CARD */
.card{
  display:block;
  align-items:center;
  gap:14px;
  padding:16px 18px;
  min-height:88px;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:14px;
  text-decoration:none;
  color:inherit;
  /* box-shadow:0 4px 14px rgba(0,0,0,.06); */
  box-shadow: var(--neu-elev-1);
  transition:background-color .25s ease, transform .15s ease, box-shadow .25s ease;
  overflow:hidden;
}
.card:hover{background:var(--card-hover); transform:translateY(-1px); box-shadow: var(--neu-elev-2);}
.card:active{transform:none; box-shadow: var(--neu-press);}
.card-grid .card{display:flex !important;}

#genQR {width:100%;}
#qrcode {margin-top:80px; box-shadow: var(--neu-elev-1); border:1px solid var(--bd); background:var(--card);}

/* ICON */
.grid-icon{
  flex:0 0 auto; width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  color:var(--icon);
  border-radius:10px;
  background:var(--card);
  font-size:22px; line-height:1; overflow:hidden;
  border:1px solid var(--bd);
  box-shadow: var(--neu-elev-1);
}
.grid-icon-img{width:60%; height:60%; object-fit:contain; filter:brightness(0.2) opacity(.9);}

/* CARD TEXT */
.card-text{display:flex; flex-direction:column; flex:1 1 0%; min-width:0; overflow:hidden;}
.card-title{font-weight:600;}
.card-title,.card-sub{display:block; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* Splash / Footer */
.splash{text-align:center;}
.splash img{ max-width:400px; width:calc(100% - 80px); padding:0 40px; opacity:0; transition:opacity 6s ease; -webkit-transition:opacity 6s ease; -moz-transition:opacity 6s ease; -ms-transition:opacity 6s ease; -o-transition:opacity 6s ease; }
.splash img.loaded{opacity:1;}
.footer{bottom:0; left:0; width:100%; text-align:center; padding:.8rem 0; background-color:var(--bd); color:#555; font-size:.8rem; letter-spacing:.5px; margin-top:100px; box-shadow: var(--neu-inset-1);}

/* Lockbar + toggles */
.lockbar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px; padding:16px 21px; background:var(--card-lt); border:1px solid var(--bd); border-radius:14px; box-shadow: var(--neu-elev-1);}
.lockbar .status{display:inline-flex; align-items:center; gap:10px; font-weight:600;}
.lock-pill{display:inline-block; min-width:10ch; text-align:center; padding:6px 10px; border-radius:999px; font-weight:700;}

    .health-pill{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; border:1px solid #333; }


.lock-pill, .ok{display:inline-block; min-width:10ch; text-align:center; padding:6px 10px; border-radius:999px; font-weight:700; background:#22c55e; color:#fff; border:1px solid #22c55e; box-shadow: var(--neu-elev-1);}
.lock-pill.locked, .bad{background:#cc0000; border-color:#cc0000;}





.red-white {background:#cc0000 !important;border:1px solid #cc0000 !important;color:#ffffff !important;}
.green-white {background:#22c55e !important;border:1px solid #22c55e !important;color:#ffffff !important;}
.red-txt {color:#cc0000 !important;}
.green-txt {color: green !important;}

    .note{margin-top:10px}
    .pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.85rem; box-shadow: var(--neu-elev-1);}
    .pill-local{background:#1f8b4c;color:#fff}
    .pill-external{background:#2563eb;color:#fff}
.switch{position:relative; width:56px; height:30px; flex:0 0 auto;}
.switch input{position:absolute; inset:0; opacity:0; cursor:pointer;}
.switch-track{position:absolute; inset:0; border-radius:999px; background:var(--card); border:1px solid var(--bd); transition:background .2s ease, box-shadow .25s ease; box-shadow: var(--neu-elev-1);}
.switch-thumb{position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:var(--card); box-shadow: var(--neu-elev-1); transition:left .2s ease, box-shadow .2s ease;}
.switch input:checked + .switch-track{background:#2563eb22; border-color:#2563eb22; box-shadow: var(--neu-press);}
.switch input:checked + .switch-track .switch-thumb{left:29px; background:#ffffff; box-shadow: var(--neu-elev-1);}

/* Locked cards */
.card[data-lockable].is-locked{ cursor:not-allowed; position:relative; background: var(--card-lt);
    border: 1px solid var(--bd); box-shadow: var(--neu-inset-1); }
.card[data-lockable].is-locked::after{content:"🔒"; position:absolute; right:12px; top:12px; font-size:18px; opacity:.9;}

/* Modal */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:9999;}
.modal.open{display:flex;}
.modal .box{width:min(420px,92vw); background:var(--card); color:var(--ink); border:1px solid var(--bd); border-radius:14px; padding:18px;}
.modal .box h3{margin:0 0 8px; font-size:1.1rem;}
.modal .actions{display:flex; justify-content:flex-end; gap:8px; margin-top:12px;}

/* Buttons */
.btn{appearance:none; border:1px solid var(--bd); background:var(--card); color:var(--ink);     padding: 14px 26px;
    font-size: 17px; border-radius:10px; cursor:pointer; box-shadow: var(--neu-elev-1); transition: background .25s ease, transform .15s ease, box-shadow .25s ease;}
.btn.primary{background: var(--card-lt);
  /* border-color:#707f9e; */
  box-shadow: var(--neu-elev-1);
}
.btn.small{padding:.35rem .7rem; font-size:.85rem; border-radius:8px;}
.btn.big{padding:14px 20px; font-size:1.1rem;}
.btn:hover{background:var(--card-hover); transform:translateY(-1px); box-shadow: var(--neu-elev-2);}
.btn:active{transform:none; box-shadow: var(--neu-press);}
.btn-row{display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;}

/* Notes / QR */
.qr-area{text-align:center; margin-top:20px;}
#qrcode{display:inline-block; padding:12px; background:var(--card); border-radius:12px; box-shadow: var(--neu-elev-1);}
.note{margin-top:12px; color:var(--muted);}

/* Forms */
.form{display:block;}
.form .row{display:flex; flex-direction:column; gap:8px; margin:12px 0;}
.form label.form-label{font-weight:600;}
.form .input-wrap{display:flex; align-items:center; gap:8px; width:100%; background:var(--card); border:1px solid var(--bd); border-radius:12px; padding:8px 10px; box-shadow: var(--neu-inset-1); transition: box-shadow .2s ease;}
.form .input-wrap:focus-within{box-shadow: var(--neu-press);}
.form input.input{appearance:none; border:none; outline:none; width:100%; background:transparent; color:var(--ink); font:inherit; padding:6px 2px;}
.form input.input::placeholder{color:var(--muted); opacity:.75;}
.form .eye{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; cursor:pointer; background:var(--card); border:1px solid var(--bd); color:var(--icon); box-shadow: var(--neu-elev-1);}
.form .eye:hover{background:var(--card-hover);}
.form .form-help{color:var(--muted); font-size:.9em;}
.keys-toolbar{display:flex; align-items:center; gap:12px; margin:6px 0 12px;}
.keys-toolbar .hint{color:var(--muted); font-size:.9em;}

/* Persona Picker */
.persona-picker{margin-bottom:14px;}
.persona-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 26px;
  border-radius:10px;
  border:1px solid var(--bd);
  background:var(--card);
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  /* box-shadow:0 4px 14px rgba(0,0,0,.06); */
  box-shadow: var(--neu-elev-1);
  transition:background .25s ease, transform .15s ease, box-shadow .25s ease;
  font-weight:600;
  margin-bottom:8px;
  font-size: 16px;
  -webkit-border-radius:10px;
  -moz-border-radius:10px;
  -ms-border-radius:10px;
  -o-border-radius:10px;
}
.persona-btn:hover{ background:var(--card-hover); transform:translateY(-1px); box-shadow: var(--neu-elev-2); }
.persona-btn:active{ transform:none; box-shadow: var(--neu-press); }
.float-right {float:right !important;}
.float-left {float: left !important;}
.persona-list{display:none; grid-template-columns:1fr; gap:4px 10px; margin-top:14px;}
@media(min-width:880px){.persona-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.mode-toggle{display:inline-flex; border:1px solid var(--bd); border-radius:12px; overflow:hidden; background:var(--card); box-shadow: var(--neu-elev-1);}
.mode-toggle button{padding:.5rem .9rem; border:0; background:transparent; color:var(--ink); cursor:pointer;  padding: 20px 50px; font-size: 17px;}
.mode-toggle button.active{background:var(--card-hover); font-weight:700; box-shadow: var(--neu-press);}
.interaction{margin-top:14px;}
.big-btn{display:block; width:100%; padding:64px; text-align:center; font-weight:700; border-radius:12px; border:1px solid var(--bd); background:var(--card-lt); color:var(--ink); cursor:pointer; transition:background .2s ease, box-shadow .25s ease; font-size:17px; box-shadow: var(--neu-elev-1);}
.big-btn:hover{background:var(--card-hover); box-shadow: var(--neu-elev-2);}
.selected-pname{float:right; display:inline; margin-top:8px; margin-right: 5px;}
.textarea{width:100%; min-height:90px; resize:vertical; padding:10px; border-radius:12px; border:1px solid var(--bd); background:var(--card); color:var(--ink); font:inherit; box-shadow: var(--neu-inset-1);}

/* Logs */
.log-box{margin-top:10px; margin-bottom:300px; max-height:200px; overflow:auto; background:var(--card); border:1px solid #d1d5db; border-radius:10px; padding:10px 12px; font-size:.95rem; line-height:1.45; white-space:pre-wrap; color:#111; box-shadow: var(--neu-inset-1);}
/* Fixed-size chat log with scrolling */
#chatLog.log-box{
  height: 240px;          /* fixed size (adjust if you want) */
  max-height: 45vh;       /* cap on very small screens */
  overflow: auto;         /* scrollable */
  border: 1px solid var(--bd,#334155);
  border-radius: 10px;
  padding: 8px;
  margin-bottom: 8px;     /* keep separation from textarea when above it */
}
.log-user{color:#2563eb; font-weight: 700;}
.log-ai{color:#16a34a; font-weight: 700;}
.log-sys{color:#6b7280; font-style:italic;}
#chatAudio{display:none;}
/* Keep the Log/Text toggle link visible at all times */
/* Always show the Log/Text icon top-left, above everything */
#coverLogLink.always-link{
  position: fixed;
  z-index: 10001;   /* above overlay */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.persona-dropdown{
  position:fixed; top:56px; left:54px; z-index:10002;
  display:none; background:#1a1a1a; border:1px solid #333;
  border-radius:10px; padding:6px; box-shadow:0 10px 30px rgba(0,0,0,.35);
  min-width:200px;
}
.persona-item{
  display:flex; align-items:center; gap:10px; width:100%;
  border:0; background:transparent; color:#eee; padding:10px 12px;
  border-radius:8px; cursor:pointer; text-align:left;
}
.persona-item:hover{ background:#242424; }
.persona-item.active{ background:#2c2250; }
.persona-item .dot{ width:8px; height:8px; border-radius:999px; background:#9b87ff; display:inline-block; }
.persona-item .label{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }


/* Reminders/Lists */
.card-row{display:flex; align-items:center; justify-content:space-between; width:100%;}
.rem-info{font-size:.85rem; color:var(--muted);}
.group-header{display:flex; align-items:center; justify-content:space-between; margin:44px 0 16px;}
.personas{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.personas button{padding:14px 26px; border-radius:10px; border:1px solid var(--card); color:var(--ink); background:transparent; cursor:pointer; font-size: 17px; box-shadow: var(--neu-elev-1);}
.personas button.active{background:var(--card-hover); font-weight:600; box-shadow: var(--neu-press);}
.filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;}
.filters a{padding:14px 26px; border-radius:10px; border:1px solid var(--card); text-decoration:none; color:var(--ink); background:transparent; cursor:pointer; box-shadow: var(--neu-elev-1);}
.filters a.active{background:var(--card-hover); font-weight:600; box-shadow: var(--neu-press);}

/* Modal again (for reminders/lists) */
.lock-modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.55); z-index:9999;}
.lock-modal.open{ display:flex; }
.lock-modal .box{width:min(520px,92vw); background:var(--card); color:var(--ink); border:1px solid var(--bd); border-radius:14px; padding:18px;}
.lock-modal .box h3{margin:0 0 8px; font-size:1.1rem; }
.lock-modal .box p{margin:0 0 12px; color:var(--muted);}
.lock-modal .actions{display:flex; justify-content:flex-end; gap:8px;}
.panel-updates{margin-top:37px; padding-left:19px;}


/* Inputs */
.row{display:flex;flex-direction:column;gap:8px;margin:10px 0}
/* .input-wrap{display:flex;align-items:center;gap:8px;width:100%;background:#f1f5f9;border:1px solid var(--bd);border-radius:12px;padding:8px 10px; box-shadow: var(--neu-inset-1);} */
.input,select,textarea{appearance:none;border:none;outline:none;width:100%;background:transparent;color:var(--ink);font:inherit}
label {font-weight:600;}
.btn-row{display:flex;gap:8px;flex-wrap:wrap}
select{padding:6px 8px; border-radius:8px; background:var(--card); color:var(--ink); box-shadow: var(--neu-elev-1);}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
.input,
textarea,
select {
  appearance:none;
  border:none;
  outline:none;
  width:100%;
  background: var(--card);
  /*<--darkbackground*/color:var(--ink);
  font:inherit;
  padding:10px 10px;
  border-radius:8px;
  box-shadow: var(--neu-inset-1);
  font-weight: 200;
}
    /* overlay */
    .cover{position:fixed;inset:0;background: var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999}
    .cover.hidden{display:none}
    .cover-log-link{position:absolute;top:0px;right:30px; font-size: 54px;}
    .cover-log-link-l{position:absolute;top:26px;left:28px; font-size: 54px;}
    .cover-log-link-r{position:absolute;top:1px;left:74px; font-size: 54px;}
    .cover-log-link-l img, .cover-log-link-r img {height: 37px; width: auto; filter: brightness(0) saturate(100%)
          invert(85%) sepia(88%) saturate(1400%)
          hue-rotate(260deg) brightness(50%) contrast(98%)}
    #coverInner{display:flex;flex-direction:column;align-items:center;gap:16px;}
    #coverLogo {
  position: absolute;
  left: 50%;
  bottom: 38px;              /* adjust spacing as needed */
  transform: translateX(-50%);
  width: 120px;              /* tweak size */
  max-width: 40vw;           /* responsive */
  opacity: 0.9;
  pointer-events: none;      /* don’t block taps */
  user-select: none;
}

.cover-tap{}
    #coverTap.glowlink {font-size: 1.4rem; font-weight: 300;}
    #wave{width:min(90vw,720px);height:140px;background:transparent; box-shadow: var(--neu-inset-1); border-radius: 14px;}


#coverInner #wave {box-shadow: none !important;}
.persona-grid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:880px){.persona-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rename-input{display:none;background:transparent;color:var(--ink);border:none;border-bottom:1px dashed var(--bd);font:inherit;font-weight:700;padding:2px 4px;min-width:140px;max-width:60%;}
.persona-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.persona-name-wrap{display:flex;align-items:center;gap:8px;min-width:0}
.persona-name-wrap h2{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.edit-btn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px; background:var(--card);border:1px solid var(--bd);padding:0;cursor:pointer; box-shadow: var(--neu-elev-1);}
.edit-btn:hover{background:var(--card-lt)}
 .ui-disabled { pointer-events: none; user-select: none; }
/* Only labels that contain a SELECT get the arrow */
label:has(> select){ position: relative; }

label:has(> select)::after{
    content: "⌄";
    position: absolute;
    right: 18px;
    top: 42px;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 1rem;
    line-height: 1;
    color: var(--muted, #9ca3af);
}

/* Give the select room so text doesn't overlap the chevron */
label>select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  padding-right:2rem;
}

/* Hover/focus/disabled states */
label:has(> select:focus)::after,
label:hover:has(> select)::after{ color:var(--icon, #cbd5e1); }
label:has(> select:disabled)::after{ color:#878c96; }


/*----- KEEP ------*/
/* Neumorphism: lower raised elevation + softer hover lift */
:root {
  /* keep colors the same; just shrink offsets/blur */
  --neu-elev-1: 3px 3px 6px var(--neu-dark), -3px -3px 6px var(--neu-light);
  --neu-elev-2: 5px 5px 12px var(--neu-dark), -5px -5px 12px var(--neu-light);
  /* keep --neu-press / --neu-inset-1 as-is (you liked the indented look) */
}

/* Softer hover raise on “raised” components */
.card:hover,
.btn:hover,
.persona-btn:hover,
.btn.back-btn:hover {
  transform: translateY(-0.5px) !important; /* was ~ -1px */
}

/* Optional: tone down always-raised items just a touch */
.card,
.btn,
.grid-icon,
.lockbar,
.mode-toggle,
.big-btn,
#qrcode {
  box-shadow: var(--neu-elev-1) !important; /* picks up the softer var */
}

/* Optional: hover elevation stays subtle too */
.card:hover,
.btn:hover,
.persona-btn:hover {
  box-shadow: var(--neu-elev-2) !important; /* also softened via var change */
}




@media (max-width: 600px) {
      .result-box {padding: 1.4rem;}
      .home-titles {margin-top: 10px;}
      .copyright-break {display: block;}
      .splash img {max-width: 500px; margin-top: -120px; /* On small screens, nudge the logo-topnav up slightly */}
.persona-dropdown {
    position: fixed;
    top: 80px;
    left: 0;
    z-index: 10053;
    display: none;
    background: #1a1a1a;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .35);
    min-width: 100%;
    }
.persona-item {
    padding: 26px 32px;
    border-radius: 0px;
        font-size: 1rem;
}
}
/* --- Mobile-friendly tweaks for Recovery panel & Vector Memory table --- */

/* General small-screen helpers */
@media (max-width: 720px) {
  code { word-break: break-all; }
}

/* =========================
   Recovery Panel (cards)
   ========================= */
@media (max-width: 720px) {
  /* Stack each recovery item vertically */
  .recovery-item {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Left content block grows full width */
  .recovery-item > div:first-child {
    width: 100% !important;
  }

  /* Buttons block wraps nicely */
  .recovery-item > div:last-child {
    width: 100% !important;
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: stretch !important;
  }

  /* Make each button fill a row on very narrow screens,
     or sit two-up when there’s room */
  .recovery-item form {
    flex: 1 1 160px !important;
    min-width: 140px !important;
  }
  .recovery-item form .btn {
    width: 100% !important;
  }

  /* Slightly larger, readable time/title on phones */
  .recovery-item .recovery-time {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }

  /* Chips/meta wrap cleanly */
  .recovery-item .recovery-meta {
    gap: 6px !important;
  }

  /* Make the whole list breathe a bit on mobile */
  #recoverPanel .recovery-list {
    border-radius: 12px !important;
  }
}

/* =======================================
   Vector Memory Usage table → stacked
   ======================================= */

/* Keep desktop/tablet as-is. You already have overflow-x:auto wrapping it. */
@media (max-width: 720px) {
  /* Hide header row on phones */
  .table thead {
    display: none !important;
  }

  /* Turn rows into cards */
  .table,
  .table tbody,
  .table tr,
  .table td {
    display: block !important;
    width: 100% !important;
  }

  .table tr {
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 12px !important;
    margin: 10px 0 !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.02); /* optional subtle contrast */
  }

  /* Each cell: label on left (from ::before), value on right */
  .table td {
    padding: 10px 12px !important;
    border-top: 1px solid rgba(255,255,255,0.06) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .table td:first-child {
    border-top: 0 !important; /* top of the 'card' */
  }

  /* Auto labels via nth-child so no markup changes are needed */
  .table td:nth-child(1)::before { content: "Persona"; font-weight: 600; }
  .table td:nth-child(2)::before { content: "Points"; font-weight: 600; }
  .table td:nth-child(3)::before { content: "Vectors"; font-weight: 600; }
  .table td:nth-child(4)::before { content: "Payload"; font-weight: 600; }
  .table td:nth-child(5)::before { content: "HNSW (est)"; font-weight: 600; }
  .table td:nth-child(6)::before { content: "Total (est)"; font-weight: 600; }

  /* Make labels sit on left, value on right */
  .table td::before {
    opacity: 0.85;
    margin-right: 12px;
    flex: 0 0 auto;
  }

  /* Allow values to wrap naturally on small screens */
  .table td [class*="muted"],
  .table td code {
    white-space: normal !important;
    word-break: break-word !important;
  }
}

/* Optional: Slightly tighten card paddings on very small screens */
@media (max-width: 420px) {
  .card { padding: 12px !important; }
}