/* ========================================================= 
   Alma — CPPA Chat UI (sin pantalla Teacher)
   Paleta Alma (#F58220) + neutrales claros
========================================================= */

/* -------- Variables de tema -------- */
:root{
  /* Backgrounds */
  --bg:#f0f2f7;
  --surface:#ffffff;
  --surface-2:#f4f6fb;
  --surface-3:#edf0f7;

  /* Text */
  --text:#0f172a;
  --text-2:#334155;
  --muted:#64748b;
  --muted-2:#94a3b8;

  /* Borders */
  --border:#e2e6ef;
  --border-2:#cdd4e0;

  /* Brand */
  --brand:#F58220;
  --brand-600:#e06a00;
  --brand-700:#c05c00;
  --brand-50:#fff4ea;
  --brand-100:#ffe8cc;

  /* Accent */
  --accent:#0f1e35;

  /* Radius */
  --radius-sm:.5rem;
  --radius-md:.875rem;
  --radius-lg:1.125rem;
  --radius-xl:1.5rem;

  /* Shadows */
  --shadow-0:0 1px 2px rgba(15,23,42,.04);
  --shadow-1:0 1px 3px rgba(15,23,42,.06),0 2px 8px rgba(15,23,42,.06);
  --shadow-2:0 4px 12px rgba(15,23,42,.10),0 1px 4px rgba(15,23,42,.06);
  --shadow-3:0 12px 32px rgba(15,23,42,.16),0 2px 8px rgba(15,23,42,.08);

  --header-h:60px;
  --composer-h:64px;
  --nav-h:62px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-top:env(safe-area-inset-top,0px);
}

/* -------- Base / Reset -------- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.hidden{display:none!important}
[hidden]{display:none!important}
button{font:inherit;cursor:pointer;background:none;border:none}
button:focus-visible,
[role="menuitem"]:focus-visible,
.summary-btn:focus-visible,
input:focus-visible,
select:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:8px;
}

/* =========================================================
   Root screens (solo una visible)
========================================================= */
.screen-root{display:none; min-height:100dvh;}  /* dvh moderno */
.screen-root.active{display:block}
.screen-root[hidden]{display:none!important}

/* =========================================================
   Layout dividido
========================================================= */
.split-shell{
  display:flex;
  height:calc(100dvh - var(--nav-h) - var(--safe-bottom));
  width:100%;
}

.split-shell .screen{
  flex:1;
  display:flex;
  flex-direction:column;
}
#conversations{
  max-width:360px;
  border-right:1px solid var(--border);
  overflow:hidden;
}
#chat{
  flex:2;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

/* Responsive móvil */
@media (max-width:720px){
  .split-shell{
    flex-direction:column;
    height:calc(100dvh - var(--nav-h) - var(--safe-bottom));
  }

  #conversations,#chat{max-width:100%}

  /* por defecto lista visible, chat oculto */
  #chat{display:none}
   
  /* ✅ reemplazo de :has() para móviles: usamos una clase */
  #rootChat.chat-open #chat{ display:flex !important; }
  #rootChat.chat-open #conversations{ display:none !important; }


  .hide-when-compact{display:none!important}
}

/* =========================================================
   Header común
========================================================= */
.app-header{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  height:calc(var(--header-h) + var(--safe-top));
  padding:var(--safe-top) calc(.95rem + 56px) 0 .95rem;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.app-header .header-title,.app-header h2{
  font-size:1.1rem;font-weight:800;color:var(--accent);letter-spacing:-.01em;
}
.header-actions{display:flex;align-items:center;gap:.5rem}
/* La píldora de racha flotante (#streakFlamePill) vive arriba-derecha; su hueco
   se reserva con el padding-right de .app-header para que no tape los botones.
   En Perfil se oculta porque la racha ya aparece en la tarjeta RANK. */
#profile.active ~ #streakFlamePill{ display:none; }
.icon-btn{
  width:36px;height:36px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--muted);
  transition:background .15s,color .15s,box-shadow .15s,transform .06s;
}
.icon-btn:hover{background:#edf1f6;color:var(--accent)}
.icon-btn:active{transform:scale(.98)}
.cpap-header-logo{height:22px;width:auto;display:block;margin-right:.35rem;opacity:.95}

/* =========================================================
   Menús contextuales (dropdowns)
========================================================= */
.context-menu{
  position:fixed;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow-2);
  display:flex;
  flex-direction:column;
  min-width:200px;
  padding:.35rem 0;
  z-index:1000;
  opacity:0;
  transform:translateY(-6px) scale(.98);
  transition:opacity .15s ease, transform .15s ease;
}
.context-menu:not(.hidden){
  opacity:1;
  transform:translateY(0) scale(1);
}
.menu-item{
  display:flex;align-items:center;gap:.55rem;
  padding:.62rem 1rem;
  font-size:.93rem;color:var(--text);
  white-space:nowrap;text-align:left;
  background:transparent;
}
.menu-item i{width:18px;text-align:center;color:var(--muted)}
.menu-item:hover{background:var(--brand-50);color:var(--brand-600)}
.menu-item:hover i{color:var(--brand-600)}
.menu-item.danger{color:#e11d48}
.menu-item.danger:hover{background:#fee2e2;color:#b91c1c}
.menu-sep{height:1px;background:var(--border);margin:.25rem 0}

/* =========================================================
   Toasts & Banner
========================================================= */
.toasts{position:fixed;top:1rem;right:1rem;display:flex;flex-direction:column;gap:.5rem;z-index:50}
.toast{
  background:#111827;color:#fff;
  padding:.55rem .85rem;border-radius:.6rem;
  font-size:.85rem;box-shadow:var(--shadow-2);
  opacity:0;transform:translateY(-8px);transition:.18s
}
.toast.visible{opacity:1;transform:translateY(0)}
.toast.info{background:var(--brand)}
.toast.error{background:#e11d48}

/* Banner de red */
.banner{
  position:fixed;left:0;right:0;top:0;
  display:flex;align-items:center;gap:.6rem;
  padding:.55rem .9rem;
  background:#111827;color:#fff;
  z-index:60;
  box-shadow:var(--shadow-2);
}
.banner.hidden,[hidden].banner{display:none!important}

/* =========================================================
   Lista de conversaciones
========================================================= */
.conversation-toolbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  padding:.6rem .95rem;
}
.searchbar{
  display:flex;align-items:center;gap:.55rem;
  background:var(--surface-2);
  border:1.5px solid var(--border);
  border-radius:1rem;
  padding:.45rem .85rem;
  box-shadow:var(--shadow-0);
  transition:border-color .15s,box-shadow .15s;
}
.searchbar:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-50);
}
.searchbar input{
  flex:1;border:none;outline:none;background:transparent;
  color:var(--text);font-size:.95rem;
}
.searchbar input::placeholder{color:#9aa6b2}
.searchbar i{color:var(--muted-2)}
.searchbar .icon-btn{width:32px;height:32px}

.filters-collapsible{background:var(--surface);border-bottom:1px solid var(--border)}
.filters-collapsible>summary{
  list-style:none;cursor:pointer;padding:.65rem .95rem;
  color:var(--muted);font-weight:600;
}
.filters-collapsible[open]>summary{color:var(--text)}
.filters-panel{padding:.35rem .95rem .85rem}
.segments{display:flex;flex-wrap:wrap;gap:.5rem;margin:.2rem 0 .6rem}
.segment{
  background:#fff;color:var(--accent);
  border:1.5px solid var(--border);border-radius:999px;
  padding:.35rem .8rem;font-size:.83rem;font-weight:500;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s;
}
.segment:hover{border-color:var(--brand-100);background:var(--brand-50);color:var(--brand-600)}
.segment.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 3px 8px rgba(245,130,32,.25)}

.conversation-list{background:var(--surface);overflow:auto;flex:1}
.conversation-item{
  display:flex;gap:.9rem;align-items:flex-start;
  padding:.85rem .75rem;
  margin:.15rem .5rem;
  border-radius:.875rem;
  border-bottom:none;
  background:var(--surface);
  transition:background .15s,box-shadow .15s,transform .1s;
  cursor:pointer;
}
.conversation-item:hover{background:var(--brand-50);box-shadow:var(--shadow-1);transform:translateX(1px)}
.conversation-item .avatar{
  flex:0 0 42px;height:42px;display:flex;align-items:center;justify-content:center;
  font-size:1.65rem;color:#8893a3;
  background:var(--surface-2);
  border-radius:50%;
  border:1px solid var(--border);
}
.conversation-info{flex:1;min-width:0}
.conversation-info .row{display:flex;justify-content:space-between;gap:.5rem}
.conversation-info .title{
  font-weight:700;font-size:.98rem;color:var(--accent);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.conversation-info .time{font-size:.78rem;color:#9aa6b2}
.conversation-info .snippet{
  margin-top:.2rem;font-size:.9rem;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.meta{display:flex;gap:.35rem;align-items:center;margin-top:.42rem;flex-wrap:wrap}

.badge-unread{
  background:var(--brand);color:#fff;font-weight:700;
  border-radius:999px;padding:.1rem .55rem;font-size:.75rem;
  box-shadow:0 2px 6px rgba(245,130,32,.30);
}
.pin-icon{color:#f59e0b}
.archive-icon{color:#94a3b8}

.list-footer{background:var(--surface);border-top:1px solid var(--border);display:flex;justify-content:center;padding:.7rem}
.btn-secondary{
  background:#fff;color:var(--accent);
  border:1.5px solid var(--border);border-radius:.75rem;
  padding:.5rem .95rem;cursor:pointer;font-weight:600;
  transition:border-color .15s,background .15s,color .15s;
}
.btn-secondary:hover{background:var(--brand-50);border-color:var(--brand-100);color:var(--brand-600)}
.btn-primary{
  background:var(--brand);color:#fff;
  border:0;border-radius:.75rem;padding:.6rem 1.2rem;
  font-weight:700;letter-spacing:.01em;cursor:pointer;
  box-shadow:0 4px 12px rgba(245,130,32,.28);
  transition:background .15s,transform .1s,box-shadow .15s;
}
.btn-primary:hover{background:var(--brand-600);box-shadow:0 6px 16px rgba(245,130,32,.36);transform:translateY(-1px)}
.btn-primary:active{transform:scale(.98);box-shadow:none}
.btn-compact{padding:.25rem .55rem;border-radius:.5rem;font-size:.85rem}
.empty-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.7rem;padding:2.5rem 1rem;color:var(--muted);
}
.empty-state i{font-size:2rem;color:#c1c9d6}

/* Checkbox selección */
.conversation-item .select-checkbox{
  margin-left:auto;
  align-self:center;
  width:18px;height:18px;
  cursor:pointer;
  accent-color:var(--brand);
  flex:0 0 auto;
}
.conversation-item .select-checkbox:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
  border-radius:4px;
}

/* =========================================================
   Chat + marca de agua
========================================================= */
.chat-header-left{display:flex;align-items:center;gap:.6rem}
.back-btn{color:var(--muted);font-size:1.2rem}
.back-btn:hover{color:var(--accent)}
.chat-meta{display:flex;align-items:center;gap:.6rem}
.chat-meta img.avatar-img{width:34px;height:34px;border-radius:50%}
.name-role h2{font-size:1rem;font-weight:700;color:var(--accent)}
.chat-status{font-size:.78rem;color:#1aa36a}

/* Presence chip */
.alma-presence{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  height:30px;
  padding:0 .7rem;
  border-radius:999px;
  background:rgba(15,23,42,.05);
  color:var(--muted);
  font-size:.78rem;
  line-height:1;
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.06);
}
.alma-presence__dot{
  width:8px;height:8px;border-radius:50%;
  background:#22c55e;
  box-shadow:0 0 0 2px rgba(34,197,94,.15);
}
.alma-presence__text{font-weight:600;letter-spacing:.01em}
.alma-presence--typing .alma-presence__dot{
  background:#f59e0b;
  box-shadow:0 0 0 2px rgba(245,158,11,.18);
}
.alma-presence--error .alma-presence__dot{
  background:#ef4444;
  box-shadow:0 0 0 2px rgba(239,68,68,.18);
}
@media (max-width: 560px){
  .alma-presence{height:28px;font-size:.74rem}
}

#chatActive{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  min-height:0;
}
#chatActive.hidden, #chatActive[hidden]{ display:none !important; }

/* Ocultar CTA cuando hay chat activo */
#chatEmpty.hidden, #chatEmpty[hidden]{display:none !important;}

.chat-box{
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  overflow: auto;
  position: relative;
  padding: 1rem .9rem calc(var(--composer-h) + 16px);
  scroll-padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--composer-h) + 24px);
}

.chat-watermark{
  position:absolute; inset:0;
  display:block;
  background:url("CPPA_LOGO_BLACK.png") center/220px no-repeat;
  opacity:.15;
  pointer-events:none;
}

.message{max-width:860px;width:fit-content}
.message[data-sender="alma"]{align-self:flex-start}
.message[data-sender="user"]{align-self:flex-end}

.bubble{
  position:relative;background:#fff;
  border:1px solid var(--border);
  padding:.75rem 1.1rem;border-radius:1.25rem;
  line-height:1.6;font-size:.97rem;
  box-shadow:var(--shadow-1);
}
.message[data-sender="alma"] .bubble{
  background:linear-gradient(160deg,#fff9f5 0%,#ffffff 60%);
  border-color:var(--brand-100);padding-left:1.15rem;
}
.message[data-sender="alma"] .bubble::before{
  content:"";position:absolute;left:.5rem;top:50%;
  transform:translateY(-50%);
  width:3px;height:60%;border-radius:4px;background:var(--brand);
}
.message[data-sender="user"] .bubble{background:#e8eef7;border-color:#d4dce9}

/* Streaming typing aesthetic */
.message.is-streaming .bubble{
  box-shadow:0 10px 22px rgba(255,169,99,.18), var(--shadow-1);
  border-color:#ffcd9a;
}
.message.is-streaming .text{
  position:relative;
  display:inline;
}
.message.is-streaming .text::after{
  content:"";
  display:inline-block;
  width:.45em;
  height:1em;
  margin-left:.12em;
  border-radius:3px;
  background:var(--brand);
  opacity:.65;
  transform:translateY(2px);
  animation:almaCaret 1s steps(1) infinite;
}
@keyframes almaCaret{
  0%, 49% { opacity:.75; }
  50%, 100% { opacity:.15; }
}

.row.meta{
  display:flex;justify-content:flex-end;gap:.45rem;
  font-size:.72rem;color:#8893a3;margin-top:.25rem;
}
.thinking-indicator{font-size:.85rem;color:var(--muted);padding:.25rem .35rem}

/* Inline prompt */
.inline-prompt{
  display:inline-flex;gap:.4rem;align-items:center;margin-left:.6rem;
  background:#fff;border:1px dashed var(--border);border-radius:999px;
  padding:.18rem .35rem;font-size:.82rem
}
.inline-prompt span{color:var(--muted)}

/* el contenedor ya resta la nav; mantenlo así */
#chatActive{
  display:grid;
  /* 4 filas: chat-header | chatBox(1fr) | undoBar | composer */
  grid-template-rows: auto 1fr auto auto;
  min-height:calc(100dvh - var(--nav-h) - var(--safe-bottom));
}
#chatActive > .chat-header { grid-row: 1; }
#chatActive > #chatBox     { grid-row: 2; }
#chatActive > #undoBar     { grid-row: 3; }
#chatActive > #composer    { grid-row: 4; }

/* ── Composer: contenedor y posicionamiento ───────────────── */
.composer{
  position: static;
  margin: .5rem .9rem 0;
  z-index: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .12rem;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.9));
  -webkit-backdrop-filter: saturate(1.2) blur(2px);
  backdrop-filter: saturate(1.2) blur(2px);
  border-radius: 14px;
}

