/* ------------------------------------------------------------------
   Community chat rooms (update 46)
   Uses the site theme tokens from style.css: --card-bg, --surface, --surface-2,
   --border, --text, --muted, --primary, --primary-rgb, --on-primary.
   ------------------------------------------------------------------ */

/* ---------- Room list ---------- */
.chat-rooms { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.chat-room-card { display: flex; gap: .85rem; align-items: center; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card-bg); color: var(--text); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; position: relative; }
.chat-room-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-soft); color: var(--text); }
.chat-room-card.is-locked { opacity: .78; }
.chat-room-emoji { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; background: rgba(var(--primary-rgb), .14); }
.chat-room-text { flex: 1; min-width: 0; }
.chat-room-text strong { display: block; font-size: 1.02rem; }
.chat-room-text small { display: block; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-room-meta { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; font-size: .75rem; color: var(--muted); }
.chat-unread { min-width: 22px; height: 22px; padding: 0 .4rem; border-radius: 11px; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: .75rem; display: inline-flex; align-items: center; justify-content: center; }
.chat-access { font-size: .7rem; padding: .15rem .5rem; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); white-space: nowrap; }
.chat-online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: 4px; vertical-align: middle; }

/* ---------- Room ---------- */
.chat-app { display: flex; flex-direction: column; height: calc(100dvh - 150px); min-height: 480px; max-height: 900px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; position: relative; }
.chat-head { display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, rgba(var(--primary-rgb), .18), rgba(var(--primary-rgb), .04)); }
.chat-back { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 1.5rem; line-height: 1; }
.chat-back:hover { background: rgba(var(--primary-rgb), .15); color: var(--text); }
.chat-head .chat-room-emoji { width: 40px; height: 40px; flex-basis: 40px; font-size: 1.3rem; }
.chat-head-text { flex: 1; min-width: 0; line-height: 1.2; }
.chat-head-text strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head-text small { color: var(--muted); font-size: .75rem; }
.chat-icon-btn { border: 0; background: transparent; color: var(--text); width: 38px; height: 38px; border-radius: 10px; font-size: 1.2rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.chat-icon-btn:hover { background: rgba(var(--primary-rgb), .15); }
.chat-icon-btn[disabled] { opacity: .4; cursor: default; }

.chat-log { flex: 1; overflow-y: auto; padding: .8rem .8rem 1rem; display: flex; flex-direction: column; gap: .2rem; overscroll-behavior: contain; background:
    radial-gradient(circle at 20% 10%, rgba(var(--primary-rgb), .07), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(var(--primary-rgb), .06), transparent 40%); -webkit-overflow-scrolling: touch; }
.chat-day { align-self: center; font-size: .72rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: .15rem .7rem; margin: .6rem 0 .4rem; }
.chat-more { align-self: center; margin-bottom: .5rem; }
.chat-empty { margin: auto; text-align: center; color: var(--muted); padding: 2rem 1rem; }
.chat-empty .big { font-size: 2.4rem; }
.chat-rules { font-size: .8rem; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--border); border-radius: 12px; padding: .6rem .8rem; margin-bottom: .6rem; }

