/* File: /community/assets/css/community.css */
:root{--bg:#f2f5f8;--card:#fff;--ink:#172033;--muted:#6d7787;--brand:#1269a7;--brand2:#0d5a91;--mine:#d9fdd3;--other:#fff;--admin:#e8f2ff;--border:#dbe3ec;--danger:#c62828;--success:#198754;}
*{box-sizing:border-box}html,body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--bg)}a{color:var(--brand);text-decoration:none}button,input,textarea,select{font:inherit}button{cursor:pointer;border:0}.community-shell{max-width:1050px;margin:0 auto;padding:28px 20px}.community-shell.narrow{max-width:620px}.public-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;margin-bottom:24px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:1.6px;color:var(--brand)}h1{margin:5px 0 8px;font-size:32px}h2{margin:0 0 8px}p{color:var(--muted);line-height:1.5}.profile-pill,.outline-btn{background:#fff;border:1px solid var(--border);padding:10px 15px;border-radius:12px;color:var(--ink);font-weight:700}.room-grid{display:grid;gap:14px}.room-card{display:flex;align-items:center;gap:15px;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:17px;box-shadow:0 5px 18px rgba(20,35,55,.05)}.room-icon{width:46px;height:46px;border-radius:14px;background:#e8f2fb;display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto}.room-icon.large{width:60px;height:60px;font-size:30px}.room-info{min-width:0;flex:1}.room-info h2{font-size:18px}.room-info p{margin:0 0 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.room-meta{font-size:12px;color:var(--muted)}.join-btn,.primary{background:var(--brand);color:#fff;padding:11px 17px;border-radius:10px;font-weight:700}.primary:hover{background:var(--brand2)}.primary.full{width:100%}.small{padding:8px 12px}.private-entry{margin-top:18px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:15px}.private-entry p{margin:4px 0 0}.panel,.search-panel{background:#fff;border:1px solid var(--border);border-radius:18px;padding:24px;box-shadow:0 8px 28px rgba(20,35,55,.05)}label{display:block;font-weight:700;font-size:13px;margin:15px 0 7px}input,textarea,select{width:100%;border:1px solid #cfd8e3;border-radius:10px;padding:11px;background:#fff;color:var(--ink)}textarea{min-height:110px;resize:vertical}.back{display:inline-block;margin-bottom:16px}.alert{padding:12px 14px;border-radius:10px;margin-bottom:15px}.alert.success{background:#e9f7ef;color:#146c43}.alert.danger{background:#fdecec;color:#9b1c1c}.verification-box{margin-top:18px;padding:16px;border:1px solid #dce6f0;border-radius:14px;background:#f7fafc}.chat-page{background:#dfe7ed}.chat-shell{height:100vh;display:flex;flex-direction:column;max-width:1050px;margin:0 auto;background:#f4f7f9;box-shadow:0 0 35px rgba(0,0,0,.08)}.chat-header{background:#fff;border-bottom:1px solid var(--border);padding:15px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px}.chat-header h1{font-size:22px;margin:3px 0}.chat-header p{margin:0;font-size:13px}.chat-user{background:#edf4f9;border-radius:20px;padding:8px 13px;font-weight:700}.messages{flex:1;overflow-y:auto;padding:24px 7%;background-color:#e9f0f4;background-image:radial-gradient(rgba(18,105,167,.07) 1px,transparent 1px);background-size:18px 18px}.message{width:max-content;max-width:72%;background:var(--other);border-radius:12px 12px 12px 3px;padding:9px 12px;margin:0 0 10px;box-shadow:0 1px 2px rgba(0,0,0,.08)}.message.mine{margin-left:auto;background:var(--mine);border-radius:12px 12px 3px 12px}.message.admin-message{background:var(--admin)}.message.mine.admin-message{background:#cfe6ff}.message-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px}.message-meta strong{font-size:12px}.message-meta time{font-size:10px;color:#78818d;margin-left:auto}.admin-badge{font-size:9px;background:var(--brand);color:#fff;border-radius:8px;padding:2px 5px}.message-text{font-size:15px;line-height:1.42;white-space:normal;overflow-wrap:anywhere}.reply-preview,.replying{border-left:4px solid var(--brand);background:rgba(18,105,167,.07);padding:7px 9px;border-radius:7px;margin:5px 0 7px;display:flex;flex-direction:column;gap:2px}.reply-preview strong,.replying strong{font-size:11px;color:var(--brand)}.reply-preview span,.replying span{font-size:12px;color:#526071;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.message-actions{display:flex;gap:8px;margin-top:7px;font-size:11px}.message-actions button,.message-actions a{background:none;color:var(--brand);padding:0;font-weight:700}.chat-compose{background:#fff;border-top:1px solid var(--border);padding:10px 14px;display:flex;gap:8px;align-items:flex-end}.chat-compose textarea{min-height:48px;max-height:140px;flex:1;resize:none}.compose-bottom{display:flex;flex-direction:column;gap:6px;align-items:flex-end}.compose-bottom>span{font-size:11px;color:var(--muted);white-space:nowrap}.image-picker{position:relative}.file-button{margin:0;border:1px solid var(--border);border-radius:9px;padding:7px 9px;background:#f7f9fb;cursor:pointer;font-size:12px}.file-button input{display:none}.image-preview{position:absolute;right:0;bottom:48px;background:#fff;border:1px solid var(--border);padding:6px;border-radius:12px;box-shadow:0 5px 20px rgba(0,0,0,.15)}.image-preview img{width:150px;height:150px;object-fit:cover;border-radius:8px;display:block}.remove-image{position:absolute;right:4px;top:4px;width:27px;height:27px;border-radius:50%;background:#d62828;color:#fff;font-size:20px;line-height:27px;padding:0;z-index:2}.message img{max-width:260px;max-height:300px;border-radius:9px;margin-top:7px}.chat-closed{text-align:center;background:#fff;padding:16px;color:var(--muted)}.search-panel form{display:flex;gap:8px}.search-results{margin-top:15px;display:grid;gap:9px}.search-result{background:#fff;border:1px solid var(--border);padding:13px;border-radius:12px}.search-result time{float:right;color:var(--muted);font-size:11px}.search-result p{margin:6px 0 0}.private-list{display:grid;gap:8px}.private-card{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border);border-radius:15px;padding:13px}.avatar{width:42px;height:42px;border-radius:50%;background:#e6f1fa;display:flex;align-items:center;justify-content:center;font-weight:800}.private-card p{margin:3px 0;font-size:13px}.unread{margin-left:auto;background:var(--brand);color:#fff;border-radius:15px;min-width:23px;text-align:center;padding:3px 7px;font-size:11px}.notification{display:flex;flex-direction:column;gap:3px;padding:13px;border-bottom:1px solid var(--border)}.notification time{font-size:11px;color:var(--muted)}.empty-card{background:#fff;border:1px dashed var(--border);border-radius:14px;padding:25px;text-align:center;color:var(--muted)}
/* Admin */.admin-body{background:#eef3f7}.admin-app{min-height:100vh;display:flex}.admin-sidebar{width:240px;background:#10283a;color:#dce8f1;padding:22px 14px;display:flex;flex-direction:column}.admin-logo{font-weight:900;font-size:20px;padding:0 10px 24px}.admin-logo span{font-size:13px;color:#8fb3cd}.admin-sidebar nav{display:grid;gap:4px}.admin-sidebar nav a{color:#dce8f1;padding:11px 12px;border-radius:9px;font-size:13px}.admin-sidebar nav a:hover,.admin-sidebar nav a.active{background:#1c4f70}.admin-sidebar nav b{float:right;background:#e65b5b;color:#fff;border-radius:10px;padding:1px 6px}.admin-side-bottom{margin-top:auto;border-top:1px solid rgba(255,255,255,.1);padding:16px 10px;display:grid;gap:5px;font-size:12px}.admin-side-bottom span{color:#8fb3cd}.admin-side-bottom a{color:#fff;margin-top:8px}.admin-main{flex:1;min-width:0;padding:30px;max-width:1500px}.admin-top{display:flex;justify-content:space-between;gap:20px;margin-bottom:22px}.admin-top h1{margin:4px 0}.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:22px}.stat{background:#fff;border:1px solid var(--border);border-radius:15px;padding:18px}.stat span{display:block;color:var(--muted);font-size:12px}.stat strong{font-size:28px;margin-top:5px;display:block}.admin-section{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:18px}.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.admin-room-list{display:grid;gap:8px}.admin-room-row{display:flex;align-items:center;gap:13px;padding:13px;border:1px solid var(--border);border-radius:12px;background:#fff}.admin-room-row .room-info{display:grid;gap:3px}.admin-room-row .room-info span{font-size:12px;color:var(--muted)}.room-row-actions{display:flex;gap:10px;margin-left:auto;font-size:12px;font-weight:700}.link-row{color:inherit}.link-row:hover{border-color:#9fc5df}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.check{display:flex;align-items:center;gap:8px;font-weight:600}.check input{width:auto}.muted{font-size:12px;color:var(--muted)}.invite-box{display:flex;gap:8px}.invite-box input{flex:1}.copy-btn{background:#e8f2fb;color:var(--brand);padding:10px 14px;border-radius:9px;font-weight:700}.inline-form{display:inline-flex;gap:7px;margin:0}.success-btn,.danger-btn{padding:8px 11px;border-radius:8px;font-weight:700}.success-btn{background:#e7f6ed;color:#146c43}.danger-btn{background:#fde9e9;color:#a51d1d}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{text-align:left;padding:11px;border-bottom:1px solid var(--border);vertical-align:top}.chat-admin-top{align-items:center}.chat-tools{display:flex;gap:7px;align-items:center}.admin-thread{background:#dfe8ee;border:1px solid var(--border);border-radius:16px;padding:22px;max-height:68vh;overflow:auto;background-image:radial-gradient(rgba(18,105,167,.06) 1px,transparent 1px);background-size:18px 18px}.admin-message-card{background:#fff;border-radius:13px;padding:13px;margin-bottom:10px;box-shadow:0 1px 2px rgba(0,0,0,.07);position:relative}.admin-message-card.admin-message{background:#edf5ff}.admin-check{position:absolute;left:12px;top:14px;width:auto}.admin-message-head{display:flex;align-items:center;gap:7px;padding-left:25px}.admin-message-head time{margin-left:auto;color:var(--muted);font-size:11px}.admin-message-text{padding:7px 25px 0;line-height:1.45;overflow-wrap:anywhere}.admin-image{max-width:280px;max-height:320px;margin:8px 25px;border-radius:10px}.admin-message-actions{display:flex;gap:10px;margin:10px 25px 0;font-size:12px;font-weight:700}.admin-message-actions button{background:none;color:var(--brand);padding:0}.admin-compose{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px;margin-top:12px;display:flex;gap:10px;align-items:flex-end}.admin-compose textarea{min-height:60px;flex:1}.private-message{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px;max-width:75%;margin-bottom:9px}.private-message.mine{margin-left:auto;background:#e5f6e0}.private-message time{float:right;color:var(--muted);font-size:10px}.admin-private-thread{background:#edf2f5;border-radius:15px;padding:20px;min-height:50vh}.admin-person{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);padding:12px 0}.admin-person span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.badge{display:inline-block;background:#e8f2fb;color:var(--brand);padding:4px 7px;border-radius:8px}.admin-login{min-height:100vh;display:grid;place-items:center}.admin-card{width:min(410px,calc(100% - 30px));background:#fff;border:1px solid var(--border);border-radius:18px;padding:28px;box-shadow:0 15px 40px rgba(15,40,58,.12)}.brand-dot{width:45px;height:45px;border-radius:13px;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:900;font-size:22px}.admin-card h1{font-size:26px}.admin-card form{margin-top:18px}.full{width:100%;margin-top:15px}
@media(max-width:900px){.admin-sidebar{width:190px}.admin-main{padding:20px}.stat-grid{grid-template-columns:repeat(2,1fr)}.settings-grid{grid-template-columns:1fr}.messages{padding:18px 3%}.message{max-width:85%}}
@media(max-width:700px){.admin-app{display:block}.admin-sidebar{width:auto;padding:10px;position:sticky;top:0;z-index:20}.admin-logo{display:none}.admin-sidebar nav{display:flex;overflow:auto}.admin-sidebar nav a{white-space:nowrap;padding:8px}.admin-side-bottom{display:none}.admin-main{padding:14px}.stat-grid{grid-template-columns:repeat(2,1fr)}.admin-top{display:block}.chat-tools{margin-top:12px;flex-wrap:wrap}.admin-thread{max-height:none;padding:10px}.public-top{align-items:center}.community-shell{padding:18px 12px}.room-card{align-items:flex-start}.join-btn{margin-left:auto}.chat-shell{height:100dvh}.chat-header{padding:11px 12px}.chat-header h1{font-size:19px}.chat-header p{font-size:11px}.chat-user{font-size:11px}.chat-compose{padding:7px;flex-wrap:wrap}.chat-compose textarea{width:100%;flex-basis:100%}.compose-bottom{width:100%;flex-direction:row;align-items:center}.compose-bottom>span{margin-right:auto}.image-picker{margin-left:auto}.compose-bottom button{padding:9px 13px}.admin-compose{flex-wrap:wrap}.admin-compose textarea{width:100%;flex-basis:100%}.private-entry{display:block}.private-entry .outline-btn{display:inline-block;margin-top:10px}.search-panel form{display:block}.search-panel button{margin-top:8px}.invite-box{display:block}.invite-box button{margin-top:7px}.table-wrap{font-size:12px}}

.chat-header-actions{display:flex;align-items:center;gap:7px}.header-icon{position:relative;width:36px;height:36px;border-radius:10px;background:#eef4f8;display:grid;place-items:center}.header-icon b{position:absolute;right:-3px;top:-4px;background:#d62828;color:#fff;border-radius:10px;font-size:9px;padding:2px 5px}.chat-search{background:#fff;border-bottom:1px solid var(--border);padding:7px 14px}.chat-search form{display:flex;gap:6px;align-items:center}.chat-search input{padding:8px 10px}.chat-search button{background:#e9f2f8;color:var(--brand);padding:8px 11px;border-radius:8px}.chat-search a{font-size:12px}.message-actions form{display:inline;margin:0}.message-actions form button{background:none;color:var(--danger);padding:0;font-weight:700}.admin-choice-list{display:grid;gap:8px}.admin-choice{display:flex;align-items:center;gap:10px;border:1px solid var(--border);padding:12px;border-radius:12px;color:var(--ink)}.admin-choice span:last-child{margin-left:auto}.admin-room-list.large .admin-room-row{padding:17px}.room-unread{margin-left:auto;color:var(--muted);font-size:12px}.room-unread b{background:#e5f4ff;color:var(--brand);padding:5px 8px;border-radius:10px}.close-reply{align-self:flex-end;background:none!important;color:var(--danger)!important;padding:0!important}.replying{position:relative;padding-right:30px}.replying .close-reply{position:absolute;right:8px;top:8px}.chat-compose .primary{white-space:nowrap}
.unread-inline{color:var(--brand)}

/* Final Community Chat additions */
.message{position:relative}.message-ticks{font-size:14px;color:#7d8791;font-weight:800;margin-left:5px;letter-spacing:-3px}.message-ticks.read{color:#0b57d0}.voice-message{margin-top:7px}.voice-message audio{width:min(280px,100%);height:38px}.voice-picker{display:flex;align-items:center;gap:5px}.voice-record{width:38px;height:34px;border-radius:9px;background:#eef4f8;color:var(--brand);font-size:17px}.voice-record.recording{background:#d62828;color:#fff}.image-preview{bottom:auto;position:relative;right:auto;margin-top:7px;width:max-content;max-width:100%}.image-preview img{width:115px;height:115px}.chat-alert{margin:0;border-radius:0}.profile-recovery{margin-top:18px;border-top:1px solid var(--border);padding-top:15px}.profile-divider{border:0;border-top:1px solid var(--border);margin:20px 0}.room-card .room-info p{white-space:normal;overflow-wrap:anywhere}.room-card{min-width:0}.room-card .join-btn{flex:0 0 auto}.admin-message-card.mine{margin-left:auto;max-width:72%;background:#d9fdd3}.admin-message-card:not(.mine){max-width:72%;}.admin-voice{max-width:300px;width:100%;margin:8px 25px}.admin-compose-tools{display:flex;align-items:center}.admin-private-thread{background:#e9f0f4;background-image:radial-gradient(rgba(18,105,167,.05) 1px,transparent 1px);background-size:18px 18px}.private-message{position:relative}.private-message.mine .message-ticks{float:right}.private-message audio{max-width:300px;width:100%}.private-message img{max-width:280px;max-height:320px;border-radius:10px}.message-actions .message-ticks{margin-left:auto}.message.mine .message-actions{align-items:center}.admin-message-card .message-ticks{position:absolute;right:14px;bottom:10px}.admin-message-card .message-actions{padding-right:35px}
@media(max-width:700px){.community-shell{max-width:100%;overflow-x:hidden}.room-card{display:grid;grid-template-columns:46px minmax(0,1fr);align-items:start}.room-card .join-btn{grid-column:2;width:100%;text-align:center;margin:0}.room-info p{white-space:normal}.chat-header-actions{flex-wrap:wrap;justify-content:flex-end}.chat-user{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.messages{padding:14px 10px}.message{max-width:88%}.image-picker{position:static}.image-preview{margin-top:6px}.compose-bottom{flex-wrap:wrap}.compose-bottom>span{width:100%}.voice-picker{margin-left:auto}.admin-message-card.mine,.admin-message-card:not(.mine){max-width:88%}.admin-thread{padding:10px}.admin-message-head time{font-size:9px}.admin-image,.admin-voice{margin-left:25px;max-width:calc(100% - 25px)}}
/* File: /community/assets/css/community.css - final chat interaction refinements */
.chat-alert{border-radius:0;text-align:center;margin:0;position:relative;z-index:5}
.message-actions .edit-action,.admin-message-actions .edit-action{color:var(--brand)!important}
.message-actions .delete-action,.admin-message-actions .delete-action,.admin-message-actions .danger-text,.message-actions form .delete-action{color:var(--danger)!important} .admin-message-actions .delete-admin{color:var(--danger)!important}
.message-actions form{display:inline-flex}
.voice-preview{position:relative;display:flex;align-items:center;gap:5px;background:#f4f7f9;border:1px solid var(--border);border-radius:9px;padding:4px 28px 4px 5px;margin-left:4px;max-width:280px}
.voice-preview audio{width:210px;height:34px}
.remove-voice{position:absolute;right:3px;top:3px;width:24px;height:24px;border-radius:50%;background:var(--danger);color:#fff;font-weight:900;line-height:24px;padding:0}
.voice-status{font-size:11px;color:var(--muted)}
.admin-compose-tools{flex-wrap:wrap;gap:6px}
.admin-compose-tools .voice-preview{flex-basis:100%}
.admin-private-actions{display:flex;gap:10px;align-items:center;margin-top:9px;font-size:12px;font-weight:700}
.admin-private-actions form{display:inline-flex;margin:0}
.admin-private-actions .delete-action{background:none;border:0;padding:0;color:var(--danger);font-weight:700}
.private-message .message-actions{align-items:center}
.private-message .message-actions .message-ticks{margin-left:auto}
button:disabled{opacity:.65;cursor:not-allowed}
@media(max-width:700px){
 .voice-preview{max-width:100%;width:100%}.voice-preview audio{width:100%}
 .compose-bottom .voice-picker{max-width:100%;flex-wrap:wrap}
 .compose-bottom .voice-picker .voice-preview{width:100%;margin-left:0}
 .admin-compose-tools .voice-preview{width:100%}
 .room-card .room-info{min-width:0}
 .room-card .join-btn{min-width:0;max-width:100%}
}

/* File: /community/assets/css/community.css — final chat controls */
.field-help{display:block;color:var(--muted);font-size:12px;line-height:1.4;margin-top:-6px;margin-bottom:12px}
input[readonly]{background:#f1f5f8;color:#66727d;cursor:not-allowed}
.voice-wave{display:none;align-items:center;gap:2px;height:26px;padding:0 5px;border-radius:9px;background:#eef4f8;overflow:hidden}
.voice-wave.active{display:flex}
.voice-wave i{display:block;width:3px;height:7px;border-radius:3px;background:#1976b8;transform-origin:center;opacity:.65}
.voice-wave.active i{animation:ccVoiceWave .65s ease-in-out infinite alternate}
.voice-wave i:nth-child(2n){animation-delay:.08s}.voice-wave i:nth-child(3n){animation-delay:.16s}.voice-wave i:nth-child(4n){animation-delay:.24s}.voice-wave i:nth-child(5n){animation-delay:.32s}
@keyframes ccVoiceWave{from{height:5px}to{height:22px}}
.voice-timer{font-variant-numeric:tabular-nums;min-width:40px;font-size:12px;font-weight:700;color:var(--ink)}
.voice-preview{display:flex;align-items:center;gap:6px;padding:5px;background:#f4f8fb;border:1px solid var(--border);border-radius:9px}
.voice-preview audio{width:190px;max-width:45vw;height:32px}
.remove-voice{background:#d62828!important;color:#fff!important;width:25px;height:25px;border-radius:50%;padding:0!important;font-weight:900}
.message-actions .edit-action{color:#1976b8;font-weight:700;text-decoration:none}
.message-actions .delete-action{color:#d62828!important;background:none;border:0;padding:0;font-weight:700;cursor:pointer}
.admin-message-actions .edit-action{color:#1976b8;font-weight:700;text-decoration:none}
.admin-private-actions .edit-action{color:#1976b8;font-weight:700;text-decoration:none}
.admin-private-actions .delete-action{color:#d62828!important;background:none;border:0;padding:0;font-weight:700;cursor:pointer}
.private-chat-icon{position:relative}
.btn-unread{display:inline-block;background:#fff;color:#176b9e;border-radius:10px;padding:1px 5px;margin-left:3px;font-size:10px}
.room-pending{background:#e9eef2!important;color:#64717b!important;cursor:default!important}
.chat-header-actions .header-icon[title]{cursor:pointer}
@media(max-width:700px){.voice-wave{order:2}.voice-timer{order:3}.voice-preview{width:100%;box-sizing:border-box;order:4}.voice-preview audio{width:calc(100% - 34px);max-width:none}.voice-picker{flex-wrap:wrap}.voice-picker #voiceStatus{max-width:180px}.room-card .join-btn{overflow-wrap:normal;white-space:nowrap}}

/* File: /community/assets/css/community.css — final moderation/rate/link controls */
.danger-outline{background:#fff;border:1px solid #d62828;color:#b21f1f;padding:10px 13px;border-radius:10px;font-weight:700}.chat-header-actions .leave-room-form{margin:0}.chat-header-actions .outline-btn{white-space:nowrap}.rate-countdown{font-variant-numeric:tabular-nums;font-weight:800;margin-left:5px}.link-blocked{border-left:4px solid #d62828}

/* Community media viewer and video attachments. */
.chat-media-image{cursor:zoom-in;max-width:min(360px,100%);max-height:420px;border-radius:12px;display:block;margin-top:8px;object-fit:contain}.chat-video{display:block;width:min(420px,100%);max-height:420px;border-radius:12px;margin-top:8px;background:#000}.admin-video{display:block;width:min(420px,calc(100% - 50px));max-height:420px;margin:8px 25px;border-radius:10px;background:#000}.cc-lightbox{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.88);display:flex;align-items:center;justify-content:center;padding:24px;cursor:zoom-out}.cc-lightbox img{max-width:96vw;max-height:92vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 15px 50px rgba(0,0,0,.4)}.cc-lightbox-close{position:absolute;right:18px;top:14px;width:42px;height:42px;border-radius:50%;background:#fff;color:#111;font-size:28px;line-height:42px}.file-button{display:inline-flex;align-items:center;gap:5px;background:#eef4f8;color:#176b9e;border:1px solid var(--border);padding:8px 11px;border-radius:9px;font-weight:700;cursor:pointer}.file-button input{display:none}.chat-closed{background:#fff3f3;color:#a51d1d;border:1px solid #f0caca;padding:12px 14px;border-radius:12px;margin-top:10px}
@media(max-width:700px){.chat-media-image{max-width:100%;max-height:360px}.chat-video,.admin-video{width:100%;max-width:100%;margin-left:0;margin-right:0}.admin-video{max-height:320px}.cc-lightbox{padding:10px}.cc-lightbox-close{right:10px;top:10px}.admin-compose-tools{flex-wrap:wrap;gap:7px}}

/* Inline message editing, new-message jump banner and private read ticks. */
.inline-edit-box{margin-top:8px;display:grid;gap:7px}
.inline-edit-text{width:100%;min-height:70px;box-sizing:border-box;border:1px solid var(--border);border-radius:10px;padding:9px;resize:vertical;font:inherit;background:#fff}
.inline-edit-actions{display:flex;gap:8px}
.inline-edit-actions button{border:0;border-radius:8px;padding:7px 11px;font-weight:700;cursor:pointer}
.inline-edit-actions .inline-save{background:var(--brand);color:#fff}
.inline-edit-actions .inline-cancel{background:#eef2f5;color:#334}
.new-message-banner{position:sticky;top:5px;z-index:8;display:block;margin:5px auto -32px;border:0;border-radius:18px;background:var(--brand);color:#fff;padding:7px 14px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.15);cursor:pointer}
.message-ticks{margin-left:7px;color:#52616c;font-size:14px;font-weight:800;letter-spacing:-2px;white-space:nowrap}
.message-ticks.read{color:#0757b5}

/* File: /community/assets/css/community.css - channel and separate video controls */
.channel-label{display:inline-block;font-size:10px;letter-spacing:.08em;vertical-align:middle;padding:3px 6px;border-radius:999px;background:var(--brand);color:#fff;margin-left:6px;}
.reaction-wrap{position:relative;display:block;margin:8px 0 2px;z-index:3}.reaction-trigger{border:1px solid #d7dce5;background:#fff;border-radius:999px;padding:5px 10px;cursor:pointer;font-size:13px;line-height:1.2}.reaction-trigger span{margin-left:3px;color:#555}.reaction-trigger:hover,.reaction-trigger:focus{border-color:var(--brand);outline:none}.reaction-picker{position:absolute;left:0;bottom:calc(100% + 6px);width:280px;max-width:calc(100vw - 32px);padding:7px;background:#fff;border:1px solid #d9dee8;border-radius:14px;box-shadow:0 8px 24px rgba(0,0,0,.16);display:flex;flex-wrap:wrap;gap:3px}.reaction-picker[hidden]{display:none}.reaction-option{width:34px;height:34px;border:0;background:transparent;border-radius:8px;cursor:pointer;font-size:20px;padding:0}.reaction-option:hover,.reaction-option:focus{background:#eef4ff;outline:none}.reaction-summary{display:inline-flex;flex-wrap:wrap;gap:4px;margin-left:6px;vertical-align:middle}.reaction-count{border:1px solid #ddd;background:#fff;border-radius:999px;padding:3px 7px;cursor:pointer;font-size:13px;line-height:1.1}.reaction-count span{font-size:11px;color:#666;margin-left:2px}.reaction-count.active{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand) inset}.reaction-count:hover{border-color:var(--brand)}
@media(max-width:700px){.reaction-picker{width:270px}.reaction-option{width:32px;height:32px;font-size:19px}.reaction-trigger{padding:5px 9px}.reaction-summary{margin-left:4px}}

/* File: /community/assets/css/community.css - Step 2 navigation button visibility */
.back{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--brand);color:#fff!important;border:1px solid var(--brand);padding:10px 16px;border-radius:10px;font-weight:800;line-height:1.2;box-shadow:0 3px 9px rgba(18,105,167,.16);margin-bottom:16px;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.back:hover{background:var(--brand2);border-color:var(--brand2);color:#fff!important;transform:translateY(-1px)}
.back:focus-visible{outline:3px solid rgba(18,105,167,.25);outline-offset:2px}
.chat-header>div:first-child>a:first-child{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--brand);color:#fff!important;border:1px solid var(--brand);padding:8px 13px;border-radius:9px;font-size:13px;font-weight:800;line-height:1.2;box-shadow:0 2px 7px rgba(18,105,167,.14);margin-bottom:4px}
.chat-header>div:first-child>a:first-child:hover{background:var(--brand2);border-color:var(--brand2);color:#fff!important}
@media(max-width:700px){
 .back{width:auto;max-width:100%;padding:10px 14px;margin-bottom:14px}
 .chat-header>div:first-child>a:first-child{padding:8px 11px;font-size:12px}
}

/* File: /community/assets/css/community.css — Step 3 private chats entry */
.private-entry-btn{display:inline-block;white-space:nowrap;text-align:center}
@media(max-width:700px){.private-entry-btn{display:block;width:100%;margin-top:10px}}


/* Proposed mobile composer and compact room menu — surgical UI layer */
.chat-header{position:relative}
.header-search-toggle,.header-menu-toggle{background:#eef4f8;color:var(--ink);font-size:18px;font-weight:800}
.header-menu-toggle{font-size:24px;line-height:1}
.room-menu{position:absolute;right:12px;top:58px;z-index:50;width:230px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:6px;box-shadow:0 12px 30px rgba(15,40,58,.18)}
.room-menu[hidden],.attachment-menu[hidden],.chat-search[hidden]{display:none!important}
.room-menu a,.room-menu .danger-menu{display:flex;align-items:center;gap:8px;width:100%;padding:11px 12px;border-radius:9px;background:#fff;color:var(--ink);font-size:13px;text-align:left;font-weight:700}
.room-menu a:hover,.room-menu .danger-menu:hover{background:#eef4f8}
.room-menu b{margin-left:auto;background:#d62828;color:#fff;border-radius:10px;padding:2px 6px;font-size:9px}
.room-menu .leave-room-form{margin:0}.room-menu .exit-menu{color:var(--danger)}
.chat-search{transition:display .15s ease}
.chat-compose{position:relative;display:block;padding:8px 10px}
.compose-row{display:flex;align-items:center;gap:7px;min-width:0}
.compose-row>textarea{min-height:42px;height:42px;max-height:120px;flex:1;width:auto;border-radius:21px;padding:10px 14px;resize:none}
.compose-icon,.voice-record,.compose-send{flex:0 0 auto;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;padding:0}
.compose-icon{background:#eef4f8;color:var(--ink);font-size:21px;border:1px solid var(--border)}
.voice-record{background:#4f5b66;color:#fff;font-size:18px;border-radius:50%}
.voice-record.recording{background:#d62828}
.compose-send{background:var(--brand);color:#fff;font-weight:800;border-radius:50%;font-size:15px}
.attachment-picker{position:relative;flex:0 0 auto}
.attachment-menu{position:absolute;left:0;bottom:50px;z-index:40;width:190px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:6px;box-shadow:0 10px 28px rgba(15,40,58,.18)}
.attachment-option{display:flex;align-items:center;gap:10px;width:100%;padding:11px 10px;margin:0;border-radius:9px;color:var(--ink);font-size:13px;font-weight:700;cursor:pointer}
.attachment-option:hover{background:#eef4f8}.attachment-option input{display:none}
.compose-note{font-size:10px;color:var(--muted);text-align:center;margin-top:4px}
.composer-preview-area{display:flex;justify-content:flex-start}.composer-preview-area .image-preview{margin-top:5px}
.compose-row .voice-picker{display:flex;align-items:center;gap:4px;flex:0 0 auto;position:relative}.compose-row .voice-picker #voiceStatus,.compose-row .voice-picker .voice-wave,.compose-row .voice-picker .voice-timer{display:none}.compose-row .voice-picker .voice-preview{position:absolute;right:0;bottom:49px;width:260px;z-index:35;background:#fff}
@media(max-width:700px){
 .chat-header{padding:9px 10px}.chat-header>div:first-child{min-width:0;flex:1}.chat-header h1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-header p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-header-actions{flex:0 0 auto;flex-wrap:nowrap;gap:5px}.header-search-toggle,.header-menu-toggle{width:36px;height:36px}
 .room-menu{right:4px;top:50px;width:225px}
 .chat-compose{padding:7px 8px}.compose-row{gap:5px}.compose-row>textarea{min-width:0;height:42px;font-size:14px;padding:10px 12px}.compose-icon,.voice-record,.compose-send{width:40px;height:40px}.attachment-menu{bottom:48px;width:185px}.compose-note{font-size:9px}
}


/* Voice recorder timer visibility — surgical mobile/desktop fix. */
.voice-picker.is-recording{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.voice-picker.is-recording .voice-wave{display:flex!important;align-items:center}
.voice-picker.is-recording .voice-timer{display:inline-flex!important;align-items:center;justify-content:center;min-width:52px;height:28px;padding:0 8px;border:1px solid #efb5b5;border-radius:8px;background:#fff1f1;color:#b21f1f;font-size:14px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.voice-picker.is-recording #voiceStatus{display:inline-block!important;font-size:11px;font-weight:700;color:#b21f1f}
@media(max-width:700px){.voice-picker.is-recording{width:100%;justify-content:flex-end;gap:6px}.voice-picker.is-recording .voice-wave{flex:1;min-width:95px}.voice-picker.is-recording .voice-timer{min-width:54px;font-size:14px}.voice-picker.is-recording #voiceStatus{width:100%;text-align:right}}

/* Voice recording mobile layout — keep the live timer beside the mic. */
@media(max-width:700px){
 .voice-picker.is-recording{
   width:auto!important;
   max-width:calc(100vw - 120px);
   margin-left:auto;
   flex-wrap:nowrap!important;
   align-items:center;
   justify-content:flex-end;
   gap:5px;
   overflow:visible;
 }
 .voice-picker.is-recording #voiceStatus{
   display:none!important;
 }
 .voice-picker.is-recording .voice-timer{
   order:2!important;
   flex:0 0 auto;
   min-width:58px!important;
   height:34px;
   padding:0 7px;
   border-radius:9px;
   font-size:14px!important;
   font-weight:900;
   text-align:center;
   white-space:nowrap;
 }
 .voice-picker.is-recording .voice-wave{
   order:3!important;
   flex:0 1 78px!important;
   width:78px;
   min-width:58px!important;
   max-width:78px;
   height:24px;
   padding:0 4px;
 }
 .voice-picker.is-recording .voice-wave i{
   width:2px;
 }
}

/* WhatsApp-style reaction placement — chosen reaction sits just below the bottom-left of the message card. */
.message{overflow:visible}
.message .reaction-wrap{display:contents}
.message .reaction-trigger{display:inline-flex;align-items:center;gap:2px}
.message .reaction-summary{
  position:absolute;
  left:8px;
  bottom:-26px;
  z-index:12;
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin:0;
  padding:2px 6px 2px 4px;
  min-height:24px;
  background:#fff;
  border:1px solid #d7dce5;
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.12);
  vertical-align:middle;
}
.message .reaction-count{
  display:inline-flex;
  align-items:center;
  gap:2px;
  min-height:20px;
  border:0;
  background:transparent;
  border-radius:999px;
  padding:0 2px;
  font-size:16px;
  line-height:1;
  cursor:pointer;
}
.message .reaction-count span{
  font-size:11px;
  font-weight:800;
  color:#66727d;
  margin-left:1px;
}
.message .reaction-count.active{border:0;box-shadow:none;background:transparent}
.message .reaction-summary:empty{display:none}
.message .reaction-picker{z-index:30}

/* Reserve space below reacted messages so the reaction never covers Reply or the next message. */
.message:has(.reaction-summary:not(:empty)){margin-bottom:36px}

@media(max-width:700px){
  .message .reaction-summary{left:7px;bottom:-25px;min-height:23px;padding:2px 5px 2px 4px}
  .message .reaction-count{font-size:15px}
  .message .reaction-count span{font-size:10px}
  .message:has(.reaction-summary:not(:empty)){margin-bottom:35px}
}
/* OWNCHAT surgical: Community header action group. */
.community-home-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
@media(max-width:700px){.community-home-actions{width:100%;justify-content:flex-end}.community-home-actions .profile-pill,.community-home-actions .danger-outline{padding:9px 12px}}


/* File: /community/assets/css/community.css - admin chat visual alignment */
.admin-chat-page .admin-main{padding:0;max-width:1500px;background:#f4f7f9;display:flex;flex-direction:column;min-height:100vh;}
.admin-chat-page .admin-chat-header{margin:0;flex:0 0 auto;padding:12px 18px;align-items:center;}
.admin-chat-page .admin-chat-header>div:first-child>a:first-child{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--brand);color:#fff!important;border:1px solid var(--brand);padding:8px 13px;border-radius:9px;font-size:13px;font-weight:800;line-height:1.2;box-shadow:0 2px 7px rgba(18,105,167,.14);margin-bottom:4px;}
.admin-chat-page .admin-chat-header h1{font-size:22px;margin:3px 0;}
.admin-chat-page .admin-chat-header p{margin:0;font-size:13px;}
.admin-chat-page .admin-chat-actions{gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.admin-chat-page .header-action-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 11px;border:1px solid var(--border);border-radius:10px;background:#eef4f8;color:var(--brand);font-size:12px;font-weight:800;white-space:nowrap;}
.admin-chat-page .header-action-btn:hover{background:#e5f0f6;}
.admin-chat-page .header-action-btn.danger{color:#b21f1f;background:#fff0f0;border-color:#f0caca;}
.admin-chat-page .chat-search{margin:0;}
.admin-chat-page .admin-thread,.admin-chat-page .admin-private-thread{border-radius:0;border-left:0;border-right:0;flex:1;max-height:none;min-height:0;}
.admin-chat-page .admin-compose.chat-compose{margin:0;border-radius:0;border-left:0;border-right:0;padding:8px 10px;display:block;position:relative;}
.admin-chat-page .admin-compose.chat-compose textarea{min-height:42px;height:42px;max-height:120px;flex:1;width:auto;border-radius:21px;padding:10px 14px;resize:none;}
.admin-chat-page .admin-compose.chat-compose .compose-row{display:flex;align-items:center;gap:7px;min-width:0;}
.admin-chat-page .admin-compose.chat-compose .compose-note{text-align:center;}
.admin-chat-page .admin-compose.chat-compose .composer-preview-area{display:flex;justify-content:flex-start;}
.admin-chat-page .file-preview{width:min(420px,100%);}
@media(max-width:700px){
 .admin-chat-page .admin-main{min-height:100dvh;}
 .admin-chat-page .admin-chat-header{padding:9px 10px;align-items:flex-start;}
 .admin-chat-page .admin-chat-header h1{font-size:19px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 .admin-chat-page .admin-chat-header p{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
 .admin-chat-page .admin-chat-actions{gap:5px;max-width:48%;}
 .admin-chat-page .header-action-btn{min-height:34px;padding:7px 9px;font-size:11px;}
 .admin-chat-page .admin-compose.chat-compose{padding:7px 8px;}
 .admin-chat-page .admin-compose.chat-compose .compose-row{gap:5px;}
 .admin-chat-page .admin-compose.chat-compose textarea{min-width:0;height:42px;font-size:14px;padding:10px 12px;}
 .admin-chat-page .admin-compose.chat-compose .compose-icon,.admin-chat-page .admin-compose.chat-compose .voice-record,.admin-chat-page .admin-compose.chat-compose .compose-send{width:40px;height:40px;}
}

/* OWNCHAT surgical: restore solid red admin delete controls without removing existing CSS. */
.danger-btn{background:#c62828!important;color:#fff!important;border:1px solid #b71c1c!important}
.admin-message-actions .delete-admin,.admin-private-actions .delete-action,.moderation-delete{background:#c62828!important;color:#fff!important;border:1px solid #b71c1c!important;border-radius:8px!important;padding:6px 10px!important;font-weight:700!important;cursor:pointer}
.admin-message-actions .delete-admin:hover,.admin-private-actions .delete-action:hover,.moderation-delete:hover{background:#b71c1c!important}
.moderation-delete:disabled{background:#ef9a9a!important;color:#fff!important;cursor:not-allowed}

/* OWNCHAT surgical: exact admin delete button styling. */
.chat-tools .danger-btn,
.admin-message-actions button.delete-admin,
.admin-private-actions button.delete-action{
  background:#c62828!important;
  color:#fff!important;
  border:1px solid #b71c1c!important;
  border-radius:8px!important;
  padding:7px 11px!important;
  font-weight:700!important;
  cursor:pointer!important;
}
.chat-tools .danger-btn:hover,
.admin-message-actions button.delete-admin:hover,
.admin-private-actions button.delete-action:hover{
  background:#b71c1c!important;
  color:#fff!important;
}
.chat-tools .danger-btn:disabled{
  background:#ef9a9a!important;
  color:#fff!important;
  border-color:#e28a8a!important;
  cursor:not-allowed!important;
}

/* OWNCHAT — mention/tag picker. */
.mention-picker{position:relative;z-index:30;margin-top:4px;width:min(360px,100%);max-height:240px;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:4px}.mention-option{display:flex;width:100%;align-items:center;gap:8px;border:0;background:#fff;text-align:left;padding:9px 10px;border-radius:7px;cursor:pointer;color:var(--text)}.mention-option:hover,.mention-option:focus{background:#eef5fa;outline:none}.mention-option strong{font-size:13px}.mention-option span{font-size:10px;color:var(--muted);margin-left:auto}.mention-option strong:first-letter{color:var(--brand)}
@media(max-width:700px){.mention-picker{width:100%;max-height:210px}.mention-option{padding:10px}.mention-option span{font-size:9px}}


/* OWNCHAT surgical: keep admin participant chats inside the viewport so the
 * existing adminThread/adminPrivateMessages scroll logic controls the chat,
 * matching the working member chat behavior. No existing rules are removed. */
.admin-chat-page .admin-main{
  height:100vh;
  overflow:hidden;
}
.admin-chat-page .admin-thread,
.admin-chat-page .admin-private-thread{
  overflow-y:auto;
  overflow-x:hidden;
}
@media(max-width:700px){
  .admin-chat-page .admin-main{
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
  }
}

/* OWNCHAT surgical: mobile admin participant chat layout.
 * Mobile-only presentation changes. Existing chat, private chat, moderation,
 * media, composer and scroll logic remain untouched. */
@media(max-width:700px){
  .admin-chat-page .admin-main{
    height:100dvh;
    min-height:100dvh;
    overflow:hidden;
  }

  /* Keep the admin chat title readable and place room actions in one compact row. */
  .admin-chat-page .admin-chat-header{
    width:100%;
    padding:8px 10px;
    gap:6px;
    flex-direction:column;
    align-items:stretch;
  }
  .admin-chat-page .admin-chat-header>div:first-child{
    width:100%;
    min-width:0;
  }
  .admin-chat-page .admin-chat-header h1{
    font-size:18px;
    line-height:1.2;
    margin:2px 0 3px;
    max-width:100%;
  }
  .admin-chat-page .admin-chat-header p{
    font-size:11px;
    line-height:1.25;
    margin:0;
  }
  .admin-chat-page .admin-chat-actions{
    width:100%;
    max-width:none;
    display:flex;
    flex-wrap:nowrap;
    gap:6px;
    justify-content:stretch;
  }
  .admin-chat-page .header-action-btn{
    flex:1 1 0;
    min-width:0;
    min-height:36px;
    padding:7px 6px;
    font-size:11px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Keep the search bar compact so the message area gets the available height. */
  .admin-chat-page .chat-search{
    padding:6px 8px;
  }
  .admin-chat-page .chat-search form{
    gap:6px;
  }
  .admin-chat-page .chat-search input{
    min-width:0;
    padding:8px 10px;
    font-size:14px;
  }
  .admin-chat-page .chat-search button{
    flex:0 0 auto;
    padding:8px 12px;
    font-size:13px;
  }

  /* The thread is the scrolling area; the composer stays visible below it. */
  .admin-chat-page .admin-thread,
  .admin-chat-page .admin-private-thread{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .admin-chat-page .admin-compose.chat-compose{
    flex:0 0 auto;
    width:100%;
    padding:7px 8px;
    z-index:20;
    background:#fff;
  }
  .admin-chat-page .admin-compose.chat-compose .compose-row{
    width:100%;
    min-width:0;
    gap:5px;
    align-items:center;
  }
  .admin-chat-page .admin-compose.chat-compose textarea{
    min-width:0;
    width:auto;
    flex:1 1 auto;
    height:42px;
    min-height:42px;
    max-height:100px;
    font-size:14px;
    padding:10px 12px;
  }
  .admin-chat-page .admin-compose.chat-compose .compose-icon,
  .admin-chat-page .admin-compose.chat-compose .voice-record,
  .admin-chat-page .admin-compose.chat-compose .compose-send{
    flex:0 0 40px;
    width:40px;
    height:40px;
  }
  .admin-chat-page .admin-compose.chat-compose .compose-note{
    margin-top:3px;
    font-size:9px;
  }
}

/* OWNCHAT surgical: mobile admin viewport/composer and menu correction.
 * CSS-only layer. Keep all existing desktop/admin chat logic untouched.
 * The mobile admin app now reserves the top navigation space before sizing
 * the chat viewport, so the composer is visible without a scroll nudge.
 */
@media(max-width:700px){
  body.admin-chat-page{
    overflow:hidden;
  }

  /* The sidebar is a compact mobile navigation bar, not a full-height block.
   * This prevents it from stealing the height that belongs to the chat. */
  .admin-chat-page .admin-app{
    height:100dvh;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .admin-chat-page .admin-sidebar{
    width:100%;
    flex:0 0 auto;
    height:auto;
    min-height:0;
    padding:6px 7px 5px;
    position:relative;
    top:auto;
    display:block;
    overflow:hidden;
  }

  .admin-chat-page .admin-sidebar nav{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:3px;
    overflow:visible;
  }

  .admin-chat-page .admin-sidebar nav a{
    min-width:0;
    min-height:31px;
    padding:7px 3px;
    border-radius:7px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    white-space:normal;
    line-height:1.05;
    font-size:9px;
    overflow-wrap:anywhere;
  }

  .admin-chat-page .admin-sidebar nav b{
    position:absolute;
    margin-left:3px;
    margin-top:-12px;
    padding:1px 4px;
    font-size:8px;
  }

  /* Keep Sign out accessible on mobile instead of hiding it. */
  .admin-chat-page .admin-side-bottom{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin:4px 0 0;
    padding:4px 3px 0;
    border-top:1px solid rgba(255,255,255,.1);
    font-size:10px;
  }
  .admin-chat-page .admin-side-bottom span{
    display:none;
  }
  .admin-chat-page .admin-side-bottom a{
    margin:0 0 0 auto;
    padding:4px 8px;
    border-radius:7px;
    white-space:nowrap;
  }

  /* Use the exact space left after the mobile menu for the chat.
   * The thread and composer can then share one fixed viewport. */
  .admin-chat-page .admin-main{
    width:100%;
    flex:1 1 auto;
    height:auto;
    min-height:0;
    padding:0;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }

  .admin-chat-page .admin-chat-header,
  .admin-chat-page .chat-search,
  .admin-chat-page .chat-alert{
    flex:0 0 auto;
  }

  .admin-chat-page .admin-thread,
  .admin-chat-page .admin-private-thread{
    flex:1 1 0;
    min-height:0;
    height:auto;
    overflow-y:auto;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
  }

  .admin-chat-page .admin-compose.chat-compose{
    flex:0 0 auto;
    min-height:56px;
    max-height:none;
    position:relative;
    bottom:auto;
    margin:0;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    overflow:visible;
  }

  .admin-chat-page .admin-compose.chat-compose .compose-row{
    min-height:40px;
  }
}

/* Slightly wider mobile screens can give the navigation labels a little more room. */
@media(min-width:480px) and (max-width:700px){
  .admin-chat-page .admin-sidebar nav a{
    font-size:10px;
    padding-left:5px;
    padding-right:5px;
  }
}

/* OWNCHAT surgical: shared admin hamburger navigation.
 * This layer restores the full existing community.css and adds only the
 * mobile shared-navigation presentation. No existing chat logic is removed.
 */
.admin-mobile-bar{display:none}
.admin-menu-overlay{display:none}
.admin-mobile-head{display:none}
@media(max-width:700px){
  .admin-chat-page .admin-app,
  .admin-app{
    display:block;
    min-height:100dvh;
  }

  .admin-mobile-bar{
    display:flex;
    position:sticky;
    top:0;
    z-index:1000;
    width:100%;
    min-height:58px;
    align-items:center;
    gap:12px;
    padding:8px 12px;
    background:#10283a;
    color:#fff;
    box-shadow:0 2px 8px rgba(15,40,58,.14);
  }
  .admin-mobile-toggle{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:#1f5a7f;
    border:1px solid rgba(255,255,255,.22);
    border-radius:14px;
    color:#fff;
  }
  .admin-mobile-toggle span{
    display:block;
    width:24px;
    height:3px;
    border-radius:3px;
    background:#fff;
  }
  .admin-mobile-title{
    min-width:0;
    display:flex;
    flex-direction:column;
    line-height:1.05;
  }
  .admin-mobile-title strong{font-size:20px}
  .admin-mobile-title span{font-size:14px;color:#9fc0d6;margin-top:4px}

  .admin-sidebar{
    position:fixed!important;
    left:0;
    top:0;
    bottom:0;
    width:min(86vw,360px)!important;
    height:100dvh;
    min-height:100dvh;
    padding:0 16px 18px!important;
    display:flex!important;
    flex-direction:column;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:1002;
    transform:translateX(-105%);
    transition:transform .2s ease;
    box-shadow:8px 0 30px rgba(0,0,0,.18);
  }
  body.admin-menu-open .admin-sidebar{transform:translateX(0)}
  .admin-logo{display:none!important}

  .admin-mobile-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:74px;
    padding:12px 0;
    margin-bottom:14px;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  .admin-mobile-brand{
    display:flex;
    flex-direction:column;
    line-height:1.05;
  }
  .admin-mobile-brand strong{font-size:28px;color:#dce8f1}
  .admin-mobile-brand span{font-size:16px;color:#8fb3cd;margin-top:5px}
  .admin-menu-close{
    width:56px;
    height:56px;
    flex:0 0 56px;
    border-radius:15px;
    background:#29475c;
    color:#fff;
    font-size:34px;
    line-height:1;
  }

  .admin-sidebar nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px!important;
    overflow:visible!important;
  }
  .admin-sidebar nav a{
    min-width:0;
    min-height:58px;
    display:flex!important;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:10px 7px!important;
    border-radius:10px!important;
    font-size:15px!important;
    line-height:1.15;
    white-space:normal!important;
    overflow-wrap:anywhere;
  }
  .admin-sidebar nav a.active{background:#1c5a80}
  .admin-sidebar nav b{
    position:static;
    float:none;
    display:inline-block;
    margin-left:4px;
    vertical-align:top;
    padding:1px 5px;
  }

  .admin-side-bottom{
    display:grid!important;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:5px 10px;
    margin-top:auto!important;
    padding:18px 10px 4px!important;
    border-top:1px solid rgba(255,255,255,.12);
    font-size:12px;
  }
  .admin-side-bottom strong{grid-column:1/-1}
  .admin-side-bottom span{display:block}
  .admin-side-bottom a{
    margin:0!important;
    grid-column:1/-1;
    padding:8px 0;
  }

  .admin-menu-overlay{
    display:block;
    position:fixed;
    inset:0;
    z-index:1001;
    background:rgba(0,0,0,.45);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .2s ease,visibility .2s ease;
  }
  body.admin-menu-open .admin-menu-overlay{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  body.admin-menu-open{overflow:hidden}

  /* The mobile bar occupies its own normal-flow space. */
  .admin-chat-page .admin-app{
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .admin-chat-page .admin-main{
    flex:1 1 auto;
    min-height:0;
    height:auto;
  }

  /* Keep normal admin pages below the shared mobile bar. */
  .admin-app>.admin-main{min-width:0}
}

/* OWNCHAT surgical: align admin Reply/Edit/Delete controls as one row. */
.admin-message-actions,
.admin-private-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.admin-message-actions .reply-admin,
.admin-message-actions .edit-action,
.admin-message-actions .delete-admin,
.admin-private-actions .reply-private-admin,
.admin-private-actions .edit-action,
.admin-private-actions .delete-action{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  box-sizing:border-box;
  margin:0!important;
  line-height:1.2;
}
.admin-message-actions .reply-admin,
.admin-message-actions .edit-action,
.admin-private-actions .reply-private-admin,
.admin-private-actions .edit-action{
  padding:7px 10px!important;
  border-radius:8px;
  text-decoration:none;
}
.admin-message-actions .delete-admin,
.admin-private-actions .delete-action{
  padding:7px 11px!important;
}

/* OWNCHAT surgical: member-to-member moderation must have its own scroll area.
 * The private-chat PHP intentionally keeps this mode spectator-only.
 */
@media(max-width:700px){
  .admin-chat-page #moderationBulkDelete{
    display:flex;
    flex:1 1 0;
    flex-direction:column;
    min-height:0;
    overflow:hidden;
  }
  .admin-chat-page #moderationBulkDelete .moderation-thread{
    flex:1 1 0;
    min-height:0;
    height:auto;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
  }
}



/* OWNCHAT surgical: force a single-column mobile hamburger menu.
 * Overrides the earlier repeat(2,minmax(0,1fr)) rule in this same stylesheet.
 * Applies to every admin page and keeps all existing CSS and chat behavior.
 */
@media(max-width:700px){
  body .admin-sidebar nav,
  body.admin-menu-open .admin-sidebar nav,
  body.admin-chat-page .admin-sidebar nav{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    width:100%!important;
    gap:4px!important;
  }
  body .admin-sidebar nav>a,
  body.admin-menu-open .admin-sidebar nav>a,
  body.admin-chat-page .admin-sidebar nav>a{
    display:flex!important;
    grid-column:1 / -1!important;
    width:100%!important;
    min-width:0!important;
    min-height:44px!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:left!important;
    padding:12px 14px!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    line-height:1.25!important;
  }
}


/* OWNCHAT surgical fix: keep the admin room-chat composer visible on shorter
   Android screens such as the P55. Desktop layout and chat logic are unchanged. */
@media (max-width:700px) {
  /* Give the admin chat a definite viewport-sized flex container. The vh
     fallback helps older Android WebViews; dvh follows the live viewport. */
  html:has(body.admin-chat-page) {
    height:100%;
    overflow:hidden;
  }

  body.admin-chat-page {
    height:100vh;
    height:100dvh;
    min-height:0;
    overflow:hidden;
  }

  body.admin-chat-page .admin-app {
  height:88vh;
height:88dvh;
    min-height:0;
    display:flex!important;
    flex-direction:column;
    overflow:hidden;
  }

  body.admin-chat-page .admin-mobile-bar {
    flex:0 0 58px;
  }

  body.admin-chat-page .admin-main {
    display:flex;
    flex:1 1 0%;
    flex-direction:column;
    min-width:0;
    min-height:0;
    height:0!important;
    max-height:none;
    overflow:hidden;
    padding-bottom:0;
  }

  body.admin-chat-page .admin-chat-header,
  body.admin-chat-page .chat-search,
  body.admin-chat-page .chat-alert {
    flex:0 0 auto;
    min-width:0;
  }

  body.admin-chat-page .admin-thread,
  body.admin-chat-page .admin-private-thread {
    flex:1 1 0;
    min-height:0;
    height:auto;
    max-height:none!important;
    overflow-y:auto!important;
    overflow-x:hidden;
    -webkit-overflow-scrolling:touch;
    padding-bottom:12px;
  }

  body.admin-chat-page .admin-compose.chat-compose {
    position:relative!important;
    inset:auto!important;
    display:flex;
    flex:0 0 auto;
    flex-shrink:0;
    width:100%;
    box-sizing:border-box;
    margin:0;
    padding:6px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    overflow:visible!important;
    z-index:30;
    background:#fff;
    border-top:1px solid #dce4ea;
  }

  body.admin-chat-page .admin-compose.chat-compose .compose-row {
    display:flex;
    width:100%;
    min-width:0;
    align-items:center;
    gap:5px;
  }

  body.admin-chat-page .admin-compose.chat-compose textarea {
    flex:1 1 0;
    min-width:0;
    width:0;
    height:42px;
    min-height:42px;
    max-height:84px;
    box-sizing:border-box;
    font-size:14px;
    padding:10px 11px;
  }

  body.admin-chat-page .admin-compose.chat-compose .compose-icon,
  body.admin-chat-page .admin-compose.chat-compose .voice-record,
  body.admin-chat-page .admin-compose.chat-compose .compose-send {
    flex:0 0 38px;
    width:38px;
    height:38px;
  }

  body.admin-chat-page .admin-compose.chat-compose .compose-note {
    margin-top:2px;
    font-size:9px;
  }
}


/* OWNCHAT surgical correction: keep the admin composer clear of the Android bottom bar.
 * Mobile-only: the composer is pinned to the visible viewport on admin chat pages.
 * The message thread reserves space for it. User chat and desktop are unchanged.
 */
@media (max-width:700px) {
  body.admin-chat-page .admin-main {
    overflow:visible !important;
  }
  body.admin-chat-page .admin-thread,
  body.admin-chat-page .admin-private-thread {
    padding-bottom:100px !important;
  }
  body.admin-chat-page .admin-compose.chat-compose {
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    width:100% !important;
    margin:0 !important;
    z-index:1000 !important;
    box-shadow:0 -3px 12px rgba(0,0,0,.08);
  }
}


/* OWNCHAT settings: keep checkbox controls aligned with their descriptions. */
.admin-main .settings-grid .admin-section label.settings-checkbox{
 display:flex;
 align-items:center;
 justify-content:flex-start;
 gap:10px;
 width:100%;
 min-height:28px;
 margin:8px 0;
 line-height:1.35;
 cursor:pointer;
}
.admin-main .settings-grid .admin-section label.settings-checkbox input[type="checkbox"]{
 display:block;
 flex:0 0 16px;
 width:16px;
 height:16px;
 min-width:16px;
 margin:0;
 padding:0;
}
.admin-main .settings-grid .admin-section label.settings-checkbox span{display:inline-block;}

/* Keep microphone permission warnings above, never underneath, the composer. */
.chat-page .chat-alert{
 position:relative;
 z-index:30;
 flex:0 0 auto;
 width:100%;
 box-sizing:border-box;
}
.chat-page .chat-compose{position:relative;z-index:5;flex:0 0 auto;}

/* Admin spectator view: the form and message thread share the available
   desktop height. The thread itself scrolls, while the page stays in place. */
.admin-chat-page #moderationBulkDelete{
 display:flex;
 flex:1 1 0;
 flex-direction:column;
 min-height:0;
 margin:0;
 overflow:hidden;
}
.admin-chat-page #moderationBulkDelete .admin-private-thread.moderation-thread{
 flex:1 1 0;
 width:100%;
 height:auto;
 min-height:0;
 max-height:none;
 overflow-y:auto;
 overflow-x:hidden;
 overscroll-behavior:contain;
 -webkit-overflow-scrolling:touch;
}

/* OWNCHAT responsive reaction picker: compact first row, expandable emoji grid. */
.reaction-picker{box-sizing:border-box;width:min(320px,calc(100vw - 24px));max-height:min(310px,55vh);overflow-y:auto;overflow-x:hidden;display:block!important;z-index:80}
.reaction-picker[hidden]{display:none!important}.reaction-quick{display:flex;align-items:center;gap:3px;flex-wrap:nowrap}.reaction-quick .reaction-option{flex:0 0 32px}.reaction-more{width:32px;height:32px;flex:0 0 32px;border:1px solid #d7dce5;border-radius:9px;background:#f4f7fa;font-size:20px;line-height:1;cursor:pointer}.reaction-more-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px;margin-top:6px;padding-top:6px;border-top:1px solid #e5eaf0}.reaction-more-grid[hidden]{display:none!important}.reaction-more-grid .reaction-option{width:100%;min-width:0}
@media(max-width:420px){.reaction-picker{position:fixed!important;left:12px!important;right:12px!important;bottom:12px!important;top:auto!important;width:auto!important;max-width:none!important;max-height:48vh!important;box-shadow:0 8px 30px rgba(0,0,0,.25)!important}.reaction-more-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.reaction-option{font-size:21px!important}}
/* Moderator navigation counters: keep each badge in the label row, never over the text. */
.admin-sidebar nav a{display:flex;align-items:center;gap:6px;min-width:0}
.admin-sidebar nav a b{position:static!important;float:none!important;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0 0 0 auto!important;vertical-align:middle;padding:1px 6px!important;line-height:1.35!important;font-size:11px!important}
@media(max-width:700px){
  body.admin-body .admin-sidebar nav>a{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:7px!important;text-align:left!important;white-space:normal!important;overflow-wrap:normal!important}
  body.admin-body .admin-sidebar nav>a>b,
  body.admin-body.admin-chat-page .admin-sidebar nav>a>b{position:static!important;float:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 auto!important;margin:0 0 0 auto!important;vertical-align:middle!important;padding:1px 6px!important;font-size:11px!important;line-height:1.35!important}
}

/* OWNCHAT mobile reaction picker stability: use a viewport-fixed panel on mobile/tablet widths. */
@media(max-width:700px){.reaction-picker{position:fixed!important;left:12px!important;right:12px!important;bottom:12px!important;top:auto!important;width:auto!important;max-width:none!important;max-height:48vh!important;overflow-y:auto!important;z-index:99999!important;box-shadow:0 8px 30px rgba(0,0,0,.25)!important;touch-action:pan-y!important;-webkit-overflow-scrolling:touch!important}.reaction-picker[hidden]{display:none!important}}


/* OWNCHAT reaction picker portal: JS places the active picker directly under
   body so message scrollers and fixed composers cannot clip or cover it. */
body > .cc-reaction-floating,
body .cc-reaction-floating{
 position:fixed!important;
 display:block!important;
 box-sizing:border-box!important;
 margin:0!important;
 padding:8px!important;
 background:#fff!important;
 border:1px solid #d9dee8!important;
 border-radius:14px!important;
 box-shadow:0 10px 32px rgba(0,0,0,.24)!important;
 overflow-x:hidden!important;
 overflow-y:auto!important;
 overscroll-behavior:contain!important;
 -webkit-overflow-scrolling:touch!important;
 touch-action:pan-y!important;
 z-index:2147483000!important;
}
body .cc-reaction-floating .reaction-more-grid{grid-template-columns:repeat(7,minmax(0,1fr))!important}
body .cc-reaction-floating .reaction-option{min-width:0!important}