/* La nav mantiene un z por debajo del composer */
.bottom-nav{ z-index: 30; }

.composer-field{
  flex:1;display:flex;align-items:center;gap:.6rem;
  background:#fff;border:1.5px solid var(--border);
  border-radius:999px;padding:.55rem .9rem;box-shadow:var(--shadow-2);
  transition:border-color .15s,box-shadow .15s;
}
.composer-field:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-50),var(--shadow-2);
}
.composer-field input{flex:1;border:0;outline:none;background:transparent;font-size:.96rem}
.composer-field input::placeholder{color:#9aa6b2}
.send-status{color:var(--muted);font-size:.82rem}

/* Estados de micrófono sin romper estilos actuales */
#micBtn[aria-pressed="true"],
#micBtn.recording{
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-50);
}
#micBtn{
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Feedback claro mientras graba */
#micBtn.recording{
  transform: scale(1.05);
}
#micBtn.recording i{
  animation: micPulse 1s infinite;
}
@keyframes micPulse{
  0%{ transform: scale(1); }
  50%{ transform: scale(1.12); }
  100%{ transform: scale(1); }
}

/* Botones laterales del composer */
.composer-btn{ flex:0 0 44px; height:44px; }
.composer-send{ height:44px; padding:0 1rem; margin-left:.1rem; }

/* Botón enviar coherente con la altura */
.composer-send{
  height: 44px;
  padding: 0 1rem;
  margin-left: .1rem;
}

.composer-send:hover{background:var(--brand-600)}
.composer-send:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}

/* Snackbar Undo */
.undo-bar{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--nav-h) + var(--safe-bottom) + var(--composer-h) + 24px);
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #111827;
  color: #fff;
  border-radius: .75rem;
  padding: .5rem .8rem;
  box-shadow: var(--shadow-2);
  z-index: 25;
  font-size: .9rem;
}
.undo-bar .btn-secondary{
  background:#fff;border-color:transparent;color:var(--accent);
  padding:.28rem .6rem;border-radius:.5rem;
}
.undo-bar .countdown{opacity:.8;font-variant-numeric:tabular-nums;}

/* =========================================================
   Bottom nav — estilo iOS profesional
========================================================= */
.bottom-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  height:calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:rgba(255,255,255,.96);
  border-top:1px solid var(--border);
  display:flex;
  justify-content:space-around;
  align-items:center;
  box-shadow:0 -4px 16px rgba(15,23,42,.08);
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  z-index:30;
}

/* Items del tab bar */
.nav-item{
  position:relative;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.16rem;
  padding:.35rem .6rem;
  border-radius:999px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.01em;
  transition:
    color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.nav-item i{
  font-size:1.18rem;
  transition:transform .18s ease, color .18s ease;
}

/* Hover (solo se nota en desktop) */
.nav-item:hover{
  color:var(--brand-600);
  background:rgba(245,130,32,.08);
}
.nav-item:hover i{
  transform:translateY(-1px);
}

/* Estado activo: pastilla naranja profesional */
.nav-item.active,
.bottom-nav .nav-item[aria-current="page"]{
  color:#ffffff;
  font-weight:600;
  background:var(--brand);
  box-shadow:0 4px 12px rgba(245,130,32,.30);
  transform:translateY(-2px);
}

.nav-item.active i,
.bottom-nav .nav-item[aria-current="page"] i{
  color:#ffffff;
}

/* =========================================================
   Modales (base)
========================================================= */
.modal{
  position:fixed; inset:0; z-index:200;
  background:
    radial-gradient(1200px 600px at 70% 10%, rgba(245,130,32,.08), transparent),
    rgba(15,23,42,.38);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display:flex; align-items:center; justify-content:center;
}
.modal.hidden, .modal[hidden]{display:none!important}

.modal-content{
  position:relative;
  width:min(640px,92vw);
  max-height:calc(100vh - 12vh);
  overflow:auto;
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow-3);
  padding:1.25rem 1.25rem 1rem;
  display:flex; flex-direction:column; gap:1rem;
}
.modal:not(.hidden) .modal-content{ animation:modalPop .18s ease-out }
@keyframes modalPop{
  from{ transform:translateY(6px) scale(.98); opacity:0 }
  to{   transform:translateY(0)   scale(1);   opacity:1 }
}
.modal-content::before{
  content:"";
  position:sticky; top:0; left:0; right:0;
  display:block; height:4px;
  background:linear-gradient(90deg,var(--brand),var(--brand-600));
  border-top-left-radius:16px; border-top-right-radius:16px;
  margin:-1.25rem -1.25rem 0;
}

.modal-close{
  position:absolute; top:.75rem; right:.75rem;
  width:36px; height:36px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--muted);
}
.modal-close:hover{ background:#f1f5f9; color:var(--accent) }

.modal-body{font-size:.95rem; color:var(--text); line-height:1.5}

/* Campos de formulario */
.modal-content label{
  font-size:.85rem; font-weight:700; color:var(--accent);
  margin:.2rem 0 .25rem;
}
.modal-content input[type="text"],
.modal-content textarea{
  width:100%;
  border:1px solid var(--border);
  background:#fff;
  border-radius:.65rem;
  padding:.6rem .75rem;
  font-size:.95rem; color:var(--text);
  transition:border-color .15s, box-shadow .15s;
  resize:vertical;
}
.modal-content textarea{ min-height:92px }
.modal-content input::placeholder,
.modal-content textarea::placeholder{ color:#9aa6b2 }
.modal-content input:focus,
.modal-content textarea:focus{
  border-color:#ffcfac;
  box-shadow:0 0 0 3px var(--brand-50);
  outline:0;
}

.modal-actions{
  position:sticky; bottom:0; left:0; right:0;
  display:flex; justify-content:flex-end; gap:.6rem;
  padding:.75rem .25rem 0;
  margin-top:.35rem;
  background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
  border-top:1px solid var(--border);
}
.modal-actions .btn-primary{ box-shadow:0 6px 16px rgba(245,130,32,.25) }

/* =========================================================
   Modales de My Space (tamaños / títulos con icono)
========================================================= */
#addWordModal .modal-content,
#editVocabModal .modal-content{ width:min(520px,92vw) }
#editSuggestionModal .modal-content,
#editCorrectionModal .modal-content{ width:min(640px,92vw) }

#addWordModal h2,
#editVocabModal h2,
#editSuggestionModal h2,
#editCorrectionModal h2{
  display:flex; align-items:center; gap:.5rem;
  font-size:1.05rem; font-weight:800; color:var(--accent);
  margin:.25rem 0;
}
#addWordModal h2::before,
#editVocabModal h2::before,
#editSuggestionModal h2::before,
#editCorrectionModal h2::before{
  content:"";
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:999px;
  background:var(--brand-50); color:var(--brand-600);
  font-family:"Font Awesome 6 Free"; font-weight:900; font-size:.9rem;
}
#addWordModal h2::before{ content:"\f067"; }        /* plus */
#editCorrectionModal h2::before{ content:"\f304"; }  /* pen */
#editSuggestionModal h2::before{ content:"\f0eb"; }  /* lightbulb */
#editVocabModal h2::before{ content:"\f02d"; }       /* book */

.suggestion-edit-list{ display:flex; flex-direction:column; gap:.5rem; margin:.4rem 0 .2rem }
.suggestion-edit-item{
  display:flex; align-items:center; gap:.4rem;
  background:#fff; border:1px dashed var(--border);
  border-radius:.55rem; padding:.4rem;
}
.suggestion-edit-item .sugg-input{
  flex:1; border:0; outline:0; font-size:.95rem; padding:.4rem .5rem;
}
.suggestion-edit-item .remove-sugg{
  border:1px solid var(--border); background:#fff; border-radius:.5rem;
  width:36px; height:36px;
}
.suggestion-edit-item .remove-sugg:hover{ border-color:#d8dbe2 }

/* Corrections modal: tarjetas misma altura en desktop */
@media (min-width:720px){
  #correctionModal .corr-card{ height:100% }
}

/* =========================================================
   Splash Screen — Premium
========================================================= */
.splash{
  position:fixed;inset:0;z-index:1000;
  background:#fafbff;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}

/* Animated background blobs */
.splash-blob{
  position:absolute;border-radius:50%;pointer-events:none;
  filter:blur(90px);
}
.splash-blob-1{
  width:640px;height:640px;
  background:radial-gradient(circle, rgba(245,130,32,.16) 0%, transparent 62%);
  top:-200px;left:-140px;
  animation:blobMove1 9s ease-in-out infinite;
}
.splash-blob-2{
  width:560px;height:560px;
  background:radial-gradient(circle, rgba(100,140,255,.12) 0%, transparent 62%);
  bottom:-140px;right:-120px;
  animation:blobMove2 11s ease-in-out infinite;
}
.splash-blob-3{
  width:340px;height:340px;
  background:radial-gradient(circle, rgba(255,180,80,.12) 0%, transparent 62%);
  bottom:28%;left:6%;
  animation:blobMove3 13s ease-in-out infinite;
}
@keyframes blobMove1{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(60px,50px) scale(1.12); }
}
@keyframes blobMove2{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-55px,-35px) scale(1.1); }
}
@keyframes blobMove3{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(35px,-45px); }
}

/* Center stack */
.splash-center{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;
  gap:22px;
  animation:splashEnter .8s cubic-bezier(.22,1,.36,1) both;
}
@keyframes splashEnter{
  from{ opacity:0; transform:translateY(26px) scale(.95); }
  to{   opacity:1; transform:translateY(0)    scale(1); }
}

/* Logo + ring wrapper */
.splash-logo-wrap{
  position:relative;
  width:200px;height:200px;
  display:flex;align-items:center;justify-content:center;
}

/* Sonar pulse rings */
.splash-pulse{
  position:absolute;
  top:50%;left:50%;
  width:180px;height:180px;
  margin-top:-90px;margin-left:-90px;
  border-radius:50%;
  border:1.5px solid rgba(245,130,32,.4);
  animation:sonarPulse 3s ease-out infinite;
  pointer-events:none;
}
.splash-pulse-1{ animation-delay:0s; }
.splash-pulse-2{ animation-delay:1s; }
.splash-pulse-3{ animation-delay:2s; }
@keyframes sonarPulse{
  0%{   transform:scale(.7); opacity:.75; }
  100%{ transform:scale(2.3); opacity:0; }
}

/* Logo */
.splash-logo{
  width:120px;height:auto;
  position:relative;z-index:2;
  animation:logoPulse 3s ease-in-out infinite;
}
@keyframes logoPulse{
  0%,100%{ filter:drop-shadow(0 4px 14px rgba(245,130,32,.18)); }
  50%{     filter:drop-shadow(0 8px 30px rgba(245,130,32,.5)); }
}

/* SVG rings — base */
.splash-ring{
  position:absolute;inset:0;width:100%;height:100%;
}

/* Outer slow-rotating dashed ring */
.splash-ring-outer{
  z-index:1;
  animation:ringOuterSpin 24s linear infinite;
  transform-origin:50% 50%;
}
@keyframes ringOuterSpin{
  from{ transform:rotate(0deg); }
  to{   transform:rotate(360deg); }
}

/* Inner arc track */
.splash-ring-track{
  stroke:#eaedf4;stroke-width:3.5;
}

