/* Full legacy styles (copied from legacy-react/src/styles.css) */
:root{
	/* layout size helpers */
	--header-height: 28px; /* reduced title header height (was 56px) */
	--topbar-height: 5px; /* device-id / topbar height (increased to show device + room info) */
	--footer-height: 136px; /* space reserved for fixed footers / input */
	--kb-safe: 0px; /* dynamic safe area above mobile keyboard (set via JS) */
	--bottom-extra: 20px; /* extra breathing room below the last chat message (was 10px) */
	--main-padding: 20px; /* base padding used by main */

	/* improved contrast dark theme for readability */
	--bg: #0b1520; /* page background (slightly lighter for softer dark theme) */
	--panel: #0f1724; /* panels/cards (softer dark panel) */
	--surface: #0b1520; /* main surface (softer) */
	--muted: #a3adb8; /* subtle-muted text a bit lighter */
	--text: #f3f4f6; /* main text slightly brighter */
	/* avatar foreground (text) — tuned to be dark for contrast against pale avatar backgrounds */
	--avatar-foreground: rgba(18,18,18,0.92);
	--accent: #3b82f6; /* blue accent */
	--success: #10b981;
	--panel-border: rgba(255,255,255,0.03);
	--icon-color: rgba(255,255,255,0.92);
	--send-icon-color: rgba(255,255,255,0.95);
}

/* Light theme variables (beige/tan palette) */
.theme-light {
	--bg: #fbf6ee; /* warm beige page background */
	--panel: #f7efe0; /* beige panel for cards */
	--surface: #fffaf4; /* surface slightly brighter */
	--muted: #7a6f5f;
	--text: #2b2b2b;
	--avatar-foreground: rgba(43,43,43,0.88);
	--accent: #b57a3a; /* warm accent */
	--success: #059669;
	--icon-color: rgba(0,0,0,0.92);
	--send-icon-color: #ffffff;
}

svg { color: var(--icon-color); }
.app{display:flex;flex-direction:column;position:relative;box-sizing:border-box;overflow:hidden;background:var(--bg);z-index:1000;min-height:100vh;height:100vh}
body,html,#root{height:100%;margin:0;font-family:Segoe UI, Roboto, system-ui, -apple-system, 'Helvetica Neue', Arial;}
html{font-size:15px}

/* Responsive typography and spacing for mobile devices
	 Increase base font-size slightly on narrow viewports so text remains
	 readable instead of shrinking when the layout becomes wide. */
@media (max-width: 820px) {
	html { font-size: 17px; }
	body { font-size: 15px; }
	/* make the main chat container use full width with smaller padding */
	.chat-window { padding-left: 12px !important; padding-right: 12px !important; }
	.chat-window { max-width: 100% !important; width: 100% !important; }
	/* slightly larger names and message text for readability */
	.room-meta .name { font-size: 17px; }
	.room-meta .desc, .room-entry .desc { font-size: 14px; }
	.message-list.rich .bubble .text { font-size: 16px; line-height: 1.45; }
	.rooms-search-input { font-size: 15px; padding: 12px; }
}

@media (max-width: 420px) {
	/* very small phones: bump base slightly more and ensure inputs remain tappable */
	html { font-size: 18px; }
	body { font-size: 16px; }
	.room-meta .name { font-size: 15px; }
	.message-list.rich .bubble .text { font-size: 15px; }
	.room-avatar-text { font-size: 13px }
}
/* prevent horizontal overflow on small viewports caused by negative margins */
html, body { overflow-x: hidden; }
body{font-size:14px;line-height:1.5}

.app-header{background:var(--panel);padding:6px 12px;font-weight:600;border-bottom:1px solid rgba(255,255,255,0.04);color:var(--text);height:var(--header-height);display:flex;align-items:center;position:fixed;top:0;left:0;right:0;z-index:3000}
.app-header{ touch-action: none; }
.app-header{padding-right:40px}
.app-header .header-exit{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:3010;padding:8px;border-radius:8px}
.app-header .header-exit svg{width:18px;height:18px}

