/* ============================================================
   OIU Messenger v2 — hoja de estilos
   Tematizable: body[data-theme] redefine las variables.
   ============================================================ */

:root {
  --tb-1: #3d95ff; --tb-2: #245edc; --tb-3: #1a4fc0; --tb-4: #0a246a; /* barra de título */
  --sky-1: #bfe0f5; --sky-2: #e8f4fd;                                  /* paneles */
  --accent: #7abe3f; --accent-dark: #4f8a22;                           /* identidad */
  --nudge: #f7941d;
  --ink: #1b2a3a;
  --panel-border: #6b95c8;
  --desk-a: #5aa7e8; --desk-b: #8ec9f2; --desk-c: #cfe9fb; --desk-d: #7cc04a; --desk-e: #4d9626;
  font-size: 13px;
}
body[data-theme="olive"] {
  --tb-1: #9fce67; --tb-2: #6da82f; --tb-3: #57902１; --tb-3: #579021; --tb-4: #2f5a0e;
  --sky-1: #dcedc8; --sky-2: #f3fae9; --panel-border: #8fb86a;
}
body[data-theme="silver"] {
  --tb-1: #d8dee8; --tb-2: #9aa5b8; --tb-3: #7c8aa0; --tb-4: #4a5568;
  --sky-1: #e4e8ee; --sky-2: #f4f6f9; --accent: #7c8aa0; --accent-dark: #4a5568; --panel-border: #aab4c4;
}
body[data-theme="sunset"] {
  --tb-1: #ffb05c; --tb-2: #f7941d; --tb-3: #d97a0a; --tb-4: #8a4a00;
  --sky-1: #ffe5c2; --sky-2: #fff4e3; --accent: #f7941d; --accent-dark: #c26a00; --nudge: #245edc;
  --panel-border: #d9a05c;
  --desk-a: #ff9d5c; --desk-b: #ffc285; --desk-c: #ffe3bd; --desk-d: #c97a2e; --desk-e: #8a4a16;
}
body[data-theme="midnight"] {
  --tb-1: #4a5b8a; --tb-2: #2c3a66; --tb-3: #202c50; --tb-4: #0c1228;
  --sky-1: #2e3a5c; --sky-2: #3c4a72; --ink: #e8edf8; --panel-border: #1c2742;
  --desk-a: #141b33; --desk-b: #1d2746; --desk-c: #2c3a5c; --desk-d: #1a2440; --desk-e: #0c1228;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }

body {
  font-family: Tahoma, Verdana, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(ellipse 120% 60% at 50% 108%, var(--desk-e) 0%, var(--desk-d) 38%, transparent 62%),
    linear-gradient(var(--desk-a) 0%, var(--desk-b) 45%, var(--desk-c) 60%, var(--desk-d) 60.5%, var(--desk-e) 100%);
  background-attachment: fixed;
  overflow: hidden;
  transition: background .5s;
}

#desktop { position: relative; width: 100vw; height: 100vh; overflow: hidden; }

/* ===================== cromado XP ===================== */

.xp-window {
  position: absolute;
  display: flex; flex-direction: column;
  border: 1px solid var(--tb-4);
  border-radius: 8px 8px 3px 3px;
  background: var(--sky-2);
  box-shadow: 0 10px 30px rgba(10,36,106,.45), 0 2px 6px rgba(0,0,0,.25);
  overflow: hidden;
}

.xp-titlebar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 6px 4px 10px;
  color: #fff; font-weight: bold; text-shadow: 1px 1px 1px rgba(0,0,0,.45);
  background: linear-gradient(var(--tb-1) 0%, var(--tb-2) 8%, var(--tb-3) 40%, var(--tb-2) 88%, var(--tb-4) 100%);
  cursor: default; user-select: none;
}
.xp-title { display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.oiu-mini-logo {
  width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #aee571, #5a9e2f);
  border: 1px solid #3f7a1d; display: inline-block; position: relative;
}
.oiu-mini-logo::after {
  content: ""; position: absolute; left: 3px; right: 3px; bottom: 3px; height: 4px;
  border-bottom: 2px solid #fff; border-radius: 0 0 8px 8px;
}

.xp-buttons { display: flex; gap: 3px; }
.xpb {
  width: 21px; height: 21px; display: grid; place-items: center;
  font: bold 11px Tahoma, sans-serif; color: #fff; border-radius: 3px;
  border: 1px solid rgba(255,255,255,.55);
  background: linear-gradient(color-mix(in srgb, var(--tb-1) 80%, white), var(--tb-3));
  cursor: pointer;
}
.xpb:hover { filter: brightness(1.15); }
.xpb-close { background: linear-gradient(#f3a08a, #d4502e 45%, #b03a1c); }

.xp-button {
  font: bold 12px Tahoma, sans-serif; padding: 4px 18px;
  border: 1px solid #2f5bb7; border-radius: 3px;
  background: linear-gradient(#fdfdfd, #e3e9f3 45%, #cfd9ec);
  box-shadow: inset 0 0 0 1px #fff; cursor: pointer; color: #1b2a3a;
}
.xp-button:hover { background: linear-gradient(#fff, #eaf3ff 45%, #d8e8ff); }
.xp-button:active { background: #d4dff0; box-shadow: inset 1px 1px 2px rgba(0,0,0,.2); }

.mini-btn {
  font: 11px Tahoma; padding: 3px 9px; border: 1px solid #7f9db9; border-radius: 3px;
  background: linear-gradient(#fff, #e4edf7); cursor: pointer; color: #1b2a3a;
}
.mini-btn:hover { background: linear-gradient(#fff, #d3e4f6); }
.mini-btn.danger { border-color: #c0563a; color: #8c2a12; background: linear-gradient(#fff, #fbe4dd); }

/* ===================== estados ===================== */

.st { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1px solid rgba(0,0,0,.35); vertical-align: -1px; }
.st-online  { background: radial-gradient(circle at 35% 30%, #b9f08a, #54b226); }
.st-busy    { background: radial-gradient(circle at 35% 30%, #ffb199, #d23c1e); }
.st-away    { background: radial-gradient(circle at 35% 30%, #ffe9a8, #e8a90c); }
.st-offline { background: radial-gradient(circle at 35% 30%, #e8e8e8, #9aa4ad); }

/* ===================== ventana principal ===================== */

.roster-window {
  width: 310px;
  height: min(660px, calc(100vh - 36px));
  right: 28px; top: 18px;
}

/* ----- panel de bloqueo (login integrado) ----- */
.lock-panel {
  position: absolute; inset: 30px 0 0 0; z-index: 30;
  display: flex; flex-direction: column;
  background: linear-gradient(var(--sky-2), #fff 30%, var(--sky-1) 130%);
  transition: transform .6s cubic-bezier(.6,-0.1,.3,1), opacity .55s, filter .55s;
}
body[data-theme="midnight"] .lock-panel { background: linear-gradient(var(--sky-2), var(--sky-1)); }
.lock-panel.unlocking {
  transform: translateY(-105%);
  opacity: .2;
  filter: blur(3px);
  pointer-events: none;
}
.lock-inner {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  padding: 22px 28px 8px; overflow-y: auto;
}
.oiu-logo { filter: drop-shadow(0 3px 5px rgba(0,0,0,.25)); }
.login-brand {
  margin: 8px 0 16px;
  font: bold 26px "Trebuchet MS", Tahoma, sans-serif;
  color: var(--accent-dark); letter-spacing: 1px;
}
.login-brand span { color: var(--tb-2); font-weight: normal; font-size: 18px; margin-left: 4px; }
body[data-theme="midnight"] .login-brand span { color: #9db4ee; }

.login-form { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.login-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.login-form input {
  font: 13px Tahoma, sans-serif; padding: 5px 7px;
  border: 1px solid #7f9db9; border-radius: 2px;
}
.login-form input:focus { outline: 2px solid var(--tb-1); outline-offset: -1px; }
.login-error { background: #fdecea; border: 1px solid #d4502e; color: #8c2a12; padding: 6px 8px; border-radius: 3px; font-size: 12px; }
.login-go { margin: 4px auto 0; min-width: 150px; }
.login-links { margin-top: 12px; text-align: center; }
.login-links a { color: var(--tb-2); font-size: 12px; }
body[data-theme="midnight"] .login-links a { color: #9db4ee; }

.lock-foot { height: 52px; background: linear-gradient(var(--sky-1), color-mix(in srgb, var(--sky-1) 70%, var(--tb-2))); position: relative; }
.ppl { position: absolute; right: 12px; bottom: 0; width: 90px; height: 50px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.85) 11px, transparent 12px),
    radial-gradient(ellipse at 30% 105%, rgba(255,255,255,.85) 25px, transparent 26px),
    radial-gradient(circle at 72% 22%, rgba(255,255,255,.6) 11px, transparent 12px),
    radial-gradient(ellipse at 72% 100%, rgba(255,255,255,.6) 25px, transparent 26px);
}

/* ----- contenido desbloqueado ----- */
.roster-content { flex: 1; display: flex; flex-direction: column; min-height: 0; }

.roster-header {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px;
  background: linear-gradient(100deg, var(--sky-1) 0%, var(--sky-2) 45%, var(--sky-1) 100%);
  border-bottom: 1px solid var(--panel-border);
}

.dp-frame {
  width: 52px; height: 52px; flex: 0 0 auto; padding: 0;
  border-radius: 6px; border: 3px solid var(--accent);
  box-shadow: 0 0 0 1px #fff inset, 0 1px 3px rgba(0,0,0,.3);
  background: #fff; display: grid; place-items: center;
  font: bold 22px "Trebuchet MS", sans-serif; color: #fff;
  overflow: hidden; cursor: default;
}
button.dp-frame { cursor: pointer; }
.dp-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-frame.s-busy { border-color: #d23c1e; }
.dp-frame.s-away, .dp-frame.s-brb, .dp-frame.s-lunch, .dp-frame.s-phone { border-color: #e8a90c; }
.dp-frame.s-offline { border-color: #9aa4ad; filter: grayscale(.6); }

.me-info { min-width: 0; flex: 1; }
.me-name-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.me-name {
  border: 0; background: none; padding: 0;
  font: bold 14px Tahoma; color: var(--ink); cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.me-name:hover { text-decoration: underline; }

.status-picker { position: relative; }
.status-current { border: 0; background: none; padding: 0; font: 11px Tahoma; color: var(--ink); opacity: .75; cursor: pointer; }
.status-current:hover { text-decoration: underline; }
.status-menu {
  position: absolute; z-index: 60; top: 18px; left: 0; min-width: 190px;
  background: #fff; border: 1px solid #8aa6c8; box-shadow: 3px 3px 8px rgba(0,0,0,.3); padding: 3px;
}
.status-menu button {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  border: 0; background: none; font: 12px Tahoma; padding: 5px 8px; cursor: pointer; color: #1b2a3a;
}
.status-menu button:hover { background: var(--tb-2); color: #fff; }

.me-psm, .me-music {
  border: 0; background: none; padding: 0; display: block; margin-top: 2px;
  font: italic 11px Tahoma; color: var(--ink); opacity: .65; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.me-psm:hover, .me-music:hover { text-decoration: underline; }
.me-music { font-style: normal; color: var(--accent-dark); opacity: .9; }
body[data-theme="midnight"] .me-music { color: #aee571; }

.roster-toolbar {
  display: flex; gap: 5px; padding: 7px 10px; position: relative;
  background: var(--sky-2); border-bottom: 1px solid var(--panel-border);
}
.roster-toolbar input {
  flex: 1; min-width: 0; font: 12px Tahoma; padding: 4px 8px;
  border: 1px solid #7f9db9; border-radius: 10px;
}
.tool-btn {
  width: 28px; border: 1px solid #7f9db9; border-radius: 4px;
  background: linear-gradient(#fff, #dfeaf6); cursor: pointer; font-size: 13px;
}
.tool-btn:hover { background: linear-gradient(#fff, #cfe2f6); }
.admin-tool { color: #5c2ea0; font-weight: bold; }

/* preferencias */
.prefs-pop {
  position: absolute; right: 8px; top: 142px; z-index: 70; width: 250px;
  background: #fff; border: 1px solid #8aa6c8; box-shadow: 4px 4px 10px rgba(0,0,0,.3);
  padding: 8px; border-radius: 4px; color: #1b2a3a;
}
.prefs-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px; font-size: 12px; border-bottom: 1px solid #eef3f9; }
.prefs-row:last-child { border-bottom: 0; }
.font-ctl { display: flex; align-items: center; gap: 7px; }
.prefs-row select { font: 12px Tahoma; padding: 2px; }

.roster-list { flex: 1; overflow-y: auto; background: #fff; padding: 4px 0; color: #1b2a3a; }

.roster-group { font: bold 11px Tahoma; color: #3a5a82; padding: 7px 10px 3px; user-select: none; }
.roster-group .grp-count { font-weight: normal; color: #8a9bb0; }

.contact { display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 10px; cursor: pointer; position: relative; }
.contact:hover { background: #e3f0fb; }
.contact .dp-mini {
  width: 30px; height: 30px; flex: 0 0 auto; border-radius: 4px;
  border: 2px solid var(--accent); display: grid; place-items: center;
  font: bold 13px "Trebuchet MS"; color: #fff; overflow: hidden;
}
.contact .dp-mini img { width: 100%; height: 100%; object-fit: cover; }
.contact.s-offline .dp-mini { border-color: #9aa4ad; filter: grayscale(.7) opacity(.75); }
.contact.s-busy .dp-mini { border-color: #d23c1e; }
.contact.s-away .dp-mini, .contact.s-brb .dp-mini, .contact.s-lunch .dp-mini, .contact.s-phone .dp-mini { border-color: #e8a90c; }

.contact .c-text { min-width: 0; flex: 1; }
.contact .c-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact .c-name .c-status-word { color: #7b8ea3; font-size: 11px; }
.contact .c-psm { font-size: 11px; color: #8a9bb0; font-style: italic; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact .c-psm .music-note { color: var(--accent-dark); font-style: normal; }
.contact.s-offline .c-name { color: #8d9aa8; }
.contact.is-blocked .c-name { text-decoration: line-through; color: #b03a1c; }

.c-actions { display: none; gap: 3px; }
.contact:hover .c-actions { display: flex; }
.c-act {
  width: 21px; height: 21px; border: 1px solid #b9cfe4; border-radius: 3px;
  background: #fff; cursor: pointer; font-size: 11px; line-height: 1;
}
.c-act:hover { background: #eaf4fe; }
@media (hover: none) { .c-actions { display: flex; opacity: .7; } }

.added-row { background: #fffbe8; }
.added-row .c-psm { color: #9a7a08; font-style: normal; }

.roster-empty { padding: 24px 16px; text-align: center; color: #7b8ea3; font-size: 12px; line-height: 1.6; }

.roster-ad {
  border-top: 1px solid var(--panel-border);
  background: linear-gradient(#fff, var(--sky-1));
  font: 11px Tahoma; color: var(--accent-dark); padding: 4px 0;
}
body[data-theme="midnight"] .roster-ad { background: linear-gradient(var(--sky-2), var(--sky-1)); color: #aee571; }

/* ===================== ventanas de conversación ===================== */

.chat-window { width: 500px; height: 440px; min-width: 330px; min-height: 320px; resize: both; }

.chat-head {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  background: linear-gradient(100deg, var(--sky-1), var(--sky-2) 50%, var(--sky-1));
  border-bottom: 1px solid var(--panel-border);
}
.chat-head .dp-frame { width: 38px; height: 38px; font-size: 16px; border-width: 2px; }
.chat-head .ch-meta { min-width: 0; flex: 1; }
.chat-head .ch-name { font: bold 13px Tahoma; }
.chat-head .ch-psm { font: italic 11px Tahoma; opacity: .7; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head .ch-call { display: flex; gap: 4px; }
.ch-call button { width: 30px; height: 26px; font-size: 14px; border: 1px solid #9cbbdd; border-radius: 4px; background: linear-gradient(#fff,#e2eefb); cursor: pointer; }
.ch-call button:hover { background: linear-gradient(#fff,#cfe4fa); }

.chat-body { flex: 1; display: flex; flex-direction: column; min-height: 0; background: #fff; color: #1b2a3a; position: relative; }

.chat-log { flex: 1; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }

.msg-author { color: #3a5a82; margin-top: 7px; }
.msg-author.mine { color: var(--accent-dark); }
.msg-body { white-space: pre-wrap; word-break: break-word; padding: 3px 8px; margin-left: 12px; border-left: 3px solid #eaf2fb; }
.msg-body.mine { border-left-color: #eef7e6; }
.msg-body img.cemo { width: 22px; height: 22px; vertical-align: -6px; }

.msg-system { margin: 6px 0; padding: 5px 8px; background: #fff7e8; border: 1px dashed var(--nudge); color: #9a5e08; font-size: 11.5px; border-radius: 3px; }
.msg-time { color: #b3c0cf; font-size: 10px; margin-left: 6px; font-weight: normal; }

.msg-file {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 0 4px 12px; padding: 6px 10px;
  border: 1px solid #b9cfe4; border-radius: 4px; background: linear-gradient(#fff, #eef5fc);
  text-decoration: none; color: #14355e; font-size: 12px;
}
.msg-file:hover { background: linear-gradient(#fff, #ddebfa); }
.msg-file .f-icon { font-size: 18px; }
.msg-file .f-size { color: #7b8ea3; font-size: 11px; }

.msg-ink { display: block; margin: 4px 0 4px 12px; max-width: min(320px, 90%); border: 1px solid #d5e2ef; border-radius: 4px; background: #fffef8; }

/* tablero de gato */
.ttt { margin: 6px 0 6px 12px; display: inline-block; border: 1px solid #b9cfe4; border-radius: 6px; padding: 8px; background: linear-gradient(#fff,#f2f8fe); }
.ttt-grid { display: grid; grid-template-columns: repeat(3, 42px); gap: 4px; }
.ttt-cell {
  width: 42px; height: 42px; font: bold 22px "Trebuchet MS"; border: 1px solid #9cbbdd; border-radius: 4px;
  background: #fff; cursor: pointer; color: #245edc;
}
.ttt-cell:disabled { cursor: default; opacity: .9; }
.ttt-cell.o { color: #d4502e; }
.ttt-status { font-size: 11px; color: #3a5a82; margin-top: 6px; text-align: center; }
.ttt.stale { opacity: .55; pointer-events: none; }

.chat-typing { min-height: 17px; padding: 1px 12px; font: italic 11px Tahoma; color: #6c7f93; background: #f4f9fe; border-top: 1px solid #e1edf8; }

.chat-tools {
  display: flex; gap: 4px; padding: 4px 8px; position: relative; flex-wrap: wrap;
  background: linear-gradient(var(--sky-2), var(--sky-1)); border-top: 1px solid var(--panel-border);
}
.chat-tools button { border: 1px solid transparent; background: none; border-radius: 4px; font-size: 16px; width: 30px; height: 26px; cursor: pointer; }
.chat-tools button:hover { border-color: #9cbbdd; background: rgba(255,255,255,.6); }
.chat-tools .nudge-btn { color: var(--nudge); font-weight: bold; }

.emo-pop, .wink-pop {
  position: absolute; bottom: 32px; left: 6px; z-index: 50;
  background: #fff; border: 1px solid #8aa6c8; box-shadow: 3px 3px 8px rgba(0,0,0,.3); padding: 4px;
}
.emo-pop { display: grid; grid-template-columns: repeat(6, 32px); max-height: 180px; overflow-y: auto; }
.emo-pop button { width: 32px; height: 30px; font-size: 16px; border: 0; background: none; cursor: pointer; }
.emo-pop button:hover { background: #e3f0fb; }
.emo-pop img { width: 22px; height: 22px; }
.wink-pop { display: flex; gap: 4px; }
.wink-pop button { border: 1px solid #b9cfe4; border-radius: 4px; background: #fff; font-size: 18px; width: 38px; height: 34px; cursor: pointer; }
.wink-pop button:hover { background: #eaf4fe; }

.chat-inputrow { display: flex; gap: 6px; padding: 6px 8px 8px; background: var(--sky-1); }
.chat-inputrow textarea { flex: 1; resize: none; height: 46px; font: 13px Tahoma; padding: 5px 7px; border: 1px solid #7f9db9; border-radius: 2px; }
.chat-inputrow .send-btn { align-self: stretch; }

/* --- zumbido --- */
@keyframes oiu-shake {
  0%,100% { transform: translate(0,0) rotate(0); }
  10% { transform: translate(-7px,4px) rotate(-1deg); } 20% { transform: translate(8px,-5px) rotate(1.2deg); }
  30% { transform: translate(-9px,-3px) rotate(-1.4deg); } 40% { transform: translate(7px,6px) rotate(1deg); }
  50% { transform: translate(-6px,5px) rotate(-.8deg); } 60% { transform: translate(8px,-4px) rotate(1.2deg); }
  70% { transform: translate(-7px,-5px) rotate(-1deg); } 80% { transform: translate(5px,4px) rotate(.8deg); }
  90% { transform: translate(-4px,2px) rotate(-.5deg); }
}
.shaking { animation: oiu-shake .65s linear; }

/* --- guiños: animaciones a ventana completa --- */
.wink-stage { position: absolute; inset: 0; z-index: 40; overflow: hidden; pointer-events: none; }
.wink-bit { position: absolute; font-size: 30px; will-change: transform, opacity; }

@keyframes wk-rocket { from { transform: translate(-60px, 110%) rotate(-40deg) scale(1.4); } to { transform: translate(120vw, -140%) rotate(-40deg) scale(1.4); opacity: .9; } }
.wk-rocket { animation: wk-rocket 1.5s ease-in forwards; }
@keyframes wk-up { 0% { transform: translateY(110%) scale(.7); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateY(-150%) scale(1.3); opacity: 0; } }
.wk-up { animation: wk-up 2.2s ease-out forwards; }
@keyframes wk-big { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 25% { opacity: 1; } 50% { transform: translate(-50%,-50%) scale(2.8); } 70% { transform: translate(-50%,-50%) scale(2.2); } 100% { transform: translate(-50%,-50%) scale(2.6); opacity: 0; } }
.wk-big { left: 50%; top: 50%; font-size: 60px; animation: wk-big 1.8s ease forwards; }
@keyframes wk-fall { 0% { transform: translateY(-50px) rotate(0); opacity: 1; } 100% { transform: translateY(140%) rotate(340deg); opacity: .4; } }
.wk-fall { animation: wk-fall 1.9s linear forwards; }

@media (prefers-reduced-motion: reduce) {
  .shaking, .wk-rocket, .wk-up, .wk-big, .wk-fall { animation: none !important; }
  .shaking { outline: 3px solid var(--nudge); }
}

/* ===================== escritura a mano ===================== */
.ink-overlay {
  position: absolute; inset: 0; z-index: 45; background: rgba(232,244,253,.96);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.ink-overlay canvas { background: #fffef8; border: 1px solid #9cbbdd; border-radius: 4px; touch-action: none; cursor: crosshair; }
.ink-bar { display: flex; gap: 6px; align-items: center; }
.ink-color { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #9cbbdd; cursor: pointer; }
.ink-color.sel { box-shadow: 0 0 0 2px var(--tb-2); }

/* ===================== modales ===================== */
.modal-window { width: min(380px, calc(100vw - 24px)); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 200; }
.modal-body { padding: 14px 16px; font-size: 12px; background: #fff; color: #1b2a3a; max-height: 70vh; overflow-y: auto; }
.modal-body p { margin: 4px 0 8px; }
.modal-label { display: block; margin-bottom: 10px; }
.modal-body input[type=text], .modal-body input[type=search] { width: 100%; font: 13px Tahoma; padding: 5px 7px; border: 1px solid #7f9db9; border-radius: 2px; }
.modal-hint { color: #7b8ea3; font-size: 11px; }

.search-results { margin-top: 8px; }
.sr-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid #eef3f9; }
.sr-row .dp-mini { width: 26px; height: 26px; border-radius: 4px; border: 2px solid var(--accent); display: grid; place-items: center; font: bold 12px "Trebuchet MS"; color: #fff; overflow: hidden; }
.sr-row .dp-mini img { width: 100%; height: 100%; object-fit: cover; }
.sr-row .sr-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-row .sr-user { color: #8a9bb0; }

.member-pick { max-height: 200px; overflow-y: auto; border: 1px solid #d5e2ef; border-radius: 3px; padding: 4px; margin-bottom: 10px; }
.member-pick label { display: flex; align-items: center; gap: 7px; padding: 4px; cursor: pointer; }
.member-pick label:hover { background: #eef5fc; }

.emo-add-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.emo-add-row input[type=text] { width: 110px !important; }
.emo-list { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.emo-row { display: flex; align-items: center; gap: 8px; padding: 3px 4px; border-bottom: 1px solid #eef3f9; }
.emo-row img { width: 24px; height: 24px; }
.emo-row code { flex: 1; }

/* ===================== llamadas ===================== */
.call-window {
  position: fixed; right: 18px; bottom: 18px; z-index: 500;
  width: min(360px, calc(100vw - 30px));
  border: 1px solid var(--tb-4); border-radius: 8px; overflow: hidden;
  background: #10131c; color: #fff; box-shadow: 0 14px 40px rgba(0,0,0,.5);
}
.call-head { padding: 6px 10px; font: bold 12px Tahoma; background: linear-gradient(var(--tb-2), var(--tb-4)); display: flex; justify-content: space-between; align-items: center; }
.call-videos { position: relative; background: #000; min-height: 120px; }
.call-videos video.remote { width: 100%; display: block; max-height: 260px; background: #000; }
.call-videos video.local { position: absolute; right: 8px; bottom: 8px; width: 90px; border: 1px solid #fff3; border-radius: 4px; background: #222; }
.call-audio-face { display: grid; place-items: center; padding: 26px 0; font-size: 40px; }
.call-bar { display: flex; gap: 8px; justify-content: center; padding: 10px; background: #1a2030; }
.call-bar button { font: bold 12px Tahoma; padding: 6px 16px; border-radius: 16px; border: 0; cursor: pointer; }
.call-hang { background: #d4502e; color: #fff; }
.call-take { background: #54b226; color: #fff; }
.call-state { font-size: 11px; opacity: .8; text-align: center; padding-bottom: 8px; }

/* ===================== administración ===================== */
.admin-window { width: min(680px, calc(100vw - 30px)); max-height: calc(100vh - 60px); left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 150; }
.admin-bar { background: linear-gradient(#8a4fd0 0%, #5c2ea0 50%, #3a1a6e 100%); }
.admin-body { padding: 12px; overflow: auto; background: #fff; color: #1b2a3a; }
.admin-summary { font-size: 12px; color: #3a5a82; margin-bottom: 10px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.admin-table th { text-align: left; padding: 6px 8px; background: linear-gradient(#f2f7fc, #dcebf8); border-bottom: 1px solid #b9cfe4; font-size: 11px; color: #3a5a82; }
.admin-table td { padding: 6px 8px; border-bottom: 1px solid #edf3f9; }
.admin-table tr.row-banned td { background: #fdf2f0; color: #9a4a3a; }
.admin-actions { display: flex; gap: 5px; }
.dot-online, .dot-off { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.dot-online { background: #54b226; box-shadow: 0 0 4px #54b226; }
.dot-off { background: #b8c2cc; }

/* ===================== toasts ===================== */
#toastLayer { position: fixed; right: 14px; bottom: 14px; z-index: 999; display: flex; flex-direction: column; gap: 8px; }
.toast {
  width: 252px; border: 1px solid var(--tb-4); border-radius: 6px;
  background: linear-gradient(var(--sky-2), var(--sky-1));
  box-shadow: 0 6px 18px rgba(0,0,0,.35); padding: 9px 12px; font-size: 12px; cursor: pointer;
  animation: toast-in .25s ease-out; color: var(--ink);
}
.toast b { color: var(--tb-2); }
body[data-theme="midnight"] .toast b { color: #9db4ee; }
@keyframes toast-in { from { transform: translateY(14px); opacity: 0; } }

/* ===================== móvil ===================== */
@media (max-width: 700px) {
  .roster-window { left: 8px; right: 8px; top: 8px; width: auto; height: calc(100vh - 16px); height: calc(100dvh - 16px); }
  .chat-window { left: 0 !important; top: 0 !important; width: 100vw !important; height: 100vh !important; height: 100dvh !important; border-radius: 0; resize: none; }
  .prefs-pop { right: 4px; left: 4px; width: auto; }
}