/* Inner arc fill */
.splash-ring-fill{
  stroke:url(#splashGrad);stroke-width:3.5;
  stroke-linecap:round;
  stroke-dasharray:452;stroke-dashoffset:452;
  transform-origin:50% 50%;
  transform:rotate(-90deg);
  animation:ringDraw 2.5s cubic-bezier(.4,0,.2,1) .3s forwards,
            ringSpin 1.6s linear infinite;
}
@keyframes ringDraw{
  0%{   stroke-dashoffset:452; }
  100%{ stroke-dashoffset:52; }
}
@keyframes ringSpin{
  from{ transform:rotate(-90deg); }
  to{   transform:rotate(270deg); }
}

/* Brand name — staggered letter reveal */
.splash-brand{
  display:flex;gap:.08em;
  font-size:2.5rem;font-weight:900;
  letter-spacing:.42em;
  padding-left:.42em; /* compensate last-letter spacing */
}
.splash-brand span{
  display:inline-block;
  background:linear-gradient(160deg, #F58220 0%, #ffb23e 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:letterReveal .5s cubic-bezier(.22,1,.36,1) both;
}
.splash-brand span:nth-child(1){ animation-delay:.5s; }
.splash-brand span:nth-child(2){ animation-delay:.63s; }
.splash-brand span:nth-child(3){ animation-delay:.76s; }
.splash-brand span:nth-child(4){ animation-delay:.89s; }
@keyframes letterReveal{
  from{ opacity:0; transform:translateY(16px) scale(.88); }
  to{   opacity:1; transform:translateY(0)    scale(1); }
}

/* Hint text — soft pill */
.splash-hint{
  font-size:.82rem;
  color:var(--muted);
  font-weight:500;letter-spacing:.02em;
  min-height:1.5em;text-align:center;
  transition:opacity .3s ease;
  padding:5px 18px;
  border-radius:999px;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.07);
}

/* Animated dots */
.splash-dots{
  display:flex;gap:10px;align-items:center;
}
.splash-dots span{
  width:7px;height:7px;border-radius:50%;
  background:linear-gradient(135deg, #F58220, #ffb23e);
  box-shadow:0 0 8px rgba(245,130,32,.55);
  animation:dotPulse 1.4s ease-in-out infinite;
}
.splash-dots span:nth-child(1){ animation-delay:0s; }
.splash-dots span:nth-child(2){ animation-delay:.22s; }
.splash-dots span:nth-child(3){ animation-delay:.44s; }
@keyframes dotPulse{
  0%,100%{ opacity:.2; transform:scale(.6); }
  50%{     opacity:1;  transform:scale(1.25); }
}

/* Bottom progress bar — CSS-animated, decorative */
.splash-bar{
  position:absolute;
  bottom:0;left:0;right:0;
  height:3px;
  background:rgba(15,23,42,.06);
  z-index:2;
}
.splash-bar-fill{
  height:100%;width:0%;
  background:linear-gradient(90deg, #F58220, #ffb23e);
  border-radius:0 2px 2px 0;
  box-shadow:0 0 12px rgba(245,130,32,.7);
  animation:barFill 3.5s cubic-bezier(.4,0,.2,1) .2s forwards;
}
@keyframes barFill{
  0%{   width:0%; }
  45%{  width:60%; }
  75%{  width:82%; }
  100%{ width:93%; }
}

/* Keep hidden elements for JS compatibility */
.splash-progress{ display:none!important; }
.splash-percent{  display:none!important; }
.splash-card{     display:none!important; }
.splash-brand-strip{ display:none!important; }

.splash.is-hidden{ opacity:0; pointer-events:none; transition:opacity 1s cubic-bezier(.4,0,.2,1); }

/* =========================================================
   CPPA Badge opcional
========================================================= */
.cpap-badge{
  position:fixed;right:16px;
  bottom:calc(var(--nav-h) + var(--safe-bottom) + 12px);
  z-index:30;background:#fff;border:1px solid var(--border);
  border-radius:var(--radius-md);padding:6px 10px;box-shadow:var(--shadow-1);
  opacity:.85;transition:opacity .2s;
}
.cpap-badge:hover{opacity:1}
.cpap-badge img{display:block;height:20px;width:auto}

/* =========================================================
   Voice-only mode (opcional)
========================================================= */
.voice-only .composer-field,
.voice-only #sendBtn,
.voice-only #repeatBtn{display:none !important;}
.voice-only .composer{
  left:auto; right:16px;
  bottom:calc(var(--nav-h) + var(--safe-bottom) + 12px);
  width:auto; box-shadow:none;
}
.voice-only #micBtn{
  width:56px; height:56px;
  border-radius:999px;
  box-shadow:var(--shadow-2);
}

/* ===== Corrections modal – layout ===== */
.corr-grid{
  display:grid;
  gap:12px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){
  .corr-grid{ grid-template-columns: 1fr 1fr; }
}
.corr-card{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-top: 3px solid var(--brand-100);
  border-radius: var(--radius-lg);
  padding: .9rem;
  box-shadow: var(--shadow-1);
}
.corr-title{
  font-size: .95rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: .45rem;
}
.corr-text{
  font-size: .98rem;
  color: var(--text);
  background: #fff;
  border: 1px dashed var(--border);
  border-radius: .6rem;
  padding: .55rem .7rem;
}
.corr-fixed{
  border-color: #ffd9b8;
  background: linear-gradient(180deg, #fff7f0, #ffffff);
}
.corr-tip{ margin-top: .5rem; font-size: .9rem; color: var(--muted); }
.corr-actions{ display:flex; gap:.5rem; margin-top:.65rem; }
.corr-suggestions{
  list-style:none; padding:0; margin:0;
  display:flex; flex-direction:column; gap:.4rem;
}
.corr-suggestions li{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  background:#fff; border:1px solid var(--border);
  border-radius:.55rem; padding:.45rem .6rem; font-size:.95rem;
}
.corr-suggestions .save-sugg{
  border:1px solid var(--border); background:#fff; border-radius:.5rem;
  padding:.35rem .55rem; font-weight:700; cursor:pointer;
}
.corr-suggestions .save-sugg:hover{ border-color:#d8dbe2 }
.corr-suggestions .sugg-text{ flex:1; }
.corr-suggestions .save-sugg i{ margin-right:.35rem; }
.corr-suggestions .save-sugg:active{ transform:scale(.98); }

/* =========================
   Chat vacío (CTA inicial)
========================= */
#chat #chatEmpty{
  flex:1 1 auto;
  min-height:0;
  display:grid;
  place-items:center;
  padding:1.25rem;
  background:var(--bg);
  position:relative;
}
.chat-empty-card{
  width:min(520px,92vw);
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-2);
  text-align:center;
  padding:2.5rem 1.75rem;
}
.chat-empty-logo{
  width:72px; height:72px;
  object-fit:contain;
  border-radius:16px;
  opacity:.9;
  margin-bottom:.75rem;
}
.chat-empty-card h3{
  font-size:1.15rem;
  font-weight:800;
  color:var(--accent);
  margin:.25rem 0 .35rem;
}
.chat-empty-card p{
  color:var(--muted);
  font-size:.95rem;
  margin:0 0 1rem 0;
}
.btn-cta{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.75rem 1.1rem;
  border-radius:.75rem;
  font-size:1rem;
  box-shadow:var(--shadow-2);
}
.btn-cta i{ margin-right:.1rem; }
.btn-cta:hover{ transform:translateY(-1px); }
.btn-cta:active{ transform:translateY(0); }

@media (min-width:721px){
  #chat #chatEmpty{ padding:1.75rem; }
}

/* =========================================================
   ──────── My Space (Corrections / Suggestions / Vocab) ────────
========================================================= */
.myspace-search{
  position:sticky;
  top:var(--header-h);
  z-index:9;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}
.myspace-search .searchbar{
  background:#fff;
  border-radius:12px;
  border:1px solid var(--border);
  box-shadow:var(--shadow-1);
}
.myspace-search .filters-panel{
  display:flex;flex-direction:column;gap:.6rem;
  padding:.6rem .95rem .8rem;
}
.myspace-search .segments .segment{
  transition:transform .08s ease,border-color .15s ease,background .15s ease;
}
.myspace-search .segments .segment:hover{transform:translateY(-1px)}

.myspace-tabs{
  position:sticky;
  top:calc(var(--header-h) + 62px);
  z-index:8;
  display:flex;
  gap:.5rem;
  padding:.5rem .95rem;
  background:var(--surface);
  border-bottom:1px solid var(--border);

  justify-content:center; /* ✅ nuevo */
  width:100%;             /* ✅ opcional pero recomendable */
}

.myspace-tabs .tab{
  position:relative;
  background:#fff;border:1px solid var(--border);color:var(--accent);
  border-radius:999px;padding:.4rem .9rem;font-size:.85rem;font-weight:600;
  transition:color .15s ease, border-color .15s ease, background .15s ease, transform .08s ease;
}
.myspace-tabs .tab:hover{border-color:#d8dbe2; transform:translateY(-1px)}
.myspace-tabs .tab.active{
  background:var(--brand);border-color:var(--brand);color:#fff;
}
.myspace-tabs .tab.active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-9px;
  height:3px; border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-600));
}

.tab-content{
  display:none;
  padding:1rem .95rem 5.5rem;
  gap:1rem;
  background:var(--bg);
  min-height:calc(100vh - var(--header-h) - var(--nav-h) - 160px);
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.tab-content.active{display:grid}
.tab-content[hidden]{display:none!important}

/* Cards My Space */
.ms-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-1);
  display:flex;
  flex-direction:column;
  overflow:hidden;

  /* 🔽 CLAVE: evita tarjetas eternas */
  height: auto;
  min-height: unset;

  transition:transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}

.ms-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(15,23,42,.12);
  border-color:#dfe3ea;
}
.ms-card-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;padding:.65rem .85rem;border-bottom:1px solid var(--border);
  background:linear-gradient(180deg,#f9fafb,#fff);
}
.ms-card-head .chip{
  background:var(--brand-50);border:1px solid var(--brand-100);
  color:#7a3d00;border-radius:999px;padding:.18rem .55rem;font-size:.74rem;font-weight:800;
}
.ms-card-head .time{font-size:.78rem;color:var(--muted-2)}

.ms-card-body{
  padding:.55rem .75rem;   /* ⬅ menos padding */
  display:flex;
  flex-direction:column;
  gap:.35rem;              /* ⬅ menos separación */
}

.ms-field{
  line-height:1.35;
  max-height: 4.2em;              /* ⬅ limita altura */
  overflow: hidden;
  text-overflow: ellipsis;
}

.ms-field strong{color:var(--accent)}
.ms-field.strong{font-weight:800}
.ms-field.brand strong{color:var(--brand-600)}
.ms-tip{font-size:.9rem;color:var(--muted)}

.ms-card-actions{
  display:flex;gap:.5rem;justify-content:flex-end;align-items:center;
  padding:.45rem .65rem;border-top:1px solid var(--border);background:#fff;
}
.ms-card-actions .btn-secondary{
  background:#fff;border:1px solid var(--border);color:var(--accent);
  border-radius:.55rem;padding:.35rem .6rem;font-size:.86rem;
  transition:box-shadow .15s ease,border-color .15s ease,transform .08s ease;
}
.ms-card-actions .btn-secondary:hover{ border-color:#d8dbe2; box-shadow:var(--shadow-1); }
.ms-card-actions .btn-secondary:active{transform:translateY(1px)}

/* Corrections */
.correction-card .ms-corrected{color:#0b3b1a}
.correction-card .ms-field.brand .ms-corrected{
  background:linear-gradient(180deg,#fff7f0,#ffffff);
  border:1px solid #ffd9b8;border-radius:.6rem;padding:.35rem .5rem;display:inline-block
}

/* Suggestions */
.suggestion-card .ms-suggestions{
  list-style:none;display:flex;flex-direction:column;gap:.45rem;margin:.1rem 0 0;padding:0;
}
.suggestion-card .ms-suggestions li{
  background:#fff;border:1px solid var(--border);border-radius:.55rem;
  padding:.5rem .6rem;font-size:.95rem;color:var(--text);
  display:flex;gap:.6rem;align-items:flex-start;
}
.suggestion-card .ms-suggestions li::before{
  content:"\f058";
  font-family:"Font Awesome 6 Free"; font-weight:900;
  opacity:.55; margin-top:.1rem;
}

/* Vocabulary */
.vocab-card .vocab-word{font-size:1.05rem;font-weight:800;color:var(--accent)}
.vocab-card .vocab-note{font-size:.92rem;color:var(--muted)}
.vocab-card .ms-meta{display:flex;align-items:center;justify-content:space-between;margin-top:.35rem}
.vocab-card .tts{min-width:38px}

/* FAB extendido (icono + texto) */
.fab-add-word.fab-extended{
  width:auto;
  height:52px;
  padding:0 16px;
  gap:.55rem;
}

.fab-add-word.fab-extended .fab-text{
  font-weight:800;
  font-size:.92rem;
  letter-spacing:.01em;
  line-height:1;
  white-space:nowrap;
}

/* Extra visible: un poco más grande y con mejor “presence” */
.fab-add-word.fab-extended{
  box-shadow:0 14px 30px rgba(15,23,42,.20), var(--shadow-2);
}

/* En pantallas MUY pequeñas, puedes ocultar el texto para que no moleste */
@media (max-width: 360px){
  .fab-add-word.fab-extended .fab-text{ display:none; }
  .fab-add-word.fab-extended{ padding:0; width:52px; justify-content:center; }
}

/* Tooltips simples */
.ms-tooltip{
  position: absolute;
  background: #111827;
  color: #fff;
  font-size: .78rem;
  padding: .3rem .45rem;
  border-radius: .45rem;
  box-shadow: var(--shadow-2);
  transform: translate(-50%,-100%);
  white-space: nowrap;
  pointer-events: none;
  z-index: 95;
}

/* Footers/paginación centrados */
#msCorrectionsFooter, #msSuggestionsFooter, #msVocabFooter{
  background: transparent;
  border: 0;
  padding: 0 0 1rem;
  display: flex;
  justify-content: center;
}
#msCorrectionsFooter .btn-secondary,
#msSuggestionsFooter .btn-secondary,
#msVocabFooter .btn-secondary{
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-1);
}

/* Estados vacíos */
#myspace .empty-state{
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  margin: 1rem;
}

/* =========================================================
   PROFILE (Speaking-first)
========================================================= */
#profile{ background: var(--bg); }
.profile-head-left{display:flex;align-items:center;gap:.6rem}
.profile-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;opacity:.95}
.profile-identity .profile-sub{display:none}

.profile-wrap{
  min-height: calc(100vh - var(--header-h) - var(--nav-h));
  display:flex; flex-direction:column; gap:1rem;
  padding:.9rem  .9rem 1rem;
}

/* HERO */
.profile-hero{
  background:linear-gradient(180deg,#fff7f0,#ffffff);
  border:1px solid #ffd9b8;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);display:flex;justify-content:space-between;gap:1rem;
  padding:1rem 1.1rem;
}
.profile-hero .hero-copy h2{
  font-size:1.25rem; font-weight:800; color:var(--accent); margin-bottom:.2rem;
}
.profile-hero .subcopy{color:var(--muted); font-size:.95rem;}
.profile-hero .chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.4rem}
.profile-hero .chip{
  background:var(--brand-50);border:1px solid var(--brand-100);color:#7a3d00;
  border-radius:999px;padding:.18rem .5rem;font-size:.78rem;font-weight:800
}
.profile-hero .btn-cta{ padding:.8rem 1.1rem; }

/* WEEK */
.profile-week{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1);padding:1rem;
}
.profile-week h3{margin-bottom:.6rem;color:var(--accent)}
.week-grid{display:grid;grid-template-columns:160px 1fr;gap:1rem;align-items:center}
@media (max-width:720px){.week-grid{grid-template-columns:1fr}}
.week-ring{display:grid;place-items:center;gap:.25rem}
.ring-figure{width:120px;height:120px;border-radius:50%;background:conic-gradient(var(--brand) 0%, #e9edf5 0% 100%)}
.ring-center{position:relative;margin-top:-80px;font-size:1.1rem;font-weight:800;color:var(--accent)}
.ring-caption{font-size:.85rem;color:var(--muted);margin-top:28px}
.week-bars{display:flex;gap:.35rem;align-items:flex-end;height:72px;background:var(--surface-2);border:1px solid var(--border);border-radius:.6rem;padding:.5rem}
.week-bars .bar{flex:1;background:var(--brand);border-radius:.4rem;min-height:6px;opacity:.85}
.last-session{margin-top:.55rem;color:var(--muted);font-size:.9rem}

/* FOCUS */
.profile-focus h3,
.profile-coach h3,
.profile-actions h3,
.profile-settings h3{ font-size:1rem; color:var(--accent); margin-bottom:.5rem; }

.focus-grid{ display:grid; grid-template-columns:1fr; gap:.8rem; }
@media (min-width:720px){ .focus-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.focus-card{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1); padding:1rem;
  transition:box-shadow .18s,transform .18s;
}
.focus-card:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.focus-card header{display:flex;justify-content:space-between;align-items:center}
.focus-card h4{ font-size:.98rem; font-weight:800; color:var(--accent); }
.focus-card .hint{ color:var(--muted); font-size:.95rem; margin:.25rem 0 .6rem; }
.focus-card .state{font-size:.82rem;color:var(--muted)}

/* COACH */
.profile-coach .coach-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:.75rem}
@media (max-width:1080px){.profile-coach .coach-grid{grid-template-columns:1fr}}
.coach-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:1rem;transition:box-shadow .18s,transform .18s}
.coach-card:hover{box-shadow:var(--shadow-2);transform:translateY(-1px)}
.coach-card h4{font-size:.98rem;color:var(--accent);margin-bottom:.35rem}
.coach-card p{color:var(--text)}
.coach-card .before,.coach-card .after{font-size:.92rem}
.coach-card .after{
  background:var(--brand-50);
  border:1px solid var(--brand-100);
  border-radius:.5rem;padding:.25rem .45rem;display:inline-block;margin-top:.25rem
}