main{flex:1;display:flex;justify-content:center;align-items:center;padding:var(--main-padding);padding-top:var(--main-padding)}
@media (min-width: 821px) {
	main { align-items: flex-start; padding-top: 0; }
}
.chat-window{background:var(--surface);border:1px solid rgba(255,255,255,0.04);border-radius:10px;display:flex;flex-direction:column;overflow:visible;color:var(--text);position:relative;margin:var(--header-height) auto 0;padding:0 20px;box-sizing:border-box;max-width:1100px;width:calc(100% - 40px)}
@media (min-width: 821px) {
	.chat-window { height: calc(100vh - var(--header-height) - var(--footer-height)); }
	.chat-window .layout { height: calc(100% - var(--topbar-height)); overflow: auto; -webkit-overflow-scrolling: touch; }
}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;padding:0;border-bottom:1px solid var(--panel-border);gap:12px;position:relative;z-index:3100;min-height:var(--topbar-height);overflow:visible}
.topbar{flex-wrap:nowrap}
.topbar > div { min-width:0 }
.topbar > div:first-child { display:flex;align-items:center;gap:12px;min-width:0 }
.topbar > div:first-child .info { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px }
.topbar .info { flex: 1 1 auto; min-width:0 }
.topbar .info.device-info { flex: 0 0 auto }
.topbar > div:last-child { flex: 1 1 auto; display:flex; justify-content:flex-end; min-width:0 }
.topbar > .info { flex: 0 0 auto; display:flex;align-items:center;gap:10px; font-family: inherit; font-size:13px }
.topbar .info code { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-block; font-family: inherit; font-size:14px; font-variant-numeric: tabular-nums; line-height:24px; padding-top:4px; padding-bottom:4px }
.topbar .create-room-btn { margin-left:12px }
@media (max-width:820px) { .topbar .create-room-btn { display:none !important } }
.topbar .chip { flex-shrink:0 }
.topbar .info code{font-size:13px;color:var(--text);background:var(--panel);padding:8px 10px;border-radius:8px;border:1px solid rgba(255,255,255,0.02);opacity:1;line-height:24px;max-width:40vw}
.device-info{display:flex;align-items:center;gap:8px;font-size:13px}
.device-info .label{font-size:14px;color:var(--muted);font-weight:600}
.device-info .device-code{font-size:14px;display:inline;color:var(--muted);padding:0;border-radius:0;border:none;background:transparent;opacity:1;max-width:none;white-space:nowrap;overflow:visible;text-overflow:clip;line-height:20px}
.room-info{display:flex;flex-direction:column;gap:2px;margin-top:0;max-width:420px}
.room-info-panel{ touch-action: none; overscroll-behavior: contain; }
.room-info div:first-child{font-weight:700}
.room-info div:last-child{font-size:12px;color:var(--muted)}
.layout{display:flex;min-height:540px;height:100% !important;box-sizing:border-box;padding-bottom:0;scroll-padding-bottom:0}
.layout > .rooms-list { flex: 1 1 100% !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
.rooms-panel{display:flex;flex-direction:column;min-height:100%;height:100%}
.rooms-panel .rooms-list{flex:1 1 auto;overflow:auto}
/* apply the wider-panel negative margin only on large viewports to avoid causing horizontal scroll on small screens */
@media (min-width:821px) {
	.rooms-panel{width:calc(100% + 40px);margin-left:-20px;padding-left:20px;padding-right:20px;box-sizing:border-box}
}
.rooms-panel-footer{padding:12px;border-top:1px solid rgba(255,255,255,0.02);background:transparent}
@media (max-width:820px) { .rooms-panel-footer { display:none } }
.sidebar{width:clamp(200px,22vw,280px);background:var(--panel);border-right:1px solid rgba(255,255,255,0.02);display:flex;flex-direction:column;position:relative;z-index:1450;height:100%;overflow:hidden}
.sidebar .rooms-list{padding:12px;overflow:auto;padding-bottom:calc(var(--footer-height) + 12px);flex:1 1 auto}
.sidebar .rooms-list, .rooms-list{padding:12px;overflow:auto;padding-bottom:calc(var(--footer-height) + 12px);flex:1 1 auto}
.sidebar .create-room{padding:12px;border-bottom:1px solid rgba(255,255,255,0.02)}
.content{flex:1;display:flex;flex-direction:column}
.message-list{padding:20px;flex:1;overflow:auto;background:linear-gradient(180deg, rgba(255,255,255,0.00), rgba(255,255,255,0.01));padding-bottom:calc(var(--footer-height) + var(--kb-safe, 0px) + var(--bottom-extra, 10px));scroll-padding-bottom:calc(var(--footer-height) + var(--kb-safe, 0px) + var(--bottom-extra, 10px))}
.message-list{ overscroll-behavior-y: contain; touch-action: pan-y; }
.message-list.line-style ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.message-list .message{display:flex}
.message-row{display:flex;align-items:flex-start;gap:6px}
.bubble{max-width:78%;padding:10px 12px;border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,0.12)}
.message.other .bubble{background:#ffffff; color:#0f1724; border-bottom-left-radius:8px}
.message.me{justify-content:flex-end}
.message.me .bubble{background:rgba(59,130,246,0.16);color:var(--text);border-bottom-right-radius:8px;border:1px solid rgba(59,130,246,0.25)}
.meta{font-size:11px;color:var(--muted);display:flex;gap:8px;align-items:center;margin-bottom:6px}
.meta .author{font-weight:700;color:inherit}
.meta .time{font-size:10px;color:var(--muted)}
.device-id{font-size:12px;color:var(--panel);margin-left:8px;padding:6px 10px;border-radius:8px;background:var(--text);border:1px solid rgba(0,0,0,0.06);font-weight:700}
.text{white-space:pre-wrap;font-size:15px;line-height:1.6;color:var(--text)}
.avatar{width:clamp(28px,6vw,40px);height:clamp(28px,6vw,40px);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:calc(12px + 0.4vw);margin-right:8px;color:var(--avatar-foreground);font-weight:700}
.avatar.me{margin-left:8px;margin-right:0}
.message.system{display:flex;justify-content:center}
.message.system .system-text{background:transparent;color:var(--muted);font-size:13px;padding:6px 10px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.message.system .system-time{margin-top:6px;display:block;text-align:center}
.message.system .system-time .time{font-size:10px;color:var(--muted)}
.msg-status{font-size:12px;color:var(--muted);margin-top:6px}
.msg-status.error{color:#ff6b6b}
.message-input{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;padding:12px;border-top:1px solid var(--panel-border);background:var(--surface);z-index:1200;box-shadow:0 -6px 18px rgba(0,0,0,0.12);width:min(760px, calc(100% - 40px));max-width:760px;border-radius:10px;box-sizing:border-box;padding-right:18px;padding-left:18px;min-width:220px}
/* prevent the input bar from capturing page scroll gestures; allow textarea to scroll */
.message-input{ touch-action: none; overscroll-behavior: contain; pointer-events: none; }
.message-input .message-textarea{ touch-action: pan-y; }
.message-input .message-textarea,
.message-input .send,
.message-input button,
.message-input textarea,
.message-input input { pointer-events: auto; }
@media (max-width:820px) {
	.message-input{left:0;transform:none;width:100%;border-radius:0;bottom:0;padding-left:12px;padding-right:12px}
}
@media (min-width: 821px) {
	.chat-footer .message-input{position:static !important;left:auto !important;transform:none !important;bottom:auto !important;width:100% !important;max-width:100% !important;box-shadow:none !important;border-top:none !important;border-radius:0 !important;padding:8px 12px !important;background:transparent !important;}
}
.chat-footer{border-top:1px solid var(--panel-border);padding:8px;background:var(--surface)}
.line-input{display:flex;align-items:flex-end;gap:8px}
.line-input .message-textarea{flex:1;padding:10px 14px;border-radius:22px;border:1px solid rgba(0,0,0,0.06);background:var(--panel);color:var(--text);resize:none;line-height:1.4;min-height:40px;height:auto;max-height:140px;overflow-y:auto}
.line-input .send{position:relative;width:48px;height:48px;border-radius:8px;background:var(--accent);border:none;color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-left:6px;box-shadow:0 6px 12px rgba(37,99,235,0.18);cursor:pointer}
.line-input .send:disabled{opacity:0.5;cursor:not-allowed}
.line-input .send svg{color:inherit !important;fill:currentColor !important}
@media (max-width:480px) {
	.bubble{max-width:82%}
	.avatar{width:28px;height:28px;font-size:12px}
	.topbar .info{font-size:12px}
	.line-input .send{width:40px;height:40px;border-radius:6px}
}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:transparent;color:var(--text);cursor:pointer;transition:all .12s ease;font-weight:600}
.btn:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,0.25)}
.btn:active{transform:translateY(0)}
.btn:focus{outline:2px solid rgba(59,130,246,0.24);outline-offset:2px}
.btn .icon{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;font-size:14px;opacity:0.95}
.btn .icon svg{display:block}
.btn-primary{background:var(--accent) !important; color:#fff !important; border:1px solid rgba(37,99,235,0.4) !important}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent !important; color:var(--text) !important; border:1px solid rgba(0,0,0,0.1) !important}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.62);display:flex;align-items:center;justify-content:center;z-index:1200}
.modal-panel{background:var(--panel);color:var(--text);padding:18px;border-radius:10px;max-width:520px;width:92%;box-shadow:0 14px 40px rgba(0,0,0,0.72);border:1px solid rgba(255,255,255,0.04)}
.modal-panel input{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text)}
.modal-like-input{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);color:var(--text);box-sizing:border-box}
.modal-like-input[rows], textarea.modal-like-input{min-height:80px}
.modal-panel input,.modal-like-input,.rooms-panel input,.rooms-panel textarea,.create-room input,.create-room textarea,.rooms-panel .modal-like-input{background: var(--panel) !important;color: var(--text) !important;border-radius: 10px !important;border: 1px solid rgba(0,0,0,0.06) !important;padding: 10px !important;box-sizing: border-box !important}
.theme-dark .modal-panel input,.theme-dark .modal-like-input,.theme-dark .rooms-panel input,.theme-dark .rooms-panel textarea,.theme-dark .create-room input,.theme-dark .create-room textarea{background: rgba(255,255,255,0.03) !important;border: 1px solid rgba(255,255,255,0.10) !important;color: var(--text) !important}
.theme-light .modal-panel input,.theme-light .modal-like-input,.theme-light .rooms-panel input,.theme-light .rooms-panel textarea,.theme-light .create-room input,.theme-light .create-room textarea{background: #ffffff !important;border: 1px solid rgba(2,6,23,0.14) !important;color: var(--text) !important}
.mobile-bottom-bar{position: fixed;left: 0;right: 0;bottom: 0;display: flex;gap: 8px;padding: 10px;background: var(--panel);box-shadow: 0 -6px 18px rgba(0,0,0,0.12);z-index: 9999;padding-left: 12px;padding-right: 12px}
.mobile-bottom-bar .btn{flex:1;padding:10px 12px}
.exit-side{position:absolute;right:12px;top:50%;transform:translateY(-50%);z-index:9999;padding:10px;border-radius:999px;background:rgba(0,0,0,0.12)}
.exit-side svg{width:20px;height:20px}
@media (min-width:821px){
	.mobile-bottom-bar{display:none}
}
.message-list.rich{padding:14px 8px; padding-bottom: calc(var(--footer-height) + var(--kb-safe, 0px) + 20px + var(--bottom-extra, 10px)); scroll-padding-bottom: calc(var(--footer-height) + var(--kb-safe, 0px) + 20px + var(--bottom-extra, 10px))}
.message-list.rich ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.message-list.rich .message{display:flex;align-items:flex-end}
/* Do not hide avatars on continued messages; keep consistent with mobile appearance */
.message-list.rich .message.continued .avatar{visibility:visible}
.message-list.rich .message .avatar{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--avatar-foreground);font-weight:700;margin-right:8px;flex-shrink:0}
.message-list.rich .message .avatar{align-self:flex-start}
.message-list.rich .message .avatar.me{margin-left:8px;margin-right:0}
.message-list.rich .bubble-wrap{display:flex;flex-direction:column;align-items:flex-start;position:relative}
.message-list.rich .bubble{background:var(--panel);padding:6px 8px;border-radius:12px;max-width:94%;box-shadow:0 4px 12px rgba(0,0,0,0.10);transition:transform .12s ease, box-shadow .12s ease}
.message-list.rich .bubble.error{border:1px solid #ffb3b3;background:#fff5f5}
.message-list.rich .bubble .meta{display:flex;gap:8px;align-items:center;margin-bottom:6px;white-space:nowrap}
.message-list.rich .bubble .meta .author{font-weight:700}
.message-list.rich .bubble .meta .time{font-size:11px;color:var(--muted)}
.message-list.rich .bubble .text{white-space:pre-wrap;font-size:13px;line-height:1.45}
.message-list.rich .bubble-footer{display:flex;align-items:center;gap:8px;margin-top:8px}
.message-list.rich .msg-actions{position:absolute;right:-120px;top:6px;display:flex;gap:6px;opacity:0;pointer-events:none;transition:opacity .12s ease, transform .12s ease}
.message-list.rich .msg-actions.visible{opacity:1;pointer-events:auto;transform:translateX(0)}
.message-list.rich .msg-actions .btn-small{padding:6px 8px;font-size:12px}
.message-list.rich .reactions{display:flex;gap:6px}
.message-list.rich .reaction-pill{background:rgba(0,0,0,0.06);padding:4px 8px;border-radius:999px;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.message-list.rich .typing-indicator{padding:8px 12px;border-radius:8px;background:transparent;margin-top:6px;display:flex;align-items:center}
.message-list.rich .typing-indicator .dots{font-size:13px;color:var(--muted)}
.message-list.rich .bubble:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,0.18)}
.message.me .bubble-wrap{align-items:flex-end}
.message.me .bubble{background:rgba(59,130,246,0.16);color:var(--text);border-radius:12px 12px 6px 12px;max-width:90%;border:1px solid rgba(59,130,246,0.25)}
.message.me .avatar.me{order:2}
.message.me{justify-content:flex-end}
@media (max-width: 820px) {
	main { padding-left: 0; padding-right: 0 }
	.chat-window { margin-left: 0 !important; margin-right: 0 !important }
	.chat-window{max-width:100%;border-radius:0}
	.layout{flex-direction:column}
	.sidebar{width:100%;max-height:45vh;display:block}
	body { box-sizing: border-box; }
	.app-header { position: relative; }
	.chat-window { position: fixed; top: var(--header-height); left: 0; right: 0; bottom: 0; height: calc(100vh - var(--header-height)); width: 100%; max-width: 100%; overflow: hidden; margin-top: 0 !important; border-radius: 0; }
	.chat-window { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
	.rooms-panel { width: 100% !important; margin-left: 0 !important; padding-left: 12px !important; padding-right: 12px !important; box-sizing: border-box }
	.rooms-panel .rooms-list { padding-left: 12px !important; padding-right: 12px !important; }
	.chat-window .layout { flex-direction: column; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
	.chat-window:not(.show-rooms) .sidebar{display:none}
	.chat-window .layout { height: calc(100vh - var(--header-height) - var(--footer-height)); overflow: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; padding-bottom: 0; scroll-padding-bottom: 0; }
}
@media (max-width:820px) {
	.mobile-rooms-overlay{position:absolute;top:0;left:0;right:0;bottom:var(--footer-height);z-index:200;background:var(--surface);display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}
	.mobile-rooms-overlay .rooms-list{flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px;padding-top:0px;padding-bottom:120px;padding-bottom:calc(var(--footer-height) + 44px);scroll-padding-bottom:calc(var(--footer-height) + 20px);max-height:calc(100vh - var(--header-height) - var(--footer-height));box-sizing:border-box}
	.mobile-rooms-overlay .rooms-list{height:100%;overflow:auto !important}
	.chat-window.show-rooms .rooms-list{height:100%;overflow:auto !important}
}
@media (max-width:820px) {
	.rooms-list { padding-bottom: 120px !important; padding-bottom: calc(var(--footer-height) + 44px) !important; box-sizing: border-box; }
	.mobile-bottom-bar, .chat-footer { z-index: 99999 !important; }
}

/* Chat room mobile tweaks */
@media (max-width:820px){
	/* make topbar more compact and stack text */
	.topbar{min-height:1x;padding:1px;align-items:center}
	.topbar > div:first-child { display:flex;flex-direction:column;align-items:flex-start;gap:6px }
	.room-info{gap:2px}
	.room-info div:first-child{font-size:16px}
	.room-info div:last-child{font-size:12px}

	/* enlarge leave button for touch */
	.app-header .header-exit{padding:10px 12px;border-radius:10px;font-size:14px}
	.header-exit{right:10px}

	/* message list: use full height and maximize bubble width on mobile */
	.message-list{padding:12px 8px;padding-bottom:calc(var(--footer-height) + var(--kb-safe, 0px) + 12px + var(--bottom-extra, 10px))}
	.message-list.rich .bubble{max-width:98%;font-size:15px}
	.message.me .bubble{max-width:96%}
	.message-list.rich .bubble .text{font-size:15px;line-height:1.5}

	/* avatars smaller on mobile */
	.avatar, .room-avatar{width:34px;height:34px;border-radius:8px}

	/* message input full width fixed bottom */
	.message-input{left:0;transform:none;width:100%;border-radius:0;bottom:0;padding-left:12px;padding-right:12px}

	/* ensure room meta truncation fits mobile */
	.room-meta .name{max-width:60vw}
	.room-meta .desc{max-width:60vw}
}

@media (max-width:480px){
	.topbar{min-height:60px;padding:8px}
	.room-info div:first-child{font-size:15px}
	.message-list.rich .bubble{max-width:92%;font-size:14px}
	.room-meta .name{max-width:52vw}
}
@media (max-width: 820px) {
	.sidebar .rooms-list, .rooms-list { max-height: calc(100vh - var(--header-height) - var(--footer-height)); overflow: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(var(--footer-height) + 44px); }
	.rooms-list ul{max-height:100%;}
}
@media (max-width: 820px) {
	.chat-window.show-rooms { position: fixed; top: var(--header-height) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: calc(100vh - var(--header-height)) !important; width: 100% !important; max-width: 100% !important; overflow: hidden; z-index: 2000; background: var(--surface); box-sizing: border-box; }
	.chat-window.show-rooms .layout { display: flex; flex-direction: column; height: 100%; }
	.chat-window.show-rooms .sidebar { display: block; height: 100%; max-height: none; }
	.chat-window.show-rooms .content { display: none; }
	.chat-window.show-rooms .sidebar .rooms-list { max-height: calc(100vh - var(--header-height) - var(--footer-height)); overflow:auto; -webkit-overflow-scrolling: touch; padding-bottom: 120px }
}
.chat-window .layout, .message-list, .rooms-list { overflow: auto !important; -webkit-overflow-scrolling: touch; }
.rooms-open, .rooms-open body, .rooms-open html { height: 100% !important; overflow: hidden !important; touch-action: pan-y !important; }
body[style*="position: fixed"] { overscroll-behavior: contain; }
@media (max-width:480px) {
	.bubble{max-width:82%}
	.avatar{width:28px;height:28px;font-size:12px}
	.topbar .info{font-size:12px}
	.line-input .send{width:40px;height:40px;border-radius:6px}
}
.btn-join{padding:6px 10px;border-radius:8px;font-size:13px}
.empty{color:var(--muted);padding:20px;text-align:center}
.message-list.rich{padding:14px 8px; padding-bottom: calc(var(--footer-height) + var(--kb-safe, 0px) + 20px); scroll-padding-bottom: calc(var(--footer-height) + var(--kb-safe, 0px) + 20px)}
.message-list.rich ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px}
.message-list.rich .message{display:flex;align-items:flex-end}
.message-list.rich .message.continued .avatar{visibility:visible}
.message-list.rich .message .avatar{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--avatar-foreground);font-weight:700;margin-right:8px;flex-shrink:0}
.message-list.rich .message .avatar.me{margin-left:8px;margin-right:0}
.message-list.rich .bubble-wrap{display:flex;flex-direction:column;align-items:flex-start;position:relative}
.message-list.rich .bubble{background:var(--panel);padding:6px 8px;border-radius:12px;max-width:94%;box-shadow:0 4px 12px rgba(0,0,0,0.10);transition:transform .12s ease, box-shadow .12s ease}
.message-list.rich .bubble.error{border:1px solid #ffb3b3;background:#fff5f5}
.message-list.rich .bubble .meta{display:flex;gap:8px;align-items:center;margin-bottom:6px;white-space:nowrap}
.message-list.rich .bubble .meta .author{font-weight:700}
.message-list.rich .bubble .meta .time{font-size:11px;color:var(--muted)}
.message-list.rich .bubble .text{white-space:pre-wrap;font-size:14px;line-height:1.45}
.message-list.rich .bubble-footer{display:flex;align-items:center;gap:8px;margin-top:8px}
.message-list.rich .msg-actions{position:absolute;right:-120px;top:6px;display:flex;gap:6px;opacity:0;pointer-events:none;transition:opacity .12s ease, transform .12s ease}
.message-list.rich .msg-actions.visible{opacity:1;pointer-events:auto;transform:translateX(0)}
.message-list.rich .msg-actions .btn-small{padding:6px 8px;font-size:12px}
.message-list.rich .reactions{display:flex;gap:6px}
.message-list.rich .reaction-pill{background:rgba(0,0,0,0.06);padding:4px 8px;border-radius:999px;font-size:13px;display:inline-flex;align-items:center;gap:6px}
.message-list.rich .typing-indicator{padding:8px 12px;border-radius:8px;background:transparent;margin-top:6px;display:flex;align-items:center}
.message-list.rich .typing-indicator .dots{font-size:13px;color:var(--muted)}
.message-list.rich .bubble:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,0.18)}
.message.me .bubble-wrap{align-items:flex-end}
.message.me .bubble{background:rgba(59,130,246,0.16);color:var(--text);border-radius:12px 12px 6px 12px;max-width:90%;border:1px solid rgba(59,130,246,0.25)}
.message.me .avatar.me{order:2}
.message.me{justify-content:flex-end}
.force-mobile .chat-window { max-width: 100% !important; border-radius: 0 !important; height: calc(100vh - var(--header-height)) !important; position: relative !important; }
.force-mobile .layout { flex-direction: column !important; height: calc(100vh - var(--header-height) - var(--footer-height)) !important; }
.force-mobile .sidebar { width: 100% !important; max-height: none !important; display: block !important; }
.force-mobile .sidebar .rooms-list { padding-bottom: calc(var(--footer-height) + 44px) !important; overflow: auto !important; }
.force-mobile .sidebar .rooms-list, .force-mobile .rooms-list { padding-bottom: calc(var(--footer-height) + 44px) !important; overflow: auto !important; }
.force-mobile .chat-window.show-rooms {
	position: relative !important;
	inset: auto !important;
	height: auto !important;
	width: 100% !important;
	overflow: visible !important;
}
.force-mobile .chat-window.show-rooms .layout {
	display: flex !important;
	flex-direction: column !important;
	height: auto !important;
}
.force-mobile .chat-window.show-rooms .sidebar {
	display: block !important;
	max-height: none !important;
	height: auto !important;
}
.force-mobile .chat-window.show-rooms .content {
	display: block !important;
}
.force-mobile .mobile-rooms-overlay { display: none !important; }
.force-mobile .mobile-rooms-body { overflow: auto !important; -webkit-overflow-scrolling: touch !important; }
.force-mobile .mobile-bottom-bar { display: flex !important; z-index: 9999 !important; }
.force-mobile .message-input { left: 0 !important; transform: none !important; width: 100% !important; border-radius: 0 !important; }
.force-mobile .chat-window .sidebar { display: block !important; }
.force-mobile .chat-window .mobile-rooms-overlay { display: none !important; visibility: hidden !important; pointer-events: none !important; }
.app-header .topbar .info code,
.topbar .info code,
.device-id {
	background: var(--panel) !important;
	background-color: var(--panel) !important;
	border: 1px solid rgba(255,255,255,0.04) !important;
	color: var(--muted) !important;
	padding: 2px 6px !important;
	border-radius: 6px !important;
	opacity: 1 !important;
}
.topbar .info code { display: inline-block !important; max-width: 320px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.theme-light .topbar .info code,
.theme-light .device-info .device-code {
	background: #ffffff !important; /* match light message background */
	background-color: #ffffff !important;
	color: var(--text) !important;
	border: 1px solid rgba(34,28,20,0.04) !important;
	padding: 4px 8px !important;
	border-radius: 6px !important;
}
.theme-dark .topbar .info code,
.theme-dark .device-info .device-code {
	background: rgba(255,255,255,0.14) !important; /* match dark message background */
	background-color: rgba(255,255,255,0.14) !important;
	color: var(--text) !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
	padding: 4px 8px !important;
	border-radius: 6px !important;
}
.theme-dark .btn { background: rgba(255,255,255,0.02) !important; border-color: rgba(255,255,255,0.06) !important; color: var(--text) !important; }
.theme-dark .btn:hover { background: rgba(255,255,255,0.035) !important; transform: translateY(-1px); }
.theme-dark .btn:focus-visible { outline: 2px solid rgba(59,130,246,0.32) !important; outline-offset: 2px !important; }
.theme-dark .btn[disabled], .theme-dark .btn:disabled { opacity: 0.6 !important; cursor: not-allowed !important; }
.theme-dark .btn .icon { opacity: 1 !important; }
.theme-dark .btn-ghost { background: transparent !important; border-color: rgba(255,255,255,0.06) !important; }

/* Dark theme visibility improvements: clearer boundaries and focus cues */
.theme-dark .chat-window { border-color: rgba(255,255,255,0.08) !important; }
.theme-dark .chat-footer { border-top-color: rgba(255,255,255,0.10) !important; }
.theme-dark .message.system .system-text { border-color: rgba(255,255,255,0.12) !important; background: rgba(255,255,255,0.03) !important; }

/* Buttons: stronger borders and hover feedback for dark */
.theme-dark .btn { border-color: rgba(255,255,255,0.14) !important; background: rgba(255,255,255,0.03) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 14px rgba(0,0,0,0.25); }
.theme-dark .btn:hover { border-color: rgba(255,255,255,0.20) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 10px 22px rgba(0,0,0,0.32); }
.theme-dark .btn-ghost { border-color: rgba(255,255,255,0.14) !important; }
.theme-dark .btn-primary { border-color: rgba(59,130,246,0.55) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 8px 18px rgba(37,99,235,0.28) !important; }
.theme-dark .btn:focus-visible { outline: 2px solid rgba(59,130,246,0.45) !important; }

/* Inputs and textarea: clearer borders and backgrounds */
.theme-dark .line-input .message-textarea { border-color: rgba(255,255,255,0.14) !important; background: rgba(255,255,255,0.04) !important; }
.theme-dark .rooms-search-input, .theme-dark .modal-like-input, .theme-dark input, .theme-dark textarea { border-color: rgba(255,255,255,0.14) !important; background: rgba(255,255,255,0.04) !important; }
.theme-dark .rooms-search-input:focus, .theme-dark .modal-like-input:focus, .theme-dark input:focus, .theme-dark textarea:focus { outline: 2px solid rgba(59,130,246,0.35) !important; border-color: rgba(59,130,246,0.45) !important; }

/* Avatars and chips: add subtle borders to separate from background */
.theme-dark .avatar, .theme-dark .room-avatar { border: 1px solid rgba(255,255,255,0.12); }
.theme-dark .room-badge { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); }

