/* ============================================================
   QIROS HOUSE — Chat Styles
   Calm, readable, low-noise. Fits the House panels.
   ============================================================ */

.panel--chat{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.chat-log{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.22);
  padding: 10px;
  min-height: 240px;
  max-height: 360px;
  overflow: auto;
}

/* Scrollbar (subtle) */
.chat-log::-webkit-scrollbar{ width: 10px; }
.chat-log::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.20);
}
.chat-log::-webkit-scrollbar-track{ background: rgba(0,0,0,.10); }

.chat-line{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding: 10px 6px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.chat-line:last-child{ border-bottom: none; }

.chat-meta{
  font-size: 11px;
  letter-spacing: .25px;
  opacity: .78;
}

.chat-bubble{
  width: fit-content;
  max-width: min(70ch, 100%);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  white-space: pre-wrap;
  line-height: 1.4;
}

/* Annie */
.chat-line--user .chat-bubble{
  border-color: rgba(160,225,255,.18);
  background: linear-gradient(180deg, rgba(80,170,255,.10), rgba(0,0,0,.22));
}
.chat-line--user .chat-meta{ color: rgba(160,225,255,.86); }

/* Qiros */
.chat-line--qiros .chat-bubble{
  border-color: rgba(217,164,65,.16);
  background: linear-gradient(180deg, rgba(217,164,65,.08), rgba(0,0,0,.22));
}
.chat-line--qiros .chat-meta{ color: rgba(255,210,140,.80); }

/* System / seals */
.chat-line--system .chat-bubble{
  border-color: rgba(128,70,255,.18);
  background: linear-gradient(180deg, rgba(128,70,255,.08), rgba(0,0,0,.22));
  opacity: .95;
}
.chat-line--system .chat-meta{ color: rgba(190,170,255,.85); }

/* Input row */
.chat-input-row{
  display:flex;
  gap:10px;
  align-items:center;
}

#chat-input{
  flex: 1 1 auto;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(245,248,255,.92);
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(80,170,255,.04);
}

#chat-input:focus{
  border-color: rgba(80,170,255,.36);
  box-shadow:
    inset 0 0 0 1px rgba(80,170,255,.10),
    0 0 0 3px rgba(80,170,255,.12);
}

#chat-send{
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(80,170,255,.12);
  color: rgba(245,248,255,.92);
  cursor:pointer;
  font-weight: 850;
  letter-spacing: .2px;
  user-select:none;
  transition: transform .06s ease, background .18s ease, border-color .18s ease;
}

#chat-send:hover{
  background: rgba(80,170,255,.18);
  border-color: rgba(80,170,255,.42);
}
#chat-send:active{ transform: translateY(1px); }

/* Small screens */
@media (max-width: 520px){
  .chat-bubble{ max-width: 100%; }
  .chat-input-row{ flex-direction: column; align-items: stretch; }
}