/* QUICK actions */
.profile-actions{display:flex;flex-wrap:wrap;gap:.5rem}
.profile-actions .btn-secondary{box-shadow:var(--shadow-1)}

/* SETTINGS */
.profile-settings{
  background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-1); padding:1rem;
}
.settings-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem;
}
@media (max-width:960px){.settings-grid{grid-template-columns:1fr}}
.settings-grid .inline{ display:flex; flex-direction:column; gap:.35rem; }
.settings-grid input[type="number"], .settings-grid select{
  border:1px solid var(--border); border-radius:.55rem; padding:.5rem .6rem;
}

/* ===== Coach Opener ===== */
.coach-opener{display:flex;flex-direction:column;gap:.55rem}
.opener-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.15rem}
.opener-head .pill{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.18rem .6rem;
  font-size:.78rem;font-weight:700;color:var(--accent)
}
.coach-opener p{font-size:1rem;line-height:1.5;color:var(--text)}
.coach-opener .opener-cta{display:flex;gap:.5rem}

/* ===== PATCH: que la bottom-nav no tape el perfil ===== */
#profile .profile-wrap{
  /* deja espacio de scroll equivalente a la altura de la bottom-nav */
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 20px);
}
.screen-root.active{
  padding-bottom: 0;
}

/* Solo ocultar Exam cuando el body tenga .no-exam */
body.no-exam .nav-item[data-target="exam"],
body.no-exam #exam,
body.no-exam [data-screen="exam"],
body.no-exam #view-exam { display: none !important; }
/* Override temporal para volver a mostrar Exam */
.nav-item[data-target="exam"],
#exam,
[data-screen="exam"],
#view-exam { display: revert !important; }

/* ============ AUTH ============ */
body.auth-required .bottom-nav {
  pointer-events: none;
  opacity: .6;
}
.auth-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  max-width: 720px;
  margin: 1rem auto;
  padding: 1rem 1.1rem 1.25rem;
}
.auth-tabs {
  display: flex;
  gap: .5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: .5rem;
  margin-bottom: .9rem;
}
.auth-tabs .tab {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--accent);
  border-radius: 999px;
  padding: .4rem .9rem;
  font-size: .9rem;
  font-weight: 700;
}
.auth-tabs .tab.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.auth-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: .55rem;
}
.auth-panel label {
  font-weight: 700;
  color: var(--accent);
  margin-top: .3rem;
}
.auth-panel input[type="email"],
.auth-panel input[type="password"] {
  border: 1px solid var(--border);
  background: #fff;
  border-radius: .6rem;
  padding: .6rem .7rem;
  font-size: .95rem;
}
.auth-panel .muted,
.auth-wrap .muted {
  color: var(--muted);
  font-size: .9rem;
}

input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.inline-prompt{
  position: relative;
  z-index: 2;              /* por si la barra decorativa de Alma tapa */
  visibility: visible;     /* evita estados heredados */
  opacity: 1;
  white-space: nowrap;     /* que no parta “Got a tip?” en móvil */
}

.message .bubble{
  overflow: visible;       /* por si algún reset lo dejó en hidden */
}

.message[data-sender="alma"] .bubble::before{
  z-index: 1;              /* por detrás del prompt */
}

/* =========================================================
   MY PROFILE + MY CLASS (Phase 4 — new layout)
========================================================= */

.profile-summary-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 850px){
  .profile-summary-grid{
    grid-template-columns: 1fr;
  }
}

.profile-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-2);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.profile-card-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-card-header h2{
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--accent);
  letter-spacing: -.01em;
}
.profile-card-header p{
  color: var(--muted);
  margin-top: .15rem;
  font-size: .9rem;
}

.profile-account-main{
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem 0 .4rem;
}

.profile-account-avatar{
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--brand-600);
}

.profile-account-name{
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent);
}
.profile-account-email{
  color: var(--muted);
  font-size: .9rem;
}
.profile-account-academy, 
.profile-account-license{
  color: var(--muted-2);
  font-size: .9rem;
  margin-top: .25rem;
}

/* Chips list */
.profile-section-title{
  font-weight: 700;
  margin-bottom: .35rem;
  color: var(--accent);
}

.profile-chip-row{
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.profile-chip-row li{
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .25rem .65rem;
  font-size: .82rem;
  color: var(--accent);
}

/* MY CLASS */
.profile-class-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-class-name{
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent);
}
.profile-class-code{
  color: var(--muted);
  font-size: .85rem;
}

.profile-class-teacher label{
  color: var(--muted);
  font-size: .8rem;
}
.profile-class-teacher strong{
  display: block;
  font-size: .95rem;
  font-weight: 700;
  color: var(--accent);
}

.profile-class-meta{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem 2rem;
  margin-top: .6rem;
}
.profile-class-meta dt{
  font-size: .8rem;
  color: var(--muted);
}
.profile-class-meta dd{
  font-size: .95rem;
  color: var(--accent);
  font-weight: 600;
}

/* Students list */
.profile-class-list{
  list-style: none;
  padding: 0;
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.profile-class-item{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: .55rem;
  padding: .55rem .7rem;
  font-size: .92rem;
}
.profile-class-main{
  display: flex;
  align-items: center;
  gap: .55rem;
}
.profile-class-flag{
  font-size: 1.1rem;
}
.profile-class-level{
  font-weight: 700;
  color: var(--accent);
}

/* ================================
   SPEAKING PROFILE (FASE 4)
   Todo scopeado dentro de #profile
================================ */

/* Contenedor principal del tab Profile – a pantalla completa como Chat y My Space */
#profile.screen-root{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Wrapper general del contenido del perfil */
#profile .profile-wrap {
  padding: 1.25rem 1rem 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* --------- RESUMEN (MY PROFILE + CLASS) --------- */

#profile .profile-summary {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.8fr);
  gap: 1rem;
  align-items: flex-start;
}

#profile .profile-card,
#profile .profile-info-block,
#profile .profile-class-block {
  background: #ffffff;
  border-radius: 16px;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

/* Tarjetita de cuenta arriba a la izquierda */
#profile .profile-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

#profile #profileAccountAvatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #0f172a;
  color: #f9fafb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.15rem;
}

#profile .profile-account-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

#profile .profile-name {
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
}

#profile .profile-email {
  font-size: 0.85rem;
  color: #6b7280;
}

#profile .profile-levelchip {
  align-self: flex-start;
  font-size: 0.75rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font-weight: 500;
}

/* Bloques de info del resumen (Account, Hobbies, Goals, Class) */
#profile .profile-info-block,
#profile .profile-class-block {
  margin-top: 0.6rem;
}

#profile .profile-info-block h3,
#profile .profile-class-block h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: #0f172a;
}

#profile .profile-info-block ul,
#profile .class-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.86rem;
  color: #4b5563;
}

#profile .profile-info-block li + li,
#profile .class-info-list li + li {
  margin-top: 0.15rem;
}

/* Chip list para hobbies / goals */
#profile .chip-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

#profile .chip-list li {
  font-size: 0.8rem;
  padding: 0.18rem 0.65rem;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
}

/* Clase / teacher / classmates */
#profile .profile-class-block h4 {
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.7rem 0 0.25rem;
  color: #111827;
}

#profile .teacher-email {
  font-size: 0.8rem;
  color: #6366f1;
}

#profile .classmates-list {
  list-style: none;
  padding: 0;
  margin: 0.1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
}

#profile .classmates-list li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #4b5563;
}

/* --------- HERO “READY TO TALK” --------- */

#profile .profile-hero {
  background: linear-gradient(90deg, #eff6ff, #eef2ff);
  border-radius: 18px;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

#profile .profile-hero h2 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.15rem;
}

#profile .profile-hero .subcopy {
  font-size: 0.88rem;
  color: #374151;
  margin-bottom: 0.5rem;
}

#profile .profile-hero .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

#profile .profile-hero .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.05);
  color: #111827;
}

#profile .profile-hero .chip i {
  font-size: 0.8rem;
}

#profile .hero-cta {
  flex-shrink: 0;
}

/* --------- WEEK (anillo + barras) --------- */

#profile .profile-week {
  background: #ffffff;
  border-radius: 18px;
  padding: 1rem 1.25rem 1.1rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

#profile .profile-week h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.7rem;
}

#profile .week-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 1.25rem;
  align-items: center;
}

#profile .week-ring {
  position: relative;
  width: 150px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}

#profile .ring-figure {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 8px solid rgba(129, 140, 248, 0.35);
  box-shadow: inset 0 0 0 6px #ffffff;
}

#profile .ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #111827;
}

#profile .ring-center span {
  font-size: 1.1rem;
}

#profile .ring-caption {
  text-align: center;
  margin-top: 0.35rem;
  font-size: 0.78rem;
  color: #6b7280;
}

#profile .week-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.3rem;
  height: 96px;
}

#profile .week-bars .bar {
  flex: 1;
  border-radius: 999px;
  background: #e5e7eb;
  position: relative;
}

#profile .week-bars .bar::after {
  content: attr(data-day);
  position: absolute;
  left: 50%;
  bottom: -1.1rem;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: #6b7280;
}

#profile .last-session {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: #6b7280;
}

/* --------- FLUENCY FOCUS (3 cards) --------- */

#profile .profile-focus {
  background: #ffffff;
  border-radius: 18px;
  padding: 1rem 1.25rem 1.1rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

#profile .profile-focus h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.7rem;
}

#profile .focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

#profile .focus-card {
  border-radius: 14px;
  padding: 0.75rem 0.8rem;
  background: #f9fafb;
  border: 1px solid rgba(209, 213, 219, 0.8);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.82rem;
}

#profile .focus-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

#profile .focus-card h4 {
  font-size: 0.86rem;
  font-weight: 600;
}

#profile .focus-card .state {
  font-size: 0.7rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
}

#profile .focus-card .hint {
  color: #4b5563;
}

/* --------- COACH (3 cards) --------- */

#profile .profile-coach {
  background: #ffffff;
  border-radius: 18px;
  padding: 1rem 1.25rem 1.1rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

#profile .profile-coach h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.7rem;
}

#profile .coach-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.4fr) minmax(0, 1.2fr);
  gap: 0.8rem;
}

#profile .coach-card {
  border-radius: 14px;
  padding: 0.8rem 0.85rem;
  background: #f9fafb;
  border: 1px solid rgba(209, 213, 219, 0.9);
  font-size: 0.82rem;
}

#profile .coach-card h4 {
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

#profile .coach-card .before,
#profile .coach-card .after {
  font-size: 0.8rem;
  color: #4b5563;
}

#profile .coach-opener .opener-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.35rem;
}

#profile .coach-opener .pill {
  font-size: 0.72rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: #ecfeff;
  color: #0e7490;
}

#profile .coach-opener p {
  margin-bottom: 0.55rem;
}

/* --------- QUICK ACTIONS & SETTINGS --------- */

#profile .profile-actions,
#profile .profile-settings {
  background: #ffffff;
  border-radius: 18px;
  padding: 0.9rem 1.25rem 1.1rem;
  border: 1px solid rgba(148, 163, 184, 0.35);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
  margin-top: 0.4rem;
}

#profile .profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

#profile .profile-settings h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.7rem;
}

#profile .settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  font-size: 0.85rem;
}

#profile .settings-grid label.inline {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

#profile .settings-grid select,
#profile .settings-grid input[type="number"] {
  font-size: 0.85rem;
  padding: 0.35rem 0.45rem;
  border-radius: 8px;
  border: 1px solid #d1d5db;
}

/* Checkbox “Voice coach” en línea con el texto */
#profile #profileVoiceCoachToggle {
  margin-right: 0.35rem;
}

/* --------- RESPONSIVE --------- */

@media (max-width: 900px) {
  #profile .profile-summary {
    grid-template-columns: 1fr;
  }

  #profile .week-grid {
    grid-template-columns: 1fr;
  }

  #profile .coach-grid {
    grid-template-columns: 1fr;
  }

  #profile .focus-grid {
    grid-template-columns: 1fr;
  }

  #profile .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #profile .profile-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  #profile .hero-cta {
    align-self: stretch;
  }

  #profile .hero-cta .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  #profile .settings-grid {
    grid-template-columns: 1fr;
  }
}


/* Si el teclado ocupa media pantalla, ocultamos el FAB (best effort) */
@media (max-height: 540px){
  .fab-new-chat{ display:none; }
}

@media (max-width:720px){
  .bottom-nav{ padding-top: 10px; }
}

/* =========================================================
   THEME OVERRIDES — "Custom Modern" look (no rompe contrato)
   Pegar al FINAL del style.css
========================================================= */

/* 1) Fondo más premium */
body{
  background:
    radial-gradient(900px 420px at 12% 0%, rgba(245,130,32,.14), transparent 55%),
    radial-gradient(820px 520px at 95% 15%, rgba(99,102,241,.12), transparent 55%),
    var(--bg);
}

/* 2) Header tipo “glass” */
.app-header{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(230,232,237,.7);
}

/* 3) “Chats” y panel izquierdo como tarjeta */
#conversations{
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
}

.conversation-toolbar,
.filters-collapsible{
  background: transparent;
  border-bottom: 1px solid rgba(230,232,237,.6);
}

/* 4) Searchbar más moderna */
.searchbar{
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(230,232,237,.8);
  box-shadow: 0 10px 24px rgba(15,23,42,.08);
}
.searchbar:hover{
  box-shadow: 0 14px 34px rgba(15,23,42,.12);
}
.searchbar input{
  font-weight: 600;
}

/* 5) Filtros: chips más “custom” */
.segment{
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(230,232,237,.9);
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}
.segment:hover{
  transform: translateY(-1px);
}
.segment.active{
  box-shadow: 0 10px 22px rgba(245,130,32,.22);
}

/* 6) Conversation items estilo “card” */
.conversation-list{
  background: transparent;
  padding: .75rem .75rem 1rem;
}

.conversation-item{
  border: 1px solid rgba(230,232,237,.85);
  border-radius: 18px;
  margin-bottom: .65rem;
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  background: rgba(255,255,255,.85);
}
.conversation-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}
.conversation-item:active{
  transform: translateY(0);
}

.conversation-item .avatar{
  width:44px;height:44px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245,130,32,.16), rgba(245,130,32,.06));
  display:flex;align-items:center;justify-content:center;
}
.conversation-item .avatar i{ color: rgba(245,130,32,.85); font-size: 1.6rem; }

.conversation-info .snippet{
  color: rgba(100,116,139,.95);
}

/* checkbox más “limpio” */
.conversation-item .select-checkbox{
  width: 18px; height: 18px;
  border-radius: 6px;
}

/* 7) Panel derecho (chat vacío) tipo tarjeta moderna */
.chat-empty-card{
  border: 1px solid rgba(230,232,237,.9);
  box-shadow: 0 28px 80px rgba(15,23,42,.10);
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(245,130,32,.10), transparent 60%),
    rgba(255,255,255,.92);
}
.chat-empty-card .btn-cta{
  box-shadow: 0 18px 40px rgba(245,130,32,.24);
}
.chat-empty-card .btn-cta:hover{
  transform: translateY(-2px);
}