/* Message bubbles (rich layout): add clear borders and differentiated backgrounds */
.theme-dark .message-list.rich .bubble { background: rgba(255,255,255,0.06) !important; border: 1px solid rgba(255,255,255,0.14) !important; box-shadow: 0 6px 16px rgba(0,0,0,0.28) !important; }
.theme-dark .message-list.rich .bubble { position: relative; }
.theme-dark .message.other .bubble { background: rgba(255,255,255,0.28) !important; border-color: rgba(255,255,255,0.45) !important; }
.theme-dark .message.other .bubble::before { content: ""; position: absolute; left: -8px; top: 14px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid rgba(255,255,255,0.45); }
.theme-dark .message.other .bubble::after { content: ""; position: absolute; left: -7px; top: 14px; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 8px solid rgba(255,255,255,0.28); }
.theme-dark .message.me .bubble { background: rgba(59,130,246,0.34) !important; border: 1px solid rgba(59,130,246,0.58) !important; }
.theme-dark .message-list.rich .bubble .meta .time { color: rgba(255,255,255,0.78) !important; }
.theme-dark .message-list.rich .bubble .meta { color: var(--muted) !important; }
.theme-dark .message-list.rich .bubble .text { color: var(--text) !important; }

/* System message time: slightly brighter for readability */
.theme-dark .message.system .system-time .time { color: rgba(255,255,255,0.7) !important; }

