/* ====================================================================
   POLISH LAYER — KakaoTalk-grade refinement
   Loaded last. Override base.css + app.css with cleaner choices.
   ==================================================================== */

:root {
  --kt-bg: #B2C7D9;
  --kt-bg-soft: #C9D6E2;
  --kt-out: #FEE500;
  --kt-out-dark: #F2D900;
  --kt-text: #191919;
  --kt-text-soft: #5A6675;
  --kt-bubble-in: #FFFFFF;
  --kt-divider: rgba(0,0,0,.06);
  --kt-shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --kt-shadow-md: 0 4px 14px rgba(0,0,0,.08);
  --kt-shadow-lg: 0 16px 48px rgba(0,0,0,.16);
  --kt-radius: 18px;
  --kt-radius-sm: 12px;
  --font-kr: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "맑은 고딕", "Malgun Gothic", "Segoe UI", Roboto, sans-serif;
}

html, body { font-family: var(--font-kr); background: var(--kt-bg); }

/* App canvas — chat takes full screen, layout via flex */
#app {
  background: var(--kt-bg);
  height: 100vh;
  height: 100svh;
  height: 100dvh; /* dynamic viewport — accounts for mobile keyboard / toolbar */
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  max-width: none;
}
/* iOS Safari standalone fix */
@supports (-webkit-touch-callout: none) {
  #app { min-height: -webkit-fill-available; }
}
.chat-container {
  background: linear-gradient(180deg, var(--kt-bg) 0%, var(--kt-bg-soft) 100%);
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 0;
}