/* 8) Mensajes con burbujas más “premium” */
.bubble{
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
.message[data-sender="user"] .bubble{
  background: linear-gradient(180deg, #eef2f7, #ffffff);
}

/* 9) Composer más moderno */
.composer-field{
  box-shadow: 0 14px 34px rgba(15,23,42,.12);
}
.composer-send{
  box-shadow: 0 14px 34px rgba(245,130,32,.22);
}

/* 10) Bottom nav “Custom” */
.bottom-nav{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.92));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(230,232,237,.85);
  border-top-color: rgba(245,130,32,.55);
}

.nav-item{
  padding: .4rem 0;
  transition: transform .12s ease, color .15s ease;
}
.nav-item:hover{
  transform: translateY(-1px);
}
.nav-item.active{
  color: var(--brand-600);
}

/* 11) Micro-animaciones globales (sutil) */
.icon-btn, .btn-secondary, .btn-primary, .segment, .conversation-item{
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
}

/* 12) Móvil: paneles más “app-like” */
@media (max-width:720px){
  .conversation-list{ padding: .65rem .6rem 1rem; }
  .conversation-item{ border-radius: 16px; }
  .app-header{ padding: 0 .75rem; }
}

/* =========================
   Delete mode: mostrar checkbox
========================= */
#rootChat.delete-mode .conversation-item .select-checkbox{
  display:block !important;
}
#rootChat.delete-mode .conversation-item .select-checkbox[hidden]{
  display:block !important;
}
#rootChat .conversation-item .select-checkbox{
  display:none;
}

/* Sidebar: columna izquierda */
#conversations {
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* La lista scrollea */
#conversationList {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* por si quedase el botón en algún sitio */
#loadMoreChatsBtn { display: none !important; }

/* ===============================
   FIX ⋮ (Profile header actions)
   Evita que el bloque izquierdo empuje el botón fuera
================================= */
#profile .app-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

#profile .profile-head-left{
  flex:1 1 auto;     /* CLAVE: que pueda encoger */
  min-width:0;       /* CLAVE: permite shrink real en flex */
}

#profile .profile-identity{
  min-width:0;       /* CLAVE */
}

/* Si quieres que el título no rompa el layout en móvil */
#profile .profile-identity .header-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* El contenedor de acciones no debe encoger nunca */
#profile .header-actions{
  flex:0 0 auto;
}

/* Por si algo lo tapa */
#profile #profileMenuBtn{
  position:relative;
  z-index:20;
}

/* === Force visible 3-dots menu buttons === */
.icon-btn.menu-dots{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 12px;
}

.icon-btn.menu-dots .dots{
  font-size: 22px;
  line-height: 1;
  font-weight: 700;
  opacity: 1;
  visibility: visible;
}

/* Si algún reset/estilo te los oculta */
#convoMenuBtn, #chatMenuBtn, #myspaceMenuBtn, #profileMenuBtn{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* TOP CARD de My Space usando look ms-card */
#myspace .myspace-top-card{
  overflow: visible; /* para que no corte sombras */
}

/* Grid de Date/Label/Export */
#myspace .myspace-top-grid{
  display:grid;
  grid-template-columns: 180px minmax(240px, 1fr) auto;
  gap:.75rem;
  align-items:end;
}

#myspace .myspace-top-grid label.inline{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  font-size:.82rem;
  color:var(--muted);
  font-weight:650;
}

#myspace .myspace-top-grid select,
#myspace .myspace-top-grid input{
  background:#fff;
  border:1px solid var(--border);
  border-radius:14px;
  padding:.6rem .75rem;
  font-size:.95rem;
  color:var(--text);
  box-shadow:var(--shadow-1);
}

#myspace #myspaceExportBtn{
  height:44px;
  border-radius:14px;
  white-space:nowrap;
  box-shadow:var(--shadow-1);
}

/* Responsive */
@media (max-width:720px){
  #myspace .myspace-top-grid{ grid-template-columns: 1fr; }
  #myspace #myspaceExportBtn{ width:100%; justify-content:center; }
}

/* =========================================
   My Space — Tabs centradas + CTA Add Vocabulary
========================================= */

/* Fila que centra todo y le da un ancho “pro” */
#myspace .myspace-tabs-row{
  width: min(920px, 100%);
  margin: .15rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  flex-wrap: wrap;
}

/* Tabs: más anchas, centradas, sin ocupar todo */
#myspace .myspace-tabs{
  width: min(720px, 100%);
  justify-content: center;
  margin: 0;
  padding: .38rem;
  border-radius: 999px;
}

/* Botón bonito “Add Vocabulary” */
#myspace .add-vocab-btn{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem;
  border-radius: 999px;
  border: 1px solid rgba(245,130,32,.28);
  background: linear-gradient(135deg, var(--brand), #ffb467);
  color: #fff;
  font-weight: 800;
  box-shadow: 0 10px 22px rgba(245,130,32,.22);
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
  white-space: nowrap;
}

#myspace .add-vocab-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(245,130,32,.26);
  filter: brightness(1.02);
}

#myspace .add-vocab-btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(245,130,32,.20);
}

#myspace .add-vocab-icon{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18);
}

/* En móvil: que quede debajo, centrado, y a ancho cómodo */
@media (max-width: 720px){
  #myspace .myspace-tabs-row{
    gap: .55rem;
  }
  #myspace .add-vocab-btn{
    width: min(420px, 100%);
    justify-content: center;
  }
}

/* Si tenías el FAB flotante antiguo, lo escondemos (para no duplicar) */
#myspace .fab-add-word{
  display: none !important;
}

/* =========================================
   FIX: My Space cards demasiado altas (grid stretch)
   Pegar al FINAL del style.css
========================================= */

/* El grid NO debe estirar items */
#myspace .tab-content{
  align-items: start;        /* clave */
  align-content: start;      /* evita repartir altura vertical */
}

/* Cada card: que no se estire */
#myspace .ms-card{
  align-self: start;         /* clave */
  height: fit-content;       /* se adapta al contenido */
}

/* Extra: asegura que el body no fuerce alturas raras */
#myspace .ms-card-body{
  flex: 0 0 auto;
}

/* Opcional: si quieres aún más “achatadas” */
#myspace .ms-card-head{ padding: .5rem .7rem; }
#myspace .ms-card-body{ padding: .5rem .7rem; }
#myspace .ms-card-actions{ padding: .4rem .55rem; }

/* ================================
   FIX: Toast “Saved” por delante de modales
   Pegar al FINAL del style.css
================================ */

/* Tu modal está en z-index:200, así que el toast debe ser >200 */
.toasts{
  z-index: 2000 !important;
}

/* (Opcional) también el banner si alguna vez se te queda detrás */
.banner{
  z-index: 1900 !important;
}

.myspace-tabs{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: .5rem;
}

.myspace-tabs .tab{
  width: 100% !important;
  text-align: center;
}

/* Evita que el texto largo rompa la card */
.ms-corrected, 
.ms-original,
.corr-fixed, 
.corr-original,
.sugg-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Corrections: scroll interno cuando el texto es largo */
#myspace .correction-card .ms-field.brand .ms-corrected{
  display: block !important;
  width: 100%;
  padding: .45rem .6rem;
  border-radius: .6rem;
  border: 1px solid #ffd9b8;
  background: linear-gradient(180deg,#fff7f0,#ffffff);

  overflow-wrap: anywhere;
  word-break: break-word;
}

/* scrollbar discreta */
#myspace .correction-card .ms-field.brand .ms-corrected::-webkit-scrollbar{
  width: 8px;
}
#myspace .correction-card .ms-field.brand .ms-corrected::-webkit-scrollbar-thumb{
  background: rgba(15,23,42,.12);
  border-radius: 999px;
}

/* Corrections: NO recortar el bloque "Correct:" */
#myspace .correction-card .ms-field.brand{
  max-height: none !important;
  overflow: visible !important;
}

/* El texto corregido: que envuelva y crezca */
#myspace .correction-card .ms-field.brand .ms-corrected{
  display: block !important;
  width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: initial;

  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================================================
   PROFILE v2 — Premium polish (solo #profile + modales nuevos)
   Pegar AL FINAL del style.css
========================================================= */

/* Base del Profile */
#profile{
  background: var(--bg);
}

/* Contenedor: un poco más “app-like” y centrado en desktop */
#profile .profile-wrap{
  padding: 1rem .9rem calc(var(--nav-h) + var(--safe-bottom) + 20px);
  display: grid;
  gap: 1rem;
  max-width: 1040px;
  margin: 0 auto;
}

/* Desktop: grid 2 columnas, con hero a ancho completo */
@media (min-width: 900px){
  #profile .profile-wrap{
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  /* Account (1º) ocupa 2 columnas */
  #profile .profile-wrap > section[aria-label="Account information"]{ grid-column: 1 / -1; }
  /* Hero ocupa 2 columnas */
  #profile .profile-wrap > section[aria-label="Ready to talk"]{ grid-column: 1 / -1; }
  /* Suggested y Teacher lado a lado */
  #profile .profile-wrap > section[aria-label="Suggested activities by Alma"]{ grid-column: 1 / 2; }
  #profile .profile-wrap > section[aria-label="Teacher activities"]{ grid-column: 2 / 3; }
  /* Stats + Hobbies lado a lado */
  #profile .profile-wrap > section[aria-label="Statistics"]{ grid-column: 1 / 2; }
  #profile .profile-wrap > section[aria-label="Hobbies"]{ grid-column: 2 / 3; }
  /* Badges ocupa columna 1, debajo de Stats */
  #profile .profile-wrap > section[aria-label="Badges"]{ grid-column: 1 / 2; }
}

/* ---- Cards: borde hairline + sombra premium + hover lift ---- */
#profile .profile-card-block.ms-card{
  border-radius: 18px;
  border: 1px solid rgba(230,232,237,.9);
  background:
    radial-gradient(800px 240px at 15% 0%, rgba(245,130,32,.07), transparent 55%),
    rgba(255,255,255,.92);
  box-shadow:
    0 10px 28px rgba(15,23,42,.08),
    0 1px 0 rgba(15,23,42,.04);
  overflow: hidden;
  transform: translateY(0);
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

#profile .profile-card-block.ms-card:hover{
  transform: translateY(-2px);
  border-color: rgba(223,227,234,.95);
  box-shadow:
    0 18px 46px rgba(15,23,42,.12),
    0 1px 0 rgba(15,23,42,.05);
}

/* Head más “premium” y consistente */
#profile .profile-card-block .ms-card-head{
  background: linear-gradient(180deg, rgba(249,250,251,.9), rgba(255,255,255,.75));
  border-bottom: 1px solid rgba(230,232,237,.85);
}

#profile .profile-card-block .ms-card-head .chip{
  background: rgba(245,130,32,.10);
  border: 1px solid rgba(245,130,32,.22);
  color: #7a3d00;
  font-weight: 800;
}

/* Copy muted */
#profile .muted{
  color: var(--muted);
}

/* ---- Header actions (Edit preferences) un poco más pro ---- */
#profile #editPreferencesBtn{
  border-radius: 999px;
  padding: .35rem .7rem;
  box-shadow: 0 8px 18px rgba(15,23,42,.08);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
#profile #editPreferencesBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15,23,42,.12);
}

/* =========================================================
   Account Info
========================================================= */
#profile .profile-account-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .9rem;
}

#profile .profile-account-left{
  display:flex;
  align-items:center;
  gap: .85rem;
  min-width:0;
}

#profile #profileAccountAvatar.profile-avatar{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  font-weight: 900;
  letter-spacing: .2px;
  color: #fff;
  background:
    radial-gradient(120px 80px at 30% 20%, rgba(255,255,255,.25), transparent 55%),
    linear-gradient(135deg, var(--brand), #ffb467);
  box-shadow: 0 16px 36px rgba(245,130,32,.22);
}

#profile .profile-account-main{
  min-width:0;
}

#profile .profile-name{
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--accent);
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

#profile .profile-email{
  margin-top: .15rem;
  font-size: .8rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 380px) {
  #profile .profile-name { font-size: .92rem; }
  #profile .profile-email { font-size: .72rem; }
  #profile #profileAccountAvatar.profile-avatar { width: 44px; height: 44px; }
}

#profile .profile-account-right .chip{
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.08);
  color: var(--accent);
  font-weight: 800;
}

/* KV grid */
#profile .profile-account-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}

@media (max-width: 520px){
  #profile .profile-account-grid{ grid-template-columns: 1fr; }
}

#profile .profile-kv{
  background: rgba(245,247,251,.75);
  border: 1px solid rgba(230,232,237,.85);
  border-radius: 14px;
  padding: .6rem .7rem;
}

#profile .profile-kv .k{
  display:block;
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: .15rem;
}
#profile .profile-kv .v{
  display:block;
  font-size: .95rem;
  font-weight: 800;
  color: var(--accent);
}

/* =========================================================
   Hero: Ready to Talk (glow sutil + botón pro)
========================================================= */
#profile .profile-hero-card{
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* Glow decorativo (sin cambiar HTML) */
#profile .profile-hero-card::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(760px 260px at 30% 10%, rgba(245,130,32,.22), transparent 60%),
    radial-gradient(640px 240px at 90% 0%, rgba(99,102,241,.14), transparent 60%);
  opacity: .9;
  z-index: 0;
  pointer-events:none;
}

#profile .profile-hero-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  border: 1px solid rgba(245,130,32,.18);
  z-index: 0;
  pointer-events:none;
}

#profile .profile-hero-card .ms-card-head,
#profile .profile-hero-card .ms-card-body{
  position: relative;
  z-index: 1;
}

#profile .hero-title{
  font-size: 1.25rem;
  font-weight: 950;
  color: var(--accent);
  letter-spacing: -0.02em;
  margin: 0 0 .2rem;
}

#profile .hero-sub{
  color: rgba(100,116,139,.95);
  font-size: .98rem;
  margin: 0;
  max-width: 62ch;
}

/* CTA principal: shine + elevación */
#profile #profileStartConversationBtn{
  border-radius: 14px;
  padding: .85rem 1.05rem;
  box-shadow:
    0 18px 40px rgba(245,130,32,.26),
    0 1px 0 rgba(255,255,255,.35) inset;
  position: relative;
  overflow: hidden;
  transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}

#profile #profileStartConversationBtn::before{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width: 60%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: rotate(18deg);
  opacity: .55;
}

#profile #profileStartConversationBtn:hover{
  transform: translateY(-2px);
  box-shadow: 0 24px 54px rgba(245,130,32,.30);
  filter: brightness(1.02);
}

#profile #profileStartConversationBtn:active{
  transform: translateY(0);
  box-shadow: 0 18px 40px rgba(245,130,32,.24);
}

/* =========================================================
   Statistics
========================================================= */
#profile .stats-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
@media (min-width: 520px){
  #profile .stats-grid{ grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1100px){
  #profile .stats-grid{ grid-template-columns: 1fr 1fr; }
}

