/* Fast, glassy chat presentation layered over the existing messaging system. */
:root{--chat-green:#167452;--chat-green-2:#20a475;--chat-glass:rgba(255,255,255,.82);--chat-line:rgba(39,83,63,.14);--chat-shadow:0 24px 70px rgba(16,54,38,.18)}
.main-content:has(.chat-container){padding:18px;background:radial-gradient(circle at 15% 10%,#daf0e2 0,transparent 28rem),linear-gradient(135deg,#eef7f1,#f7faf8);overflow:hidden}
.chat-container{width:min(1440px,100%);max-width:1440px;height:calc(100dvh - 96px);min-height:560px;border:1px solid rgba(255,255,255,.72);border-radius:26px;background:rgba(239,234,226,.8);box-shadow:var(--chat-shadow);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);isolation:isolate}
.chat-sidebar{width:380px;min-width:320px;background:var(--chat-glass);border-color:var(--chat-line);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px)}
.chat-sidebar-header{padding:18px 20px;min-height:72px;background:linear-gradient(135deg,rgba(18,91,65,.96),rgba(28,128,91,.92));color:#fff;border:0}.chat-sidebar-header h2{font-family:"Noto Kufi Arabic",Inter,sans-serif;font-size:1.08rem;font-weight:700}.chat-sidebar-close{color:#fff;background:rgba(255,255,255,.12)}
.chat-search{margin:12px;padding:0 14px;min-height:46px;border:1px solid rgba(44,96,71,.1);border-radius:15px;background:rgba(241,247,243,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}.chat-search input{font-size:.9rem}
.chat-conversation-list{overscroll-behavior:contain}.chat-conv-item{min-height:78px;margin:2px 8px;padding:11px 12px;border:0;border-radius:14px;transition:background .16s,transform .16s}.chat-conv-item:hover{background:rgba(221,241,228,.74);transform:translateX(-2px)}.chat-conv-item.active{background:linear-gradient(135deg,rgba(205,236,216,.94),rgba(231,247,237,.92));border:1px solid rgba(25,125,84,.16);border-inline-start:4px solid var(--chat-green-2)}
.chat-conv-avatar,.chat-main-header-avatar{background:linear-gradient(145deg,#d9f2e3,#f7fbf8);border:2px solid rgba(255,255,255,.9);box-shadow:0 5px 14px rgba(21,87,59,.13)}.chat-conv-avatar{width:52px;height:52px}.chat-conv-title{font-weight:750;color:#17392c}.chat-conv-preview{font-size:.79rem}.chat-conv-badge{background:var(--chat-green-2);box-shadow:0 3px 10px rgba(32,164,117,.28)}
.chat-main{background-color:#e9e4da;background-image:linear-gradient(rgba(248,246,241,.74),rgba(248,246,241,.74)),radial-gradient(rgba(64,108,84,.12) 1px,transparent 1px);background-size:auto,20px 20px}
.chat-main-header{min-height:72px;padding:10px 18px;background:rgba(250,252,250,.87);border-color:var(--chat-line);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}.chat-main-header-text h3{font-size:1rem;font-weight:800;color:#17382c}.chat-status{font-size:.75rem}.chat-action-btn,.chat-mobile-back{width:42px;height:42px;border-radius:13px;background:rgba(230,241,234,.9);color:#245a43;transition:background .16s,transform .16s}.chat-action-btn:hover,.chat-mobile-back:hover{background:#d7ecdf;transform:translateY(-1px)}
.chat-messages{padding:22px clamp(16px,5vw,72px);gap:4px;scroll-behavior:auto;overscroll-behavior:contain;contain:layout paint}.chat-message{max-width:min(72%,680px);content-visibility:auto;contain-intrinsic-size:auto 70px}.chat-message-avatar{width:31px;height:31px;box-shadow:0 3px 10px rgba(20,60,40,.12)}.chat-message-bubble{padding:9px 12px 7px;border-radius:14px;box-shadow:0 2px 8px rgba(27,56,41,.1)}.chat-message.sent .chat-message-bubble{background:linear-gradient(145deg,#d6f7df,#ccefd7);color:#132c22;border-end-end-radius:4px}.chat-message.received .chat-message-bubble{background:rgba(255,255,255,.96);color:#182b23;border-end-start-radius:4px}.chat-message-text{line-height:1.65}.chat-message-sender{font-weight:800;color:var(--chat-green)}.chat-date-divider span{background:rgba(255,255,255,.86);border:1px solid rgba(34,92,65,.1);box-shadow:0 3px 12px rgba(30,66,48,.08);backdrop-filter:blur(8px)}
.chat-input-area{padding:12px 18px;background:rgba(248,250,248,.9);border-color:var(--chat-line);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.chat-input-wrapper{min-height:50px;border:1px solid rgba(43,91,68,.16);border-radius:17px;background:#fff;padding:4px 14px}.chat-input-wrapper:focus-within{border-color:var(--chat-green-2);box-shadow:0 0 0 4px rgba(32,164,117,.1)}.chat-input{font-size:.95rem!important;background:transparent!important}.chat-send-btn{width:50px;height:50px;background:linear-gradient(145deg,var(--chat-green-2),var(--chat-green))!important;box-shadow:0 8px 20px rgba(23,116,82,.28)}
.chat-context-menu,.chat-reaction-picker{border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.9);box-shadow:0 18px 50px rgba(16,55,38,.2);backdrop-filter:blur(18px)}
#chatFab{touch-action:none;user-select:none;z-index:1001;transition:left .22s ease,right .22s ease,box-shadow .2s;filter:drop-shadow(0 12px 18px rgba(13,77,51,.28))}#chatFab.is-dragging{transition:none;cursor:grabbing;filter:drop-shadow(0 18px 28px rgba(13,77,51,.38))}#chatFab .notif-fab-link{border:1px solid rgba(255,255,255,.65);background:linear-gradient(145deg,rgba(35,168,118,.95),rgba(15,105,72,.96));backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);cursor:grab}
[data-theme="dark"] .main-content:has(.chat-container){background:radial-gradient(circle at 15% 10%,#1c3b2d,transparent 28rem),#0e1611}[data-theme="dark"] .chat-sidebar,[data-theme="dark"] .chat-main-header,[data-theme="dark"] .chat-input-area{background:rgba(19,31,24,.9)}[data-theme="dark"] .chat-main{background-color:#132119;background-image:radial-gradient(rgba(141,194,164,.07) 1px,transparent 1px)}[data-theme="dark"] .chat-conv-title,[data-theme="dark"] .chat-main-header-text h3{color:#eaf6ee}[data-theme="dark"] .chat-search,[data-theme="dark"] .chat-input-wrapper{background:#1b2c22;border-color:#365141}[data-theme="dark"] .chat-message.received .chat-message-bubble{background:#213329;color:#ecf5ef}[data-theme="dark"] .chat-message.sent .chat-message-bubble{background:#18593f;color:#f2fff7}
@media(max-width:1024px){.main-content:has(.chat-container){padding:0}.chat-container{height:calc(100dvh - 64px);min-height:0;max-width:none;border:0;border-radius:0}.chat-sidebar{width:340px;min-width:300px}.chat-messages{padding:18px 22px}}
@media(max-width:768px){body:has(.chat-container){overflow:hidden}.main-content:has(.chat-container){padding:0}.chat-container{height:calc(100dvh - 56px);width:100%;box-shadow:none;background:#f1ede6}.chat-container[data-conversation-id] .chat-sidebar{display:none}.chat-sidebar{width:100%;min-width:0}.chat-sidebar-header{min-height:62px;padding:12px 16px}.chat-conv-item{min-height:72px;margin:2px 7px}.chat-main-header{min-height:60px;padding:8px 10px}.chat-main-header-actions .chat-action-btn{width:38px;height:38px}.chat-messages{padding:12px 9px 16px;gap:3px;scroll-behavior:auto}.chat-message{max-width:88%;content-visibility:auto}.chat-message-bubble{padding:8px 10px 6px}.chat-input-area{padding:8px 9px calc(8px + env(safe-area-inset-bottom,0px))}.chat-input-wrapper{min-height:44px;border-radius:15px}.chat-send-btn{width:44px;height:44px}.chat-reaction-picker{bottom:70px}.notif-fab#chatFab{bottom:76px!important}}
@media(max-width:380px){.chat-message{max-width:92%}.chat-conv-avatar{width:46px;height:46px}.chat-main-header-info{gap:7px}.chat-main-header-actions .chat-action-btn:first-child{display:none}}
@media(prefers-reduced-motion:reduce){.chat-conv-item,.chat-action-btn,#chatFab{transition:none!important}.chat-skeleton{animation:none!important}}
.chat-exit-btn{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(219,67,67,.1);color:#b42323;text-decoration:none;font-size:1.55rem;line-height:1;transition:background .16s,transform .16s}.chat-exit-btn:hover{background:rgba(219,67,67,.18);transform:translateY(-1px);color:#981b1b}.chat-sidebar-header .chat-exit-btn{background:rgba(255,255,255,.14);color:#fff}#chatFab{touch-action:manipulation;transition:left .22s ease,right .22s ease,transform .2s,box-shadow .2s}#chatFab .notif-fab-link{cursor:pointer}#chatFab.is-dragging{touch-action:none;transition:none;cursor:grabbing;transform:scale(1.1)}#chatFab.is-dragging .notif-fab-link{cursor:grabbing}@media(max-width:768px){.chat-main-header-actions{gap:4px}.chat-main-header-actions .chat-action-btn,.chat-main-header-actions .chat-exit-btn{width:38px;height:38px;border-radius:11px}}