:root {
  --primary: #0d9488; --primary-dark: #0f766e; --primary-deep: #115e59; --accent: #14b8a6;
  --bg: #eef2f3; --chat-bg: #e7eef0; --surface: #ffffff; --border: #e3e8ea;
  --text: #14202b; --muted: #7a8893; --danger: #ef4444; --success: #22c55e;
  --own-bubble: #0d9488; --other-bubble: #ffffff;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.error { background: #fdecec; color: var(--danger); padding: 10px 12px; border-radius: 10px; font-size: 14px; margin-bottom: 12px; }

.auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #115e59, #0d9488 55%, #14b8a6); padding: 20px; }
.auth-card { width: 100%; max-width: 380px; background: var(--surface); border-radius: 22px; padding: 30px; box-shadow: 0 18px 50px rgba(13,148,136,.35); }
.brand { text-align: center; margin-bottom: 22px; }
.brand-logo { width: 70px; height: 70px; border-radius: 50%; background: linear-gradient(145deg, #0d9488, #0f766e); color: #fff; font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; box-shadow: 0 8px 20px rgba(20,184,166,.4); }
.brand h1 { margin: 6px 0 2px; font-size: 25px; color: var(--primary-deep); }
.flags { font-size: 20px; margin-top: 8px; letter-spacing: 4px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.field input, .field select { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 15px; background: #f6f9f9; outline: none; }
.field input:focus, .field select:focus { border-color: var(--primary); background: #fff; }
.btn-primary { width: 100%; background: var(--primary); color: #fff; border: none; padding: 13px; border-radius: 24px; font-size: 16px; font-weight: 700; cursor: pointer; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary.small { width: auto; padding: 9px 18px; font-size: 14px; }
.toggle { text-align: center; margin-top: 16px; }
.toggle span { color: var(--primary-dark); font-weight: 600; cursor: pointer; font-size: 14px; }

.app { display: flex; height: 100vh; }
.sidebar { width: 300px; background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 16px; background: linear-gradient(135deg, #0f766e, #0d9488); color: #fff; font-weight: 700; }
.logo-sm { font-size: 16px; color: #fff; }
.icon-btn { background: rgba(255,255,255,.25); color: #fff; border: none; width: 32px; height: 32px; border-radius: 50%; font-size: 18px; cursor: pointer; }
.channel-list { flex: 1; overflow-y: auto; }
.channel-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; border-bottom: 1px solid #f1f5f6; }
.channel-item:hover { background: #f5fbfa; }
.channel-item.active { background: #e3f7f4; }
.channel-emoji { width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(145deg, #14b8a6, #0d9488); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.channel-info { flex: 1; min-width: 0; }
.channel-name { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.channel-preview { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.badge { background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; border-radius: 12px; padding: 2px 7px; min-width: 20px; text-align: center; }
.sidebar-foot { border-top: 1px solid var(--border); padding: 12px 16px; display: flex; flex-direction: column; gap: 8px; }
.me-badge { font-weight: 600; font-size: 14px; }
.presence-select { padding: 7px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; }
.text-btn { background: none; border: none; color: var(--primary-dark); cursor: pointer; font-size: 13px; text-align: left; padding: 2px 0; font-weight: 600; }

.main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--chat-bg); }
.chat-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; background: var(--surface); border-bottom: 1px solid var(--border); }
.chat-title { font-weight: 700; font-size: 17px; }
.btn-call { background: var(--primary); color: #fff; border: none; padding: 9px 18px; border-radius: 22px; font-weight: 600; cursor: pointer; box-shadow: 0 3px 8px rgba(20,184,166,.35); }
.messages { flex: 1; overflow-y: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.msg { display: flex; flex-direction: column; max-width: 72%; }
.msg.own { align-self: flex-end; align-items: flex-end; }
.msg-sender { font-size: 12px; font-weight: 700; color: var(--primary-deep); margin: 0 0 3px 12px; }
.msg-bubble { background: var(--other-bubble); padding: 9px 14px; border-radius: 16px 16px 16px 4px; font-size: 15px; line-height: 1.4; word-break: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.06); }
.msg.own .msg-bubble { background: var(--own-bubble); color: #fff; border-radius: 16px 16px 4px 16px; }
.msg-time { font-size: 11px; color: var(--muted); margin: 2px 8px 0; }
.composer { display: flex; gap: 10px; padding: 12px 18px; background: var(--surface); border-top: 1px solid var(--border); }
.composer input { flex: 1; padding: 12px 16px; border: 1px solid var(--border); border-radius: 24px; font-size: 15px; background: #f6f9f9; outline: none; }
.composer input:focus { border-color: var(--primary); background: #fff; }

.call-banner { display: flex; align-items: center; gap: 12px; background: #e3f7f4; color: var(--primary-deep); padding: 10px 20px; border-bottom: 1px solid #c8eee8; font-weight: 600; font-size: 14px; }
.call-banner .btn-primary.small { margin-left: auto; }

.call-overlay { position: fixed; inset: 0; background: linear-gradient(160deg, #115e59, #0f766e 55%, #134e4a); color: #fff; z-index: 200; display: flex; flex-direction: column; }
.call-top { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 26px; }
.call-room { font-size: 20px; font-weight: 700; }
.call-sub { font-size: 13px; color: rgba(255,255,255,.7); margin-top: 2px; }
.call-timer { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.call-tiles { flex: 1; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 24px; padding: 20px; overflow-y: auto; }
.tile { width: 150px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.tile-avatar { width: 96px; height: 96px; border-radius: 50%; background: rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700; position: relative; border: 3px solid transparent; }
.tile-avatar.speaking { border-color: #5eead4; box-shadow: 0 0 0 5px rgba(94,234,212,.3); }
.tile-avatar.self { background: rgba(45,212,191,.4); }
.tile-name { font-size: 14px; font-weight: 600; text-align: center; }
.tile-mic { position: absolute; bottom: -2px; right: -2px; width: 28px; height: 28px; border-radius: 50%; background: #115e59; display: flex; align-items: center; justify-content: center; font-size: 13px; border: 2px solid #0f766e; }
.tile-mic.muted { background: var(--danger); }
.call-controls { display: flex; justify-content: center; gap: 20px; padding: 26px; }
.call-ctrl { display: flex; flex-direction: column; align-items: center; gap: 4px; background: rgba(255,255,255,.16); color: #fff; border: none; width: 86px; height: 72px; border-radius: 18px; font-size: 24px; cursor: pointer; }
.call-ctrl .lbl { font-size: 12px; }
.call-ctrl.active { background: rgba(255,255,255,.34); }
.call-ctrl.danger { background: var(--danger); }
.btn-danger { background: var(--danger); color: #fff; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-weight: 600; }

.modal { position: fixed; inset: 0; background: rgba(15,118,110,.35); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 16px; }
.modal-card { background: var(--surface); border-radius: 16px; padding: 24px; width: 100%; max-width: 420px; }
.modal-card.wide { max-width: 880px; max-height: 88vh; overflow-y: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.stats-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.stat { background: #e3f7f4; border-radius: 12px; padding: 14px 18px; flex: 1; min-width: 110px; }
.stat .num { font-size: 24px; font-weight: 700; color: var(--primary-deep); }
.stat .lbl { font-size: 12px; color: var(--muted); }
.admin-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.tab { background: none; border: none; padding: 9px 16px; cursor: pointer; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; }
.tab.active { color: var(--primary-dark); border-bottom-color: var(--primary); }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.chip.admin { background: #fde9c8; color: #9a6700; }
.chip.inactive { background: #fdecec; color: var(--danger); }
.chip.active { background: #d8f5ee; color: var(--primary-deep); }
.mini-btn { font-size: 12px; padding: 4px 9px; border: 1px solid var(--border); background: #fff; border-radius: 14px; cursor: pointer; margin: 0 4px 4px 0; }
.mini-btn:hover { border-color: var(--primary); color: var(--primary-dark); }
@media (max-width: 640px) {
  .sidebar { width: 84px; }
  .channel-name, .channel-preview, .logo-sm, .me-badge { display: none; }
  .channel-item { justify-content: center; }
}

/* Modal close button + sticky header + tidy actions */
.modal-close { background: #eef2f3; color: #14202b; border: none; width: 34px; height: 34px; border-radius: 50%; font-size: 15px; line-height: 1; cursor: pointer; }
.modal-close:hover { background: #d8e0e2; }
.modal-card.wide .modal-head { position: sticky; top: 0; background: var(--surface); padding: 4px 0 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); z-index: 3; }
.admin-pane td:last-child { white-space: nowrap; }
.admin-pane table { min-width: 640px; }
.admin-pane { overflow-x: auto; }

/* ===== Professional Admin Portal ===== */
.modal-card.wide { padding: 26px 28px; }
.stats-row { gap: 16px; }
.stat { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; box-shadow: 0 1px 3px rgba(16,40,50,.05); }
.stat-ic { width: 44px; height: 44px; border-radius: 12px; background: #e3f7f4; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.stat .num { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1; }
.stat .lbl { font-size: 12px; color: var(--muted); margin-top: 3px; }

.au-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.au-filter { padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; background: #fff; cursor: pointer; }
.au-create { background: #f6fbfa; border: 1px solid #d6ece8; border-radius: 16px; padding: 18px; margin-bottom: 18px; }
.au-create-title { font-weight: 700; margin-bottom: 12px; color: var(--primary-deep); }
.au-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.au-input { padding: 11px 13px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; background: #fff; outline: none; }
.au-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }

.au-tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; }
.au-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; min-width: 720px; }
.au-table thead th { background: #f7fafb; color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); }
.au-table td { padding: 12px 16px; border-bottom: 1px solid #eef2f3; vertical-align: middle; }
.au-table tbody tr:last-child td { border-bottom: none; }
.au-table tbody tr:hover { background: #f8fcfb; }
.au-user { display: flex; align-items: center; gap: 12px; }
.au-avatar { width: 40px; height: 40px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.au-meta { min-width: 0; }
.au-name { font-weight: 600; }
.au-email { font-size: 12px; color: var(--muted); }
.office-tag { background: #eef3f4; border-radius: 20px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: #3a4750; white-space: nowrap; }
.au-role { padding: 7px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 13px; background: #fff; cursor: pointer; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 20px; font-size: 12px; font-weight: 700; }
.status-pill i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.status-pill.on { background: #dcf7ef; color: #0a8f6a; } .status-pill.on i { background: #10b981; }
.status-pill.off { background: #fdecec; color: #c0392b; } .status-pill.off i { background: #ef4444; }
.au-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tgl { border: 1px solid var(--border); background: #fff; color: var(--muted); border-radius: 20px; padding: 5px 11px; font-size: 12px; font-weight: 600; cursor: pointer; }
.tgl.on { background: #e3f7f4; border-color: #9fe0d6; color: var(--primary-deep); }
.act { border: 1px solid var(--border); background: #fff; color: var(--text); border-radius: 20px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; }
.act:hover { border-color: var(--primary); }
.act.danger { color: #c0392b; border-color: #f3c9c4; } .act.danger:hover { background: #fdecec; }
.act.go { color: #0a8f6a; border-color: #bfe9dc; } .act.go:hover { background: #dcf7ef; }
@media (max-width: 560px) { .au-grid { grid-template-columns: 1fr; } }

/* ===== Modern polish (chat list, header, scrollbars) ===== */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

.sidebar-search { padding: 10px 14px 6px; }
.sidebar-search input { width: 100%; padding: 9px 14px; border: none; border-radius: 12px; background: #f0f4f5; font-size: 14px; outline: none; }
.sidebar-search input:focus { background: #fff; box-shadow: 0 0 0 2px rgba(13,148,136,.25); }

.channel-item { padding: 11px 14px; gap: 13px; border-bottom: none; position: relative; transition: background .12s; }
.channel-item:hover { background: #f4f8f8; }
.channel-item.active { background: #e6f2f0; }
.channel-item.active::before { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary); }
.ch-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(145deg, #14b8a6, #0d9488); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(13,148,136,.28); }
.channel-info { flex: 1; min-width: 0; }
.ch-row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ch-row2 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.channel-name { font-weight: 600; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-time { font-size: 11px; color: var(--muted); flex-shrink: 0; }
.channel-preview { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.channel-preview.calling { color: var(--primary); font-weight: 600; }
.ch-empty { padding: 36px 16px; text-align: center; color: var(--muted); font-size: 13px; }

.chat-head-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-head-meta { min-width: 0; }
.chat-avatar { width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(145deg, #14b8a6, #0d9488); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; box-shadow: 0 2px 6px rgba(13,148,136,.28); }

.messages { gap: 10px; }
.msg-bubble { box-shadow: 0 1px 2px rgba(16,40,50,.08); }

.channel-list::-webkit-scrollbar, .messages::-webkit-scrollbar, .modal-card.wide::-webkit-scrollbar, .au-tablewrap::-webkit-scrollbar { width: 8px; height: 8px; }
.channel-list::-webkit-scrollbar-thumb, .messages::-webkit-scrollbar-thumb, .modal-card.wide::-webkit-scrollbar-thumb, .au-tablewrap::-webkit-scrollbar-thumb { background: #cdd8da; border-radius: 8px; }
.channel-list::-webkit-scrollbar-thumb:hover, .messages::-webkit-scrollbar-thumb:hover { background: #b6c3c5; }

@media (max-width: 640px) {
  .sidebar { width: 76px; }
  .sidebar-search, .channel-info, .logo-sm, .me-badge { display: none; }
  .channel-item { justify-content: center; padding: 10px 8px; }
}

/* ===== Direct messages ===== */
.head-actions { display: flex; gap: 8px; }
.ch-avatar { position: relative; }
.ch-avatar.dm, .chat-avatar.dm, .person-av { background: linear-gradient(145deg, #6366f1, #4f46e5) !important; box-shadow: 0 2px 6px rgba(79,70,229,.28); }
.pres { position: absolute; bottom: 0; right: 0; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; border: 2px solid #fff; }
.dm-search { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; font-size: 14px; outline: none; margin-bottom: 12px; }
.dm-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,148,136,.15); }
.dm-people { max-height: 52vh; overflow-y: auto; }
.person { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 12px; cursor: pointer; }
.person:hover { background: #f1f7f6; }
.person-av { position: relative; width: 42px; height: 42px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; }
.person-meta { min-width: 0; }
.person-name { font-weight: 600; }
.person-sub { font-size: 12px; color: var(--muted); }

/* ===== Incoming call ring popup ===== */
.ring { position: fixed; inset: 0; background: rgba(15,30,40,.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 400; }
.ring-card { background: #fff; border-radius: 24px; padding: 30px 34px; text-align: center; box-shadow: 0 24px 70px rgba(0,0,0,.35); width: 320px; max-width: 90vw; }
.ring-av { width: 92px; height: 92px; border-radius: 50%; margin: 0 auto 16px; background: linear-gradient(145deg, #14b8a6, #0d9488); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 38px; font-weight: 700; box-shadow: 0 0 0 0 rgba(13,148,136,.5); animation: ringPulse 1.5s infinite; }
.ring-av.dm { background: linear-gradient(145deg, #6366f1, #4f46e5); }
@keyframes ringPulse { 0% { box-shadow: 0 0 0 0 rgba(13,148,136,.45); } 70% { box-shadow: 0 0 0 18px rgba(13,148,136,0); } 100% { box-shadow: 0 0 0 0 rgba(13,148,136,0); } }
.ring-name { font-size: 20px; font-weight: 700; color: var(--text); }
.ring-sub { font-size: 13px; color: var(--muted); margin-top: 4px; }
.ring-actions { display: flex; justify-content: center; gap: 40px; margin-top: 24px; }
.ring-btn { display: flex; flex-direction: column; align-items: center; gap: 7px; border: none; background: none; cursor: pointer; font-size: 26px; color: var(--text); }
.ring-btn span { font-size: 12px; font-weight: 600; }
.ring-btn::before { content: ""; }
.ring-btn.answer { color: #fff; }
.ring-btn.answer, .ring-btn.decline { width: 62px; height: 62px; border-radius: 50%; justify-content: center; }
.ring-btn.answer { background: #22c55e; box-shadow: 0 6px 16px rgba(34,197,94,.45); }
.ring-btn.decline { background: var(--danger); color: #fff; box-shadow: 0 6px 16px rgba(239,68,68,.4); }
.ring-btn span { position: absolute; }
.ring-actions { align-items: flex-start; }
.ring-btn { position: relative; padding-bottom: 20px; }
.ring-btn span { bottom: -2px; left: 50%; transform: translateX(-50%); color: var(--muted); white-space: nowrap; }
.ring-btn.answer:active, .ring-btn.decline:active { transform: scale(.94); }

/* ═══════════ v2 features: real-time, files, reactions, video, search ═══════════ */
.chat-head-actions { display: flex; gap: 8px; align-items: center; }
.btn-call.ghost { background: #fff; color: var(--primary-dark); border: 1px solid var(--border); box-shadow: none; }
.btn-call.ghost:hover { background: #f0fbf9; }

/* typing indicator */
.typing-row { padding: 2px 22px 6px; font-size: 12.5px; color: var(--muted); font-style: italic; }

/* reply bar (composer) */
.reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #f0fbf9; border-top: 1px solid #d6efea; }
.reply-bar-body { flex: 1; min-width: 0; border-left: 3px solid var(--primary); padding-left: 10px; font-size: 13px; overflow: hidden; }
.reply-bar-body #replyBarName { font-weight: 700; color: var(--primary-deep); margin-right: 6px; }
.reply-bar-body #replyBarText { color: var(--muted); }
.reply-cancel { background: none; border: none; font-size: 16px; color: var(--muted); cursor: pointer; }

/* composer attach */
.composer-icon { background: none; border: none; font-size: 20px; cursor: pointer; padding: 0 4px; }
.composer-icon:hover { transform: scale(1.1); }

/* message bubble internals */
.msg-bubble { position: relative; }
.msg-text { white-space: pre-wrap; }
.msg-bubble a { color: #0b6ec9; }
.msg.own .msg-bubble a { color: #d6fff7; text-decoration: underline; }
.mention { background: rgba(13,148,136,.16); color: var(--primary-deep); border-radius: 5px; padding: 0 3px; font-weight: 600; }
.msg.own .mention { background: rgba(255,255,255,.25); color: #fff; }
.edited { font-size: 10px; color: var(--muted); }
.receipt { font-size: 11px; color: var(--primary); margin-left: 6px; }
.msg-bubble.deleted { font-style: italic; color: var(--muted); background: #f1f5f6; box-shadow: none; }

/* reply quote inside bubble */
.reply-quote { border-left: 3px solid var(--primary); background: rgba(0,0,0,.04); border-radius: 6px; padding: 4px 8px; margin-bottom: 5px; font-size: 12.5px; display: flex; flex-direction: column; }
.msg.own .reply-quote { background: rgba(255,255,255,.18); border-left-color: #bff3ea; }
.rq-name { font-weight: 700; }
.rq-text { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* attachments */
.msg-img { max-width: 260px; max-height: 280px; border-radius: 12px; display: block; margin: 2px 0; cursor: pointer; }
.msg-file { display: flex; align-items: center; gap: 10px; background: rgba(0,0,0,.05); border-radius: 10px; padding: 8px 10px; text-decoration: none; color: inherit; margin: 2px 0; }
.msg.own .msg-file { background: rgba(255,255,255,.18); }
.msg-file-ic { font-size: 22px; }
.msg-file-meta { display: flex; flex-direction: column; min-width: 0; }
.msg-file-name { font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.msg-file-size { font-size: 11px; opacity: .7; }

/* reactions */
.reactions { display: flex; flex-wrap: wrap; gap: 4px; margin: 3px 2px 0; }
.msg.own .reactions { justify-content: flex-end; }
.rx { border: 1px solid var(--border); background: #fff; border-radius: 12px; padding: 1px 7px; font-size: 12px; cursor: pointer; }
.rx.mine { background: #d8f5f0; border-color: var(--primary); }

/* hover action bar */
.msg-actions { position: absolute; top: -14px; display: none; gap: 2px; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 2px 4px; box-shadow: 0 4px 12px rgba(0,0,0,.12); z-index: 4; }
.msg.own .msg-actions { right: 0; }
.msg:not(.own) .msg-actions { left: 0; }
.msg-bubble:hover .msg-actions { display: flex; }
.msg-actions .pick, .msg-actions .ma { border: none; background: none; cursor: pointer; font-size: 14px; padding: 2px 4px; border-radius: 50%; line-height: 1; }
.msg-actions .pick:hover, .msg-actions .ma:hover { background: #eef5f4; }

/* people picker group select */
.dm-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.person { display: flex; align-items: center; }
.person-main { display: flex; align-items: center; gap: 12px; flex: 1; cursor: pointer; padding: 8px; border-radius: 10px; min-width: 0; }
.person-main:hover { background: #f5fbfa; }
.person-check { padding: 0 6px; }
.person-check input { width: 18px; height: 18px; accent-color: var(--primary); }

/* search */
.search-results { margin-top: 10px; max-height: 50vh; overflow-y: auto; }
.sr { padding: 10px 12px; border-radius: 10px; cursor: pointer; border-bottom: 1px solid #f1f5f6; }
.sr:hover { background: #f5fbfa; }
.sr-top { display: flex; justify-content: space-between; font-size: 12px; }
.sr-ch { font-weight: 700; color: var(--primary-deep); }
.sr-time { color: var(--muted); }
.sr-body { font-size: 13.5px; margin-top: 2px; }

/* call: recorded notice + video */
.call-recnote { text-align: center; color: #fecaca; font-size: 12px; font-weight: 600; letter-spacing: .3px; padding: 2px 0 6px; }
.call-recnote::first-letter { color: #ef4444; }
.video-stage { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-content: center; padding: 12px; }
.video-wrap { position: relative; background: #000; border-radius: 14px; overflow: hidden; width: min(46vw, 460px); }
.video-wrap video { width: 100%; height: 100%; display: block; object-fit: cover; max-height: 50vh; }
.video-cap { position: absolute; left: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 8px; }
.call-ctrl.active { background: #5eead4; color: #07423b; }

/* mobile responsive */
@media (max-width: 760px) {
  .app { position: relative; }
  .sidebar { width: 100%; position: absolute; inset: 0; z-index: 30; }
  .app.chat-open .sidebar { display: none; }
  .main { width: 100%; }
  .msg { max-width: 86%; }
  .msg-img { max-width: 70vw; }
  .video-wrap { width: 92vw; }
  .modal-card.wide { width: 96vw; }
}

.back-btn { display: none; background: none; border: none; font-size: 26px; line-height: 1; color: var(--primary-dark); cursor: pointer; margin-right: 4px; }
@media (max-width: 760px) { .back-btn { display: inline-block; } }

/* department management */
.btn-primary.ghost { background: #fff; color: var(--primary-dark); border: 1px solid var(--border); }
.btn-primary.ghost:hover { background: #f0fbf9; }
.dept-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dept-row .dept-name, .dept-row #newDeptName { flex: 1; }
.au-filter { margin-left: 8px; }
.au-role { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; font-size: 13px; background: #fff; }

/* ── Admin users table: roomy, readable rows ── */
.modal-card.wide { max-width: 1320px; }
.au-table { min-width: 1120px; font-size: 14px; }
.au-table thead th { padding: 14px 18px; font-size: 12px; }
.au-table td { padding: 16px 18px; vertical-align: middle; }
.au-table tbody tr:hover { background: #f4fbfa; }
.au-avatar { width: 42px; height: 42px; font-size: 15px; }
.au-name { font-size: 14.5px; }
.au-email { font-size: 12.5px; }
.au-user { min-width: 200px; }
.au-role { min-width: 110px; max-width: 170px; padding: 8px 11px; font-size: 13.5px; }
/* office chips as a tidy 2-column grid so they don't sprawl */
.au-table td .office-chips { display: grid; grid-template-columns: repeat(2, auto); gap: 5px; justify-content: start; }
.au-table td .ochip { font-size: 15px; padding: 5px 9px; }
/* actions: allow a clean wrap, comfortable hit targets, never clipped */
.au-actions { display: flex; flex-wrap: wrap; gap: 7px; min-width: 230px; }
.au-actions .tgl, .au-actions .act { padding: 7px 13px; font-size: 12.5px; }
@media (max-width: 1340px) {
  .modal-card.wide { max-width: 96vw; }
}

/* multi-office selector (admin) */
.office-chips { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.ochip { border: 1px solid var(--border); background: #fff; border-radius: 9px; padding: 3px 7px; font-size: 15px; line-height: 1; cursor: pointer; opacity: .35; filter: grayscale(1); transition: all .12s; }
.ochip:hover { opacity: .7; }
.ochip.on { opacity: 1; filter: none; border-color: var(--primary); background: #e3f7f4; }
.office-chips.cu { grid-column: 1 / -1; flex-wrap: wrap; }
.office-chips.cu .ochip { font-size: 13px; padding: 5px 10px; display: inline-flex; gap: 4px; align-items: center; text-transform: capitalize; }
.cu-lbl { font-size: 12px; color: var(--muted); margin-right: 4px; font-weight: 600; }

/* per-user channel access modal */
.uc-create { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--text); padding: 8px 0; }
.uc-create input { width: 17px; height: 17px; accent-color: var(--primary); }
.uc-hint { margin: 2px 0 8px; }
.uc-list { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border); border-radius: 12px; }
.uc-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid #f1f5f6; cursor: pointer; }
.uc-item:last-child { border-bottom: none; }
.uc-item:hover { background: #f5fbfa; }
.uc-item input { width: 17px; height: 17px; accent-color: var(--primary); flex-shrink: 0; }
.uc-ic { width: 28px; height: 28px; border-radius: 50%; background: #e3f7f4; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.uc-name { flex: 1; font-weight: 600; font-size: 14px; }
.uc-office { font-size: 12px; color: var(--muted); text-transform: capitalize; }

/* ═══════════ Professional sidebar redesign ═══════════ */
.sidebar { width: 312px; background: #fbfdfd; border-right: 1px solid #e6ecec; box-shadow: 1px 0 0 rgba(16,40,50,.02); }

/* header / brand */
.sidebar-head { padding: 15px 16px; background: linear-gradient(135deg, #0b5d57 0%, #0d9488 60%, #14b8a6 100%); box-shadow: 0 2px 12px rgba(13,148,136,.22); }
.logo-sm { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; letter-spacing: .2px; }
.logo-mark { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; letter-spacing: .5px; backdrop-filter: blur(4px); }
.head-actions { display: flex; gap: 7px; }
.icon-btn { width: 34px; height: 34px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.22); font-size: 16px; transition: background .15s, transform .1s; }
.icon-btn:hover { background: rgba(255,255,255,.32); transform: translateY(-1px); }
.icon-btn:active { transform: translateY(0); }

/* search with inline icon */
.sidebar-search { position: relative; padding: 12px 14px 6px; }
.sidebar-search .search-ic { position: absolute; left: 26px; top: 50%; transform: translateY(-40%); font-size: 13px; opacity: .55; pointer-events: none; }
.sidebar-search input { padding: 10px 14px 10px 36px; background: #eef3f3; border-radius: 11px; font-size: 14px; }
.sidebar-search input:focus { box-shadow: 0 0 0 2px rgba(13,148,136,.22); background: #fff; }

/* section label */
.list-label { padding: 8px 18px 4px; font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: #9aa9ad; }

/* channel rows: a touch more breathing room + rounded active */
.channel-list { padding: 2px 8px 8px; }
.channel-item { padding: 10px 11px; border-radius: 13px; margin-bottom: 2px; }
.channel-item:hover { background: #eef6f5; }
.channel-item.active { background: #e0f3f0; }
.channel-item.active::before { display: none; }
.ch-avatar { width: 46px; height: 46px; box-shadow: 0 3px 8px rgba(13,148,136,.26); }

/* ── footer: profile card + action toolbar ── */
.sidebar-foot { border-top: 1px solid #e6ecec; padding: 12px 12px 14px; gap: 12px; background: #ffffff; }
.me-card { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 14px; background: linear-gradient(135deg, #f0fbf9, #eaf6f4); border: 1px solid #dcefe9; }
.me-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(145deg, #14b8a6, #0d9488); box-shadow: 0 3px 8px rgba(13,148,136,.3); }
.me-info { flex: 1; min-width: 0; }
.me-name { font-weight: 700; font-size: 14px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-presence { margin-top: 3px; }
.presence-select { width: 100%; padding: 4px 6px; border: 1px solid #d3e6e2; border-radius: 8px; font-size: 12px; background: #fff; color: var(--muted); cursor: pointer; outline: none; }
.presence-select:focus { border-color: var(--primary); }

.foot-actions { display: flex; gap: 8px; }
.foot-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px; border: 1px solid #e6ecec; background: #fff; border-radius: 12px; cursor: pointer; color: var(--primary-deep); font-weight: 600; transition: all .14s; }
.foot-btn .fi { font-size: 17px; line-height: 1; }
.foot-btn .fl { font-size: 11px; letter-spacing: .2px; }
.foot-btn:hover { background: #f0fbf9; border-color: #bfe7df; transform: translateY(-1px); }
.foot-btn:active { transform: translateY(0); }
.foot-btn.danger { color: #c0392b; }
.foot-btn.danger:hover { background: #fdeeec; border-color: #f3c9c4; }

/* ═══════════════ Elegant teal theme layer ═══════════════ */
:root {
  --teal-50:  #f0faf8;
  --teal-100: #d9f2ee;
  --teal-200: #b6e6df;
  --teal-300: #86d4ca;
  --teal-400: #4cbcb0;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --teal-900: #0c4a45;
  --bg: #eaf4f2;
  --chat-bg: #e6f1ef;
  --border: #dceae7;
}

/* soft light-teal canvas */
body { background: var(--bg); }
.main { background:
   radial-gradient(1200px 480px at 80% -10%, rgba(20,184,166,.10), transparent 60%),
   linear-gradient(180deg, #eef7f5 0%, #e6f1ef 100%); }

/* headers: deep teal text + light teal hairline */
.chat-header { background: linear-gradient(180deg, #ffffff, #f6fbfa); border-bottom: 1px solid var(--teal-200); }
.chat-title { color: var(--teal-800); }
.chat-avatar, .ch-avatar { background: linear-gradient(145deg, var(--teal-500), var(--teal-700)); }

/* primary actions: dark teal gradient */
.btn-primary, .btn-call:not(.ghost) { background: linear-gradient(135deg, var(--teal-600), var(--teal-800)); box-shadow: 0 4px 12px rgba(15,118,110,.28); }
.btn-primary:hover, .btn-call:not(.ghost):hover { background: linear-gradient(135deg, var(--teal-700), var(--teal-900)); }
.btn-primary.small { box-shadow: 0 3px 9px rgba(15,118,110,.24); }

/* own message bubble: dark teal gradient */
.msg.own .msg-bubble { background: linear-gradient(135deg, var(--teal-600), var(--teal-800)); }
.msg-sender { color: var(--teal-700); }
/* incoming bubble: subtle teal-tinted card */
.msg-bubble { border: 1px solid var(--teal-100); }

/* composer: light teal field */
.composer { background: linear-gradient(180deg, #ffffff, #f6fbfa); border-top: 1px solid var(--teal-200); }
.composer input { background: var(--teal-50); border-color: var(--teal-200); }
.composer input:focus { background: #fff; border-color: var(--teal-500); box-shadow: 0 0 0 3px rgba(20,184,166,.15); }

/* channel list active/hover in light teal */
.channel-item:hover { background: var(--teal-50); }
.channel-item.active { background: var(--teal-100); }

/* call banner & reply bar light teal */
.call-banner { background: linear-gradient(90deg, var(--teal-100), var(--teal-50)); border-bottom-color: var(--teal-200); color: var(--teal-800); }
.reply-bar { background: var(--teal-50); border-top-color: var(--teal-200); }
.typing-row { color: var(--teal-700); }

/* modals: light-teal tinted header strip */
.modal { background: rgba(12,74,69,.42); backdrop-filter: blur(2px); }
.modal-card { border: 1px solid var(--teal-100); box-shadow: 0 24px 60px rgba(12,74,69,.28); }
.modal-card.wide .modal-head { background: linear-gradient(180deg, #ffffff, #f5fbfa); border-bottom-color: var(--teal-200); }
.modal-head h3 { color: var(--teal-800); }

/* stat cards (admin) get a soft teal tint */
.stat { background: linear-gradient(135deg, #ffffff, var(--teal-50)); border: 1px solid var(--teal-100); }

/* admin table header strip */
.au-table thead th { background: var(--teal-50); color: var(--teal-800); }
.au-tablewrap { border-color: var(--teal-200); }

/* tabs underline + active in teal */
.tab.active { color: var(--teal-800); border-bottom-color: var(--teal-600); }

/* badges / pills */
.badge { background: linear-gradient(135deg, var(--teal-500), var(--teal-700)); }

/* scrollbars in teal */
.channel-list::-webkit-scrollbar-thumb, .messages::-webkit-scrollbar-thumb,
.modal-card.wide::-webkit-scrollbar-thumb, .au-tablewrap::-webkit-scrollbar-thumb,
.uc-list::-webkit-scrollbar-thumb { background: var(--teal-300); }
.channel-list::-webkit-scrollbar-thumb:hover, .messages::-webkit-scrollbar-thumb:hover { background: var(--teal-400); }

/* auth screen: richer teal depth */
.auth-screen { background: linear-gradient(150deg, #0c4a45 0%, #0f766e 45%, #14b8a6 100%); }
.auth-card { border: 1px solid var(--teal-100); box-shadow: 0 24px 64px rgba(12,74,69,.4); }
.brand h1 { color: var(--teal-800); }
.field input:focus, .field select:focus { box-shadow: 0 0 0 3px rgba(20,184,166,.16); }

/* sidebar foot profile card slightly deeper teal */
.me-card { background: linear-gradient(135deg, var(--teal-50), var(--teal-100)); border-color: var(--teal-200); }

/* calls / recents */
.icon-btn { position: relative; }
.ic-badge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #0d9488; }
.calls-list { max-height: 60vh; overflow-y: auto; }
.call-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid #f1f5f6; }
.call-row:last-child { border-bottom: none; }
.call-av { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(145deg, var(--teal-500), var(--teal-700)); font-size: 15px; }
.call-av.dm { background: linear-gradient(145deg, #6366f1, #4f46e5); }
.call-meta { flex: 1; min-width: 0; }
.call-name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.call-sub2 { font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.call-row.missed .call-name { color: var(--danger); }
.call-row.missed .call-sub2 { color: var(--danger); font-weight: 600; }
.call-row.ongoing .call-sub2 { color: var(--success); font-weight: 600; }
.call-when { font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.call-back { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--teal-600); color: #fff; font-size: 16px; cursor: pointer; flex-shrink: 0; box-shadow: 0 3px 8px rgba(15,118,110,.3); }
.call-back:hover { background: var(--teal-700); }

/* ── Company Directory ── */
.dir-toolbar { display: flex; gap: 10px; margin-bottom: 12px; }
.dir-toolbar .dm-search { margin-bottom: 0; flex: 1; }
.dir-list { max-height: 60vh; overflow-y: auto; }
.dir-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid #f1f5f6; }
.dir-row:last-child { border-bottom: none; }
.dir-row:hover { background: var(--teal-50); }
.dir-av { position: relative; width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; background: linear-gradient(145deg, var(--teal-500), var(--teal-700)); }
.dir-dot { position: absolute; bottom: -2px; right: -2px; font-size: 11px; line-height: 1; }
.dir-meta { flex: 1; min-width: 0; }
.dir-name { font-weight: 700; font-size: 14.5px; }
.dir-sub { font-size: 12.5px; color: var(--muted); }
.dir-sub2 { font-size: 11.5px; color: #9aa9ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-actions { display: flex; gap: 7px; flex-shrink: 0; }
.dir-btn { width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer; font-size: 15px; color: #fff; }
.dir-btn.msg { background: #4f46e5; }
.dir-btn.call { background: var(--teal-600); }
.dir-btn:hover { filter: brightness(1.08); }

/* ── Admin Reports ── */
.rep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.rep-card { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 14px; background: linear-gradient(135deg, #ffffff, var(--teal-50)); border: 1px solid var(--teal-100); }
.rep-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--teal-100); display: flex; align-items: center; justify-content: center; font-size: 19px; }
.rep-num { font-size: 22px; font-weight: 800; color: var(--teal-800); line-height: 1; }
.rep-lbl { font-size: 12px; color: var(--muted); margin-top: 3px; }
.rep-bars { margin-top: 14px; }
.rep-bars-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 8px; }
.rep-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.rep-bar-l { width: 150px; font-size: 13px; flex-shrink: 0; text-transform: capitalize; }
.rep-bar-track { flex: 1; height: 12px; background: var(--teal-50); border-radius: 8px; overflow: hidden; }
.rep-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--teal-500), var(--teal-700)); border-radius: 8px; }
.rep-bar-v { width: 42px; text-align: right; font-weight: 700; font-size: 13px; color: var(--teal-800); }

/* ── Broadcast announcements ── */
.foot-btn { position: relative; }
.foot-badge { position: absolute; top: 3px; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.notices-list { max-height: 62vh; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.notice { border: 1px solid var(--teal-100); border-radius: 12px; padding: 12px 14px; background: #fff; }
.notice.unread { border-left: 4px solid var(--teal-600); background: var(--teal-50); }
.notice-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.notice-t { font-weight: 700; color: var(--teal-800); }
.notice-time { font-size: 11.5px; color: var(--muted); flex-shrink: 0; }
.notice-b { margin: 5px 0; font-size: 14px; line-height: 1.45; white-space: pre-wrap; }
.notice-f { font-size: 12px; color: var(--muted); }
.bc-compose { background: linear-gradient(135deg, #ffffff, var(--teal-50)); border: 1px solid var(--teal-100); border-radius: 14px; padding: 16px; margin-bottom: 16px; }
.bc-text { width: 100%; min-height: 90px; resize: vertical; margin: 8px 0; font-family: inherit; }
.bc-row { display: flex; gap: 10px; align-items: center; }
.bc-row .au-input, .bc-row select { flex: 1; }

/* ── Arabic / RTL support ── */
[dir="rtl"] input, [dir="rtl"] textarea, [dir="rtl"] select, [dir="rtl"] .me-name, [dir="rtl"] .channel-name { text-align: right; }
[dir="rtl"] .sidebar { border-right: none; border-left: 1px solid #e6ecec; }
[dir="rtl"] .search-ic { left: auto; right: 26px; }
[dir="rtl"] .sidebar-search input { padding: 10px 14px 10px 36px; }
[dir="rtl"] .msg-sender { margin: 0 12px 3px 0; }
[dir="rtl"] .ic-badge { right: auto; left: -4px; }
[dir="rtl"] .foot-badge { right: auto; left: 8px; }
[dir="rtl"] .list-label { text-align: right; }
[dir="rtl"] .au-table th, [dir="rtl"] .au-table td { text-align: right; }
[dir="rtl"] .rep-bar-v { text-align: left; }

/* ── Sidebar header fit (prevent icon overflow into chat area) ── */
.sidebar-head { gap: 8px; overflow: hidden; }
.logo-sm { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.head-actions { flex-shrink: 0; gap: 5px; }
.head-actions .icon-btn { width: 30px; height: 30px; font-size: 14px; flex-shrink: 0; }

/* ── Readable two-row sidebar header + visible language toggle ── */
.sidebar-head { flex-direction: column; align-items: stretch; gap: 10px; overflow: visible; }
.logo-sm { flex: none; font-size: 17px; overflow: visible; white-space: nowrap; text-overflow: clip; }
.head-actions { justify-content: space-between; gap: 6px; }
.head-actions .icon-btn { width: 34px; height: 34px; font-size: 15px; }
.lang-toggle { min-width: 38px; height: 34px; border-radius: 17px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.4); color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; padding: 0 10px; flex-shrink: 0; }
.lang-toggle:hover { background: rgba(255,255,255,.34); }

/* ── Billing / subscription ── */
.bill-current { padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg,#fff,var(--teal-50)); border: 1px solid var(--teal-100); margin-bottom: 14px; }
.bill-now { font-size: 16px; }
.bill-note { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; padding: 10px 12px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; }
.bill-note code { background: rgba(0,0,0,.06); padding: 1px 5px; border-radius: 5px; }
.bill-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 14px; }
.bill-card { border: 1px solid var(--teal-100); border-radius: 16px; padding: 18px; background: #fff; display: flex; flex-direction: column; }
.bill-card.current { border: 2px solid var(--teal-600); box-shadow: 0 6px 18px rgba(13,148,136,.15); }
.bill-name { font-size: 18px; font-weight: 800; color: var(--teal-800); margin-bottom: 10px; }
.bill-feat { list-style: none; padding: 0; margin: 0 0 14px; font-size: 13.5px; line-height: 1.9; flex: 1; }
.bill-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.sub-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 300; background: #b91c1c; color: #fff; text-align: center; padding: 8px 14px; font-size: 13.5px; font-weight: 600; }
.sub-banner .sub-fix { margin-left: 10px; background: #fff; color: #b91c1c; border: none; border-radius: 8px; padding: 4px 10px; font-weight: 700; cursor: pointer; }

/* ── Billing: cycle toggle, price, history ── */
.bill-current-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.bill-cycle { display: inline-flex; background: var(--teal-50); border: 1px solid var(--teal-200); border-radius: 12px; padding: 3px; margin: 4px 0 14px; }
.bill-cycle .cyc { border: none; background: none; padding: 7px 14px; border-radius: 9px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--teal-800); }
.bill-cycle .cyc.on { background: var(--teal-600); color: #fff; }
.bill-price { font-size: 20px; font-weight: 800; color: var(--teal-700); margin-bottom: 10px; }
.bill-hist { margin-top: 18px; }
.sub-banner.trial { background: var(--teal-700); }
.sub-banner.trial .sub-fix { color: var(--teal-800); }

/* call-log recordings */
.rec-item { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.rec-item:last-child { margin-bottom: 0; }
.rec-n { font-size: 11px; font-weight: 700; color: var(--muted); }

/* desk phone (SIP click-to-call) */
.dp-sec { border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; }
.dp-title { font-weight: 700; color: var(--teal-800, #115e59); margin-bottom: 4px; }
.dir-btn.desk { background: #475569; }
.dir-btn.desk:hover { filter: brightness(1.1); }

/* make modal cards scroll when taller than the screen (fixes cut-off Settings form) */
.modal-card { max-height: 90vh; overflow-y: auto; }

/* ── In-app SIP softphone ── */
.sip-fab { position: fixed; right: 22px; bottom: 22px; width: 56px; height: 56px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--teal-600,#0d9488), var(--teal-800,#115e59)); color: #fff; font-size: 24px; cursor: pointer; box-shadow: 0 8px 22px rgba(15,118,110,.4); z-index: 220; }
.sip-fab.online { box-shadow: 0 0 0 4px rgba(16,185,129,.35), 0 8px 22px rgba(15,118,110,.4); }
.sip-fab:hover { filter: brightness(1.08); }
.sip-panel { position: fixed; right: 22px; bottom: 90px; width: 300px; background: #fff; border: 1px solid var(--teal-100,#d9f2ee); border-radius: 18px; box-shadow: 0 20px 50px rgba(12,74,69,.28); z-index: 221; padding: 16px; }
.sip-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--teal-800,#115e59); }
.sip-st { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--muted,#7a8893); }
.sip-x { background: none; border: none; font-size: 16px; cursor: pointer; color: var(--muted,#7a8893); }
.sip-num { width: 100%; padding: 11px 12px; border: 1px solid var(--border,#e3e8ea); border-radius: 12px; font-size: 18px; text-align: center; letter-spacing: 1px; margin-bottom: 10px; outline: none; }
.sip-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.sip-key { padding: 12px 0; border: 1px solid var(--border,#e3e8ea); background: #f7fbfa; border-radius: 12px; font-size: 18px; font-weight: 700; cursor: pointer; color: var(--text,#14202b); }
.sip-key:hover { background: var(--teal-50,#f0faf8); border-color: var(--teal-300,#86d4ca); }
.sip-row { display: flex; gap: 8px; }
.sip-min { flex: 0 0 auto; padding: 11px 14px; border: 1px solid var(--border,#e3e8ea); background: #fff; border-radius: 12px; cursor: pointer; font-weight: 600; }
.sip-call { flex: 1; border: none; background: linear-gradient(135deg, var(--teal-600,#0d9488), var(--teal-800,#115e59)); color: #fff; border-radius: 12px; font-weight: 800; cursor: pointer; padding: 11px; }
.sip-hang { flex: 1; border: none; background: #dc2626; color: #fff; border-radius: 12px; font-weight: 800; cursor: pointer; padding: 11px; }
.sip-callwho { text-align: center; font-size: 18px; font-weight: 700; margin: 6px 0; }
.sip-timer { text-align: center; color: var(--muted,#7a8893); font-variant-numeric: tabular-nums; margin-bottom: 12px; }
.sip-incoming { position: fixed; inset: 0; background: rgba(12,74,69,.5); display: flex; align-items: center; justify-content: center; z-index: 240; }
.sip-inc-card { background: #fff; border-radius: 22px; padding: 28px; width: 320px; text-align: center; box-shadow: 0 24px 60px rgba(12,74,69,.35); }
.sip-inc-av { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 14px; background: linear-gradient(145deg, var(--teal-500,#14b8a6), var(--teal-700,#0f766e)); color: #fff; font-size: 34px; display: flex; align-items: center; justify-content: center; }
.sip-inc-name { font-size: 20px; font-weight: 800; }
.sip-inc-sub { color: var(--muted,#7a8893); margin-bottom: 18px; }
.sip-inc-actions { display: flex; gap: 12px; }
.sip-dec { flex: 1; padding: 12px; border: none; border-radius: 14px; background: #dc2626; color: #fff; font-weight: 800; cursor: pointer; }
.sip-ans { flex: 1; padding: 12px; border: none; border-radius: 14px; background: #16a34a; color: #fff; font-weight: 800; cursor: pointer; }

/* Extension chip in admin users table */
.ext-chip { display:inline-flex; align-items:center; gap:5px; border:1px dashed #b6c4c2; background:#fff; color:#6b7c84; border-radius:10px; padding:8px 13px; font-size:13px; font-weight:700; cursor:pointer; white-space:nowrap; min-width:74px; justify-content:center; transition:.12s; }
.ext-chip:hover { background:#f0faf8; border-style:solid; border-color:#86d4ca; color:#0f766e; }
.ext-chip.set { background:#0d9488; border:1px solid #0d9488; color:#fff; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:14px; letter-spacing:.5px; }
.ext-chip.set:hover { filter:brightness(1.07); color:#fff; }

/* ── Settings modal: balanced two-column dialog ── */
.modal-card.wide.settings-card { max-width: 880px; }
.settings-card { max-width: 880px; width: 94vw; max-height: 90vh; overflow-y: auto; padding: 26px 30px 30px; }
.settings-card .modal-head { position: sticky; top: -26px; background: var(--surface); padding: 6px 0 12px; margin: -6px 0 18px; border-bottom: 1px solid var(--border); z-index: 3; }
.settings-card .set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; align-items: start; }
.settings-card .set-col { min-width: 0; }
.settings-card .
/* Directory: extension badge + call-by-extension button */
.dir-ext { display:inline-flex; align-items:center; gap:4px; margin-left:8px; background:#e3f7f4; color:#0f766e; border:1px solid #b6e6df; border-radius:7px; padding:1px 7px; font-size:11.5px; font-weight:700; font-family:ui-monospace,Menlo,Consolas,monospace; }
.dir-btn.ext { background:#0d9488; }
.dir-btn.ext:hover { filter:brightness(1.1); }

/* Directory modal: keep it a comfortable, readable width (not full-screen) */
#directoryModal .modal-card.wide { max-width: 760px; width: 94vw; }
/* clearer, larger extension badge */
.dir-ext { font-size: 12.5px; padding: 2px 9px; margin-left: 6px; }
.dir-sub2 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 2px; }

/* PWA install banner */
.pwa-install { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 400; display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--teal-200,#b6e6df); border-radius: 16px; padding: 12px 14px; box-shadow: 0 12px 34px rgba(13,148,136,.22); max-width: 460px; margin: 0 auto; }
.pwa-install .pwa-ic { font-size: 26px; }
.pwa-install .pwa-txt { display: flex; flex-direction: column; line-height: 1.25; flex: 1; min-width: 0; }
.pwa-install .pwa-txt b { font-size: 14.5px; color: var(--primary-deep,#115e59); }
.pwa-install .pwa-txt span { font-size: 12.5px; color: var(--muted,#7a8893); }
.pwa-install .pwa-btn { border: none; background: var(--primary,#0d9488); color: #fff; font-weight: 700; font-size: 13.5px; padding: 9px 16px; border-radius: 11px; cursor: pointer; white-space: nowrap; }
.pwa-install .pwa-btn:hover { background: var(--primary-dark,#0f766e); }
.pwa-install .pwa-x { border: none; background: none; color: var(--muted,#7a8893); font-size: 15px; cursor: pointer; padding: 4px; }

/* GOC elegant brand wordmark on login */
.brand-name { font-weight: 300; letter-spacing: 10px; font-size: 32px; margin: 8px 0 2px; padding-left: 10px; color: var(--primary-deep,#115e59); }
.brand .brand-logo { background: linear-gradient(150deg,#0f766e,#0c4642); }
.logo-sm .brand-mini { font-weight: 400; letter-spacing: 4px; }

/* ============================================================
   Mobile & iOS layout fixes  (appended last = wins cascade)
   ============================================================ */
/* Dynamic viewport height: stops iOS Safari's toolbar from hiding
   the bottom bar / message composer. Falls back to 100vh. */
@supports (height: 100dvh) {
  .auth-screen { min-height: 100dvh; }
  .app { height: 100dvh; }
}
@media (max-width: 760px) {
  /* Coherent full-width sidebar on phones (override icon-rail rules) */
  .sidebar { width: 100% !important; }
  .channel-item { justify-content: flex-start !important; padding: 12px 16px !important; }
  .channel-info { display: block !important; flex: 1 1 auto !important; min-width: 0; }
  .channel-name, .channel-preview { display: block !important; }
  .logo-sm { display: flex !important; }
  .me-badge, .me-name { display: block !important; }
  .sidebar-search { display: block !important; }

  /* Modals fit the screen and scroll instead of overflowing */
  .modal { padding: 8px !important; }
  .modal-card, .modal-card.wide { width: 96vw !important; max-width: 96vw !important; max-height: 92dvh !important; overflow-y: auto !important; padding: 18px 16px !important; }
  .stats-row { flex-wrap: wrap !important; gap: 10px !important; }
  .stat { flex: 1 1 45% !important; }
  .au-toolbar, .au-filters { flex-wrap: wrap !important; }
  .au-grid { grid-template-columns: 1fr !important; }

  /* Tables scroll horizontally rather than breaking layout */
  .admin-pane { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

  /* Inputs at 16px stop iOS auto-zoom on focus; comfortable composer */
  .composer { padding: 10px 12px !important; }
  .composer input { font-size: 16px !important; }
  .auth-card { padding: 24px 20px !important; }
  .field input, .field select { font-size: 16px !important; }
}