#profile .stat{
  background: rgba(245,247,251,.8);
  border: 1px solid rgba(230,232,237,.9);
  border-radius: 14px;
  padding: .7rem .75rem;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

#profile .stat-k{
  font-size: .78rem;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: .25rem;
}

#profile .stat-v{
  font-size: 1.35rem;
  font-weight: 950;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   Class Ranking widget (profile)
========================================================= */
.profile-ranking-list{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.profile-rank-item{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  border-radius: 8px;
  padding: 3px 4px;
  transition: background .15s;
}
.profile-rank-item.rank-me{
  background: linear-gradient(90deg, rgba(245,130,32,.09), rgba(251,191,36,.05));
  border: 1px solid rgba(245,130,32,.18);
}
.profile-rank-pos{
  width: 24px;
  flex-shrink: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--muted);
}
.profile-rank-bar-wrap{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.profile-rank-name{
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent-dark, #1e3a5f);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-rank-name.rank-me-label{
  color: var(--alma-orange, #f5821f);
}
.profile-rank-bar-bg{
  height: 5px;
  background: rgba(0,0,0,.07);
  border-radius: 999px;
  overflow: hidden;
}
.profile-rank-bar-fill{
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--alma-orange, #f5821f), #fbbf24);
  transition: width .5s ease;
  min-width: 4px;
}
.profile-rank-item:nth-child(1) .profile-rank-bar-fill{ background: linear-gradient(90deg,#f5821f,#fbbf24); }
.profile-rank-item:nth-child(2) .profile-rank-bar-fill{ background: linear-gradient(90deg,#94a3b8,#cbd5e1); }
.profile-rank-item:nth-child(3) .profile-rank-bar-fill{ background: linear-gradient(90deg,#cd7f32,#d4a574); }
.profile-rank-mins{
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 36px;
  text-align: right;
}
.profile-rank-item.rank-me .profile-rank-mins{
  color: var(--alma-orange, #f5821f);
}

/* =========================================================
   Hobbies chips
========================================================= */
#profile .chips{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}

#profile .chips .chip{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .22rem .6rem;
  border-radius: 999px;
  border: 1px solid rgba(230,232,237,.95);
  background: rgba(255,255,255,.75);
  color: var(--accent);
  font-size: .83rem;
  font-weight: 750;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}

#profile .chips .chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(15,23,42,.10);
  border-color: rgba(223,227,234,.95);
}

/* =========================================================
   Activities list (Suggested + Teacher)
========================================================= */
#profile .activity-list{
  display:flex;
  flex-direction:column;
  gap: .55rem;
  margin-top: .6rem;
}

#profile .activity-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: .75rem;
  padding: .65rem .7rem;
  border-radius: 14px;
  border: 1px solid rgba(230,232,237,.9);
  background: rgba(255,255,255,.78);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}

#profile .activity-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
  border-color: rgba(223,227,234,.95);
}

#profile .activity-text{
  font-weight: 800;
  color: var(--accent);
  font-size: .95rem;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#profile .activity-start{
  border-radius: 999px;
  padding: .35rem .7rem;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}
#profile .activity-start:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
}

/* Teacher empty state: que parezca “real”, no placeholder feo */
#profile #teacherActivitiesEmpty.empty-state{
  background: rgba(245,247,251,.6);
  border: 1px dashed rgba(230,232,237,.95);
  border-radius: 16px;
  padding: 1.1rem .9rem;
}

/* =========================================================
   Modales nuevos: hobbies + preferences
   (reusan .modal/.modal-content base, solo afinamos)
========================================================= */
#hobbiesModal .modal-content,
#preferencesModal .modal-content{
  width: min(560px, 92vw);
}

#hobbiesModal h2,
#preferencesModal h2{
  font-size: 1.05rem;
  font-weight: 950;
  color: var(--accent);
  letter-spacing: -0.01em;
}

/* Inputs en modales nuevos (consistentes) */
#hobbiesModal input[type="text"],
#preferencesModal input[type="number"],
#preferencesModal select{
  border-radius: 14px;
  border: 1px solid rgba(230,232,237,.95);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

#hobbiesModal input[type="text"]:focus,
#preferencesModal input[type="number"]:focus,
#preferencesModal select:focus{
  border-color: rgba(245,130,32,.35);
  box-shadow: 0 0 0 3px rgba(245,130,32,.14), 0 10px 22px rgba(15,23,42,.06);
  outline: 0;
}

/* Chips dentro del modal (editar hobbies) */
#hobbiesModal .chips .chip{
  background: rgba(245,130,32,.09);
  border-color: rgba(245,130,32,.20);
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  #profile .profile-card-block.ms-card,
  #profile #profileStartConversationBtn,
  #profile .activity-item,
  #profile .chips .chip{
    transition: none !important;
  }
  #profile .profile-card-block.ms-card:hover,
  #profile .activity-item:hover,
  #profile .chips .chip:hover{
    transform: none !important;
  }
}

/* =========================================================
   PROFILE v2 — Suggested Activities (Shuffle button + swap anim)
   Pegar AL FINAL del style.css
========================================================= */

/* En el header de la card, dejamos sitio a acciones a la derecha */
#profile .ms-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}

/* Contenedor de acciones (botón shuffle) */
#profile .card-head-actions{
  display:flex;
  align-items:center;
  gap:.35rem;
}

/* Botón shuffle: icon-only, pro */
#profile #suggestedShuffleBtn.icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(230,232,237,.9);
  background: rgba(255,255,255,.70);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
  color: var(--accent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, filter .15s ease;
}

#profile #suggestedShuffleBtn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
  border-color: rgba(223,227,234,.95);
}

#profile #suggestedShuffleBtn:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

#profile #suggestedShuffleBtn i{
  font-size: 1rem;
}

/* =========================
   Animación suave al cambiar
   (JS: añade y quita .is-swapping en #suggestedActivitiesList)
========================= */
#profile #suggestedActivitiesList.is-swapping{
  animation: profileSwapFade .16s ease-out;
}

@keyframes profileSwapFade{
  from{ opacity:.55; transform: translateY(2px); }
  to{   opacity:1;   transform: translateY(0); }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  #profile #suggestedActivitiesList.is-swapping{ animation:none !important; }
}

/* =========================================================
   PROFILE — Level badge (ONE TRUE STYLE)
   Pegar AL FINAL del style.css
========================================================= */

/* Evita “cajitas”/fondos raros en el contenedor derecho */
#profile .profile-account-right{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* El badge REAL (B1/C1/etc) */
#profile #profileAccountLevel{
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;

  padding: .42rem .72rem !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(245,130,32,.28) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;

  font-weight: 900 !important;
  letter-spacing: .02em !important;
  color: var(--accent) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Si #profileAccountLevel tiene spans internos que crean otra “caja” */
#profile #profileAccountLevel > *{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Mantén corona si existe */
#profile #profileAccountLevel i.fa-crown,
#profile #profileAccountLevel svg.fa-crown{
  color: var(--brand-600) !important;
}

/* Oculta iconos extra (compass/circle/etc) si aparecen */
#profile #profileAccountLevel i.fa-compass,
#profile #profileAccountLevel svg.fa-compass,
#profile #profileAccountLevel .fa-circle,
#profile #profileAccountLevel .lvl-icon,
#profile #profileAccountLevel .level-icon{
  display: none !important;
}

/* Si el “cuadrado fantasma” viene de SVG */
#profile #profileAccountLevel svg rect{ display:none !important; }
#profile #profileAccountLevel svg{ background: transparent !important; }

/* === PROFILE: full width === */
#profile .profile-wrap{
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* (Opcional) padding más “pro” en pantallas grandes */
@media (min-width: 1200px){
  #profile .profile-wrap{
    padding-left: 2.25rem;
    padding-right: 2.25rem;
  }
}

/* =========================
   Teacher Portal CTA (Profile)
========================= */
.teacher-portal-wrap{
  margin: .75rem 0 0 0;
}

.teacher-portal-cta{
  width: 100%;
  display: flex;
  align-items: center;
  gap: .75rem;

  padding: .9rem 1rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 140, 60, .28);

  /* Fondo tipo premium integrado con cards */
  background:
    radial-gradient(1200px 120px at 0% 0%, rgba(255, 140, 60, .18), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.02));

  box-shadow: 0 10px 22px rgba(15, 23, 42, .10);
  cursor: pointer;
  text-align: left;
}

.teacher-portal-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, .14);
  border-color: rgba(255, 140, 60, .45);
}

.teacher-portal-cta:active{
  transform: translateY(0px);
}

.teacher-portal-cta:focus-visible{
  outline: 3px solid rgba(255, 140, 60, .35);
  outline-offset: 2px;
}

.teacher-portal-cta .tp-icon{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;

  background: rgba(255, 140, 60, .14);
  border: 1px solid rgba(255, 140, 60, .22);
}

.teacher-portal-cta .tp-icon i{
  font-size: 1.05rem;
}

.teacher-portal-cta .tp-text{
  display: grid;
  gap: .15rem;
  flex: 1;
}

.teacher-portal-cta .tp-title{
  font-weight: 700;
  letter-spacing: -.01em;
}

.teacher-portal-cta .tp-sub{
  font-size: .88rem;
  opacity: .75;
}

.teacher-portal-cta .tp-go{
  opacity: .6;
}

#emptyConversations{
  display:none !important;
}

/* =========================================================
   MODALS — Premium UI (global)
   Pegar AL FINAL del style.css
========================================================= */

/* Overlay más elegante (más “premium” y menos gris feo) */
.modal{
  background:
    radial-gradient(1000px 520px at 15% 0%, rgba(245,130,32,.14), transparent 55%),
    radial-gradient(900px 520px at 90% 10%, rgba(99,102,241,.12), transparent 55%),
    rgba(15,23,42,.42);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Caja modal más “app-like” */
.modal-content{
  border-radius: 20px;
  border: 1px solid rgba(230,232,237,.9);
  background:
    radial-gradient(700px 240px at 20% 0%, rgba(245,130,32,.10), transparent 60%),
    rgba(255,255,255,.96);
  box-shadow:
    0 30px 70px rgba(15,23,42,.28),
    0 1px 0 rgba(255,255,255,.7) inset;
  padding: 1.1rem 1.1rem 1rem;
}

/* Barra superior (tu línea naranja) más fina y limpia */
.modal-content::before{
  height: 3px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  margin: -1.1rem -1.1rem 0;
}

/* Botón X más moderno */
.modal-close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(230,232,237,.9);
  background: rgba(255,255,255,.8);
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
}
.modal-close:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15,23,42,.12);
  border-color: rgba(223,227,234,.95);
}

/* Titulares dentro del modal */
.modal-content h2,
.modal-content h3{
  font-weight: 900;
  letter-spacing: -0.01em;
  color: var(--accent);
  margin: .1rem 0 .2rem;
}

/* Labels + inputs coherentes (radio grande y foco bonito) */
.modal-content label{
  font-size: .82rem;
  font-weight: 800;
  color: var(--muted);
}

.modal-content input[type="text"],
.modal-content input[type="number"],
.modal-content input[type="email"],
.modal-content input[type="password"],
.modal-content select,
.modal-content textarea{
  border-radius: 14px;
  border: 1px solid rgba(230,232,237,.95);
  background: rgba(255,255,255,.95);
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.modal-content input:focus,
.modal-content select:focus,
.modal-content textarea:focus{
  border-color: rgba(245,130,32,.35);
  box-shadow: 0 0 0 3px rgba(245,130,32,.14), 0 10px 22px rgba(15,23,42,.06);
  outline: 0;
}

/* Footer de acciones fijo y limpio */
.modal-actions{
  padding: .8rem .15rem 0;
  background: linear-gradient(to top, rgba(255,255,255,.98) 70%, rgba(255,255,255,0));
  border-top: 1px solid rgba(230,232,237,.85);
}

/* Botones dentro del modal más “premium” */
.modal-actions .btn-primary{
  border-radius: 14px;
  padding: .55rem .95rem;
  box-shadow: 0 14px 34px rgba(245,130,32,.22);
}
.modal-actions .btn-secondary,
.modal-actions .btn-muted{
  border-radius: 14px;
  padding: .55rem .95rem;
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  .modal-content,
  .modal-close{ transition:none !important; }
}

/* =========================================================
   MODALS — Remove redundant Cancel buttons
   (no toca JS)
========================================================= */

/* Oculta cualquier botón "Cancel" dentro de modales */
.modal .modal-actions button,
.modal .modal-actions .btn-muted,
.modal .modal-actions .btn-secondary{
  /* no ocultamos todo por defecto aún */
}

/* 1) Si tu cancel usa clase .btn-muted (en tu auth sí existe) */
.modal .modal-actions .btn-muted{
  display:none !important;
}

/* 2) Si tu cancel usa texto "Cancel" pero no tiene clase (fallback) */
.modal .modal-actions button[type="button"]{
  /* se queda visible por defecto */
}

/* Fallback seguro: si el botón tiene id típico */
#cancelBtn,
#modalCancelBtn,
#preferencesCancelBtn{
  display:none !important;
}

/* ─────────────────────────────────────────────
   Feedback widget (demo)
───────────────────────────────────────────── */
.alma-feedback-fab {
  position: fixed !important;
  left: auto !important;
  right: 18px !important;
  bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  width: 68px !important;
  height: 68px !important;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.9);
  padding: 0;
  display: inline-flex;  /* ← SIN !important */
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ffb86b, #ff7a1a);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 18px 40px rgba(0,0,0,.22),
    0 0 30px rgba(255,122,26,.55);
  z-index: 9999 !important;
  
  transform: translate(-60px, 60px);
  opacity: 0;
  transition: transform .38s ease, opacity .38s ease;
  
  margin: 0 !important;
  cursor: pointer;
}

.alma-feedback-fab.is-ready {
  transform: translate(0,0) !important;
  opacity: 1 !important;
}

.alma-feedback-fab.is-ready{
  transform: translate(0,0);
  opacity: 1;
}

.alma-feedback-fab::before{
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: inherit;
  background: rgba(255, 132, 61, 0.42);
  z-index: -1;
  filter: drop-shadow(0 18px 34px rgba(255,132,61,.55));
}

.alma-feedback-fab img{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,.98);
  padding: 4px;
  box-shadow: 0 6px 14px rgba(0,0,0,.18);
}

@keyframes almaFabPulse {
  0% { transform: translate(0,0) scale(1); }
  20% { transform: translate(0,-1px) scale(1.02); }
  40% { transform: translate(0,0) scale(1); }
  100% { transform: translate(0,0) scale(1); }
}

.alma-feedback-fab.is-live{
  animation: almaFabPulse 2.2s ease-in-out infinite;
}

/* Panel */
.alma-feedback-panel{
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 12px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
}

.alma-feedback-panel.is-open{
  pointer-events: auto;
  opacity: 1;
}

.alma-feedback-card{
  width: min(360px, calc(100vw - 24px));
  max-height: min(520px, calc(100vh - 140px));
  background: rgba(18,18,18,.94);
  color: #fff;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0,0,0,.35);
  overflow: hidden;
  transform: translateY(10px);
  transition: transform .18s ease;
}

