/* ════════════════════════════════════════════════
   POTTERHEAD CHAT — Estilos
   ════════════════════════════════════════════════ */

/* ── Variables de casa ── */
.ph-chat--gryffindor { --chat-accent: #c93030; --chat-accent-l: rgba(201,48,48,.18); --chat-border: rgba(201,48,48,.45); }
.ph-chat--slytherin  { --chat-accent: #1a6b3a; --chat-accent-l: rgba(26,107,58,.18); --chat-border: rgba(26,107,58,.45); }
.ph-chat--ravenclaw  { --chat-accent: #1a3a8c; --chat-accent-l: rgba(26,58,140,.18); --chat-border: rgba(26,58,140,.45); }
.ph-chat--hufflepuff { --chat-accent: #b88a20; --chat-accent-l: rgba(184,138,32,.18); --chat-border: rgba(184,138,32,.45); }

/* Fallback (sin casa) */
.ph-chat {
    --chat-accent:   var(--gold-400, #d4a832);
    --chat-accent-l: rgba(212,168,50,.18);
    --chat-border:   rgba(212,168,50,.4);
}

/* ── Widget raíz ── */
.ph-chat {
    position: fixed;
    bottom: 2.4rem;
    right: 2.4rem;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-family: var(--font-body, 'Crimson Pro', Georgia, serif);
    font-size: 1.5rem;
}

/* ── Botón flotante ── */
.ph-chat__fab {
    display:         flex;
    align-items:     center;
    gap:             0.8rem;
    padding:         1rem 1.8rem 1rem 1.4rem;
    border-radius:   50px;
    background:      var(--ink-800, #0f1628);
    border:          1.5px solid var(--chat-border);
    color:           var(--text-primary, #c8d4f0);
    cursor:          pointer;
    box-shadow:      0 4px 24px rgba(0,0,0,.55), 0 0 0 0 var(--chat-accent);
    transition:      transform .18s ease, box-shadow .18s ease, border-color .18s;
    position:        relative;
    font-family:     var(--font-ui, 'Cinzel', serif);
    font-size:       1.35rem;
    letter-spacing:  0.06em;
}
.ph-chat__fab:hover {
    transform:  translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,.65), 0 0 16px var(--chat-accent-l);
    border-color: var(--chat-accent);
}
.ph-chat__fab-icon { font-size: 1.8rem; line-height: 1; }
.ph-chat__fab-label { white-space: nowrap; }

/* Badge de mensajes no leídos */
.ph-chat__unread {
    position:     absolute;
    top:          -6px;
    right:        -6px;
    background:   var(--chat-accent);
    color:        #fff;
    font-size:    1.1rem;
    font-family:  var(--font-ui, sans-serif);
    font-weight:  700;
    min-width:    20px;
    height:       20px;
    border-radius: 50px;
    display:      flex;
    align-items:  center;
    justify-content: center;
    padding:      0 5px;
    border:       2px solid var(--ink-800, #0f1628);
}

/* ── Panel ── */
.ph-chat__panel {
    position:      absolute;
    bottom:        calc(100% + 1.2rem);
    right:         0;
    width:         360px;
    max-width:     calc(100vw - 3.2rem);
    background:    var(--ink-850, #0b1120);
    border:        1.5px solid var(--chat-border);
    border-radius: var(--r-lg, 12px);
    box-shadow:    0 16px 64px rgba(0,0,0,.75), 0 0 32px var(--chat-accent-l);
    display:       flex;
    flex-direction: column;
    overflow:      hidden;
    transform-origin: bottom right;
    animation:     ph-chat-appear .2s ease;
}
.ph-chat__panel[hidden] { display: none; }

@keyframes ph-chat-appear {
    from { opacity: 0; transform: scale(.94) translateY(8px); }
    to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── Cabecera del panel ── */
.ph-chat__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         1.2rem 1.4rem;
    background:      linear-gradient(135deg, var(--ink-800, #0f1628) 0%, var(--chat-accent-l) 100%);
    border-bottom:   1px solid var(--chat-border);
}
.ph-chat__header-left  { display: flex; align-items: center; gap: 1rem; }
.ph-chat__header-icon  { font-size: 2.2rem; line-height: 1; }
.ph-chat__header-title {
    display:     block;
    font-family: var(--font-heading, 'Cinzel', serif);
    font-size:   1.4rem;
    color:       var(--text-bright, #eef2ff);
    letter-spacing: .06em;
}
.ph-chat__header-house {
    display:    block;
    font-size:  1.15rem;
    color:      var(--text-muted, #7d94c0);
    font-family: var(--font-body, serif);
}
.ph-chat__header-actions { display: flex; align-items: center; gap: 1.2rem; }

/* Indicador online */
.ph-chat__online {
    display:     flex;
    align-items: center;
    gap:         5px;
    font-size:   1.2rem;
    color:       var(--text-muted, #7d94c0);
}
.ph-chat__online-dot {
    width:        8px;
    height:       8px;
    border-radius: 50%;
    background:   #3ddc84;
    box-shadow:   0 0 6px #3ddc84;
    animation:    ph-pulse 2s infinite;
}
@keyframes ph-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: .4; }
}

.ph-chat__close {
    background: none;
    border:     none;
    color:      var(--text-muted, #7d94c0);
    cursor:     pointer;
    padding:    4px;
    border-radius: 4px;
    transition: color .15s;
}
.ph-chat__close:hover { color: var(--text-bright, #eef2ff); }

/* ── Zona de mensajes ── */
.ph-chat__messages {
    flex:       1;
    overflow-y: auto;
    padding:    1.2rem 1.2rem 0.8rem;
    min-height: 240px;
    max-height: 320px;
    display:    flex;
    flex-direction: column;
    gap:        1rem;
    scrollbar-width: thin;
    scrollbar-color: var(--chat-border) transparent;
}
.ph-chat__messages::-webkit-scrollbar        { width: 4px; }
.ph-chat__messages::-webkit-scrollbar-track  { background: transparent; }
.ph-chat__messages::-webkit-scrollbar-thumb  { background: var(--chat-border); border-radius: 4px; }

.ph-chat__loading {
    text-align: center;
    color:      var(--text-muted, #7d94c0);
    font-size:  1.4rem;
    padding:    2rem 0;
}

.ph-chat__empty {
    text-align: center;
    color:      var(--text-faint, #3d4f70);
    font-size:  1.35rem;
    padding:    2rem 1rem;
    line-height: 1.6;
}

/* ── Burbuja de mensaje ── */
.ph-msg {
    display:    flex;
    gap:        0.9rem;
    align-items: flex-start;
}
.ph-msg--own {
    flex-direction: row-reverse;
}

/* Avatar */
.ph-msg__avatar-wrap {
    position:   relative;
    flex-shrink: 0;
}
.ph-msg__avatar {
    width:         34px;
    height:        34px;
    border-radius: 50%;
    object-fit:    cover;
    border:        2px solid var(--chat-border);
    display:       block;
}
.ph-msg__house-badge {
    position:      absolute;
    bottom:        -4px;
    right:         -4px;
    font-size:     1.1rem;
    line-height:   1;
    background:    var(--ink-850, #0b1120);
    border-radius: 50%;
    padding:       1px;
}

/* Burbuja */
.ph-msg__body {
    max-width: 76%;
}
.ph-msg__meta {
    display:     flex;
    align-items: baseline;
    gap:         0.6rem;
    margin-bottom: 0.3rem;
}
.ph-msg--own .ph-msg__meta { flex-direction: row-reverse; }

.ph-msg__nick {
    font-family:    var(--font-ui, 'Cinzel', serif);
    font-size:      1.15rem;
    color:          var(--text-primary, #c8d4f0);
    letter-spacing: .04em;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    max-width:      120px;
}
.ph-msg__time {
    font-size:  1.1rem;
    color:      var(--text-faint, #3d4f70);
    flex-shrink: 0;
}

/* Colores de nick por casa */
.ph-msg--gryffindor .ph-msg__nick { color: #f5a0a0; }
.ph-msg--slytherin  .ph-msg__nick { color: #6de8a0; }
.ph-msg--ravenclaw  .ph-msg__nick { color: #80aaf0; }
.ph-msg--hufflepuff .ph-msg__nick { color: var(--gold-300, #e8c458); }

.ph-msg__bubble {
    background:    var(--ink-750, #131c32);
    border:        1px solid var(--border-subtle, rgba(100,140,220,.12));
    border-radius: 0 var(--r-lg, 12px) var(--r-lg, 12px) var(--r-lg, 12px);
    padding:       0.8rem 1.1rem;
    color:         var(--text-primary, #c8d4f0);
    font-size:     1.5rem;
    line-height:   1.5;
    word-break:    break-word;
}
.ph-msg--own .ph-msg__bubble {
    background:    var(--chat-accent-l);
    border-color:  var(--chat-border);
    border-radius: var(--r-lg, 12px) 0 var(--r-lg, 12px) var(--r-lg, 12px);
}

/* ── Pie del panel ── */
.ph-chat__footer {
    padding:     1rem 1.2rem 1.2rem;
    border-top:  1px solid var(--border-subtle, rgba(100,140,220,.12));
    background:  var(--ink-800, #0f1628);
    display:     flex;
    flex-direction: column;
    gap:         0.7rem;
}

/* Info del usuario actual */
.ph-chat__me {
    display:     flex;
    align-items: center;
    gap:         0.8rem;
}
.ph-chat__me-avatar {
    position:   relative;
    flex-shrink: 0;
}
.ph-chat__me-img {
    width:         28px !important;
    height:        28px !important;
    border-radius: 50% !important;
    object-fit:    cover;
    border:        1.5px solid var(--chat-border);
    display:       block;
}
.ph-chat__me-badge {
    position:      absolute;
    bottom:        -4px;
    right:         -4px;
    font-size:     1rem;
    line-height:   1;
    background:    var(--ink-800, #0f1628);
    border-radius: 50%;
    padding:       1px;
}
.ph-chat__me-nick {
    font-family:    var(--font-ui, 'Cinzel', serif);
    font-size:      1.2rem;
    color:          var(--text-muted, #7d94c0);
    letter-spacing: .04em;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
}

/* Compose */
.ph-chat__compose {
    display:       flex;
    align-items:   flex-end;
    gap:           0.6rem;
    background:    var(--ink-750, #131c32);
    border:        1.5px solid var(--border-default, rgba(100,140,220,.22));
    border-radius: var(--r-md, 8px);
    padding:       0.5rem 0.5rem 0.5rem 1rem;
    transition:    border-color .15s;
}
.ph-chat__compose:focus-within {
    border-color: var(--chat-accent);
    box-shadow:   0 0 0 2px var(--chat-accent-l);
}
.ph-chat__input {
    flex:        1;
    background:  none;
    border:      none;
    outline:     none;
    color:       var(--text-primary, #c8d4f0);
    font-family: var(--font-body, serif);
    font-size:   1.5rem;
    line-height: 1.4;
    resize:      none;
    max-height:  96px;
    overflow-y:  auto;
}
.ph-chat__input::placeholder { color: var(--text-faint, #3d4f70); }
.ph-chat__send {
    background:    var(--chat-accent);
    border:        none;
    color:         #fff;
    width:         32px;
    height:        32px;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    cursor:        pointer;
    flex-shrink:   0;
    transition:    background .15s, transform .1s;
}
.ph-chat__send:hover  { filter: brightness(1.15); transform: scale(1.05); }
.ph-chat__send:active { transform: scale(.95); }
.ph-chat__send:disabled { opacity: .45; cursor: default; }

.ph-chat__charcount {
    text-align: right;
    font-size:  1.1rem;
    color:      var(--text-faint, #3d4f70);
}
.ph-chat__charcount.ph-chat__charcount--warn { color: #e8805a; }

/* CTA no logueado */
.ph-chat__guest-cta {
    text-align: center;
    padding:    0.4rem 0;
}
.ph-chat__guest-cta p {
    color:       var(--text-muted, #7d94c0);
    font-size:   1.4rem;
    margin-bottom: 1rem;
}
.ph-chat__guest-btns { display: flex; gap: 0.8rem; justify-content: center; }
.ph-chat__btn-login,
.ph-chat__btn-register {
    font-family:    var(--font-ui, 'Cinzel', serif);
    font-size:      1.2rem;
    letter-spacing: .05em;
    padding:        0.6rem 1.4rem;
    border-radius:  var(--r-sm, 4px);
    cursor:         pointer;
    transition:     background .15s, border-color .15s;
}
.ph-chat__btn-login {
    background: none;
    border:     1.5px solid var(--chat-border);
    color:      var(--text-primary, #c8d4f0);
}
.ph-chat__btn-login:hover { border-color: var(--chat-accent); color: var(--text-bright); }
.ph-chat__btn-register {
    background: var(--chat-accent);
    border:     1.5px solid var(--chat-accent);
    color:      #fff;
}
.ph-chat__btn-register:hover { filter: brightness(1.12); }

/* ── Responsive ── */
@media (max-width: 480px) {
    .ph-chat {
        bottom: 1.6rem;
        right:  1.4rem;
    }
    .ph-chat__panel {
        width: calc(100vw - 2.8rem);
        right: -1.4rem;
    }
    .ph-chat__messages { max-height: 260px; }
}

/* ════════════════════════════════════════════════
   MODERACIÓN — estilos adicionales
   ════════════════════════════════════════════════ */

/* Badge "Mod" en cabecera */
.ph-chat__mod-badge {
    font-size:      1.15rem;
    background:     rgba(212,168,50,.18);
    border:         1px solid rgba(212,168,50,.4);
    color:          var(--gold-300, #e8c458);
    padding:        3px 9px;
    border-radius:  20px;
    font-family:    var(--font-ui, 'Cinzel', serif);
    letter-spacing: .04em;
}
.ph-chat__me-mod-tag {
    font-size:   1.2rem;
    margin-left: 2px;
    opacity:     .75;
}

/* Aviso de ban / mute */
.ph-chat__banned-notice,
.ph-chat__muted-notice {
    text-align:  center;
    padding:     1.4rem 1rem;
    font-size:   1.4rem;
    border-radius: var(--r-md, 8px);
}
.ph-chat__banned-notice {
    background: rgba(180,30,30,.14);
    border:     1px solid rgba(180,30,30,.3);
    color:      #f5a0a0;
}
.ph-chat__muted-notice {
    background: rgba(184,138,32,.12);
    border:     1px solid rgba(184,138,32,.3);
    color:      var(--gold-300, #e8c458);
}

/* ── Menú contextual (clic derecho / botón en burbuja) ── */
.ph-chat__ctx-menu {
    position:      fixed;    /* JS lo reposiciona */
    z-index:       10000;
    min-width:     200px;
    background:    var(--ink-800, #0f1628);
    border:        1.5px solid var(--border-strong, rgba(100,140,220,.38));
    border-radius: var(--r-md, 8px);
    box-shadow:    0 8px 32px rgba(0,0,0,.7);
    overflow:      hidden;
    animation:     ph-ctx-appear .12s ease;
}
.ph-chat__ctx-menu[hidden] { display: none; }

@keyframes ph-ctx-appear {
    from { opacity: 0; transform: scale(.95); }
    to   { opacity: 1; transform: scale(1); }
}

.ph-chat__ctx-item {
    display:     block;
    width:       100%;
    padding:     0.9rem 1.4rem;
    background:  none;
    border:      none;
    color:       var(--text-primary, #c8d4f0);
    font-size:   1.35rem;
    font-family: var(--font-body, serif);
    text-align:  left;
    cursor:      pointer;
    transition:  background .12s;
    white-space: nowrap;
}
.ph-chat__ctx-item:hover {
    background: var(--ink-650, #1e2b48);
}
.ph-chat__ctx-danger {
    color: #f5a0a0;
}
.ph-chat__ctx-danger:hover {
    background: rgba(180,30,30,.18);
}
.ph-chat__ctx-sep {
    height: 1px;
    background: var(--border-subtle, rgba(100,140,220,.12));
    margin: 4px 0;
}

/* Mostrar u ocultar elementos según si es mod */
.ph-chat__ctx-mod-only { display: none; }
.ph-chat--mod .ph-chat__ctx-mod-only { display: block; }

/* ── Botón de contexto (⋮) que aparece al pasar el ratón por el mensaje ── */
.ph-msg__actions {
    display:    flex;
    align-items: center;
    gap:         4px;
    margin-top:  4px;
    opacity:     0;
    transition:  opacity .15s;
}
.ph-msg:hover .ph-msg__actions,
.ph-msg:focus-within .ph-msg__actions {
    opacity: 1;
}
.ph-msg__action-btn {
    background:    none;
    border:        none;
    color:         var(--text-faint, #3d4f70);
    font-size:     1.2rem;
    cursor:        pointer;
    padding:       2px 5px;
    border-radius: 4px;
    transition:    color .12s, background .12s;
    line-height:   1;
}
.ph-msg__action-btn:hover {
    color:       var(--text-primary, #c8d4f0);
    background:  var(--ink-650, #1e2b48);
}
.ph-msg__action-btn--danger:hover {
    color:       #f5a0a0;
    background:  rgba(180,30,30,.16);
}

/* Mensaje eliminado (visible para mods) */
.ph-msg--deleted .ph-msg__bubble {
    opacity:       .45;
    font-style:    italic;
    border-style:  dashed;
}

/* ═══════════════════════════════════════════════════════════
   WIDGET FLOTANTE — PotterHead Chat
   ═══════════════════════════════════════════════════════════ */

/* ── FAB (botón flotante) ── */
.ph-chat-fab {
  position: fixed;
  bottom: 2.4rem;
  right: 2.4rem;
  z-index: 9990;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1.6rem .9rem 1.2rem;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid rgba(212,168,50,.45);
  border-radius: 50px;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,.55), 0 0 0 1px rgba(212,168,50,.1);
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ph-chat-fab:hover,
.ph-chat-fab:focus-visible {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 32px rgba(0,0,0,.65), 0 0 20px rgba(212,168,50,.2);
  border-color: rgba(212,168,50,.7);
  outline: none;
}
.ph-chat-fab:active { transform: scale(.97); }
.ph-chat-fab__icon  { font-size: 2rem; line-height: 1; }
.ph-chat-fab__label {
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.25rem;
  letter-spacing: .07em;
  color: #d4a832;
  text-transform: uppercase;
  white-space: nowrap;
}
.ph-chat-unread-badge {
  position: absolute;
  top: -.5rem;
  right: -.5rem;
  min-width: 2rem;
  height: 2rem;
  padding: 0 .5rem;
  background: #c0392b;
  border: 2px solid #0d1117;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-ui, sans-serif);
  animation: ph-badge-pop .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes ph-badge-pop { from { transform: scale(0); } to { transform: scale(1); } }

/* ── Panel ── */
/* El panel está SIEMPRE oculto por defecto — solo visible con .ph-chat-panel--open */
.ph-chat-panel {
  display: none;
  position: fixed;
  bottom: 7.2rem;
  right: 2.4rem;
  z-index: 9991;
  width: 370px;
  max-width: calc(100vw - 2rem);
  height: 520px;
  max-height: calc(100vh - 10rem);
  background: #0d1117;
  border: 1px solid rgba(212,168,50,.28);
  border-radius: 18px;
  box-shadow: 0 16px 60px rgba(0,0,0,.75), 0 0 0 1px rgba(212,168,50,.07);
  flex-direction: column;
  overflow: hidden;
}
.ph-chat-panel--open {
  display: flex;
  animation: ph-panel-in .25s cubic-bezier(.16,1,.3,1);
}
@keyframes ph-panel-in {
  from { opacity:0; transform: translateY(16px) scale(.97); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

/* Borde de color según casa */
.ph-chat-panel--gryffindor { border-top: 3px solid #9b2020; }
.ph-chat-panel--slytherin  { border-top: 3px solid #1a6b3a; }
.ph-chat-panel--ravenclaw  { border-top: 3px solid #1a3a8c; }
.ph-chat-panel--hufflepuff { border-top: 3px solid #a07820; }

/* ── Cabecera ── */
.ph-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(90deg, rgba(15,22,40,.98) 0%, rgba(13,17,23,.98) 100%);
  border-bottom: 1px solid rgba(212,168,50,.12);
  flex-shrink: 0;
}
.ph-chat-header__left  { display: flex; align-items: center; gap: .8rem; }
.ph-chat-header__icon  { font-size: 2.2rem; line-height: 1; }
.ph-chat-header__title {
  display: block;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.35rem;
  letter-spacing: .06em;
  color: #d4a832;
  text-transform: uppercase;
}
.ph-chat-header__online {
  display: block;
  font-size: 1.15rem;
  color: #6b7280;
  font-family: var(--font-ui, sans-serif);
  margin-top: .15rem;
}
.ph-chat-header__right { display: flex; align-items: center; gap: .6rem; }
.ph-chat-header__expand {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 8px;
  font-size: 1.5rem;
  color: #6b7280;
  text-decoration: none;
  transition: color .15s, background .15s;
}
.ph-chat-header__expand:hover { color: #d4a832; background: rgba(212,168,50,.08); }
.ph-chat-header__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: #6b7280;
  cursor: pointer;
  transition: color .15s, background .15s;
  padding: 0;
}
.ph-chat-header__close:hover { color: #e5534b; background: rgba(229,83,75,.1); }

/* ── Área de mensajes ── */
.ph-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.2rem 1.2rem .6rem;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  scroll-behavior: smooth;
}
.ph-chat-messages::-webkit-scrollbar       { width: 4px; }
.ph-chat-messages::-webkit-scrollbar-track { background: transparent; }
.ph-chat-messages::-webkit-scrollbar-thumb { background: rgba(212,168,50,.2); border-radius: 2px; }

/* ── Loading dots ── */
.ph-chat-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 2rem 0;
  flex: 1;
}
.ph-chat-loading__dot {
  width: 7px; height: 7px;
  background: rgba(212,168,50,.4);
  border-radius: 50%;
  animation: ph-dot-bounce .9s ease-in-out infinite;
}
.ph-chat-loading__dot:nth-child(2) { animation-delay: .15s; }
.ph-chat-loading__dot:nth-child(3) { animation-delay: .3s; }
@keyframes ph-dot-bounce {
  0%,80%,100% { transform: scale(.6); opacity:.4; }
  40%          { transform: scale(1);  opacity:1; }
}

/* ── Mensaje vacío ── */
.ph-chat__empty {
  text-align: center;
  color: #4b5563;
  font-size: 1.4rem;
  font-family: var(--font-body, 'Crimson Pro', serif);
  padding: 3rem 1rem;
  font-style: italic;
}

/* ── Burbuja de mensaje ── */
.ph-msg {
  display: flex;
  gap: .8rem;
  align-items: flex-start;
  max-width: 100%;
}
.ph-msg--own { flex-direction: row-reverse; }
.ph-msg__avatar-wrap { position: relative; flex-shrink: 0; }
.ph-msg__avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1.5px solid rgba(212,168,50,.25);
}
.ph-msg__house-badge {
  position: absolute;
  bottom: -3px; right: -3px;
  font-size: .9rem;
  line-height: 1;
  background: #0d1117;
  border-radius: 50%;
  padding: 1px;
}
.ph-msg__body { flex: 1; min-width: 0; }
.ph-msg--own .ph-msg__body { align-items: flex-end; display: flex; flex-direction: column; }
.ph-msg__meta {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin-bottom: .3rem;
}
.ph-msg--own .ph-msg__meta { flex-direction: row-reverse; }
.ph-msg__nick {
  font-family: var(--font-ui, sans-serif);
  font-size: 1.2rem;
  font-weight: 600;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.ph-msg--gryffindor .ph-msg__nick { color: #f5a0a0; }
.ph-msg--slytherin  .ph-msg__nick { color: #6de8a0; }
.ph-msg--ravenclaw  .ph-msg__nick { color: #80aaf0; }
.ph-msg--hufflepuff .ph-msg__nick { color: #e8c458; }
.ph-msg__time {
  font-size: 1.1rem;
  color: #374151;
  font-family: var(--font-ui, sans-serif);
  white-space: nowrap;
}
.ph-msg__bubble {
  display: inline-block;
  padding: .6rem 1rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 0 12px 12px 12px;
  font-family: var(--font-body, 'Crimson Pro', serif);
  font-size: 1.5rem;
  color: #d1d5db;
  line-height: 1.5;
  word-break: break-word;
  max-width: 240px;
}
.ph-msg--own .ph-msg__bubble {
  background: rgba(212,168,50,.1);
  border-color: rgba(212,168,50,.2);
  border-radius: 12px 0 12px 12px;
  color: #e5c97a;
}
.ph-msg--deleted .ph-msg__bubble {
  color: #4b5563;
  font-style: italic;
  background: transparent;
  border-color: transparent;
}
.ph-msg__actions {
  display: flex;
  gap: .3rem;
  margin-top: .3rem;
  opacity: 0;
  transition: opacity .15s;
}
.ph-msg:hover .ph-msg__actions { opacity: 1; }
.ph-msg__action-btn {
  padding: .25rem .5rem;
  border: none;
  background: rgba(255,255,255,.05);
  border-radius: 5px;
  color: #6b7280;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background .15s, color .15s;
}
.ph-msg__action-btn:hover               { background: rgba(255,255,255,.1); color: #d1d5db; }
.ph-msg__action-btn--danger:hover       { background: rgba(229,83,75,.15); color: #e5534b; }

/* ── Compositor ── */
.ph-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: .7rem;
  padding: .9rem 1.1rem;
  border-top: 1px solid rgba(212,168,50,.1);
  background: rgba(15,22,40,.6);
  flex-shrink: 0;
}
.ph-chat-composer__avatar { position: relative; flex-shrink: 0; }
.ph-chat-composer__av-img {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(212,168,50,.3);
  display: block;
}
.ph-chat-composer__av-placeholder {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(212,168,50,.15);
  border: 1.5px solid rgba(212,168,50,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #d4a832;
  font-family: var(--font-display, 'Cinzel', serif);
}
.ph-chat-composer__house-dot {
  position: absolute;
  bottom: -2px; right: -2px;
  font-size: .85rem;
  line-height: 1;
  background: #0d1117;
  border-radius: 50%;
  padding: 1px;
}
.ph-chat-composer__field { flex: 1; min-width: 0; }
.ph-chat-input {
  width: 100%;
  min-height: 3.4rem;
  max-height: 9.6rem;
  padding: .7rem 1rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(212,168,50,.18);
  border-radius: 10px;
  color: #d1d5db;
  font-family: var(--font-body, 'Crimson Pro', serif);
  font-size: 1.45rem;
  resize: none;
  line-height: 1.5;
  outline: none;
  transition: border-color .2s;
  overflow: hidden;
  display: block;
}
.ph-chat-input:focus      { border-color: rgba(212,168,50,.45); }
.ph-chat-input::placeholder { color: #4b5563; }
.ph-chat__charcount {
  text-align: right;
  font-size: 1.1rem;
  color: #374151;
  font-family: var(--font-ui, sans-serif);
  margin-top: .2rem;
  padding-right: .2rem;
  transition: color .2s;
}
.ph-chat__charcount--warn { color: #e5534b; }
.ph-chat-send-btn {
  flex-shrink: 0;
  width: 3.8rem;
  height: 3.8rem;
  border: none;
  background: linear-gradient(135deg, #d4a832, #b8881e);
  border-radius: 10px;
  color: #0d0a05;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s, transform .15s;
}
.ph-chat-send-btn:hover  { opacity: .88; transform: scale(1.04); }
.ph-chat-send-btn:active { transform: scale(.96); }
.ph-chat-send-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ── Panel invitado ── */
.ph-chat-guest {
  padding: 1.6rem 1.4rem;
  border-top: 1px solid rgba(212,168,50,.1);
  background: rgba(15,22,40,.6);
  text-align: center;
  flex-shrink: 0;
}
.ph-chat-guest p {
  font-family: var(--font-body, 'Crimson Pro', serif);
  font-size: 1.5rem;
  color: #9ca3af;
  margin: 0 0 1rem;
}
.ph-chat-guest__btns    { display: flex; gap: .8rem; justify-content: center; }
.ph-chat-guest__btn {
  padding: .6rem 1.6rem;
  border-radius: 8px;
  font-family: var(--font-display, 'Cinzel', serif);
  font-size: 1.2rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  transition: background .2s, color .2s;
}
.ph-chat-guest__btn--login {
  background: rgba(212,168,50,.12);
  border: 1px solid rgba(212,168,50,.3);
  color: #d4a832;
}
.ph-chat-guest__btn--login:hover { background: rgba(212,168,50,.22); }
.ph-chat-guest__btn--register {
  background: linear-gradient(135deg, #d4a832, #b8881e);
  color: #0d0a05;
  font-weight: 700;
}
.ph-chat-guest__btn--register:hover { opacity: .88; }

/* ── Menú contextual ── */
.ph-chat-ctx {
  position: fixed;
  z-index: 9999;
  background: #13192b;
  border: 1px solid rgba(212,168,50,.25);
  border-radius: 10px;
  padding: .4rem 0;
  min-width: 190px;
  box-shadow: 0 8px 32px rgba(0,0,0,.6);
  animation: ph-ctx-in .15s ease;
}
@keyframes ph-ctx-in {
  from { opacity:0; transform:scale(.95); }
  to   { opacity:1; transform:scale(1); }
}
.ph-chat__ctx-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: .75rem 1.2rem;
  background: none;
  border: none;
  color: #d1d5db;
  font-size: 1.35rem;
  font-family: var(--font-ui, sans-serif);
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.ph-chat__ctx-item:hover              { background: rgba(255,255,255,.06); }
.ph-chat__ctx-item--danger            { color: #e5534b; }
.ph-chat__ctx-item--danger:hover      { background: rgba(229,83,75,.1); }
.ph-chat__ctx-item--ok                { color: #4ade80; }
.ph-chat__ctx-sep {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin: .3rem 0;
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .ph-chat-panel {
    right: 0; left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 18px 18px 0 0;
    height: 65vh;
    max-height: 65vh;
  }
  .ph-chat-fab {
    right: 1.4rem;
    bottom: 1.4rem;
  }
}