/* ============ HEADER ============ */
.app-header {
  position: relative !important;
  flex: 0 0 auto;
  background: linear-gradient(180deg, rgba(178,199,217,.98), rgba(178,199,217,.92));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: max(10px, env(safe-area-inset-top, 0px)) 14px 10px;
  border-bottom: 1px solid rgba(0,0,0,.05);
  min-height: 56px;
  box-sizing: border-box;
  display: flex !important; align-items: center; justify-content: space-between; gap: 8px;
  z-index: 10;
}
.app-header > .header-left { flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 6px; }
.app-header > .header-center { flex: 0 1 auto; display: flex; align-items: center; justify-content: center; min-width: 0; }
.app-header > .header-right { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.header-left, .header-right { gap: 6px; }
.header-left h1 { font-size: 17px; font-weight: 700; letter-spacing: -.2px; color: #1f2933 !important; max-width: 200px; line-height: 1.2; }
.header-center { gap: 0; }
.header-message { font-size: 11px; color: rgba(0,0,0,.55); font-weight: 500; line-height: 1.3; }
.icon-btn { padding: 8px; width: 40px; height: 40px; transition: background .15s, transform .1s; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn:active { transform: scale(.92); }
.icon-btn:hover { background: rgba(255,255,255,.35); }
.icon-btn.login-kakao-btn { padding: 4px; width: 40px; height: 40px; }
.icon-btn.login-kakao-btn img { width: 32px; height: 32px; }
.header-avatar { width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.55); background: #ddd; background-size: cover; background-position: center; }

/* ============ MESSAGES ============ */
.messages-container {
  flex: 1 1 auto;
  padding: 12px 0;
  height: auto;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
}
.msg {
  display: flex !important;
  padding: 3px 14px;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 2px;
}
.msg.out { flex-direction: row-reverse; }
.msg.out .avatar { display: none; }
.msg .avatar {
  width: 40px; height: 40px; flex: 0 0 40px;
  border-radius: 14px;
  background-size: cover; background-position: center;
  box-shadow: var(--kt-shadow-sm); transition: transform .12s;
  cursor: pointer;
  align-self: flex-start;
}
.msg .avatar:active { transform: scale(.95); }
.msg .meta {
  max-width: min(76%, calc(100% - 56px));
  min-width: 0;
  display: flex; flex-direction: column;
  align-items: flex-start;
}
.msg.out .meta { align-items: flex-end; }
.msg.grouped .avatar { visibility: hidden; }
.msg.out.grouped .avatar { display: none; }
/* Tighter spacing for grouped (consecutive same-sender) messages */
.msg.grouped { margin-top: -1px; }
.msg.grouped .name-row { display: none; }
.msg:not(.grouped) { margin-top: 8px; }
.msg .name { font-size: 12.5px; color: #2c3340; font-weight: 600; margin: 0 8px 3px; }
.msg .bubble {
  background: var(--kt-bubble-in);
  padding: 9px 12px;
  border-radius: var(--kt-radius);
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--kt-text);
  box-shadow: var(--kt-shadow-sm);
  border-top-left-radius: 6px;
  max-width: 100%;
  letter-spacing: -.1px;
  word-break: break-word;
  overflow-wrap: anywhere;
  display: inline-block;
  min-width: 0;
  align-self: flex-start;
}
.msg.out .bubble { align-self: flex-end; border-top-left-radius: var(--kt-radius); border-top-right-radius: 6px; }
.msg .name { margin: 0 8px 3px; }
.msg .name-row { align-self: flex-start; }
.msg .reactions { align-self: flex-start; }
.msg.out .reactions { align-self: flex-end; }
.msg .actions { align-self: flex-start; }
.msg.out .actions { align-self: flex-end; }
.msg.out .bubble {
  background: var(--kt-out);
  color: var(--kt-text);
}
.msg.grouped .bubble { border-top-left-radius: var(--kt-radius); }
.msg.out.grouped .bubble { border-top-right-radius: var(--kt-radius); }
/* Media bubble: explicitly KEEP background + shadow visible (override legacy app.css) */
.msg .bubble.has-media { padding: 4px !important; background: var(--kt-bubble-in) !important; box-shadow: var(--kt-shadow-sm) !important; }
.msg.out .bubble.has-media { background: var(--kt-out) !important; }
/* Hashtag highlighting */
.hashtag { color: #2563eb; font-weight: 700; background: rgba(37,99,235,.08); padding: 0 4px; border-radius: 4px; }
.msg.out .hashtag { color: #1d4ed8; background: rgba(0,0,0,.08); }
/* Pinned message banner */
.pinned-banner {
  position: absolute; left: 0; right: 0; top: 0;
  background: linear-gradient(90deg, rgba(255,235,0,.95), rgba(255,205,0,.95));
  padding: 8px 16px; display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #1f2933; box-shadow: 0 2px 8px rgba(0,0,0,.08);
  z-index: 25; cursor: pointer;
}
.pinned-banner.hidden { display: none; }
.pinned-banner .pin-icon { font-size: 14px; flex-shrink: 0; }
.pinned-banner .pin-body { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pinned-banner .pin-by { font-size: 11px; color: #555; flex-shrink: 0; }
.pinned-banner .pin-close { background: transparent; border: 0; cursor: pointer; padding: 4px 8px; color: #555; font-size: 14px; }
.pinned-banner .pin-close:hover { color: #1f2933; }
.messages-container.has-pin { padding-top: 50px; }
/* Inline "consult" CTA under non-own messages (members only) */
.msg-cta-consult {
  display: inline-block; margin: 4px 6px 0;
  font-size: 11px; color: #2563eb; text-decoration: none; padding: 2px 8px;
  background: rgba(37,99,235,.08); border-radius: 999px; cursor: pointer;
  border: 0;
}
.msg-cta-consult:hover { background: rgba(37,99,235,.16); }
.msg.out .msg-cta-consult { display: none; }
.msg .bubble.has-media .media-wrap { display: block; line-height: 0; position: relative; }
.msg .bubble.has-media .media-item { display: block; line-height: 0; }
.msg .bubble.has-media img, .msg .bubble.has-media video {
  display: block;
  max-width: min(260px, 70vw); max-height: 360px;
  border-radius: 12px;
  width: auto; height: auto;
}
.msg .bubble.has-media .bubble-text { padding: 6px 8px 2px; line-height: 1.5; font-size: 14px; }
.msg .bubble .bubble-text { display: block; word-break: break-word; white-space: pre-wrap; }
.msg .bubble .edited-tag { font-size: 10.5px; color: rgba(0,0,0,.4); margin-left: 4px; }

/* Link preview card (Open Graph) */
.link-card {
  display: block; text-decoration: none; color: inherit;
  margin-top: 6px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
  max-width: 280px;
  transition: transform .12s, box-shadow .12s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.link-card:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.msg.out .link-card { background: rgba(255,255,255,.85); }
.link-card .lc-image {
  width: 100%; aspect-ratio: 1.91 / 1;
  background-size: cover; background-position: center; background-color: #eee;
}
.link-card .lc-info { padding: 8px 12px 10px; }
.link-card .lc-site { font-size: 11px; color: #97a3b3; margin-bottom: 2px; text-transform: lowercase; }
.link-card .lc-title { font-size: 13.5px; font-weight: 700; color: #1f2933; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-card .lc-desc { font-size: 12px; color: #5a6675; margin-top: 4px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.link-card .lc-skel { height: 90px; background: linear-gradient(90deg, #eee 0%, #f6f7f9 50%, #eee 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }

/* Multi-image gallery */
.media-wrap.multi { display: grid !important; gap: 3px; max-width: min(280px, 75vw); }
.media-wrap.multi.count-2 { grid-template-columns: 1fr 1fr; }
.media-wrap.multi.count-3 { grid-template-columns: 1fr 1fr 1fr; }
.media-wrap.multi.count-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.media-wrap.multi .media-item { aspect-ratio: 1; overflow: hidden; border-radius: 8px; }
.media-wrap.multi .media-item img, .media-wrap.multi .media-item video {
  width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  object-fit: cover; border-radius: 0;
}
.media-wrap.multi .media-more {
  position: absolute; right: 0; bottom: 0; width: calc(50% - 1.5px); height: calc(50% - 1.5px);
  background: rgba(0,0,0,.55); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700; border-radius: 8px; pointer-events: none;
}
/* legacy time style — overridden above */
.msg .reactions { padding: 4px 4px 0; gap: 5px; display: flex; flex-wrap: wrap; }
.msg .reactions .chip {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 12.5px;
  box-shadow: var(--kt-shadow-sm);
  transition: transform .1s;
}
.msg .reactions .chip:hover { transform: translateY(-1px); }
.msg .reactions .chip.active { background: linear-gradient(180deg, #ffe2e8, #ffd0d8); border-color: #ffabb6; color: #c4365b; font-weight: 600; }
.msg.system { justify-content: center; }
.msg.system .bubble { background: rgba(0,0,0,.07); color: #485361; font-size: 11.5px; padding: 5px 14px; box-shadow: none; border-radius: 999px; }
.msg.system .bubble-row { display: inline-flex; }

/* Persona inline tag */
.msg .name-row .persona-tag-inline {
  background: linear-gradient(90deg, #f3e8ff, #ddd0ff);
  color: #5b34ad;
  font-weight: 700;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 9.5px;
  letter-spacing: .3px;
}

/* Message hover actions — pill */
.msg .actions { gap: 2px; }
.msg .actions button {
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: var(--kt-shadow-sm);
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 13px;
  transition: transform .1s;
}
.msg .actions button:hover { transform: translateY(-1px); }

/* ============ INPUT BAR — flex item, pixel-aligned ============ */
.message-input-wrapper {
  position: relative !important;
  flex: 0 0 auto;
  display: flex !important;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
  box-sizing: border-box;
  z-index: 10;
}
.kakao-plus-btn,
.voice-btn,
.persona-pick-btn,
.send-btn {
  flex: 0 0 42px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 0; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s, transform .1s, filter .15s;
}
.kakao-plus-btn, .voice-btn {
  background: transparent; color: #5a6675;
}
.kakao-plus-btn:hover, .voice-btn:hover { background: rgba(0,0,0,.05); }
.kakao-plus-btn:active, .voice-btn:active { transform: scale(.92); }
.persona-pick-btn { background: linear-gradient(135deg, #8b5cf6, #6f42c1); color: #fff; box-shadow: 0 4px 12px rgba(111,66,193,.35); font-size: 18px; }
.persona-pick-btn:hover { filter: brightness(1.08); }
.persona-pick-btn:active { transform: scale(.92); }
.persona-pick-btn.hidden { display: none; }
.send-btn { background: var(--kt-out); color: var(--kt-text); box-shadow: 0 4px 14px rgba(254,229,0,.4); transition: transform .1s, filter .15s, background .15s; }
.send-btn:hover { filter: brightness(1.05); }
.send-btn:active { transform: scale(.92); }
.send-btn:disabled { background: #ebedf0; color: #b6bcc4; box-shadow: none; cursor: not-allowed; }
.send-btn svg { display: block; }
.kakao-plus-btn svg, .voice-btn svg, .persona-pick-btn svg { display: block; }

.input-container {
  flex: 1 1 auto; min-width: 0;
  background: #f3f5f8;
  border: 1px solid transparent;
  border-radius: 22px;
  padding: 0;
  min-height: 42px;
  max-height: 140px;
  display: flex;
  align-items: center;
  position: relative;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.input-container:focus-within {
  background: #fff;
  border-color: #c8d3e0;
  box-shadow: 0 0 0 3px rgba(178,199,217,.18);
}
.input-container:focus-within { border-color: #c8d3e0; background: #fff; }
.input-container textarea {
  background: transparent; border: 0; outline: none; resize: none;
  width: 100%;
  padding: 11px 16px;
  margin: 0;
  font-size: 15px; font-family: inherit;
  color: var(--kt-text);
  line-height: 1.4;
  max-height: 140px;
  box-sizing: border-box;
  display: block;
  vertical-align: middle;
  letter-spacing: -.1px;
}
.input-container textarea::placeholder { color: #9ba6b3; }
.input-container textarea::placeholder { color: #97a3b3; }

/* Hide voice button (not implemented) and recording indicator */
.voice-btn, .recording-indicator { display: none !important; }

/* File preview bar (flex item above input) — hidden until JS toggles display:flex inline */
.file-preview-bar {
  position: relative;
  flex: 0 0 auto;
  margin: 0 12px 6px; padding: 8px 12px;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
  align-items: center; gap: 10px;
  box-shadow: var(--kt-shadow-sm); z-index: 9;
}
.file-preview-content { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.file-preview-thumb { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; background: #eee; }
.file-preview-name { flex: 1; font-size: 13px; color: #2c3340; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-preview-cancel { background: transparent; border: 0; cursor: pointer; padding: 6px; border-radius: 50%; color: #5a6675; }
.file-preview-cancel:hover { background: rgba(0,0,0,.05); }

/* Reply preview (flex item above input) */
.reply-preview {
  position: relative;
  flex: 0 0 auto;
  margin: 0 12px 6px; padding: 8px 12px;
  background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 14px;
  display: flex; align-items: center; gap: 10px;
  box-shadow: var(--kt-shadow-sm); z-index: 9;
}
.reply-preview.hidden { display: none; }
.reply-bar { width: 3px; align-self: stretch; background: linear-gradient(180deg, #4a90e2, #2563eb); border-radius: 2px; }
.reply-info { flex: 1; min-width: 0; }
.reply-name { font-size: 12px; color: #2563eb; font-weight: 700; }
.reply-body { font-size: 13px; color: #5a6675; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reply-close { background: transparent; border: 0; cursor: pointer; padding: 6px; border-radius: 50%; color: #5a6675; }
.reply-close:hover { background: rgba(0,0,0,.05); }

/* Quoted preview inside a sent message bubble */
.msg .quoted {
  border-left: 3px solid rgba(0,0,0,.18);
  padding: 4px 8px; margin: -2px -2px 6px; border-radius: 8px;
  background: rgba(0,0,0,.04); font-size: 12px; line-height: 1.35;
  cursor: pointer;
  display: block; max-width: 100%;
}
.msg.out .quoted { background: rgba(0,0,0,.08); border-left-color: rgba(0,0,0,.32); }
.msg .quoted .qname { font-weight: 700; color: #2563eb; font-size: 11.5px; }
.msg .quoted .qbody { color: #5a6675; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 240px; }

/* Persona tag floating over input — repositioned */
.persona-tag {
  position: absolute; left: 12px; top: -26px;
  background: linear-gradient(135deg, #8b5cf6, #6f42c1);
  color: #fff; font-size: 11px;
  padding: 3px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 4px 10px rgba(111,66,193,.35);
  white-space: nowrap;
}
.persona-tag button {
  background: rgba(255,255,255,.25); border: 0; color: #fff; cursor: pointer;
  width: 16px; height: 16px; border-radius: 50%; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px;
}
.persona-tag.hidden { display: none; }

/* ============ SIDE MENU ============ */
.side-menu {
  width: 320px;
  background: #fff;
  box-shadow: 8px 0 32px rgba(0,0,0,.08);
  display: flex; flex-direction: column;
}
.side-menu-header {
  padding: max(28px, calc(env(safe-area-inset-top, 0px) + 16px)) 20px 22px;
  background: linear-gradient(135deg, var(--kt-bg), var(--kt-bg-soft));
  border-bottom: 0;
  flex: 0 0 auto;
}
.side-menu-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 10px calc(14px + env(safe-area-inset-bottom)); }
.menu-avatar { width: 60px; height: 60px; border-radius: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.12); background-size: cover; background-position: center; }
.menu-display-name { font-size: 17px; font-weight: 700; color: #1f2933; }
.menu-username { font-size: 12.5px; color: #5a6675; }
.menu-role-badge {
  background: #4a90e2; padding: 3px 10px; font-size: 10.5px; font-weight: 700; border-radius: 999px; box-shadow: var(--kt-shadow-sm);
}
.menu-unread-dot {
  position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%;
  background: #ee4444; border: 2px solid rgba(178,199,217,1);
}
.menu-unread-dot.hidden { display: none; }
#menuBtn { position: relative; }
.menu-role-badge.qq2 { background: #38a169; }
.menu-role-badge.qq3 { background: #ed8936; }
.menu-role-badge.admin { background: linear-gradient(135deg, #6f42c1, #4a90e2); }
.side-menu-content { padding: 14px 10px; }
.menu-section-header { font-size: 11px; font-weight: 700; color: #97a3b3; padding: 8px 14px; letter-spacing: .8px; text-transform: uppercase; }
.menu-item, .room-item { padding: 12px 14px; border-radius: 12px; font-size: 14.5px; font-weight: 500; }
.menu-item:hover, .room-item:hover { background: rgba(0,0,0,.04); }
.room-item.active { background: rgba(178,199,217,.28); color: #1f2933; font-weight: 700; }
.room-item.active::before {
  content: ""; position: absolute; left: -10px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 26px; background: #4a90e2; border-radius: 0 2px 2px 0;
}
.room-item { position: relative; }
.room-icon { width: 36px; height: 36px; border-radius: 12px; box-shadow: var(--kt-shadow-sm); display: inline-flex; align-items: center; justify-content: center; color: #1f2933; background: #FEE500; flex: 0 0 36px; }
.room-icon-img { width: 36px; height: 36px; border-radius: 12px; box-shadow: var(--kt-shadow-sm); }
.room-unread { font-weight: 700; padding: 2px 8px; min-width: 22px; text-align: center; }
.menu-item.danger { color: #e53e3e; }

/* ============ MODALS ============ */
.modal { background: rgba(15,22,30,.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: backdropIn .18s ease; }
@keyframes backdropIn { from { background-color: rgba(15,22,30,0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } to { background-color: rgba(15,22,30,.55); } }
.modal-content { border-radius: 20px; box-shadow: var(--kt-shadow-lg); animation: modalIn .22s cubic-bezier(.2,.9,.3,1); }
@keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }

/* Auth modal polish */
.auth-modal { background: rgba(15,22,30,.6); }
.auth-container { padding: 40px 28px 32px; border-radius: 22px; }
.auth-logo-img { box-shadow: 0 14px 40px rgba(0,0,0,.18); border-radius: 24px; }
.auth-title { font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
.auth-subtitle { font-size: 13.5px; }
.auth-form input { border-radius: 14px; height: 52px; padding: 0 18px; font-size: 15.5px; background: #f6f7f9; border: 1px solid #f6f7f9; width: 100%; box-sizing: border-box; }
.pw-input-wrap { position: relative; }
.pw-input-wrap .pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: transparent; border: 0; cursor: pointer; padding: 8px; font-size: 16px; opacity: .5;
  width: 40px; height: 40px; border-radius: 50%;
}
.pw-input-wrap .pw-toggle:hover { background: rgba(0,0,0,.05); opacity: 1; }
.pw-input-wrap input { padding-right: 50px; }
.auth-form input:focus { border-color: var(--kt-bg); background: #fff; box-shadow: 0 0 0 4px rgba(178,199,217,.22); }
.auth-btn { border-radius: 14px; height: 54px; font-weight: 700; box-shadow: 0 8px 20px rgba(178,199,217,.4); }
.kakao-login-btn { border-radius: 14px; box-shadow: 0 6px 16px rgba(254,229,0,.35); }

/* Profile modal */
.profile-modal-rich .profile-top-section {
  background: linear-gradient(160deg, var(--kt-bg) 0%, var(--kt-bg-soft) 100%);
  padding-bottom: 22px;
}
.profile-avatar-large { width: 124px; height: 124px; border-radius: 28px; box-shadow: 0 10px 28px rgba(0,0,0,.18); }
.profile-display-name { font-size: 23px; font-weight: 800; letter-spacing: -.3px; }
.profile-message-btn {
  border-radius: 14px; box-shadow: 0 6px 16px rgba(254,229,0,.35);
}
.profile-grid { gap: 3px; }
.profile-grid .cell { border-radius: 8px; }

/* ============ ADMIN PANEL ============ */
.admin-panel { background: #f8fafc; }
.admin-header { padding: 14px 18px; box-shadow: 0 1px 0 rgba(0,0,0,.04); }
.admin-header h2 { font-size: 17px; font-weight: 700; }
.admin-tab { font-size: 14px; }
.admin-tab.active { color: #1f2933; border-bottom-color: #4a90e2; }
.member-card, .persona-card, .block-card {
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  box-shadow: var(--kt-shadow-sm);
  padding: 14px;
  display: flex !important;
  align-items: center;
  gap: 12px;
}
.member-card .info, .persona-card .info, .block-card .info { flex: 1 1 auto; min-width: 0; }
.member-card .actions, .persona-card .actions, .block-card .actions { flex: 0 0 auto; display: flex; gap: 6px; flex-wrap: wrap; }
.member-card .avatar-wrap, .persona-card .avatar-wrap { flex: 0 0 auto; }
.member-card .avatar, .persona-card .avatar { border-radius: 14px; width: 48px; height: 48px; }
.member-card .name, .persona-card .name { font-size: 14.5px; }
.tag { font-size: 10.5px; font-weight: 600; padding: 2px 8px; }
.btn-primary { border-radius: 10px; box-shadow: 0 4px 12px rgba(178,199,217,.4); font-weight: 700; }
.btn-secondary { border-radius: 10px; }
.btn-danger { border-radius: 10px; box-shadow: 0 4px 12px rgba(229,62,62,.3); }
.settings-form { border-radius: 16px; box-shadow: var(--kt-shadow-md); padding: 20px; }
.settings-form input, .settings-form textarea { border-radius: 10px; }
/* ============ 관리자 패널 - 상담 탭 ============ */
.admin-tab-consult.hidden { display: none; }

/* 종목추천(qq2) 계정 메시지 글씨 굵게 */
.msg.qq2-msg .bubble { font-weight: 700; }

/* 채팅 잠금 버튼 — 잠긴 상태 강조 */
#chatLockBtn.chat-locked-on { color: #e53e3e; }
#chatLockBtn.chat-locked-on svg { fill: rgba(229,62,62,.12); }

/* 역할별 관리자 탭 노출 (CSS로 안정적 제어 — JS 깜빡임 방지) */
/* 상담 탭은 qq1/qq2만 */
#adminPanel[data-role="qq3"] .admin-tab[data-tab="consult"],
#adminPanel:not([data-role="qq1"]):not([data-role="qq2"]) .admin-tab[data-tab="consult"] { display: none !important; }
/* qq3(화력): 메인룸 발송 + 계정 관리만, 나머지 숨김 */
#adminPanel[data-role="qq3"] .admin-tab[data-tab="members"],
#adminPanel[data-role="qq3"] .admin-tab[data-tab="blocks"],
#adminPanel[data-role="qq3"] .admin-tab[data-tab="settings"] { display: none !important; }
.admin-panel { display: flex !important; flex-direction: column; }
.admin-body { flex: 1 1 auto; min-height: 0; overflow: hidden; padding: 12px; display: flex; flex-direction: column; }
.admin-pane { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.admin-pane:not(.active) { display: none; }
.consult-pane { padding: 0; overflow: hidden; }
.consult-pane.active { display: flex !important; flex-direction: column; }
.consult-layout {
  display: flex; flex: 1 1 auto; min-height: 0;
  border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: var(--kt-shadow-md);
}
.consult-sidebar {
  width: 320px; flex: 0 0 320px;
  border-right: 1px solid #ececec;
  display: flex; flex-direction: column;
  background: #fafbfc;
}
.consult-sidebar-header { padding: 12px; border-bottom: 1px solid #ececec; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.consult-sidebar-header input {
  width: 100%; height: 36px; padding: 0 12px;
  border: 1px solid #e3e6ea; border-radius: 18px;
  font-size: 13px; outline: none; background: #f3f5f8;
  box-sizing: border-box;
}
.consult-sidebar-header input:focus { background: #fff; border-color: #B2C7D9; }
.consult-sidebar-header #broadcastBtn {
  width: 100%; height: 34px;
  background: linear-gradient(135deg, #4a90e2, #2563eb); color: #fff; border: 0;
  border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 13px;
  box-shadow: 0 4px 10px rgba(74,144,226,.25);
}
.consult-sidebar-header #broadcastBtn:hover { filter: brightness(1.05); }

.consult-reply-preview {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 12px; margin: 0 12px; border-radius: 12px;
  background: #fff; border: 1px solid #e3e6ea; box-shadow: var(--kt-shadow-sm);
}
.consult-reply-preview.hidden { display: none; }
.consult-reply-preview .reply-bar { width: 3px; align-self: stretch; background: #4a90e2; border-radius: 2px; }
.consult-reply-preview .reply-info { flex: 1; min-width: 0; }
.consult-reply-preview .reply-name { font-size: 11.5px; color: #2563eb; font-weight: 700; }
.consult-reply-preview .reply-body { font-size: 12.5px; color: #5a6675; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.consult-reply-preview button { background: transparent; border: 0; cursor: pointer; padding: 6px; border-radius: 50%; color: #5a6675; }
.consult-reply-preview button:hover { background: rgba(0,0,0,.05); }

/* Quoted reply inside admin consult bubble */
.consult-quoted {
  border-left: 3px solid rgba(0,0,0,.18);
  padding: 4px 8px; margin: -2px -2px 6px; border-radius: 8px;
  background: rgba(0,0,0,.04); font-size: 12px; line-height: 1.35; cursor: pointer;
  display: block; max-width: 240px;
}
.consult-quoted .qname { font-weight: 700; color: #2563eb; font-size: 11px; }
.consult-quoted .qbody { color: #5a6675; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.consult-list { flex: 1; overflow-y: auto; }
.consult-list-item {
  display: flex; gap: 10px; padding: 12px 14px;
  border-bottom: 1px solid #f4f4f4; cursor: pointer;
  align-items: center;
}
.consult-list-item:hover { background: #f3f5f8; }
.consult-list-item.active { background: rgba(178,199,217,.32); }
.consult-list-item .avatar {
  width: 42px; height: 42px; flex: 0 0 42px;
  border-radius: 14px; background: #ddd; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff;
}
.consult-list-item .info { flex: 1; min-width: 0; }
.consult-list-item .info .top { display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.consult-list-item .info .name { font-weight: 600; font-size: 14px; color: #1f2933; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.consult-list-item .info .when { font-size: 11px; color: #97a3b3; flex-shrink: 0; }
.consult-list-item .info .last { font-size: 12.5px; color: #5a6675; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.consult-list-item .info .last.unread { color: #1f2933; font-weight: 600; }
.consult-list-item .badge {
  background: #ee4444; color: #fff; font-size: 11px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; margin-left: 6px; flex-shrink: 0;
}

.consult-chat { flex: 1; display: flex; flex-direction: column; background: linear-gradient(180deg, #B2C7D9 0%, #C9D6E2 100%); min-width: 0; }
.consult-chat-header {
  padding: 14px 18px; background: rgba(255,255,255,.9);
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex; align-items: center; gap: 12px; min-height: 48px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.consult-chat-header .placeholder { color: #97a3b3; font-size: 14px; font-weight: 500; }
.consult-chat-header .info { flex: 1; min-width: 0; }
.consult-chat-header .info .name { font-weight: 700; font-size: 15px; color: #1f2933; }
.consult-chat-header .info .sub { font-size: 11.5px; color: #5a6675; }
.consult-chat-header .actions { display: flex; gap: 6px; }
.consult-chat-header .actions button {
  height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #d6dade;
  background: #fff; cursor: pointer; font-size: 12.5px; color: #2c3340;
}
.consult-chat-header .actions button:hover { background: #f3f5f8; }
.consult-chat-header .actions button.danger { color: #e53e3e; border-color: #fed7d7; }

.consult-messages { flex: 1; overflow-y: auto; padding: 16px 0; }
.consult-messages .placeholder-empty { text-align: center; padding: 40px 20px; color: #5a6675; font-size: 14px; }

.consult-input-bar {
  display: flex; gap: 8px; padding: 12px;
  background: rgba(255,255,255,.95); border-top: 1px solid rgba(0,0,0,.06);
  align-items: flex-end;
  flex: 0 0 auto;
}
.consult-input-bar.hidden { display: none; }
.consult-icon-btn {
  width: 36px; height: 36px; flex: 0 0 36px;
  border: 0; border-radius: 50%; background: #f3f5f8;
  cursor: pointer; font-size: 20px; color: #5a6675;
  display: inline-flex; align-items: center; justify-content: center;
}
.consult-icon-btn:hover { background: #e3e6ea; }
.consult-input-bar textarea {
  flex: 1; min-width: 0; min-height: 36px; max-height: 140px;
  padding: 8px 14px; border: 1px solid #e3e6ea;
  border-radius: 18px; background: #f3f5f8;
  font-family: inherit; font-size: 14px; resize: none; outline: none;
  line-height: 1.4;
}
.consult-input-bar textarea:focus { background: #fff; border-color: #B2C7D9; }
.consult-send-btn {
  height: 36px; padding: 0 18px; border: 0; border-radius: 18px;
  background: #FEE500; color: #191919; font-weight: 700;
  cursor: pointer; font-size: 14px; box-shadow: 0 4px 10px rgba(254,229,0,.35);
}
.consult-send-btn:hover { filter: brightness(1.05); }
.consult-send-btn:disabled { background: #e5e7eb; color: #9ca3af; box-shadow: none; cursor: not-allowed; }
.consult-file-preview {
  position: relative; flex: 0 0 auto;
  margin: 0 12px 6px;
  background: #fff; border: 1px solid #e3e6ea; border-radius: 12px;
  padding: 8px 12px; display: flex; gap: 10px; align-items: center;
  font-size: 13px; box-shadow: var(--kt-shadow-sm);
}
.consult-file-preview.hidden { display: none; }
.consult-file-preview button { margin-left: auto; background: transparent; border: 0; cursor: pointer; color: #5a6675; padding: 4px 8px; border-radius: 6px; }
.consult-file-preview button:hover { background: #f3f5f8; }

/* Mobile adjustment */
@media (max-width: 720px) {
  .consult-layout { flex-direction: column; }
  .consult-sidebar { width: 100%; flex: 0 0 auto; max-height: 40%; border-right: 0; border-bottom: 1px solid #ececec; }
  .consult-pane { padding: 0; }
}

/* ============ 관리자 패널 - 메인룸 발송 (페르소나 빠른 전환) ============ */
.bulk-pane { padding: 0; overflow: hidden; }
.bulk-pane.active { display: flex !important; flex-direction: column; }
.bulk-layout {
  display: flex; flex: 1 1 auto; min-height: 0;
  border-radius: 14px; overflow: hidden;
  background: #fff; box-shadow: var(--kt-shadow-md);
}
.bulk-sidebar {
  width: 280px; flex: 0 0 280px;
  border-right: 1px solid #ececec;
  display: flex; flex-direction: column;
  background: #fafbfc;
}
.bulk-sidebar-header { padding: 12px; border-bottom: 1px solid #ececec; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.bulk-sidebar-header input {
  width: 100%; height: 36px; padding: 0 12px; border: 1px solid #e3e6ea;
  border-radius: 18px; background: #f3f5f8; font-size: 13px; outline: none; box-sizing: border-box;
}
.bulk-current {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; background: linear-gradient(135deg, #ede7ff, #ddd0ff);
  border-radius: 8px; font-size: 12px; color: #5b34ad;
}
.bulk-current .lbl { font-weight: 600; }
.bulk-current span:nth-child(2) { font-weight: 700; color: #1f2933; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulk-current button { background: rgba(255,255,255,.6); border: 0; cursor: pointer; width: 22px; height: 22px; border-radius: 50%; color: #5b34ad; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.bulk-current button.hidden { display: none; }

/* Consult sidebar — group sections */
.consult-group-controls { display: flex; gap: 6px; }
.consult-group-controls button {
  flex: 1; height: 32px; padding: 0 10px; border: 1px solid #e3e6ea;
  background: #fff; border-radius: 8px; cursor: pointer; font-size: 12px; color: #2c3340; font-weight: 600;
}
.consult-group-controls button:hover { background: #f3f5f8; }
.consult-group-controls button#broadcastBtn { background: linear-gradient(135deg, #4a90e2, #2563eb); color: #fff; border-color: transparent; box-shadow: 0 2px 6px rgba(74,144,226,.25); }
.consult-group-controls button#broadcastBtn:hover { filter: brightness(1.05); }

.consult-group {
  border-bottom: 1px solid #ececec;
  background: #fff;
}
.consult-group-header {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; cursor: pointer; user-select: none;
  background: #fafbfc; font-size: 13px; font-weight: 700; color: #2c3340;
  position: sticky; top: 0; z-index: 5;
}
.consult-group-header:hover { background: #f3f5f8; }
.consult-group-header .caret { font-size: 11px; color: #97a3b3; transition: transform .15s; flex-shrink: 0; width: 14px; }
.consult-group.collapsed .caret { transform: rotate(-90deg); }
.consult-group-header .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.consult-group-header .count { font-size: 11px; color: #97a3b3; font-weight: 600; background: rgba(0,0,0,.04); padding: 1px 8px; border-radius: 999px; }
.consult-group-header .menu-btn { background: transparent; border: 0; cursor: pointer; color: #97a3b3; padding: 4px 6px; border-radius: 6px; font-size: 14px; line-height: 1; }
.consult-group-header .menu-btn:hover { background: rgba(0,0,0,.06); color: #2c3340; }
.consult-group.collapsed .consult-group-items { display: none; }
.consult-group-items { display: block; }

/* Member item folder tag */
.consult-list-item .folder-tag {
  font-size: 10px; color: #2c3340; background: #f0f0f0; padding: 1px 6px; border-radius: 999px;
  margin-left: 6px; flex-shrink: 0;
}

.bulk-persona-list { flex: 1; overflow-y: auto; padding: 6px; }
.bulk-persona-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px; cursor: pointer; transition: background .12s;
}
.bulk-persona-item:hover { background: #f3f5f8; }
.bulk-persona-item.selected { background: rgba(111,66,193,.1); border: 1px solid #c4a8f3; }
.bulk-persona-item .avatar {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px;
  background: #ddd; background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px;
}
.bulk-persona-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bulk-persona-item .name { font-size: 13px; font-weight: 600; color: #1f2933; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bulk-persona-item .note { font-size: 11px; color: #92591a; background: #fff8e1; border-left: 2px solid #ffb300; padding: 2px 6px; border-radius: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.bulk-memo-btn { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #e3e6ea; background: #fff; cursor: pointer; font-size: 13px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #5a6675; }
.bulk-memo-btn:hover { background: #f3f5f8; }
.bulk-persona-item.selected .bulk-memo-btn { border-color: #c4a8f3; background: #fff; }

.bulk-chat { flex: 1; display: flex; flex-direction: column; background: linear-gradient(180deg, #B2C7D9 0%, #C9D6E2 100%); min-width: 0; }
.bulk-chat-header { padding: 12px 18px; background: rgba(255,255,255,.9); border-bottom: 1px solid rgba(0,0,0,.06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.bulk-chat-header .title { font-size: 15px; font-weight: 700; color: #1f2933; }
.bulk-chat-header .hint { font-size: 11.5px; color: #5a6675; margin-top: 2px; }
.bulk-messages { flex: 1; overflow-y: auto; padding: 16px 0; }
.bulk-input-bar { display: flex; gap: 8px; padding: 12px; background: rgba(255,255,255,.95); border-top: 1px solid rgba(0,0,0,.06); align-items: flex-end; flex: 0 0 auto; }
.bulk-input-bar textarea { flex: 1; min-width: 0; min-height: 36px; max-height: 140px; padding: 8px 14px; border: 1px solid #e3e6ea; border-radius: 18px; background: #f3f5f8; font-family: inherit; font-size: 14px; resize: none; outline: none; line-height: 1.4; }
.bulk-input-bar textarea:focus { background: #fff; border-color: #B2C7D9; }
.bulk-file-preview { margin: 0 12px 6px; padding: 8px 12px; background: #fff; border: 1px solid #e3e6ea; border-radius: 12px; display: flex; gap: 10px; align-items: center; font-size: 13px; box-shadow: var(--kt-shadow-sm); flex: 0 0 auto; }
.bulk-file-preview button { margin-left: auto; background: transparent; border: 0; cursor: pointer; color: #5a6675; padding: 4px 8px; border-radius: 6px; }
.bulk-file-preview.hidden { display: none; }

@media (max-width: 720px) {
  .bulk-layout { flex-direction: column; }
  .bulk-sidebar { width: 100%; flex: 0 0 auto; max-height: 36%; border-right: 0; border-bottom: 1px solid #ececec; }
}

.folder-dropdown {
  background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 6px; z-index: 600; min-width: 180px; max-height: 60vh; overflow-y: auto;
  animation: menuIn .12s ease; border: 1px solid rgba(0,0,0,.06);
}
.folder-dd-item { display: block; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: transparent; cursor: pointer; border-radius: 8px; font-size: 13px; color: #1f2933; }
.folder-dd-item:hover { background: #f3f5f8; }
.folder-dd-item.danger { color: #e53e3e; }
.folder-dd-empty { padding: 8px 10px; color: #97a3b3; font-size: 12px; }
.folder-dd-sep { height: 1px; background: #eee; margin: 4px 0; }
.admin-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stat-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: #f6f7f9; border-radius: 10px; font-size: 13px; }
.stat-row span { color: #5a6675; }
.stat-row b { color: #1f2933; font-size: 15px; }

/* ============ ROOMS LIST IN SIDE MENU ============ */
.dm-list .room-item .last-body { font-size: 12.5px; color: #97a3b3; max-width: 200px; }

/* ============ SCROLLBAR (subtle) ============ */
.messages-container::-webkit-scrollbar, .side-menu-content::-webkit-scrollbar, .admin-body::-webkit-scrollbar, .modal-content::-webkit-scrollbar { width: 6px; height: 6px; }
.messages-container::-webkit-scrollbar-thumb, .side-menu-content::-webkit-scrollbar-thumb, .admin-body::-webkit-scrollbar-thumb, .modal-content::-webkit-scrollbar-thumb { background: rgba(0,0,0,.18); border-radius: 999px; }

/* ============ TOAST POLISH ============ */
.toast { padding: 10px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.18); font-weight: 500; }

/* ============ BOOT SPLASH ============ */
.boot-splash { background: linear-gradient(160deg, var(--kt-bg), var(--kt-bg-soft)); transition: opacity .35s ease; }
.boot-logo { border-radius: 24px; box-shadow: 0 18px 48px rgba(0,0,0,.18); }

/* ============ SCROLL DOWN BUTTON ============ */
.scroll-down-btn {
  position: absolute; right: 16px; bottom: 16px;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 0; box-shadow: var(--kt-shadow-md);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 19;
}

/* Typing indicator pill (floats inside chat near bottom) */
.typing-indicator {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; padding: 8px 12px; border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0,0,0,.1); z-index: 18;
  animation: pulseFade .25s ease;
}
@keyframes pulseFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.typing-indicator.hidden { display: none; }
.typing-dot { width: 5px; height: 5px; background: #97a3b3; border-radius: 50%; animation: typingBlink 1.2s infinite; }
.typing-dot:nth-child(2) { animation-delay: .15s; }
.typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes typingBlink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* ============ MICRO ANIMATIONS ============ */
.msg { animation: msgIn .18s ease; }
@keyframes msgIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* Auto-detected URLs in messages */
.msg-link { color: #2563eb; text-decoration: underline; word-break: break-all; }
.msg.out .msg-link { color: #1d4ed8; }

/* Hide time on grouped messages except the LAST one — done in JS via class */
.msg.same-time .time { display: none; }

/* ============ CONNECTION BANNER ============ */
.conn-banner, .mute-banner {
  position: fixed; left: 50%; transform: translateX(-50%); top: 70px; z-index: 50;
  border-radius: 14px; padding: 8px 16px; font-weight: 600; box-shadow: var(--kt-shadow-md);
  font-size: 13px; color: #fff; max-width: calc(100vw - 32px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.conn-banner { background: linear-gradient(90deg, #ff6b6b, #ee5a52); }
.mute-banner { background: linear-gradient(90deg, #4a5568, #2d3748); top: 110px; }
.closed-banner {
  position: fixed; left: 50%; transform: translateX(-50%); top: 70px; z-index: 50;
  border-radius: 14px; padding: 8px 16px; font-weight: 600; box-shadow: var(--kt-shadow-md);
  font-size: 13px; color: #fff;
  background: linear-gradient(90deg, #2c3e50, #4a4e69);
}
.conn-banner.hidden, .mute-banner.hidden, .closed-banner.hidden { display: none; }

/* Online presence dot — placed as sibling of avatar to avoid clip-path */
.avatar-wrap { position: relative; display: inline-block; }
.avatar-wrap .presence-dot {
  position: absolute; right: -2px; bottom: -2px;
  width: 10px; height: 10px; border-radius: 50%; background: #38a169;
  border: 2px solid #fff; z-index: 2;
}
.avatar-wrap .presence-dot.offline { background: #c4c4c4; }
.member-card .avatar-wrap .presence-dot { width: 12px; height: 12px; }

/* Deleted message subtle */
.msg.deleted .bubble { background: rgba(0,0,0,.06) !important; color: #97a3b3 !important; font-style: italic; box-shadow: none !important; }
.msg.deleted .actions, .msg.deleted .reactions { display: none !important; }

/* ============ INSTALL MODAL POLISH ============ */
.install-modal { padding: 28px; }
.install-title { font-size: 21px; font-weight: 800; letter-spacing: -.3px; }
.install-step { background: #f3f5f8; border-radius: 14px; }

/* ============ MOBILE ============ */
@media (max-width: 480px) {
  .msg .meta { max-width: 78%; }
  .msg .bubble { font-size: 15px; }
  .side-menu { width: 84vw; }
  .auth-container { padding: 32px 22px 26px; }
  .modal-content { border-radius: 16px; }
  /* Stack admin card actions vertically on small phones */
  .member-card, .persona-card, .block-card { flex-wrap: wrap; }
  .member-card .actions, .persona-card .actions { width: 100%; margin-top: 8px; flex-wrap: wrap; gap: 4px; }
  .member-card .actions button, .persona-card .actions button { font-size: 12px; padding: 6px 10px; height: 32px; }
}

/* Desktop: full screen, no centered phone-style frame */
#app { max-width: none; width: 100%; margin: 0; box-shadow: none; }
.chat-container { max-width: none; width: 100%; }
body { background: var(--kt-bg); }

/* ============ MESSAGE CONTEXT MENU ============ */
.msg-menu {
  position: fixed; z-index: 800;
  background: #fff; border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px; box-shadow: 0 16px 48px rgba(0,0,0,.18);
  padding: 6px; min-width: 160px;
  animation: menuIn .12s ease;
}
.msg-menu.hidden { display: none; }
@keyframes menuIn { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
.msg-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px;
  background: transparent; border: 0; cursor: pointer;
  font-size: 14px; color: #1f2933; text-align: left;
  border-radius: 8px; transition: background .12s;
}
.msg-menu button:hover { background: #f3f5f8; }
.msg-menu button.danger { color: #e53e3e; }
.msg-menu button.hidden { display: none; }
.msg-menu .admin-mod-btn { color: #b45309; }
.msg-menu .admin-mod-btn.danger { color: #e53e3e; }
.msg-menu .bulk-react-btn { color: #c4365b; }

/* Drag-drop overlay */
.drop-overlay {
  position: fixed; inset: 0; z-index: 700;
  background: rgba(178,199,217,.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.drop-overlay.hidden { display: none; }
.drop-card {
  background: rgba(255,255,255,.96); padding: 32px 40px;
  border-radius: 20px; box-shadow: var(--kt-shadow-lg);
  font-size: 16px; font-weight: 600; color: #2c3340;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  border: 2px dashed rgba(0,0,0,.18);
}
.drop-icon { font-size: 40px; }

/* Empty chat illustration */
.chat-empty {
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #6b7280; font-size: 14px; gap: 8px; pointer-events: none;
}
.chat-empty .icon { font-size: 48px; opacity: .4; }
.chat-empty.hidden { display: none; }

/* Unread count badge in browser tab handled JS-side via document.title */

/* Loading skeleton */
.skel { background: linear-gradient(90deg, #ececec 0%, #f5f5f5 50%, #ececec 100%); background-size: 200% 100%; animation: shimmer 1.2s infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ============ UTILITY ============ */
.hidden { display: none !important; }

/* Subtle highlight when login button pulses */
@keyframes pulseLogin { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* Guest login hint (top-floating, when guest taps the hamburger or restricted action) */
.guest-login-hint {
  position: fixed; top: 76px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.82); color: #fff;
  padding: 12px 22px; border-radius: 999px;
  font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 700;
  animation: hintIn .22s ease;
  white-space: nowrap;
}
.guest-login-hint.hidden { display: none; }
@keyframes hintIn { from { opacity: 0; transform: translateX(-50%) translateY(-8px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* Image lightbox polish */
.lightbox { background: rgba(0,0,0,.92); }
.lightbox-content img, .lightbox-content video { max-width: 95vw; max-height: 88vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox-close { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 18px; width: 44px; height: 44px; background: rgba(255,255,255,.15); color: #fff; border: 0; border-radius: 50%; font-size: 24px; cursor: pointer; z-index: 2; backdrop-filter: blur(8px); }
.lightbox-close:hover { background: rgba(255,255,255,.25); }

/* Reactions chips tap target */
.msg .reactions .chip { min-height: 24px; padding: 3px 10px; }

/* DM list item polish */
.dm-list .room-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.dm-list .room-item .room-icon-img { flex: 0 0 36px; }
.dm-list { display: flex; flex-direction: column; gap: 1px; }
.dm-list .last-body { max-width: 100%; }

/* Persona inline tag — slightly bolder */
.msg .name-row .persona-tag-inline { padding: 2px 7px; font-size: 10px; font-weight: 800; }

/* Side menu small fix: room-icon-img need explicit bg + size */
.room-icon-img { background-color: #FEE500; background-position: center; width: 36px; height: 36px; flex: 0 0 36px; border-radius: 12px; box-shadow: var(--kt-shadow-sm); }
.room-item { display: flex !important; align-items: center; gap: 12px; }
.room-item > div:not(.room-icon):not(.room-icon-img) { flex: 1 1 auto; min-width: 0; }
.room-item .avatar-wrap { flex: 0 0 auto; }

/* Avatar hover cursor */
.msg .avatar { cursor: pointer; }

/* messages-container kept as block scroll area (already flex item above) */

/* Better focus ring for inputs (a11y) */
input:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid rgba(74,144,226,.35); outline-offset: 2px;
}

/* Toast with iOS safe-area */
.toast-container { bottom: calc(96px + env(safe-area-inset-bottom)); }

/* Long-message expand button — applies to text bubble only */
.bubble.collapsible { position: relative; max-height: 240px; overflow: hidden; display: block; }
.bubble.collapsible::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--kt-bubble-in));
  pointer-events: none;
}
.msg.out .bubble.collapsible::after { background: linear-gradient(180deg, rgba(254,229,0,0), var(--kt-out)); }
.bubble.expanded { max-height: none !important; overflow: visible !important; }
.bubble.expanded::after { display: none; }
.bubble-expand-btn {
  display: block; margin: 6px auto 0;
  background: rgba(0,0,0,.06); border: 0; cursor: pointer;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; color: #2c3340; font-weight: 600;
}
.bubble-expand-btn:hover { background: rgba(0,0,0,.1); }

/* Search bar (flex item between header and chat) */
.search-bar {
  position: relative;
  flex: 0 0 auto;
  padding: 8px 12px; background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.08); display: flex; gap: 8px; align-items: center;
  z-index: 9;
}
.search-bar.hidden { display: none; }
.search-bar input {
  flex: 1; height: 38px; padding: 0 14px; border: 1px solid #e3e6ea; border-radius: 19px;
  font-size: 14px; background: #f6f7f9; outline: none;
}
.search-bar input:focus { background: #fff; border-color: #B2C7D9; }
.search-bar button { width: 38px; height: 38px; border: 0; background: transparent; cursor: pointer; border-radius: 50%; font-size: 16px; color: #5a6675; }
.search-bar button:hover { background: rgba(0,0,0,.05); }

/* Search results inline */
.search-results { padding: 70px 0 92px; height: 100%; box-sizing: border-box; overflow-y: auto; background: #fff; }
.search-result-item {
  padding: 12px 16px; border-bottom: 1px solid #f0f0f0; cursor: pointer;
}
.search-result-item:hover { background: #f6f7f9; }
.search-result-item .who { font-size: 12px; color: #5a6675; margin-bottom: 4px; }
.search-result-item .content { font-size: 14px; color: #1f2933; word-break: break-word; }
.search-result-item .when { font-size: 11px; color: #97a3b3; margin-top: 4px; }
.search-result-item mark { background: #FEE500; color: #1f2933; padding: 0 2px; border-radius: 2px; }

/* Loading skeleton row in messages */
.msg-skel { display: flex; gap: 8px; padding: 4px 14px; align-items: flex-end; }
.msg-skel .skel.av { width: 40px; height: 40px; border-radius: 14px; }
.msg-skel .skel.bub { height: 40px; width: 60%; border-radius: 14px; }
.msg-skel.out { flex-direction: row-reverse; }
.msg-skel.out .skel.av { display: none; }

/* Custom confirm modal */
.confirm-modal { animation: confirmIn .18s cubic-bezier(.2,.9,.3,1); }
@keyframes confirmIn { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }

/* Modal close cross better tap area */
.close-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.close-btn:hover { background: rgba(0,0,0,.05); }

/* Reaction chip — bigger when count is large */
.msg .reactions .chip[data-big] { font-size: 13px; padding: 3px 12px; font-weight: 700; }

/* ============================================================
   POLISH v2 — overrides for consistent circular avatars + alignment
   ============================================================ */

/* All avatars circular, override clip-path / border-radius mishmash */
.room-icon-img,
.profile-avatar-large,
.header-avatar,
.msg .avatar,
.member-card .avatar,
.persona-card .avatar,
.bulk-persona-item .avatar,
.consult-list-item .avatar,
.dm-list .avatar {
  border-radius: 50% !important;
  clip-path: none !important;
  background-size: cover !important;
  background-position: center !important;
  flex-shrink: 0;
}

/* Header profile avatar — slightly larger and crisp */
.header-avatar { width: 32px; height: 32px; }
#profileBtn { padding: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; }

/* Profile modal avatar — perfect circle */
.profile-avatar-large { width: 124px; height: 124px; border: 3px solid #fff; }

/* Room item: clean horizontal layout */
.room-item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px !important;
  min-height: 60px;
  text-align: left;       /* override button default center */
}
.room-item, .room-item * { text-align: left; }
.room-item .room-unread { text-align: center; }

/* Force DM list items into clean row layout — overrides any inline / legacy CSS */
.dm-list .room-item {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  width: 100% !important;
  gap: 10px !important;
  padding: 10px 12px !important;
  min-height: 56px !important;
  border-left: 0 !important;
  text-align: left !important;
}
.dm-list .room-item > .avatar-wrap { flex: 0 0 auto !important; }
.dm-list .room-item .room-content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 3px !important;
  text-align: left !important;
}
.dm-list .room-item .room-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
}
.dm-list .room-item .room-name {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-weight: 600;
  font-size: 14.5px;
  color: #1f2933;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left !important;
}
.dm-list .room-item .room-time {
  flex: 0 0 auto !important;
  font-size: 10.5px;
  color: #97a3b3;
  text-align: right !important;
}
.dm-list .room-item .last-body {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  font-size: 12.5px;
  color: #97a3b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left !important;
}

/* All <button>-based list items default to left text alignment */
.menu-item,
.consult-list-item,
.member-card,
.persona-card,
.bulk-persona-item,
.dm-list .room-item,
.consult-folder-header,
.consult-member-row {
  text-align: left;
}
.menu-item *,
.consult-list-item *,
.member-card *,
.persona-card *,
.bulk-persona-item *,
.consult-folder-header *,
.consult-member-row * {
  text-align: inherit;
}

/* Side menu items aligned with proper padding */
.side-menu-content .menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 14.5px;
  color: #1f2933;
  border-radius: 12px;
  position: relative;
}
.side-menu-content .menu-item:hover { background: rgba(0,0,0,.04); }
.side-menu-content .menu-item .menu-label { flex: 1 1 auto; min-width: 0; }
.side-menu-content .menu-item .menu-icon { flex: 0 0 auto; width: 22px; display: inline-flex; align-items: center; justify-content: center; color: #5a6675; }

/* Consult list items (admin panel sidebar) */
.consult-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  min-height: 56px;
}
.consult-list-item:hover { background: rgba(0,0,0,.035); }
.consult-list-item.active { background: rgba(178,199,217,.32); }
.consult-list-item .info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.consult-list-item .info .name { font-size: 14px; font-weight: 600; color: #1f2933; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consult-list-item .info .preview { font-size: 12.5px; color: #97a3b3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.consult-list-item .meta { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.consult-list-item .meta .time { font-size: 10.5px; color: #97a3b3; }

/* Member card / persona card horizontal */
.member-card, .persona-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  width: 100%;
  border: 1px solid #eef0f3;
  background: #fff;
  cursor: pointer;
}
.member-card:hover, .persona-card:hover { background: #f7f9fb; }
.member-card .name, .persona-card .name { font-size: 14px; font-weight: 600; color: #1f2933; }
.member-card .meta, .persona-card .meta { font-size: 12px; color: #97a3b3; margin-top: 2px; }

/* Header center message box */
.header-center { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; }
.header-message {
  font-size: 12.5px; color: #5a6675;
  background: rgba(255,255,255,.6); border-radius: 999px;
  padding: 4px 12px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Header right action buttons aligned consistently */
.header-right { display: flex; align-items: center; gap: 4px; }
.header-right .icon-btn {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: transparent; border: 0; cursor: pointer;
  color: #2c3340;
  flex: 0 0 auto;
}
.header-right .icon-btn:hover { background: rgba(0,0,0,.05); }
#profileBtn .header-avatar { display: block; }

/* App header layout */
.app-header {
  display: flex; align-items: center;
  padding: 6px 8px;
  gap: 6px;
  min-height: 52px;
  background: var(--kt-bg);
  border-bottom: 1px solid rgba(0,0,0,.04);
}
.header-left { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.header-left h1 {
  font-size: 16px; font-weight: 700; margin: 0;
  color: #1f2933;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}

/* Composer (chat input area) */
.message-input-area {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
}
.message-input-area textarea, .message-input-area input[type="text"] {
  flex: 1 1 auto; min-width: 0;
  padding: 10px 14px;
  border: 1px solid #e3e8ed;
  border-radius: 22px;
  font-size: 14px; font-family: inherit;
  resize: none;
  max-height: 140px;
  background: #f7f9fb;
}
.message-input-area .send-btn {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #FEE500;
  border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-weight: 700;
}
.message-input-area .send-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Modal close (X) consistently top-right */
.modal-content { position: relative; }
.modal-content .close-btn {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 0; background: rgba(0,0,0,.05);
  font-size: 18px; line-height: 1;
  cursor: pointer; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
}
.modal-content .close-btn:hover { background: rgba(0,0,0,.1); }

/* Sidemenu user info card */
.user-info-card {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, #f7f9fb 0%, #ffffff 100%);
  margin-bottom: 14px;
}
.user-info-card .avatar { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 48px; background-size: cover; background-position: center; }
.user-info-card .info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.user-info-card .info .name { font-size: 15px; font-weight: 700; color: #1f2933; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-info-card .info .role { font-size: 11.5px; color: #97a3b3; }

/* Toast position consistent on mobile */
.toast {
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 13.5px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* Confirm modal buttons aligned */
.confirm-modal .btns {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 14px 18px;
}
.room-item .avatar-wrap { flex: 0 0 auto; position: relative; }
.room-item .room-icon-img { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; }
.room-item > div:not(.avatar-wrap):not(.room-icon):not(.room-icon-img):not(.room-unread) {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px;
}
.room-item .last-body {
  font-size: 12.5px;
  color: #97a3b3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.room-item .room-unread {
  flex: 0 0 auto;
  margin-left: auto;
  background: #ff3b30;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  min-width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Presence dot positioned over avatar */
.avatar-wrap { position: relative; display: inline-block; line-height: 0; }
.avatar-wrap .presence-dot {
  position: absolute;
  bottom: 0; right: 0;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #34c759;
  border: 2px solid #fff;
  box-sizing: border-box;
}
.avatar-wrap .presence-dot.offline { background: #c4c4c4; }

/* Profile modal cleanup */
.profile-modal-rich {
  max-width: 480px !important;
  border-radius: 20px;
  overflow: hidden;
}
.profile-modal-rich .profile-top-section {
  padding: 32px 20px 24px !important;
  text-align: center;
  background: linear-gradient(180deg, #f0f5fa 0%, #ffffff 100%) !important;
}
.profile-modal-rich .profile-display-name {
  margin: 16px 0 6px;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: #1f2933;
}
.profile-modal-rich #profileMetaLine {
  margin-top: 4px;
  font-size: 12px;
  color: #97a3b3;
}
.profile-modal-rich .profile-bio-view {
  margin: 8px 0 4px;
  font-size: 13.5px;
  color: #5a6675;
  line-height: 1.5;
  white-space: pre-wrap;
}
.profile-modal-rich .profile-bio-view:empty { display: none; }
.profile-modal-rich .profile-name-edit-wrap,
.profile-modal-rich .profile-bio-edit-wrap {
  display: flex;
  gap: 8px;
  margin: 10px auto;
  max-width: 320px;
  align-items: center;
}
.profile-modal-rich .profile-name-edit-wrap input,
.profile-modal-rich .profile-bio-edit-wrap textarea {
  flex: 1 1 auto;
  padding: 9px 12px;
  border: 1px solid #d6dade;
  border-radius: 10px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  resize: none;
}
.profile-modal-rich .profile-name-edit-wrap button,
.profile-modal-rich .profile-bio-edit-wrap button {
  flex: 0 0 auto;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 10px;
}
.profile-modal-rich .profile-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.profile-modal-rich .profile-message-btn {
  min-width: 200px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  border-radius: 14px;
}
.profile-modal-rich .profile-section {
  padding: 18px 20px 20px;
  border-top: 1px solid #eef0f3;
}
.profile-modal-rich .profile-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.profile-modal-rich .profile-section-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1f2933;
}
.profile-modal-rich .profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.profile-modal-rich .profile-empty {
  text-align: center;
  color: #a8b2bd;
  font-size: 13px;
  padding: 22px 0;
}
.profile-image-edit {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 132px;
  font-size: 11px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 0;
  background: rgba(0,0,0,.6);
  color: #fff;
  cursor: pointer;
}

/* Member-card and persona-card alignment */
.member-card, .persona-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  min-height: 56px;
}
.member-card .avatar, .persona-card .avatar {
  width: 40px; height: 40px;
  flex: 0 0 40px;
}

/* Bulk persona item */
.bulk-persona-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  cursor: pointer;
  min-height: 50px;
}
.bulk-persona-item .avatar { width: 36px; height: 36px; flex: 0 0 36px; }
.bulk-persona-item .name { font-size: 14px; font-weight: 600; color: #1f2933; }
.bulk-persona-item .note { font-size: 11.5px; color: #97a3b3; margin-top: 2px; }

/* DM list item — keep compact */
.dm-list .room-item { padding: 9px 12px !important; min-height: 56px; }
.dm-list .room-item .room-icon-img { width: 40px !important; height: 40px !important; flex: 0 0 40px !important; }

/* Settings section spacing */
.admin-pane label { display: block; margin-bottom: 12px; font-size: 13px; color: #2c3340; font-weight: 600; }
.admin-pane label input,
.admin-pane label textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid #d6dade;
  border-radius: 10px;
  font-size: 13.5px;
  font-family: inherit;
}
.settings-divider { height: 1px; background: #eef0f3; margin: 18px 0; }

/* Buttons consistent height */
.btn-primary, .btn-secondary, .btn-danger {
  min-height: 38px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 10px;
  cursor: pointer;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.btn-primary { background: #B2C7D9; color: #1f2933; }
.btn-primary:hover { background: #9fb6c9; }
.btn-secondary { background: #f0f3f6; color: #1f2933; }
.btn-secondary:hover { background: #e3e8ed; }
.btn-danger { background: #ff3b30; color: #fff; }
.btn-danger:hover { background: #e02d23; }