.alma-feedback-panel.is-open .alma-feedback-card{
  transform: translateY(0);
}

.alma-feedback-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.alma-feedback-title{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-weight: 700;
}

.alma-feedback-title img{
  width: 18px;
  height: 18px;
  border-radius: 5px;
}

.alma-feedback-close{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.88);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.alma-feedback-msgs{
  padding: 10px 12px;
  overflow: auto;
  max-height: 320px;
}

.alma-feedback-bubble{
  display: inline-block;
  padding: 8px 10px;
  border-radius: 14px;
  margin: 6px 0;
  max-width: 92%;
  font-size: 13.5px;
  line-height: 1.35;
}

.alma-feedback-bubble.bot{
  background: rgba(255,255,255,.10);
}

.alma-feedback-bubble.me{
  background: rgba(255,132,61,.95);
  color: #111;
  margin-left: auto;
}

/* Form */
.alma-feedback-form{
  padding: 10px 12px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.alma-feedback-form textarea{
  width: 100%;
  resize: none;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  padding: 10px;
  background: rgba(255,255,255,.06);
  color: #fff;
  outline: none;
}

.alma-feedback-row{
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.alma-feedback-attach,
.alma-feedback-send{
  flex: 1;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  padding: 10px 12px;
  cursor: pointer;
}

.alma-feedback-attach{
  background: rgba(255,255,255,.06);
  color: #fff;
}

.alma-feedback-send{
  background: rgba(255,132,61,.95);
  color: #111;
  font-weight: 700;
  border-color: rgba(255,132,61,.95);
}

.alma-feedback-preview{
  margin-top: 10px;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
}

.alma-feedback-preview img{
  display: block;
  width: 100%;
  height: auto;
}

.alma-feedback-remove{
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
}

/* Tooltip “Estoy aquí” */
.alma-feedback-tip{
  position: fixed;
  left: auto;
  right: 68px !important;
  bottom: calc(108px + env(safe-area-inset-bottom)) !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, #ffb066, #ff843d);
  color: #1b1b1b;
  padding: 12px 16px 12px 14px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.7);
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow:
    0 20px 50px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.3),
    0 0 30px rgba(255,132,61,.55);
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 9999;
}

.alma-feedback-tip::after{
  content:"";
  position:absolute;
  right:-6px;
  bottom:16px;
  width:12px;
  height:12px;
  background: linear-gradient(135deg, #ffb066, #ff843d);
  border-right:2px solid rgba(255,255,255,.7);
  border-bottom:2px solid rgba(255,255,255,.7);
  transform: rotate(-45deg);
  border-bottom-right-radius: 3px;
}

.alma-feedback-tip::before{
  content:"";
  width:10px;height:10px;border-radius:50%;
  background:#1b1b1b;
  box-shadow:0 0 0 4px rgba(27,27,27,.2), 0 0 12px rgba(0,0,0,.35);
  flex:0 0 auto;
}

.alma-feedback-tip.is-show{
  opacity: 1;
  transform: translateY(0);
  animation: almaTipFloat 2.6s ease-in-out infinite;
}

@keyframes almaTipFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-2px); }
}

/* =====================================================
   BADGES SYSTEM
   ===================================================== */

.badge-count-chip {
  font-size: .72rem;
  font-weight: 700;
  color: var(--brand-600);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  padding: .15rem .5rem;
  min-width: 1.4rem;
  text-align: center;
}
.badge-count-chip:empty { display: none; }

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: .65rem;
  padding: .25rem 0;
}

.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .28rem;
  cursor: default;
  position: relative;
}

.badge-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  border: 2px solid transparent;
  transition: transform .15s ease, box-shadow .15s ease;
}

.badge-item.unlocked .badge-icon-wrap {
  background: linear-gradient(135deg, var(--brand-50), #fff3e8);
  border-color: var(--brand-100);
  box-shadow: 0 3px 10px rgba(245,130,32,.18);
}
.badge-item.unlocked .badge-icon-wrap:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(245,130,32,.28);
}

.badge-item.locked .badge-icon-wrap {
  background: #f1f3f7;
  border-color: #e2e6ed;
  filter: grayscale(1);
  opacity: .45;
}

.badge-item-name {
  font-size: .68rem;
  font-weight: 700;
  text-align: center;
  color: var(--accent);
  line-height: 1.2;
  max-width: 72px;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.45em;
}
.badge-item.locked .badge-item-name {
  color: var(--muted-2);
}

.badge-item[title]:hover::after {
  content: attr(title);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,23,42,.88);
  color: #fff;
  font-size: .72rem;
  padding: .3rem .5rem;
  border-radius: .45rem;
  white-space: normal;
  text-align: center;
  max-width: 160px;
  z-index: 10;
  pointer-events: none;
  line-height: 1.3;
}

/* Badge unlock celebration modal */
.badge-unlock-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
}

.badge-unlock-icon {
  font-size: 3.5rem;
  animation: badge-pop .4s cubic-bezier(.175,.885,.32,1.275) both;
}

@keyframes badge-pop {
  from { transform: scale(0) rotate(-15deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg);  opacity: 1; }
}

.badge-unlock-label {
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--brand);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  padding: .18rem .7rem;
}

.badge-unlock-name {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.2;
}

.badge-unlock-desc {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.4;
}

.badge-unlock-close {
  margin-top: .5rem;
  min-width: 100px;
}

/* ── Badges preview (1 row only) ────────────────────────────────── */
.badges-preview {
  grid-template-columns: repeat(6, 1fr);
  gap: .35rem;
}
.badges-preview .badge-item:nth-child(n+7) {
  display: none;
}

/* ── See-more button ─────────────────────────────────────────────── */
.badges-see-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  margin-top: .6rem;
  width: 100%;
  padding: .45rem .75rem;
  border: 1.5px dashed var(--brand-100, #c7d2fe);
  border-radius: .6rem;
  background: transparent;
  color: var(--brand, #6366f1);
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  letter-spacing: .01em;
}
.badges-see-more-btn:hover {
  background: var(--brand-50, #eef2ff);
  border-color: var(--brand, #6366f1);
}

/* ── All Badges Modal ────────────────────────────────────────────── */
.badges-all-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
  padding: 1rem;
  overflow-y: auto;
}
.badges-all-modal.hidden { display: none; }

.badges-all-content {
  position: relative;
  background: var(--surface, #fff);
  border-radius: 1.1rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.22);
  width: 100%;
  max-width: 560px;
  padding: 1.5rem 1.25rem 2rem;
  margin: auto;
}

.badges-all-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--accent, #1e1b4b);
  margin: 0 0 1.1rem 0;
  display: flex;
  align-items: center;
  gap: .45rem;
}

.badges-all-close {
  position: absolute;
  top: .9rem;
  right: .9rem;
  background: var(--surface2, #f1f5f9);
  border: none;
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--muted, #64748b);
  font-size: .9rem;
  transition: background .15s;
}
.badges-all-close:hover { background: var(--brand-50, #eef2ff); color: var(--brand, #6366f1); }

.badges-all-body {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Badge category sections inside modal ────────────────────────── */
.badge-category-section {}

.badge-category-title {
  font-size: .73rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--muted, #64748b);
  margin: 0 0 .5rem 0;
  padding-bottom: .3rem;
  border-bottom: 1.5px solid var(--border, #e2e8f0);
  display: flex;
  align-items: center;
  gap: .35rem;
}

.badge-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: .35rem;
}

/* ===================== SIMULATIONS ===================== */
.sim-top-bar {
  display: flex; gap: .6rem; padding: .75rem .95rem;
  border-bottom: 1px solid var(--border);
}
.sim-list { padding: .5rem .75rem; }

.sim-item-status {
  width: 9px; height: 9px; border-radius: 50%;
  flex-shrink: 0; align-self: center; margin-right: .25rem;
  box-shadow: 0 0 0 2px rgba(255,255,255,.8);
}
.sim-status-active    { background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.2); }
.sim-status-paused    { background: #eab308; box-shadow: 0 0 0 2px rgba(234,179,8,.2); }
.sim-status-completed { background: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.2); }
.sim-status-archived  { background: #94a3b8; box-shadow: 0 0 0 2px rgba(148,163,184,.2); }

.sim-item-meta {
  display: flex; gap: .4rem; align-items: center;
  flex-wrap: wrap; margin-top: .28rem;
  max-width: 100%; overflow: hidden;
}
.sim-item-chip {
  font-size: .71rem; font-weight: 600; padding: .18rem .52rem;
  border-radius: 999px; background: var(--brand-50); color: var(--brand-600);
  letter-spacing: .01em;
  /* En móvil el contexto puede ser largo: truncar con elipsis en vez de empujar layout */
  max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sim-item-chip-sm {
  font-size: .71rem; font-weight: 500; padding: .18rem .46rem; border-radius: 999px;
  background: var(--surface-2); color: #475569;
  border: 1px solid var(--border);
  white-space: nowrap;
}

/* ── Sims pantalla — protección contra overflow horizontal en móvil ─────── */
#sims.screen-root,
#simListPanel {
  overflow-x: hidden;
  max-width: 100vw;
}
#simList .conversation-item {
  max-width: 100%;
  overflow: hidden;
}
#simList .conversation-info {
  min-width: 0; /* clave para que flex no fuerce overflow */
}
#simList .conversation-info .title {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 100%;
}
#simList .conversation-info .snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

@media (max-width: 720px) {
  /* Botones Auto/Custom: que se repartan el ancho y no se salgan */
  .sim-top-bar {
    flex-wrap: nowrap;
  }
  .sim-top-bar .btn-primary,
  .sim-top-bar .btn-secondary {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
  }
  /* En la lista, el chip del contexto se limita a media pantalla */
  #simList .sim-item-chip {
    max-width: 55vw;
  }
}

@media (max-width: 480px) {
  #simList .conversation-item {
    padding: .6rem .55rem;
    gap: .55rem;
    margin: .12rem .3rem;
  }
  #simList .conversation-info .title {
    font-size: .92rem;
  }
  #simList .sim-item-chip {
    max-width: 50vw;
    font-size: .68rem;
  }
}

/* ── Sim chat header — compact single row ───────────────── */
.sim-chat-header {
  display: flex; align-items: center; gap: .5rem; flex-shrink: 0;
  padding: .48rem .9rem;
  background: rgba(245,130,32,.06);
  border-bottom: 1px solid rgba(245,130,32,.18);
}
.sim-chat-header.hidden { display: none; }
.sim-chat-header.completed {
  background: rgba(59,130,246,.06);
  border-bottom-color: rgba(59,130,246,.18);
}
.sim-h-role {
  flex: 1; min-width: 0;
  font-size: .8rem; font-weight: 600; color: var(--brand-600);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.01em;
}
/* Info pill button */
.sim-info-btn {
  flex-shrink: 0;
  display: flex; align-items: center; gap: .3rem;
  padding: .28rem .65rem;
  border-radius: 999px;
  border: none;
  background: rgba(245,130,32,.15);
  color: var(--brand-600);
  font-size: .72rem; font-weight: 700;
  cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.sim-info-btn:hover { background: rgba(245,130,32,.25); }
.sim-h-badge {
  font-size: .66rem; font-weight: 600; padding: .13rem .42rem;
  border-radius: 999px;
  background: rgba(15,23,42,.05); color: #475569;
  border: 1px solid rgba(15,23,42,.1); white-space: nowrap;
}
.sim-chat-actions { display: flex; gap: .4rem; align-items: center; flex-shrink: 0; }
.sim-action-btn { font-size: .74rem !important; padding: .28rem .7rem !important; font-weight: 600 !important; }
.sim-action-btn.btn-secondary {
  background: transparent; border: 1.5px solid rgba(100,116,139,.28); color: var(--muted);
}
.sim-action-btn.btn-secondary:hover { background: var(--surface-2); border-color: #94a3b8; color: var(--accent); }
.sim-action-btn.btn-primary { box-shadow: 0 2px 8px rgba(245,130,32,.3); letter-spacing: .01em; }
.sim-action-btn.btn-primary:hover { box-shadow: 0 3px 12px rgba(245,130,32,.4); }

/* ── Scenario info bottom sheet ─────────────────────────── */
.sim-info-sheet { position: fixed; inset: 0; z-index: 8000; }
.sim-info-sheet.hidden { display: none; }
.sim-info-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.4);
  animation: fadeIn .2s ease;
}
.sim-info-panel {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: var(--surface, #fff);
  border-radius: 20px 20px 0 0;
  padding: 0 0 calc(env(safe-area-inset-bottom) + 1.5rem);
  max-height: 65vh; overflow-y: auto;
  animation: slideUp .25s ease;
  box-shadow: 0 -4px 32px rgba(0,0,0,.12);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn  { from { opacity: 0; }               to { opacity: 1; } }
.sim-info-handle {
  width: 36px; height: 4px; border-radius: 2px;
  background: #e5e7eb; margin: 12px auto 0;
}
.sim-info-body { padding: 1.2rem 1.4rem 0; }
.sim-info-context {
  font-size: 1rem; font-weight: 700; color: var(--accent);
  line-height: 1.45; margin: 0 0 1rem;
}
.sim-info-row {
  display: flex; flex-direction: column; gap: .15rem;
  margin-bottom: .85rem;
}
.sim-info-lbl {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
}
.sim-info-val {
  font-size: .9rem; color: var(--accent); line-height: 1.4;
}
.sim-info-chips {
  display: flex; gap: .4rem; flex-wrap: wrap;
  padding: .75rem 0 .5rem;
  border-top: 1px solid var(--border, #e5e7eb);
  margin-top: .25rem;
}

.sim-proposal-grid { display: grid; gap: .5rem; }
.sim-proposal-row {
  display: flex; align-items: baseline; gap: .6rem;
  padding: .45rem .7rem; border-radius: 10px;
  background: var(--surface-2); border: 1px solid transparent;
  transition: border-color .12s;
}
.sim-proposal-label {
  font-weight: 700; min-width: 95px; color: var(--muted-2); font-size: .78rem;
  flex-shrink: 0; text-transform: uppercase; letter-spacing: .04em;
}
.sim-proposal-val { color: var(--text); font-size: .9rem; font-weight: 500; }

.sim-form-grid { display: grid; gap: .65rem; }
.sim-form-grid label {
  font-size: .82rem; font-weight: 600; color: var(--muted);
  display: flex; flex-direction: column; gap: .3rem;
}
.sim-input {
  width: 100%; padding: .55rem .7rem;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: .9rem; background: var(--surface); color: var(--text);
  font-family: inherit;
}
.sim-input:focus { border-color: var(--brand); outline: none; }

.sim-wizard { display: flex; flex-direction: column; gap: .75rem; min-height: 120px; }
.sim-wizard-q { font-size: 1rem; font-weight: 700; color: var(--accent); }
.sim-wizard-step-label {
  font-size: .75rem; color: var(--muted); font-weight: 500; margin-bottom: -.3rem;
}
.sim-wizard-opts { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .25rem; }
.sim-wizard-opt {
  padding: .42rem .9rem; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--border); font-size: .85rem;
  transition: all .14s; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-1);
}
.sim-wizard-opt:hover {
  border-color: rgba(245,130,32,.5); background: var(--brand-50); color: var(--brand-600);
}
.sim-wizard-opt.selected {
  border-color: var(--brand); background: var(--brand-50);
  color: var(--brand-600); font-weight: 600;
  box-shadow: 0 0 0 3px rgba(245,130,32,.12);
}
.sim-wizard-freetext {
  width: 100%; padding: .55rem .7rem;
  border: 1.5px solid var(--border); border-radius: 10px;
  font-size: .9rem; margin-top: .35rem; font-family: inherit;
  background: var(--surface); color: var(--text);
}
.sim-wizard-freetext:focus { border-color: var(--brand); outline: none; }

.sim-end-body { display: flex; flex-direction: column; gap: 1rem; }
.sim-end-achieved {
  font-size: 1.35rem; font-weight: 800; text-align: center;
  padding: .8rem; border-radius: 14px;
}
.sim-end-achieved.yes     { background: #dcfce7; color: #15803d; }
.sim-end-achieved.partial { background: #fef9c3; color: #854d0e; }
.sim-end-achieved.no      { background: #fee2e2; color: #991b1b; }
.sim-end-section {
  background: var(--surface-2); border-radius: 12px; padding: .75rem 1rem;
}
.sim-end-section h4 {
  font-size: .78rem; font-weight: 700; color: var(--muted);
  margin-bottom: .45rem; text-transform: uppercase; letter-spacing: .04em;
}
.sim-end-section ul { margin: 0; padding-left: 1.2rem; }
.sim-end-section li { font-size: .88rem; margin-bottom: .3rem; }
.sim-end-actions { flex-wrap: wrap; gap: .5rem; }

/* Sim vocabulary panel (practice mode, above composer) */
.sim-vocab-panel {
  border-top: 1px solid rgba(245,130,32,.25);
  background: rgba(245,130,32,.055);
  padding: .5rem .9rem .55rem;
  display: flex; flex-direction: column; gap: .38rem;
  flex-shrink: 0;
}
.sim-vocab-panel.hidden { display: none; }
.sim-vocab-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: .76rem; font-weight: 700; color: var(--brand-600); letter-spacing: .01em;
}
.sim-vocab-count { font-weight: 500; color: var(--muted); }
.sim-vocab-chips { display: flex; flex-wrap: wrap; gap: .32rem; }
.sim-vocab-chip {
  display: flex; align-items: center; gap: .2rem;
  background: rgba(245,130,32,.13); color: var(--brand-600);
  border: 1px solid rgba(245,130,32,.2);
  border-radius: 999px; font-size: .74rem; font-weight: 600;
  padding: .14rem .48rem .14rem .58rem;
}
.sim-vocab-chip button {
  background: none; border: none; cursor: pointer;
  color: var(--muted); font-size: .8rem; padding: 0 .1rem; line-height: 1;
}
.sim-vocab-add { display: flex; gap: .4rem; align-items: center; }
.sim-vocab-input {
  flex: 1; padding: .34rem .62rem;
  border: 1.5px solid var(--border); border-radius: 8px;
  font-size: .84rem; font-family: inherit;
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-1);
}
.sim-vocab-input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(245,130,32,.12); }

/* Vocab suggestion pills (AI-extracted, not yet saved) */
.sim-vocab-suggest {
  display: inline-flex; align-items: center; gap: .22rem;
  background: var(--surface); border: 1.5px dashed rgba(100,116,139,.35);
  border-radius: 999px; font-size: .74rem; padding: .1rem .35rem .1rem .5rem;
}
.sim-vocab-suggest-word { color: var(--text); font-weight: 500; }
.sim-vocab-suggest-add {
  background: rgba(245,130,32,.12); border: none; cursor: pointer;
  color: var(--brand-600); font-weight: 800; font-size: .8rem;
  border-radius: 999px; padding: .02rem .3rem; line-height: 1.4;
}
.sim-vocab-suggest-add:hover { background: rgba(245,130,32,.25); }

/* ---- Sim panels (true separation — #simChatPanel never shares DOM with #chatActive) ---- */
#simListPanel[hidden] { display: none !important; }
#simChatPanel[hidden] { display: none !important; }
#simChatPanel:not([hidden]) {
  display: block;
  height: calc(100dvh - var(--nav-h) - var(--safe-bottom));
  min-height: 0;
  overflow: hidden;
}