/* Dark mode: increase input borders and placeholder contrast for readability */
.theme-dark input,
.theme-dark textarea,
.theme-dark .rooms-search-input,
.theme-dark .modal-like-input {
	border-color: rgba(255,255,255,0.12) !important;
	background: rgba(255,255,255,0.03) !important;
	color: var(--text) !important;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.9; }

/* Tighten chat horizontal padding to maximize space for messages */
.chat-window .message-list { padding-left: 8px !important; padding-right: 8px !important; }

/* Room list avatar styling */
.room-avatar{width:clamp(28px,6.5vw,40px);height:clamp(28px,6.5vw,40px);border-radius:8px;display:inline-flex;align-items:center;justify-content:center;margin-right:12px;color:var(--avatar-foreground);font-weight:700;flex-shrink:0}
.room-avatar-text{font-size:clamp(12px,2.4vw,16px);line-height:1}
.rooms-list ul{list-style:none;padding:0;padding-top:10px;margin:0;display:flex;flex-direction:column;gap:8px}
.room-entry-row{display:flex;align-items:center;justify-content:space-between;width:100%}
.room-entry{width:100%;text-align:left;display:flex;align-items:center;padding:10px;border-radius:8px;border:none;background:transparent; text-decoration: none; color: inherit}
/* Ensure anchors used as room entries never show underlines or default link color
   in any state (link/visited/hover/active/focus). Keep accessible focus outline
   via :focus-visible if needed elsewhere; here we avoid text-decoration only. */
