/* ===== MiauMessenger — estética Windows XP / MSN 2004 ===== */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: Tahoma, "Segoe UI", Verdana, sans-serif;
  font-size: 11px;
  color: #1a1a1a;
  overflow: hidden;
  /* Colina Bliss casera */
  background:
    radial-gradient(ellipse 120% 55% at 50% 108%, #4c9e2f 0%, #6cb946 38%, transparent 60%),
    linear-gradient(180deg, #2f71d8 0%, #5b9bea 45%, #a8cdf5 70%, #cfe6fa 100%);
}

/* ===== Ventana XP ===== */
.xp-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  border: 1px solid #0831d9;
  border-radius: 8px 8px 3px 3px;
  background: #ece9d8;
  box-shadow: 0 8px 28px rgba(0,0,20,.45);
  overflow: hidden;
  min-width: 240px;
}
.titlebar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 4px 6px;
  color: #fff;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,60,.7);
  background: linear-gradient(180deg, #3d95ff 0%, #0855dd 8%, #0a5ce8 40%, #0846c4 88%, #0a59e0 100%);
  user-select: none;
  cursor: default;
}
.titlebar-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.titlebar-buttons { display: flex; gap: 2px; }
.tb-btn {
  width: 21px; height: 21px;
  border: 1px solid #fff;
  border-radius: 3px;
  color: #fff;
  font-size: 10px; font-weight: bold; line-height: 1;
  background: linear-gradient(180deg, #7ab1f7, #2a6de0 45%, #1150b8);
  cursor: pointer;
}
.tb-btn:hover { filter: brightness(1.15); }
.tb-close { background: linear-gradient(180deg, #f5a894, #e0512a 45%, #b83411); }
.tb-btn:disabled { opacity: .5; cursor: default; }
.menubar { display: flex; gap: 12px; padding: 3px 8px; background: #ece9d8; border-bottom: 1px solid #d8d4c8; color: #333; user-select: none; }
.menubar span:hover { color: #0846c4; cursor: default; }
.statusbar { padding: 3px 8px; border-top: 1px solid #d8d4c8; background: #ece9d8; color: #555; }
.xp-btn {
  padding: 4px 16px;
  font: inherit;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff, #ecebe5 45%, #d8d0c4);
  cursor: pointer;
}
.xp-btn:hover { box-shadow: 0 0 0 2px rgba(80,160,255,.5) inset; }
.xp-btn:active { background: #d8d0c4; }
input, select, textarea { font: inherit; border: 1px solid #7f9db9; padding: 3px 4px; border-radius: 0; outline: none; background: #fff; }
input:focus, textarea:focus { border-color: #0846c4; }

/* ===== Login ===== */
#login-screen { position: absolute; inset: 0; display: grid; place-items: center; }
[hidden] { display: none !important; }
.login-window { position: relative; width: 320px; }
.login-body { background: linear-gradient(180deg, #fff 0%, #dcedfb 70%, #c3ddf5 100%); padding: 18px 26px 22px; }
.login-logo { text-align: center; margin-bottom: 16px; }
.login-logo-figs { font-size: 40px; }
.fig { display: inline-block; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.fig-green { transform: rotate(-8deg); }
.fig-blue { transform: rotate(8deg) scaleX(-1); margin-left: -10px; }
.login-logo-name { font-size: 20px; color: #1b56b0; letter-spacing: -.5px; }
.login-form { display: flex; flex-direction: column; gap: 5px; }
.login-form label { color: #333; margin-top: 4px; }
.login-error { color: #c00; min-height: 13px; }
#login-btn { align-self: center; margin-top: 8px; padding: 5px 28px; }
.login-fine { margin-top: 14px; text-align: center; color: #7a8aa0; font-size: 10px; }

/* ===== Lista de contactos ===== */
.contact-window { top: 40px; right: 46px; width: 260px; height: min(560px, calc(100vh - 80px)); }
.me-header {
  display: flex; gap: 8px; align-items: center;
  padding: 8px;
  background: linear-gradient(180deg, #f5fbff, #d7ecfb);
  border-bottom: 1px solid #c5d8ea;
}
.me-avatar {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-size: 24px;
  background: #fff;
  border: 1px solid #8cb4d8; border-radius: 4px;
}
.me-info { flex: 1; min-width: 0; }
.me-name-row { display: flex; align-items: center; gap: 4px; font-weight: bold; color: #1b56b0; }
#me-status { border: none; background: transparent; color: #555; font-size: 10px; cursor: pointer; max-width: 120px; }
#me-personal { width: 100%; border: 1px solid transparent; background: transparent; font-style: italic; color: #666; padding: 1px 2px; }
#me-personal:hover, #me-personal:focus { border-color: #7f9db9; background: #fff; }
.contact-list { flex: 1; overflow-y: auto; background: #fff; padding: 4px 0; }
.cl-group { padding: 3px 8px; color: #1b56b0; font-weight: bold; cursor: pointer; user-select: none; }
.cl-group .arrow { display: inline-block; width: 12px; transition: transform .15s; }
.cl-group.closed .arrow { transform: rotate(-90deg); }
.contact { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 22px; cursor: default; }
.contact:hover { background: #e8f0fa; }
.contact .dot { font-size: 9px; }
.contact .c-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contact .c-personal { color: #999; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.dot-online { color: #35a900; } .dot-away { color: #eda400; } .dot-busy { color: #d6281a; } .dot-offline { color: #9a9a9a; }
.contact.request { background: #fff7e0; }
.req-btn { width: 20px; height: 18px; border: 1px solid #b8a878; border-radius: 3px; background: #fff; cursor: pointer; font-size: 10px; padding: 0; }
.req-yes { color: #35a900; } .req-no { color: #d6281a; }
.req-btn:hover { background: #f0ead2; }
.cl-add { margin-top: 6px; padding: 4px 8px; color: #1b56b0; cursor: pointer; border-top: 1px solid #eee; }
.cl-add:hover { text-decoration: underline; }

/* ===== Ventana de chat ===== */
.chat-window { width: 430px; height: 380px; }
.chat-window.shake { animation: shake .5s linear; }
@keyframes shake {
  0%,100% { transform: translate(0,0); }
  10% { transform: translate(-8px,-4px); } 20% { transform: translate(7px,5px); }
  30% { transform: translate(-6px,6px); } 40% { transform: translate(8px,-5px); }
  50% { transform: translate(-7px,-6px); } 60% { transform: translate(6px,4px); }
  70% { transform: translate(-5px,5px); } 80% { transform: translate(7px,-3px); }
  90% { transform: translate(-4px,2px); }
}
.chat-window.blink .titlebar { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { filter: brightness(1.6) saturate(1.4); } }
.chat-to { padding: 4px 8px; background: linear-gradient(180deg,#f5fbff,#e4f0fb); border-bottom: 1px solid #c5d8ea; color: #333; }
.ct-tostatus { color: #888; }
.chat-log { flex: 1; overflow-y: auto; background: #fff; padding: 6px 8px; }
.msg-author { color: #1b56b0; margin-top: 5px; }
.msg-author.mine { color: #777; }
.msg-body { margin: 1px 0 0 14px; color: #111; word-wrap: break-word; white-space: pre-wrap; }
.msg-info { color: #999; font-style: italic; margin: 5px 0; }
.msg-nudge { color: #b05a00; font-style: italic; margin: 6px 0; border-top: 1px dashed #d9b98c; border-bottom: 1px dashed #d9b98c; padding: 3px 0; }
.chat-typing { padding: 1px 8px; color: #888; font-size: 10px; font-style: italic; background: #fff; border-top: 1px solid #eee; }
.chat-toolbar { position: relative; display: flex; gap: 4px; padding: 3px 6px; background: #ece9d8; border-top: 1px solid #d8d4c8; }
.tool-btn { width: 26px; height: 24px; border: 1px solid transparent; border-radius: 3px; background: transparent; font-size: 14px; cursor: pointer; padding: 0; }
.tool-btn:hover { border-color: #7f9db9; background: #fff; }
.emo-picker {
  position: absolute; bottom: 30px; left: 4px; z-index: 10;
  display: grid; grid-template-columns: repeat(6, 26px);
  background: #fff; border: 1px solid #7f9db9; box-shadow: 2px 3px 8px rgba(0,0,0,.3); padding: 3px;
}
.emo-picker span { font-size: 15px; text-align: center; padding: 2px; cursor: pointer; }
.emo-picker span:hover { background: #d7ecfb; }
.chat-input-row { display: flex; gap: 6px; padding: 6px; background: #ece9d8; align-items: stretch; }
.ct-input { flex: 1; resize: none; }
.ct-send { align-self: stretch; }
.chat-window.minimized { height: auto !important; }
.chat-window.minimized .chat-to, .chat-window.minimized .chat-log, .chat-window.minimized .chat-typing,
.chat-window.minimized .chat-toolbar, .chat-window.minimized .chat-input-row { display: none; }