/* #simChatView: same grid as #chatActive but with 5 rows (header | sim-strip | chatBox | vocab | composer) */
#simChatView {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
#simChatView > .chat-header    { grid-row: 1; }
#simChatView > #simChatHeader  { grid-row: 2; }
#simChatView > #simChatBox     { grid-row: 3; }
#simChatView > #simVocabPanel  { grid-row: 4; }
#simChatView > #simComposer    { grid-row: 5; }

#simChatBox {
  overflow-y: auto;
  padding: .75rem .9rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

/* Sim composer: no mic button so slightly simpler */
#simComposer {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 0 !important;
  padding: .55rem .75rem calc(.55rem + var(--safe-bottom));
  border-top: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  bottom: 0;
  z-index: 40;
}
#simComposer .composer-field {
  flex: 1;
  box-shadow: 0 2px 12px rgba(15,23,42,.1), 0 0 0 1.5px rgba(245,130,32,.1);
}
#simComposer .composer-field:focus-within {
  box-shadow: 0 2px 16px rgba(15,23,42,.12), 0 0 0 2px rgba(245,130,32,.2);
}

#simListPanel {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--nav-h) - var(--safe-bottom));
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom));
}

#simList {
  flex: 1 1 auto;
  overflow: auto;
  padding-bottom: .9rem;
}

#simListEmpty {
  margin: .75rem .9rem calc(var(--nav-h) + var(--safe-bottom) + 12px);
}

@media (max-width: 720px) {
  .sim-action-btn {
    font-size: .72rem !important;
    padding: .28rem .6rem !important;
  }

  #simChatBox {
    padding: .65rem .65rem;
  }

  #simComposer {
    gap: .4rem;
    padding: .45rem .55rem calc(.45rem + var(--safe-bottom));
  }

  #simComposer .composer-btn {
    flex: 0 0 40px;
    height: 40px;
  }

  #simComposer .composer-send {
    height: 40px;
    padding: 0 .75rem;
  }

  #simComposer .composer-field {
    padding: .42rem .65rem;
  }

  .sim-vocab-panel {
    padding: .42rem .6rem .48rem;
  }

  .sim-vocab-add {
    flex-wrap: wrap;
  }

  .sim-vocab-add .btn-primary {
    width: 100%;
  }

  .sim-item-chip,
  .sim-item-chip-sm {
    font-size: .68rem;
    padding: .16rem .42rem;
  }
}

/* ---- Sim: pantallas muy pequeñas ≤480px ---- */
@media (max-width: 480px) {
  .sim-chat-header { padding: .42rem .65rem; }

  /* Modales: empujar desde arriba, nunca centrar (evita corte en teclado) */
  .modal {
    align-items: flex-start;
    padding-top: max(env(safe-area-inset-top), 1rem);
    overflow-y: auto;
  }
  .modal-content {
    width: 100%;
    max-height: none;
    border-radius: 0 0 16px 16px;
    margin: 0;
  }

  /* Wizard chips más pequeños */
  .sim-wizard-opt {
    font-size: .8rem;
    padding: .35rem .65rem;
  }

  /* Sim list: items más compactos */
  .sim-top-bar { gap: .4rem; padding: .6rem .75rem; }
  .sim-top-bar .btn-primary,
  .sim-top-bar .btn-secondary { font-size: .82rem; padding: .5rem .9rem; }
}


/* ===== Recording timer ===== */
.rec-timer {
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  inset: 0;
  padding: 0 12px;
  background: var(--bg-input, #fff);
  border-radius: inherit;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, monospace;
  color: var(--text-primary, #111);
  pointer-events: none;
  z-index: 2;
}

.rec-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e53935;
  flex-shrink: 0;
  animation: recDotPulse 1s ease-in-out infinite;
}

@keyframes recDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.75); }
}

/* Mic button red glow while recording */
.composer-btn.recording {
  color: #e53935 !important;
}

/* ── Recording mode: mic becomes big "Enviar" button ── */
#micBtn .mic-label,
#simMicBtn .mic-label { display: none; }

.composer.is-recording .composer-field,
.composer.is-recording #sendBtn,
.composer.is-recording #repeatBtn {
  display: none;
}

.composer.is-recording #micBtn,
.composer.is-recording #simMicBtn {
  flex: 1;
  min-width: 0;
  border-radius: 12px;
  background: #e53935 !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transform: none !important;
  padding: 0 1.25rem;
  height: 46px;
  box-shadow: 0 2px 10px rgba(229,57,53,.35);
}

.composer.is-recording #micBtn i,
.composer.is-recording #simMicBtn i {
  animation: none !important;
  font-size: 16px;
}

.composer.is-recording #micBtn .mic-label,
.composer.is-recording #simMicBtn .mic-label {
  display: inline;
  letter-spacing: 0.01em;
}

/* Voice duration badge on sent messages */
.voice-dur-badge {
  display: block;
  font-size: 11px;
  opacity: 0.6;
  margin-top: 3px;
  letter-spacing: 0.01em;
}

/* ===================== Billing / Subscription ===================== */
.billing-badge {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: 2px 9px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.billing-badge--active  { background: #e8f5e9; color: #2e7d32; }
.billing-badge--expired { background: #fdecea; color: #c62828; }
.billing-badge--none    { background: #f0f0f0; color: #888;    }
.billing-badge--trial   { background: #fff3e0; color: #e65100; }

.billing-hint { font-size: .82rem; margin: 0; }

.billing-save-tag {
  background: #fff3e0;
  color: #e65100;
  border-radius: 10px;
  padding: 1px 7px;
  font-size: .7rem;
  font-weight: 700;
  margin-left: .3rem;
}

/* ── Subscription toggle ── */
.sub-toggle-wrap {
  border-top: 1px solid var(--border, #e8eaed);
  margin-top: .5rem;
  padding-top: .5rem;
}
.sub-toggle-btn {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  background: none;
  border: none;
  padding: .45rem .2rem;
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-primary, #1a1a2e);
  border-radius: 8px;
  transition: background .15s;
}
.sub-toggle-btn:hover { background: var(--surface-2, #f5f6fa); }
.sub-toggle-btn .fa-credit-card { color: var(--brand-500, #f58220); font-size: .9rem; }

.sub-toggle-status { margin-left: auto; font-size: .7rem; }
.sub-toggle-chevron { font-size: .72rem; color: #888; transition: transform .2s; flex-shrink: 0; }

/* ===================== Paywall Banner ===================== */
.paywall-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .75rem 1.2rem;
  background: linear-gradient(90deg, #1a1a2e 0%, #2d1b00 100%);
  border-bottom: 2px solid var(--brand-400, #f58220);
  color: #fff;
  font-size: .85rem;
  font-weight: 500;
}
.paywall-banner[hidden] { display: none !important; }
.paywall-icon { font-size: 1.1rem; flex-shrink: 0; }
.paywall-text { flex: 1; }
.paywall-btn {
  flex-shrink: 0;
  background: var(--brand-500, #f58220);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: .4rem 1rem;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .12s;
}
.paywall-btn:hover { filter: brightness(1.1); }

/* Empujar contenido cuando el banner está visible */
body.paywall-active { padding-top: 48px; }

/* ── Panel interior ── */
.sub-panel[hidden] { display: none !important; }
.sub-panel {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: .7rem .2rem .3rem;
}
.sub-status-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.sub-plan-name  { font-size: .88rem; font-weight: 600; color: var(--text-primary, #1a1a2e); }
.sub-expiry     { font-size: .8rem; color: var(--text-muted, #666); }

/* ── Code input ── */
.sub-code-row { display: flex; gap: .45rem; }
.sub-code-input {
  flex: 1;
  min-width: 0;
  padding: .45rem .7rem;
  border: 1.5px solid var(--border, #e0e0e0);
  border-radius: 10px;
  font-size: .82rem;
  background: var(--surface-1, #fff);
  color: var(--text-primary, #1a1a2e);
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: border-color .15s;
}
.sub-code-input:focus { outline: none; border-color: var(--brand-400, #f58220); }
.sub-code-btn { flex-shrink: 0; font-size: .82rem !important; padding: .4rem .85rem !important; min-height: unset !important; }

.sub-code-msg { font-size: .8rem; margin: 0; padding: .35rem .55rem; border-radius: 8px; }
.sub-code-msg--success { background: #e8f5e9; color: #2e7d32; }
.sub-code-msg--error   { background: #fdecea; color: #c62828; }
.sub-code-msg--info    { background: #e3f2fd; color: #1565c0; }

/* ── Buy buttons ── */
.sub-buy-wrap { display: flex; flex-wrap: wrap; gap: .5rem; }
.sub-buy-btn  { flex: 1; min-width: 130px; font-size: .82rem !important; justify-content: center; }
.sub-manage-btn { width: 100%; justify-content: center; }
.sub-loading { color: var(--text-muted, #888); }

/* ── Billing info block ── */
.sub-billing-info {
  margin-top: 14px;
  padding: 12px 14px;
  background: #f8f9fb;
  border: 1px solid #e8eaf0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sub-billing-info p {
  margin: 0;
  font-size: .78rem;
  color: #555;
  line-height: 1.5;
}
.sub-billing-info i {
  color: #F58220;
  margin-right: 4px;
  width: 14px;
}

/* =========================================================
   iPad / Tablet optimizations (721px – 1100px)
========================================================= */
@media (min-width:721px) and (max-width:1100px){

  /* Nav bottom — bigger tap targets */
  .nav-label{ font-size:.72rem }
  .nav-icon{ font-size:1.3rem }

  /* Conversations panel — slightly wider on tablet */
  #conversations{ max-width:300px; min-width:240px; }

  /* Chat bubbles — don't stretch too wide */
  .message{ max-width:75% }

  /* Composer */
  #composerWrap, .composer-wrap{
    padding: .6rem 1rem;
  }

  /* Subscription screen — center and constrain */
  .sub-panel, .subscription-panel{
    max-width: 560px;
    margin-inline: auto;
  }

  /* Settings / profile grids */
  .settings-grid{ grid-template-columns: 1fr 1fr; }
  .profile-coach .coach-grid{ grid-template-columns: 1fr 1fr; }

  /* Focus / week grids */
  .focus-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .week-grid{ grid-template-columns: repeat(3, 1fr); }

  /* Modal dialogs — don't go full width */
  .modal-box, .modal-content{
    max-width: 560px;
    margin-inline: auto;
  }

  /* Vocab cards */
  .vocab-card{ max-width: 480px; margin-inline: auto; }

  /* Font size bump for readability on larger screen */
  body{ font-size: 16px; }
  .message .bubble{ font-size: 1rem; line-height: 1.65; }
}