html, body { height: 100%; }
body { margin: 0; background: linear-gradient(180deg, #f7f6ff 0%, #eef5ff 100%); overflow: hidden; }
.qp-app { height: 100vh; display: flex; flex-direction: column; }
.qp-topbar { background: rgba(255,255,255,.96); backdrop-filter: blur(12px); padding: 6px 10px; flex: 0 0 auto; }
.qp-topbar-inner { display: flex; align-items: center; gap: 8px; }
.qp-logo-mini { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.qp-room-select-top { flex: 1 1 auto; min-width: 0; font-size: .68rem; border-radius: 14px; border-color: rgba(107, 77, 255, .16); padding-top: .35rem; padding-bottom: .35rem; }
.qp-profile-trigger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid rgba(0,0,0,.08); background: #fff; border-radius: 999px; padding: 0; }
.qp-avatar, .qp-profile-preview { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(87,89,255,.12); background: #fff; }
.qp-avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #6b4dff, #00b8ff); color: #fff; font-weight: 700; width: 36px; height: 36px; border-radius: 50%; }
.qp-profile-preview { width: 96px; height: 96px; margin: 0 auto; }
.qp-chat-main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 8px; gap: 8px; }
.qp-message-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 2px 12px; }
.qp-message-list::-webkit-scrollbar { width: 8px; }
.qp-message-list::-webkit-scrollbar-thumb { background: rgba(107,77,255,.2); border-radius: 99px; }
.qp-message { width: fit-content; max-width: min(88%, 760px); border-radius: 18px; padding: 10px 12px; margin-bottom: 10px; box-shadow: 0 8px 22px rgba(75, 86, 133, .08); word-break: break-word; display: flex; gap: 10px; align-items: flex-start; }
.qp-message.other { background: #fff; }
.qp-message.mine { background: linear-gradient(135deg, #edf1ff, #eefbff); margin-left: auto; }
.qp-message-avatar { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; flex: 0 0 auto; background: #fff; border: 1px solid rgba(87,89,255,.12); }
.qp-message-avatar-placeholder { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; font-weight: 700; background: linear-gradient(135deg, #6b4dff, #00b8ff); flex: 0 0 auto; }
.qp-message-body { min-width: 0; }
.qp-message-meta { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; font-size: .72rem; color: #6c757d; margin-bottom: 3px; }
.qp-message-private { color: #6b4dff; font-weight: 700; }
.qp-message-text { line-height: 1.45; font-size: .95rem; }
.qp-image-thumb { border-radius: 14px; max-height: 220px; }
.qp-composer-wrap { flex: 0 0 auto; position: relative; }
.qp-tools-popover { position: absolute; left: 112px; bottom: 56px; display: none; gap: 8px; z-index: 5; background: #fff; border: 1px solid rgba(107,77,255,.12); border-radius: 16px; padding: 8px; box-shadow: 0 10px 26px rgba(75, 86, 133, .12); }
.qp-tools-popover.show { display: inline-flex; }
.qp-icon-btn { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; border: 0; background: linear-gradient(135deg, #f2f4ff, #ecfbff); color: #4b53c9; padding: 0; }
.qp-composer { display: grid; grid-template-columns: minmax(110px, 150px) 1fr 46px; gap: 8px; align-items: center; }
.qp-private-select { font-size: .78rem; border-radius: 14px; min-width: 0; max-width: 150px; }
.qp-message-input { border-radius: 14px; border: 1px solid rgba(107,77,255,.12); min-width: 0; height: 44px; }
.qp-send-btn { width: 46px; height: 44px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg, #6b4dff, #00b8ff); box-shadow: 0 10px 22px rgba(89,83,255,.22); padding: 0; }
.qp-ad-box { margin-top: 8px; border: 2px dashed rgba(107,77,255,.16); border-radius: 14px; min-height: 56px; display: flex; align-items: center; justify-content: center; color: #6c757d; background: rgba(255,255,255,.75); font-size: .88rem; }
.qp-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 10px; }
.qp-emoji-btn { border: 1px solid rgba(0,0,0,.08); background: #fff; border-radius: 16px; font-size: 1.45rem; padding: 10px; }
.qp-color-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.qp-color-choice input { display:none; }
.qp-color-choice span { width: 28px; height: 28px; display:block; border-radius: 999px; border: 3px solid transparent; cursor: pointer; }
.qp-color-choice input:checked + span { border-color: #111; box-shadow: 0 0 0 2px #fff inset; }
.qp-rank-summary { display:flex; justify-content:space-between; gap:12px; padding:12px 14px; border-radius:16px; background:linear-gradient(135deg, #f2f4ff, #ecfbff); }
.qp-buy-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; }
.qp-buy-btn { border:1px solid rgba(107,77,255,.14); border-radius:16px; background:#fff; padding:12px 8px; text-align:center; }
.qp-buy-btn strong { display:block; color:#6b4dff; }
.qp-quiz-header { padding:16px 18px; display:flex; align-items:center; justify-content:space-between; background:linear-gradient(135deg, #6b4dff, #00b8ff); }
.qp-quiz-timer { min-width:48px; height:48px; border-radius:999px; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.18); color:#fff; font-weight:700; }
.qp-quiz-option { text-align:left; border-radius:14px; border:1px solid rgba(0,0,0,.08); background:#fff; padding:12px 14px; }
@media (max-width: 575.98px) {
  .qp-topbar { padding: 5px 8px; }
  .qp-room-select-top { font-size: .62rem; }
  .qp-chat-main { padding: 6px; }
  .qp-composer { grid-template-columns: minmax(92px, 112px) 1fr 42px; gap: 6px; }
  .qp-private-select { max-width: 112px; font-size: .7rem; }
  .qp-message { max-width: 94%; }
  .qp-tools-popover { left: 96px; bottom: 52px; }
  .qp-buy-grid { grid-template-columns: repeat(2, 1fr); }
}

.qp-quiz-wait-timer { font-size: 7px; line-height: 1.2; color: #6c7293; text-align: right; padding: 3px 4px 0 0; }

.qp-profile-modal-body { max-height: min(70vh, 640px); overflow-y: auto; }
.qp-message-input { color: #202833 !important; background: #fff !important; }
.qp-message-input::placeholder { color: #8a93a3; }