.chat-msg { display: flex; gap: .5rem; max-width: 86%; align-items: flex-end; margin-top: .25rem; }
.chat-msg.is-first { margin-top: .6rem; }
.chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.chat-avatar { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.chat-msg.mine .chat-avatar, .chat-msg.is-cont .chat-avatar { visibility: hidden; }
.chat-msg.mine .chat-avatar { display: none; }
.chat-bubble { position: relative; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; border-bottom-left-radius: 5px; padding: .42rem .65rem .35rem; min-width: 80px; max-width: 100%; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); cursor: default; user-select: text; -webkit-user-select: text; }
.chat-msg.mine .chat-bubble { background: linear-gradient(135deg, rgba(var(--primary-rgb), .34), rgba(var(--primary-rgb), .18)); border-color: rgba(var(--primary-rgb), .35); border-radius: 16px; border-bottom-right-radius: 5px; }
.chat-msg.is-cont .chat-bubble { border-top-left-radius: 8px; }
.chat-msg.mine.is-cont .chat-bubble { border-top-right-radius: 8px; }
.chat-name { font-size: .76rem; font-weight: 700; margin-bottom: .1rem; display: flex; align-items: center; gap: .35rem; }
.chat-badge { font-size: .62rem; font-weight: 600; padding: .05rem .4rem; border-radius: 999px; background: rgba(var(--primary-rgb), .18); color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
.chat-quote { border-left: 3px solid var(--primary); background: rgba(0, 0, 0, .12); border-radius: 8px; padding: .3rem .5rem; margin-bottom: .3rem; font-size: .78rem; cursor: pointer; }
[data-theme="light"] .chat-quote { background: rgba(0, 0, 0, .05); }
.chat-quote strong { display: block; font-size: .72rem; color: var(--primary-text, var(--primary)); }
.chat-quote span { color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.chat-text { word-wrap: break-word; overflow-wrap: anywhere; line-height: 1.42; font-size: .95rem; white-space: normal; }
.chat-text a { color: var(--link); text-decoration: underline; }
.chat-text.is-emoji-only { font-size: 2.2rem; line-height: 1.2; }
.chat-mention { color: var(--primary-text, var(--primary)); font-weight: 600; }
.chat-media img { display: block; max-width: min(320px, 70vw); max-height: 360px; border-radius: 10px; cursor: zoom-in; margin: .15rem 0 .3rem; object-fit: cover; }
.chat-media video { display: block; max-width: min(320px, 70vw); max-height: 360px; border-radius: 10px; margin: .15rem 0 .3rem; background: #000; }
.chat-media audio { display: block; width: min(280px, 64vw); margin: .15rem 0 .3rem; }
.chat-file { display: flex; align-items: center; gap: .5rem; padding: .4rem .5rem; border-radius: 10px; background: rgba(0, 0, 0, .12); color: var(--text); text-decoration: none; margin: .15rem 0 .3rem; font-size: .85rem; }
.chat-file:hover { color: var(--text); background: rgba(0, 0, 0, .2); }
.chat-expired { font-size: .78rem; color: var(--muted); font-style: italic; padding: .3rem 0; }
.chat-meta { display: flex; justify-content: flex-end; align-items: center; gap: .3rem; font-size: .66rem; color: var(--muted); margin-top: .1rem; }
.chat-msg.is-pending .chat-bubble { border-style: dashed; opacity: .85; }
.chat-note { font-size: .72rem; color: #d97706; margin-top: .25rem; }
.chat-review { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; }
.chat-review .btn { padding: .15rem .5rem; font-size: .72rem; }
.chat-deleted .chat-text { color: var(--muted); font-style: italic; font-size: .85rem; }
.chat-reactions { display: flex; flex-wrap: wrap; gap: .25rem; margin: .15rem 0 0; }
.chat-msg.mine .chat-reactions { justify-content: flex-end; }
.chat-react { border: 1px solid var(--border); background: var(--card-bg); border-radius: 999px; padding: 0 .45rem; font-size: .76rem; line-height: 1.5; cursor: pointer; display: inline-flex; gap: .2rem; align-items: center; color: var(--text); }
.chat-react.mine { border-color: var(--primary); background: rgba(var(--primary-rgb), .18); }
.chat-system { align-self: center; font-size: .78rem; color: var(--text); text-align: center; padding: .3rem .8rem; margin: .35rem 0; background: rgba(var(--primary-rgb), .12); border: 1px solid rgba(var(--primary-rgb), .25); border-radius: 12px; max-width: 90%; }
.chat-msg.is-flash .chat-bubble { animation: chat-flash 1.2s ease; }
@keyframes chat-flash { 0% { box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .7); } 100% { box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } }

.chat-typing { font-size: .74rem; color: var(--muted); padding: .15rem .9rem; min-height: 1.3rem; }
.chat-typing[hidden] { display: none; }
.chat-reply-bar, .chat-attach-bar { display: flex; align-items: center; gap: .6rem; padding: .4rem .7rem; border-top: 1px solid var(--border); background: var(--surface-2); font-size: .8rem; }
.chat-reply-bar[hidden], .chat-attach-bar[hidden] { display: none; }
.chat-reply-bar .chat-quote { margin: 0; flex: 1; }
.chat-attach-bar img { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; }
.chat-attach-bar .name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-progress { height: 3px; background: var(--primary); width: 0; transition: width .2s; }
.chat-form { display: flex; gap: .35rem; padding: .5rem .6rem; border-top: 1px solid var(--border); align-items: flex-end; background: var(--card-bg); }
.chat-form textarea { flex: 1; resize: none; border: 1px solid var(--border); border-radius: 20px; padding: .55rem .9rem; background: var(--surface-2, transparent); color: var(--text); font: inherit; font-size: .95rem; max-height: 130px; min-height: 42px; outline: none; line-height: 1.35; }
.chat-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .25); }
.chat-form textarea:disabled { opacity: .6; }
.chat-send { width: 42px; height: 42px; flex: 0 0 42px; border: 0; border-radius: 50%; background: var(--primary); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.1rem; }
.chat-send:disabled { opacity: .5; cursor: default; }
.chat-send.is-rec { background: #dc2626; color: #fff; animation: chat-pulse 1s infinite; }
@keyframes chat-pulse { 50% { box-shadow: 0 0 0 8px rgba(220, 38, 38, .25); } }
.chat-attach { position: relative; overflow: hidden; }
.chat-attach input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.chat-closed { padding: .7rem 1rem; text-align: center; color: var(--muted); font-size: .85rem; border-top: 1px solid var(--border); }
.chat-rec-time { font-size: .8rem; color: #dc2626; font-weight: 600; min-width: 48px; text-align: center; align-self: center; }

/* Emoji picker */
.chat-emoji { border-top: 1px solid var(--border); background: var(--card-bg); height: 260px; display: flex; flex-direction: column; }
.chat-emoji[hidden] { display: none; }
.chat-emoji-tabs { display: flex; gap: .15rem; padding: .3rem .4rem; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.chat-emoji-tabs::-webkit-scrollbar { display: none; }
.chat-emoji-tabs button { border: 0; background: transparent; font-size: 1.15rem; padding: .15rem .45rem; border-radius: 8px; cursor: pointer; flex: 0 0 auto; }
.chat-emoji-tabs button.active { background: rgba(var(--primary-rgb), .18); }
.chat-emoji-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); padding: .35rem; gap: 2px; }
.chat-emoji-grid button { border: 0; background: transparent; font-size: 1.45rem; line-height: 1; padding: .3rem 0; border-radius: 8px; cursor: pointer; }
.chat-emoji-grid button:hover { background: rgba(var(--primary-rgb), .15); }
.chat-emoji-search { margin: .35rem .5rem 0; }

/* Message action sheet */
.chat-sheet-back { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1085; display: flex; align-items: flex-end; justify-content: center; }
.chat-sheet-back[hidden] { display: none; }
.chat-sheet { width: min(460px, 100%); background: var(--card-bg); color: var(--text); border-radius: 18px 18px 0 0; padding: .7rem .8rem calc(.9rem + env(safe-area-inset-bottom, 0px)); border: 1px solid var(--border); box-shadow: 0 -10px 40px rgba(0, 0, 0, .4); }
.chat-sheet-quick { display: flex; justify-content: space-between; gap: .2rem; margin-bottom: .6rem; }
.chat-sheet-quick button { border: 0; background: var(--surface-2); font-size: 1.5rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer; transition: transform .1s; }
.chat-sheet-quick button:hover { transform: scale(1.15); }
.chat-sheet-quick button.mine { outline: 2px solid var(--primary); }
.chat-sheet-item { display: flex; align-items: center; gap: .7rem; width: 100%; border: 0; background: transparent; color: var(--text); padding: .65rem .5rem; border-radius: 10px; font-size: .95rem; text-align: left; cursor: pointer; }
.chat-sheet-item:hover { background: rgba(var(--primary-rgb), .12); }
.chat-sheet-item.danger { color: #ef4444; }
.chat-sheet-item .ico { width: 24px; text-align: center; font-size: 1.1rem; }
.chat-sheet-excerpt { font-size: .78rem; color: var(--muted); padding: 0 .5rem .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 576px) { .chat-sheet-back { align-items: center; } .chat-sheet { border-radius: 18px; } }

/* Lightbox */
.chat-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, .92); z-index: 1090; display: flex; align-items: center; justify-content: center; cursor: zoom-out; }
.chat-lightbox[hidden] { display: none; }
.chat-lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 6px; }
.chat-lightbox a { position: absolute; top: 14px; right: 16px; color: #fff; font-size: 1rem; text-decoration: none; background: rgba(255, 255, 255, .15); padding: .35rem .7rem; border-radius: 8px; }

/* Members drawer */
.chat-members { list-style: none; margin: 0; padding: 0; }
.chat-members li { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--border); }
.chat-members li:last-child { border-bottom: 0; }
.chat-members .who { flex: 1; min-width: 0; line-height: 1.2; }
.chat-members .who small { display: block; color: var(--muted); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-toast { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); background: rgba(0, 0, 0, .8); color: #fff; padding: .45rem .9rem; border-radius: 999px; font-size: .8rem; z-index: 5; max-width: 90%; text-align: center; pointer-events: none; }
.chat-new-btn { position: absolute; left: 50%; transform: translateX(-50%); bottom: 86px; z-index: 4; border-radius: 999px; box-shadow: 0 6px 20px rgba(0, 0, 0, .3); }

/* The Layla bubble stays out of the way while a room is open */
html.chat-open .ai-chat { display: none !important; }

/* ---------- Phones: the room fills the screen like a messaging app ---------- */
@media (max-width: 767.98px) {
    .chat-app.is-fullscreen { position: fixed; top: 0; left: 0; right: 0; height: 100%; height: 100dvh; max-height: none; min-height: 0; border-radius: 0; border: 0; z-index: 1075; }
    .chat-app.is-fullscreen .chat-head { padding-top: calc(.55rem + env(safe-area-inset-top, 0px)); }
    .chat-app.is-fullscreen .chat-form { padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
    .chat-form textarea { font-size: 16px; }
    .chat-msg { max-width: 92%; }
    .chat-media img, .chat-media video { max-width: 72vw; }
    html.chat-locked, html.chat-locked body { overflow: hidden; overscroll-behavior: none; }
    html.chat-locked .ai-chat { display: none !important; }
}
@media print { .chat-form, .chat-emoji, .chat-head button { display: none !important; } }
@media (max-width: 575.98px) {
    .chat-room-card { flex-wrap: wrap; padding: .8rem .9rem; }
    .chat-room-text { flex-basis: calc(100% - 52px - .85rem); }
    .chat-room-text small { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .chat-room-meta { flex-direction: row; flex-wrap: wrap; align-items: center; width: 100%; padding-left: calc(52px + .85rem); gap: .4rem .6rem; margin-top: .3rem; }
    .chat-room-meta .chat-unread { position: absolute; top: .7rem; right: .8rem; }
}

/* Install card for the chat app on the room list */
.chat-install { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; padding: .8rem 1rem; margin-bottom: 1rem; border: 1px solid rgba(var(--primary-rgb), .35); border-radius: var(--radius); background: linear-gradient(135deg, rgba(var(--primary-rgb), .16), rgba(var(--primary-rgb), .04)); }
.chat-install[hidden] { display: none; }
.chat-install img { border-radius: 12px; }
#appBanner.chat-page-hide { display: none !important; }

/* @mentions */
.chat-msg.mentions-me .chat-bubble { border-color: var(--primary); box-shadow: 0 0 0 1px rgba(var(--primary-rgb), .45), 0 1px 2px rgba(0, 0, 0, .08); }
.chat-msg.mentions-me .chat-bubble::before { content: '@ you'; position: absolute; top: -9px; right: 10px; font-size: .6rem; font-weight: 700; letter-spacing: .04em; padding: 0 .4rem; border-radius: 999px; background: var(--primary); color: var(--on-primary); }
.chat-mentions { position: absolute; left: .6rem; right: .6rem; bottom: 64px; max-height: 220px; overflow-y: auto; background: var(--card-bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 -8px 30px rgba(0, 0, 0, .3); z-index: 6; padding: .25rem; }
.chat-mentions[hidden] { display: none; }
.chat-mentions button { display: flex; align-items: center; gap: .6rem; width: 100%; border: 0; background: transparent; color: var(--text); padding: .4rem .5rem; border-radius: 8px; text-align: left; cursor: pointer; }
.chat-mentions button.active, .chat-mentions button:hover { background: rgba(var(--primary-rgb), .14); }
.chat-mentions .chat-avatar { width: 28px; height: 28px; flex-basis: 28px; font-size: .68rem; }
.chat-mentions small { color: var(--muted); margin-left: auto; }
.chat-mentions .hint { font-size: .72rem; color: var(--muted); padding: .2rem .5rem; }