a.room-entry, a.room-entry:link, a.room-entry:visited, a.room-entry:hover, a.room-entry:active, a.room-entry:focus {
	text-decoration: none !important;
	color: inherit !important;
}
/* Also prevent any child element from inheriting a text-decoration underline */
.room-entry, .room-entry * {
	text-decoration: none !important;
}
.room-entry .name{font-weight:600}
.room-entry .desc{color:var(--muted);font-size:12px}

@media (max-width:480px){
	.room-avatar{width:34px;height:34px;margin-right:10px}
	.room-avatar-text{font-size:14px}
	.room-entry .name{font-size:15px}
	.room-entry .desc{font-size:12px}
}

/* On small screens allow the room description to wrap and clamp to two lines to avoid overflow */
@media (max-width:820px) {
	.room-meta .desc { white-space: normal; }
	.room-meta .desc, .room-meta .desc-text {
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		line-clamp: 2;
	}
}

/* refined room list structure styles */
.room-list-item { list-style: none; }
.room-entry { display: flex; align-items: center; justify-content: space-between; padding: 12px; gap: 12px; width: 100%; box-sizing: border-box; transition: background .12s ease; }
.room-entry:hover { background: rgba(0,0,0,0.03); }
.room-left { display:flex; align-items:center; gap:12px; overflow:hidden; min-width:0; }
.room-meta { display:flex; flex-direction:column; min-width:0; }
.room-meta .name { font-weight:700; color: var(--text); white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:45ch }
.room-meta .desc { color:var(--muted); font-size:13px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; max-width:60ch }
.room-meta, .room-entry, .room-left, .room-right { word-break: break-word; }
.room-meta .created { font-size:12px; color:var(--muted); margin-top:6px }
.room-right { display:flex; align-items:center; gap:8px; flex-shrink:0 }
.room-badge { background: rgba(0,0,0,0.06); padding:6px 10px; border-radius:999px; font-size:12px; color:var(--text) }

