/* =====================================================================
 * 🤖 Bíp — robot quản gia kỷ niệm (room.js vẽ robot, bip.js mở bảng)
 * ===================================================================== */

/* ---------------- Robot trong phòng ---------------- */
.room-depth > .furn-robot {
  pointer-events: auto;
  cursor: pointer;
}

:is(.furn-robot, .bp-face) .bot-shell {
  fill: #f6f7ff;
  stroke: #c6cbee;
  stroke-width: 1.2;
}

:is(.furn-robot, .bp-face) .bot-acc {
  fill: #8b7cff;
}

:is(.furn-robot, .bp-face) .bot-arm {
  fill: #e1e5fb;
  stroke: #c6cbee;
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: 50% 8%;
}

:is(.furn-robot, .bp-face) .bot-neck {
  fill: #9aa2c8;
}

:is(.furn-robot, .bp-face) .bot-stem {
  fill: none;
  stroke: #9aa2c8;
  stroke-width: 2.2;
  stroke-linecap: round;
}

:is(.furn-robot, .bp-face) .bot-visor {
  fill: #1b1f38;
}

:is(.furn-robot, .bp-face) .bot-eyes {
  filter: drop-shadow(0 0 1.6px #7ff6ff);
}

:is(.furn-robot, .bp-face) .bot-eye {
  fill: #7ff6ff;
  transform-box: fill-box;
  transform-origin: center;
  animation: bot-blink 4.8s infinite;
}

:is(.furn-robot, .bp-face) .bot-eyes-happy,
:is(.furn-robot, .bp-face) .bot-eyes-sleep {
  display: none;
  fill: none;
  stroke: #7ff6ff;
  stroke-width: 2.4;
  stroke-linecap: round;
  filter: drop-shadow(0 0 1.4px #7ff6ff);
}

:is(.furn-robot, .bp-face) .bot-cheek {
  fill: #ff8fb1;
  opacity: 0.6;
}

:is(.furn-robot, .bp-face) .bot-led {
  fill: #7ff6ff;
  filter: drop-shadow(0 0 2px #7ff6ff);
}

:is(.furn-robot, .bp-face) .bot-heart {
  fill: #ff7aa8;
  opacity: 0.9;
  transform-box: fill-box;
  transform-origin: center;
}

:is(.furn-robot, .bp-face) .bot-jet {
  fill: #7ff6ff;
  opacity: 0.45;
  filter: blur(1.6px);
}

.furn-robot .bot-shadow {
  fill: #000000;
  opacity: 0.18;
  transform-box: fill-box;
  transform-origin: center;
  animation: bot-shadow 3.4s ease-in-out infinite;
}

.furn-robot .bot-body {
  animation: bot-hover 3.4s ease-in-out infinite;
}

.furn-robot:hover svg {
  filter: drop-shadow(0 0 5px rgba(127, 246, 255, 0.75));
}

/* Trạng thái */
:is(.furn-robot, .bp-face).sleep .bot-eyes,
:is(.furn-robot, .bp-face).happy .bot-eyes,
.furn-robot.nudge .bot-eyes {
  display: none;
}

:is(.furn-robot, .bp-face).sleep .bot-eyes-sleep,
:is(.furn-robot, .bp-face).happy .bot-eyes-happy,
.furn-robot.nudge .bot-eyes-happy {
  display: inline;
}

.furn-robot.sleep .bot-led {
  fill: #6b7194;
  filter: none;
}

.furn-robot.sleep .bot-jet {
  opacity: 0.1;
}

.furn-robot.sleep .bot-heart {
  opacity: 0.35;
}

.furn-robot.sleep .bot-body {
  animation-duration: 5.5s;
}

.furn-robot.news .bot-led,
.furn-robot.think .bot-led {
  animation: bot-led 0.9s steps(2, jump-none) infinite;
}

.furn-robot.think .bot-led {
  animation-duration: 0.45s;
}

.furn-robot.nudge .bot-heart {
  animation: bot-heart 1.1s ease-in-out infinite;
}

:is(.furn-robot, .bp-face).think .bot-eye {
  animation: bot-look 1.1s ease-in-out infinite;
}

.furn-robot.wave .bot-arm.r {
  animation: bot-wave 0.32s ease-in-out 6 alternate;
}

@keyframes bot-hover {
  50% { transform: translateY(-3.5px); }
}

@keyframes bot-shadow {
  50% { transform: scaleX(0.8); opacity: 0.11; }
}

@keyframes bot-blink {
  0%, 93%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.12); }
}

@keyframes bot-look {
  0%, 100% { transform: translateX(-2px); }
  50% { transform: translateX(2px); }
}

@keyframes bot-led {
  from { fill: #ffd166; }
  to { fill: #ff7aa8; }
}

@keyframes bot-heart {
  50% { transform: scale(1.35); opacity: 1; }
}

@keyframes bot-wave {
  from { transform: rotate(0deg); }
  to { transform: rotate(-150deg); }
}

/* Huy hiệu 📻 / 💌 trên đầu + "z z Z" khi ngủ */
.furn-robot .bot-badge {
  position: absolute;
  left: 50%;
  top: -24px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.95);
  font: 700 16px/20px "Segoe UI", system-ui, sans-serif;
  white-space: nowrap;
  transform: translateX(-50%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2), 0 0 0 2px rgba(127, 246, 255, 0.6);
  pointer-events: none;
  animation: bot-badge 1.8s ease-in-out infinite;
}

.furn-robot .bot-badge[hidden] {
  display: none;
}

@keyframes bot-badge {
  50% { translate: 0 -4px; }
}

.furn-robot .bot-zzz {
  position: absolute;
  left: 70%;
  top: 0;
  display: none;
  color: #8f97c4;
  font: 800 15px/1 "Segoe UI", system-ui, sans-serif;
  pointer-events: none;
}

.furn-robot.sleep .bot-zzz {
  display: block;
}

.furn-robot .bot-zzz span {
  position: absolute;
  opacity: 0;
  animation: bot-z 3.6s ease-in-out infinite;
}

.furn-robot .bot-zzz span:nth-child(2) {
  animation-delay: 1.2s;
}

.furn-robot .bot-zzz span:nth-child(3) {
  animation-delay: 2.4s;
  font-size: 19px;
}

@keyframes bot-z {
  0% { opacity: 0; transform: translate(0, 0); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(14px, -26px); }
}

/* Bong bóng lời nói trên đầu Bíp */
.bot-say {
  position: absolute;
  z-index: 9;
  max-width: min(250px, 46%);
  padding: 8px 26px 9px 12px;
  border-radius: 14px;
  background: #ffffff;
  color: #2d2a4a;
  font: 600 12.5px/1.42 "Segoe UI", system-ui, sans-serif;
  transform: translate(-50%, -100%);
  transform-origin: 50% 100%;
  box-shadow: 0 8px 22px rgba(30, 20, 60, 0.3), 0 0 0 2px rgba(127, 246, 255, 0.7);
  cursor: pointer;
}

.bot-say::after {
  content: "";
  position: absolute;
  left: calc(50% + var(--tail, 0px));
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 0 0 3px 0;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 2px 2px 0 0 rgba(127, 246, 255, 0.7);
}

.bot-say[hidden],
.bot-say.off {
  display: none;
}

.bot-say.pop {
  animation: bot-pop 0.38s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes bot-pop {
  from { scale: 0.6; opacity: 0; }
}

.bot-say-x {
  position: absolute;
  top: 3px;
  right: 4px;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: #8a86a8;
  font: 700 15px/1 "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}

.bot-say-x:hover {
  color: #2d2a4a;
}

/* =====================================================================
 * Bảng của Bíp
 * ===================================================================== */
.bp-zoom {
  position: absolute;
  inset: 0;
  z-index: 56;
  container-type: size;
  display: grid;
  place-items: center;
  padding: 10px;
}

.bp-zoom[hidden] {
  display: none;
}

.bp-panel {
  display: flex;
  flex-direction: column;
  width: min(660px, 100%);
  height: min(580px, 100%);
  overflow: hidden;
  border-radius: 18px;
  color: #e8ebff;
  background:
    radial-gradient(circle at 88% -12%, rgba(127, 246, 255, 0.2), transparent 45%),
    radial-gradient(circle at -5% 110%, rgba(255, 122, 168, 0.18), transparent 50%),
    linear-gradient(160deg, #1e2244, #151831 60%, #1a1534);
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(127, 246, 255, 0.28);
  font: 14px/1.45 "Segoe UI", system-ui, sans-serif;
}

.bp-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 10px 12px 9px 14px;
  border-bottom: 1px solid rgba(127, 246, 255, 0.16);
  background: rgba(255, 255, 255, 0.03);
}

.bp-face {
  display: inline-block;
  flex: none;
}

.bp-face svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.bp-face .bot-shadow {
  display: none;
}

.bp-face.head {
  width: 32px;
  height: 44px;
  margin: -4px 0 -6px;
}

.bp-face.mini {
  width: 26px;
  height: 36px;
  margin-bottom: 2px;
}

.bp-title {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bp-title b {
  color: #ffffff;
  font-size: 16px;
  letter-spacing: 0.3px;
}

.bp-sub {
  color: #9fa8d6;
  font-size: 11.5px;
}

.bp-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-left: auto;
}

.bp-btn {
  padding: 6px 12px;
  border: 1px solid rgba(127, 246, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #dfe4ff;
  font: 600 12.5px/1.2 "Segoe UI", system-ui, sans-serif;
  cursor: pointer;
}

.bp-btn:hover:not(:disabled) {
  border-color: #7ff6ff;
  background: rgba(127, 246, 255, 0.14);
}

.bp-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.bp-btn.primary {
  border-color: transparent;
  background: linear-gradient(135deg, #ff7aa8, #a77bff);
  color: #ffffff;
}

.bp-btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff6497, #9668ff);
}

.bp-btn.on,
.bp-btn.bp-tab.on {
  border-color: #7ff6ff;
  background: rgba(127, 246, 255, 0.18);
  color: #ffffff;
}

.bp-btn.icon {
  padding: 5px 9px;
}

.bp-btn.small {
  padding: 4px 10px;
  font-size: 12px;
}

.bp-btn.ghost {
  border-style: dashed;
  background: transparent;
}

.bp-btn.chip {
  border-radius: 12px;
  font-weight: 500;
  text-align: left;
}

.bp-btn.close {
  padding: 4px 10px;
}

.bp-btn.more {
  align-self: center;
}

.bp-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(127, 246, 255, 0.3) transparent;
}

.bp-foot {
  padding: 10px 12px 8px;
  border-top: 1px solid rgba(127, 246, 255, 0.16);
}

.bp-foot:empty {
  display: none;
}

/* Tin nhắn */
.bp-msg {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  max-width: 92%;
}

.bp-msg.me {
  align-self: flex-end;
}

.bp-bubble {
  min-width: 0;
  padding: 8px 12px;
}

.bp-msg.bot .bp-bubble {
  border: 1px solid rgba(127, 246, 255, 0.22);
  border-radius: 16px 16px 16px 4px;
  background: rgba(255, 255, 255, 0.07);
}

.bp-msg.me .bp-bubble {
  border-radius: 16px 16px 4px 16px;
  background: linear-gradient(135deg, #ff7aa8, #b07bff);
  color: #ffffff;
}

.bp-msg.pending {
  opacity: 0.7;
}

.bp-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bp-bubble.typing {
  display: flex;
  gap: 4px;
  padding: 12px 14px;
}

.bp-bubble.typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ff6ff;
  animation: bp-dot 1s ease-in-out infinite;
}

.bp-bubble.typing span:nth-child(2) {
  animation-delay: 0.15s;
}

.bp-bubble.typing span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes bp-dot {
  0%, 100% { opacity: 0.3; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

.bp-sources {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.bp-src summary {
  color: #9fe9ff;
  font-size: 12px;
  cursor: pointer;
}

.bp-src-text {
  max-height: 160px;
  margin-top: 4px;
  padding: 6px 8px;
  overflow: auto;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.28);
  color: #c9cff0;
  font-size: 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.bp-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}

.bp-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

/* Thẻ bật / tắt */
.bp-card {
  padding: 12px 14px;
  border: 1px solid rgba(127, 246, 255, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
}

.bp-card-title {
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
}

.bp-consent-rows {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 4px;
}

.bp-who {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 12.5px;
}

.bp-who.on {
  background: rgba(80, 220, 160, 0.16);
  color: #b8ffd9;
}

.bp-list {
  margin: 6px 0 0;
  padding-left: 18px;
  color: #c4cbef;
  font-size: 12.5px;
}

.bp-list li + li {
  margin-top: 4px;
}

.bp-note {
  color: #c4cbef;
  font-size: 13px;
}

.bp-note.soft {
  color: #8f97c4;
  font-size: 12px;
}

/* Ô hỏi */
.bp-compose {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px;
}

.bp-input {
  flex: 1;
  min-width: 0;
  min-height: 38px;
  max-height: 120px;
  padding: 9px 12px;
  border: 1px solid rgba(127, 246, 255, 0.3);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  color: #ffffff;
  font: 14px/1.4 "Segoe UI", system-ui, sans-serif;
  resize: none;
  box-sizing: border-box;
}

.bp-input::placeholder {
  color: #8f97c4;
}

.bp-input:focus {
  border-color: #7ff6ff;
  outline: none;
  box-shadow: 0 0 0 3px rgba(127, 246, 255, 0.15);
}

.bp-btn.send {
  width: 42px;
  height: 38px;
  padding: 0;
  border-radius: 12px;
  font-size: 16px;
}

.bp-left {
  flex-basis: 100%;
  margin-top: -3px;
  color: #8f97c4;
  font-size: 11px;
  text-align: right;
}

/* 📻 Bản tin */
.bp-radio {
  padding: 12px 14px 14px;
  border: 1px solid rgba(255, 209, 102, 0.35);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255, 209, 102, 0.14), rgba(255, 122, 168, 0.1));
}

.bp-radio-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.bp-radio-head b {
  color: #ffffff;
}

.bp-onair {
  padding: 2px 8px;
  border-radius: 6px;
  background: #ff4d6d;
  color: #ffffff;
  font: 800 10.5px/1.4 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 1px;
  animation: bp-onair 1.6s ease-in-out infinite;
}

@keyframes bp-onair {
  50% { box-shadow: 0 0 10px rgba(255, 77, 109, 0.8); }
}

.bp-chip-info {
  margin-left: auto;
  color: #ffe6a7;
  font-size: 11.5px;
}

.bp-radio-text {
  color: #fff6e6;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* 📔 Sổ trí nhớ */
.bp-month {
  margin-top: 4px;
  color: #7ff6ff;
  font: 700 12px/1 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.bp-mem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
}

.bp-mem-ic {
  margin-top: 2px;
  font-size: 20px;
  line-height: 1;
}

.bp-mem-main {
  flex: 1;
  min-width: 0;
}

.bp-mem-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
}

.bp-mem-day {
  color: #9fa8d6;
  font-size: 11.5px;
}

.bp-mem-top b {
  color: #ffffff;
  font-size: 14px;
}

.bp-mem-detail {
  margin-top: 2px;
  color: #c9cff0;
  font-size: 13px;
  overflow-wrap: anywhere;
}

.bp-btn.forget {
  opacity: 0.5;
}

.bp-mem:hover .bp-btn.forget,
.bp-btn.forget:focus-visible {
  opacity: 1;
}

@container (max-width: 560px) {
  /* Hẹp: tên Bíp + nút ✕ một hàng, các thẻ xuống hàng dưới */
  .bp-btn.close {
    order: 2;
    margin-left: auto;
  }

  .bp-tabs {
    order: 3;
    width: 100%;
    margin-left: 0;
  }

  .bp-btn.bp-tab {
    padding: 5px 9px;
  }

  .bp-msg {
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .furn-robot .bot-body,
  .furn-robot .bot-shadow,
  :is(.furn-robot, .bp-face) .bot-eye,
  .furn-robot .bot-badge,
  .furn-robot .bot-zzz span,
  .furn-robot.wave .bot-arm.r,
  .furn-robot.nudge .bot-heart,
  .bot-say.pop,
  .bp-onair,
  .bp-bubble.typing span {
    animation: none;
  }
}