/* Dark theme: strengthen room entry boundaries for visibility */
.theme-dark .room-entry { border: 1px solid rgba(255,255,255,0.12) !important; background: rgba(255,255,255,0.02) !important; }
.theme-dark .room-entry:hover { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.18) !important; }
.theme-light .room-entry { border: 1px solid rgba(0,0,0,0.06); background: #ffffff; }
.rooms-list ul > li + li { border-top: 1px solid rgba(255,255,255,0.06); }

/* Utility */
.muted { color: var(--muted) !important; }

/* Improve '入室中' badge visibility in dark theme */
.member-badge { font-weight: 800; border: 1px solid transparent; }
.theme-dark .member-badge { background: rgba(59,130,246,0.25) !important; color: #fff !important; border-color: rgba(59,130,246,0.55) !important; box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 6px 14px rgba(0,0,0,0.25); }
.theme-light .member-badge { background: rgba(181,122,58,0.18) !important; color: #2b2b2b !important; border-color: rgba(181,122,58,0.35) !important; }

@media (max-width:820px){
	.room-meta .name { max-width: 55vw }
	.room-meta .desc { max-width: 55vw }
	.room-badge { padding:4px 8px; font-size:12px }
}

@media (min-width:821px){
	.room-entry { padding: 14px 16px }
}

/* search box in rooms list */
.rooms-search-wrapper{padding:14px 16px 10px 16px}
.rooms-search-input{width:100%;box-sizing:border-box;padding:10px 12px;border-radius:8px;border:1px solid rgba(0,0,0,0.06);background:var(--panel);color:var(--text);font-size:13px}
.rooms-search-input:focus{outline:2px solid rgba(59,130,246,0.18);border-color:rgba(59,130,246,0.28)}

/* Compact app footer for rooms list pager area: reduce visual height while keeping spacing accessible */
.app-footer{padding:8px 10px !important; height:auto; min-height:40px; display:flex; align-items:center; gap:8px; box-sizing:border-box}
.app-footer .rooms-pager{margin:0 auto}
/* Mobile overlay specific: when footer is moved into mobile overlay, ensure it stays compact */
.mobile-rooms-overlay .app-footer,
.mobile-rooms-overlay .app-footer .rooms-pager,
html.force-mobile .app-footer,
.force-mobile-detected .app-footer {
	padding:6px 8px !important;
	min-height:36px !important;
}
/* further reduce pager button sizes on small viewports to keep footer compact */
@media (max-width: 420px) {
	.app-footer .rooms-pager .btn { padding:6px 8px; font-size:13px }
}

/* class-based compact footer (applied by JS when moving footer into overlay) */
.app-footer.compact-footer {
	padding:6px 8px !important;
	min-height:36px !important;
}
/* when compact-footer is applied, ensure it is fixed to viewport bottom */
.app-footer.compact-footer {
	position: fixed !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	z-index: 5200 !important;
}

/* Ensure rooms list has enough bottom padding when the footer is fixed or moved into a mobile overlay
   so the last list items are not hidden behind the footer. This rule is intentionally specific and
   uses !important to override inline or other layout changes that happen at runtime. */
.force-mobile-detected .rooms-list, html.force-mobile .rooms-list {
	/* keep force-mobile contexts safe at all sizes */
	padding-bottom: calc(var(--footer-height, 96px) + 96px) !important;
}

/* For mobile overlay specifically, only apply extra padding on small viewports */
@media (max-width: 820px) {
	.mobile-rooms-overlay .rooms-list, .mobile-rooms-overlay .rooms-list ul,
	.rooms-list { padding-bottom: calc(var(--footer-height, 96px) + 96px) !important; }
}

/* Sticky search wrapper: keeps the search field visible while scrolling the rooms list */
.rooms-search-wrapper.sticky, .rooms-search-wrapper{position:sticky;top:-2;z-index:2200;background:var(--surface);backdrop-filter: blur(6px);box-shadow: 0 2px 8px rgba(0,0,0,0.04);border-bottom:1px solid var(--panel-border);} 

/* Smooth padding transition for rooms list when footer height changes */
.rooms-list{transition: padding-bottom 160ms ease;}

/* Ensure last items are never hidden by the fixed footer: reserve a dynamic spacer */
.rooms-list::after{content:"";display:block;height:var(--footer-safe, calc(var(--footer-height) + 64px));}

/* clamp description to two lines for better readability */
.room-meta .desc-text{
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	/* standard (where supported) */
	line-clamp: 2;
}

/* separators */
.rooms-list ul > li + li { border-top: 1px solid rgba(255,255,255,0.03); }

/* viewport width debug badge (small, unobtrusive) */
.vp-badge{display:none !important}

/* Force-mobile overrides: apply when detection sets .force-mobile-detected on <html>
	or when developer adds .force-mobile to <html> (via ?forceMobile=1). These rules
	strongly enforce mobile-friendly widths and prevent horizontal overflow. */
.force-mobile-detected .chat-window,
.force-mobile .chat-window,
html.force-mobile .chat-window{ max-width:100% !important; width:100% !important; left:0 !important; right:0 !important; box-sizing:border-box !important; border-radius:0 !important }
.force-mobile-detected .message-input,
.force-mobile .message-input,
html.force-mobile .message-input{ left:0 !important; transform:none !important; width:100% !important; max-width:100% !important; min-width:0 !important; border-radius:0 !important; padding-left:12px !important; padding-right:12px !important }
.force-mobile-detected .room-meta .name,
.force-mobile .room-meta .name,
html.force-mobile .room-meta .name{ max-width: 60vw !important }
.force-mobile-detected .room-meta .desc-text,
.force-mobile .room-meta .desc-text,
html.force-mobile .room-meta .desc-text{ -webkit-line-clamp:2; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; line-clamp: 2; }
.force-mobile-detected .room-avatar,
.force-mobile .room-avatar,
html.force-mobile .room-avatar{ width:34px !important; height:34px !important }
.force-mobile-detected .rooms-panel,
.force-mobile .rooms-panel,
html.force-mobile .rooms-panel{ width:100% !important; margin-left:0 !important; padding-left:12px !important; padding-right:12px !important }
.force-mobile-detected .layout,
.force-mobile .layout,
html.force-mobile .layout{ flex-direction:column !important }
.force-mobile-detected .message-list.rich .bubble,
.force-mobile .message-list.rich .bubble,
html.force-mobile .message-list.rich .bubble{ max-width:92% !important }
.force-mobile-detected body, .force-mobile body, html.force-mobile body{ overflow-x:hidden !important }

/* very strong defensive rule: cap any element that accidentally uses large fixed widths */
.force-mobile-detected [style*="width:"] , .force-mobile [style*="width:"]{ max-width:100% !important }

/* Ensure chat room page uses the same compact/mobile layout as the rooms list */
.force-mobile-detected .app-header,
.force-mobile .app-header,
html.force-mobile .app-header{ position: relative !important }
.force-mobile-detected .topbar,
.force-mobile .topbar,
html.force-mobile .topbar{ min-height:2px !important; padding:10px !important; align-items:center !important }
.force-mobile-detected .topbar > div:first-child,
.force-mobile .topbar > div:first-child,
html.force-mobile .topbar > div:first-child{ display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:6px !important }

.force-mobile-detected .chat-window,
.force-mobile .chat-window,
html.force-mobile .chat-window{ position: fixed !important; top: var(--header-height) !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: calc(100vh - var(--header-height)) !important; width: 100% !important; max-width:100% !important; overflow: hidden !important; margin-top:0 !important; border-radius:0 !important; padding-left:0 !important; padding-right:0 !important }
.force-mobile-detected .layout,
.force-mobile .layout,
html.force-mobile .layout{ flex-direction: column !important; height: calc(100vh - var(--header-height) - var(--footer-height)) !important; overflow:auto !important }
.force-mobile-detected .message-list,
.force-mobile .message-list,
html.force-mobile .message-list{ padding:12px 10px !important; padding-bottom: calc(var(--footer-height) + var(--kb-safe, 0px) + var(--bottom-extra, 10px)) !important }
.force-mobile-detected .message-list.rich .bubble,
.force-mobile .message-list.rich .bubble,
html.force-mobile .message-list.rich .bubble{ max-width:90% !important; font-size:15px !important }

.force-mobile-detected .avatar, .force-mobile .avatar, html.force-mobile .avatar,
.force-mobile-detected .room-avatar, .force-mobile .room-avatar, html.force-mobile .room-avatar{ width:34px !important; height:34px !important; border-radius:8px !important }

.force-mobile-detected .room-meta .name,
.force-mobile .room-meta .name,
html.force-mobile .room-meta .name{ max-width:60vw !important }
.force-mobile-detected .room-meta .desc,
.force-mobile .room-meta .desc,
html.force-mobile .room-meta .desc{ max-width:60vw !important }

/* Normalize container padding so rooms list and chat room match on mobile */
.force-mobile-detected .chat-window,
.force-mobile .chat-window,
html.force-mobile .chat-window{ padding-left:12px !important; padding-right:12px !important }
.force-mobile-detected .content,
.force-mobile .content,
html.force-mobile .content{ padding-left:12px !important; padding-right:12px !important; box-sizing:border-box !important }
.force-mobile-detected .rooms-list,
.force-mobile .rooms-list,
html.force-mobile .rooms-list{ padding-left:12px !important; padding-right:12px !important }



/* Chat page: tighten topbar spacing (remove extra whitespace) */
.chat-page .topbar { padding: 0; min-height: 8px; gap: 6px; align-items: center; }
/* Rely on flex to size the layout instead of fixed subtraction to avoid overlap with footer */
.chat-page .chat-window .layout { height: auto; flex: 1 1 auto; }