/* ============================================================
   OxiNotify – Customer Service Portal
   wwwroot/css/portal.css
   Extends the Oxit brand tokens from styles.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&family=DM+Serif+Display&display=swap');

:root {
    --brand-primary: #0d2b55;
    --brand-accent:  #1a6fc4;
    --brand-accent-h:#1259a8;
    --brand-gold:    #e8a020;
    --surface:       #ffffff;
    --surface-2:     #f4f7fb;
    --surface-3:     #eef2f8;
    --border:        #dce4ef;
    --text-primary:  #0d2b55;
    --text-secondary:#5a7099;
    --text-muted:    #8fa3bf;
    --success:       #1a9e6e;
    --success-bg:    #edfaf5;
    --warning:       #e8a020;
    --warning-bg:    #fdf6e9;
    --error:         #c0392b;
    --error-bg:      #fdf1f0;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 18px;
    --shadow-card: 0 8px 40px rgba(13,43,85,0.10), 0 2px 8px rgba(13,43,85,0.06);
    --shadow-soft: 0 2px 10px rgba(13,43,85,0.07);
    --font-body: 'DM Sans', sans-serif;
    --font-display: 'DM Serif Display', serif;
    --transition: 0.18s ease;
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    background: var(--surface-2);
    color: var(--text-primary);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    /* Long unbroken strings (URLs, long Arabic/English without spaces) wrap instead
       of forcing the page wider than the screen. */
    overflow-wrap: break-word;
}

a { color: var(--brand-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── App shell ────────────────────────────────────────────── */
.pt-shell { display: flex; flex-direction: column; min-height: 100vh; }

.pt-topbar {
    display: flex; align-items: center; gap: 16px;
    padding: 0 22px; height: 62px;
    background: #ffffff;
    color: var(--brand-primary);
    border-bottom: 2px solid var(--brand-accent);
    box-shadow: 0 2px 12px rgba(13,43,85,0.10);
    position: sticky; top: 0; z-index: 30;
}
.pt-topbar img {
    height: 34px;
}
.pt-logo-div {
    display: inline-block; width: 1px; height: 26px;
    background: var(--border); margin: 0 4px; opacity: .8;
}
.pt-tenant-logo { height: 30px; max-width: 150px; object-fit: contain; }
.pt-topbar .pt-brand {
    font-family: var(--font-display);
    font-size: 1.2rem; letter-spacing: .3px;
}
.pt-topbar .pt-tenant {
    font-size: .82rem; color: var(--text-secondary);
    padding-left: 14px; margin-left: 2px;
    border-left: 1px solid var(--border);
}
.pt-topbar .pt-spacer { flex: 1; }

/* The tab strip can outgrow the topbar — a tenant-admin with every feature
   enabled exposes 7+ links (Chats, Tickets, Feedback, Management, Bot Flows,
   Schedule, Send). Without this it would either wrap raggedly under the brand
   or push the actions cluster off-screen. Instead, let it scroll horizontally
   IN PLACE so the topbar stays a clean single row and the user can swipe to
   reach the off-screen tabs.
   • flex: 0 1 auto + min-width: 0 — intrinsic width on desktop (so .pt-spacer
     still claims the leftover and pushes .pt-actions to the right), shrinkable
     below intrinsic width when the parent runs out of room.
   • Tabs themselves are flex:0 0 auto so each keeps its full label instead
     of squashing to ellipsis.
   • Scrollbar hidden visually (swipe / wheel still works); -webkit-overflow-
     scrolling for momentum-scroll on iOS.
*/
.pt-nav {
    display: flex; gap: 4px;
    flex: 0 1 auto; min-width: 0;
    overflow-x: auto; overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
}
.pt-nav::-webkit-scrollbar { display: none; }   /* WebKit / Blink */
.pt-nav a {
    color: var(--text-secondary); font-weight: 500; font-size: .9rem;
    padding: 8px 15px; border-radius: var(--radius-sm);
    transition: var(--transition);
    flex: 0 0 auto;                 /* don't shrink — let the bar scroll instead */
}
.pt-nav a:hover { background: var(--surface-3); text-decoration: none; color: var(--brand-primary); }
.pt-nav a.active { background: var(--brand-accent); color: #fff; }

/* The avatar acts as the dropdown trigger. The whole .pt-user element is
   keyboard- and mouse-clickable; cursor:pointer hints that. */
.pt-user {
    display: flex; align-items: center; gap: 10px;
    font-size: .85rem; cursor: pointer; position: relative;
    user-select: none;
}
.pt-user:hover .pt-avatar,
.pt-user.open .pt-avatar { box-shadow: 0 0 0 2px var(--brand-gold); }
.pt-user .pt-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--brand-gold); color: var(--brand-primary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
    transition: box-shadow .15s ease;
}

/* Account dropdown menu — replaces the standalone Change Password / Sign Out
   buttons that used to live in a secondary header row. Anchored under the
   avatar, opens on click, closes on outside-click / Escape. Email shows as
   a non-clickable header at the top so the user can always confirm which
   account they're signed in as without needing the hover tooltip.
   ARIA: trigger gets aria-expanded; menu is role="menu" with role="menuitem"
   children for screen-reader navigation. */
.pt-user-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-card);
    min-width: 240px; max-width: 92vw; padding: 6px;
    opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
    z-index: 50;
}
[dir="rtl"] .pt-user-menu { right: auto; left: 0; }
.pt-user.open .pt-user-menu { opacity: 1; transform: translateY(0); pointer-events: auto; }
.pt-user-menu-email {
    padding: 8px 12px 10px;
    font-size: .78rem; color: var(--text-muted);
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px; cursor: default;
    word-break: break-all; line-height: 1.35;
}
.pt-user-menu-item {
    display: flex; align-items: center; gap: 9px;
    width: 100%; padding: 9px 12px; border-radius: var(--radius-sm);
    background: transparent; border: none; cursor: pointer;
    font-family: var(--font-body); font-size: .85rem;
    color: var(--text-primary); text-align: left;
    transition: background .12s ease;
}
[dir="rtl"] .pt-user-menu-item { text-align: right; }
.pt-user-menu-item:hover,
.pt-user-menu-item:focus-visible { background: var(--surface-3); outline: none; }
.pt-user-menu-item svg { flex: 0 0 auto; color: var(--text-secondary); }
.pt-user-menu-item.danger { color: var(--error); }
.pt-user-menu-item.danger svg { color: var(--error); }
/* RTL: mirror the door-out arrow so it still reads as "leaving the page". */
[dir="rtl"] .pt-user-menu-item .pt-logout-icon { transform: scaleX(-1); }

/* Right-side control cluster (bell, avatar, change-password, sign-out).
   Grouping these into one flex unit keeps them together so they never wrap
   raggedly on small screens — the whole cluster moves as a block. */
.pt-actions { display: flex; align-items: center; gap: 10px; }

.pt-main { flex: 1; padding: 22px; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ── Page heading ─────────────────────────────────────────── */
.pt-pagehead { margin-bottom: 18px; }
.pt-pagehead h1 {
    font-family: var(--font-display); font-size: 1.7rem; font-weight: 400;
}
.pt-pagehead p { color: var(--text-secondary); font-size: .9rem; margin-top: 2px; }

/* ── Cards / panels ───────────────────────────────────────── */
.pt-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
}
.pt-card-pad { padding: 18px; }

/* ── Toolbar / filters ────────────────────────────────────── */
.pt-toolbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    margin-bottom: 14px;
}
.pt-toolbar .pt-spacer { flex: 1; }

.pt-input, .pt-select {
    font-family: var(--font-body); font-size: .88rem;
    padding: 9px 12px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface);
    color: var(--text-primary); outline: none; transition: var(--transition);
}
.pt-input:focus, .pt-select:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 3px rgba(26,111,196,.12); }
.pt-input { min-width: 220px; }

/* ── Buttons ──────────────────────────────────────────────── */
.pt-btn {
    font-family: var(--font-body); font-size: .87rem; font-weight: 600;
    padding: 9px 16px; border-radius: var(--radius-sm); border: none;
    cursor: pointer; transition: var(--transition);
    background: var(--brand-accent); color: #fff;
    display: inline-flex; align-items: center; gap: 7px;
}
.pt-btn:hover { background: var(--brand-accent-h); }
.pt-btn:disabled { opacity: .5; cursor: not-allowed; }
.pt-btn.ghost { background: var(--surface-3); color: var(--text-primary); }
.pt-btn.ghost:hover { background: #e2e9f3; }
.pt-btn.gold { background: var(--brand-gold); color: var(--brand-primary); }
.pt-btn.gold:hover { background: #d6911a; }
.pt-btn.success { background: var(--success); }
.pt-btn.danger  { background: var(--error); }
.pt-btn.sm { padding: 6px 11px; font-size: .8rem; }

/* ── Toggle switches ───────────────────────────────────────────────
   Every on/off checkbox in the portal renders as a modern slider switch. */
input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; margin: 0 2px;
    position: relative; width: 38px; height: 22px; flex-shrink: 0;
    border-radius: 999px; background: var(--border); cursor: pointer;
    vertical-align: middle; transition: background .18s ease;
}
input[type="checkbox"]::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(13,43,85,.35); transition: transform .18s ease;
}
input[type="checkbox"]:checked { background: var(--brand-accent); }
input[type="checkbox"]:checked::after { transform: translateX(16px); }
input[type="checkbox"]:disabled { opacity: .55; cursor: not-allowed; }
input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(26,111,196,.25); }

/* ── Tables ───────────────────────────────────────────────── */
.pt-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.pt-table thead th {
    text-align: left; font-weight: 600; font-size: .76rem;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-muted); padding: 11px 14px;
    border-bottom: 1px solid var(--border);
}
.pt-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--surface-3); }
.pt-table tbody tr { cursor: pointer; transition: var(--transition); }
.pt-table tbody tr:hover { background: var(--surface-2); }
.pt-table tbody tr:last-child td { border-bottom: none; }

/* ── Badges ───────────────────────────────────────────────── */
.pt-badge {
    display: inline-block; font-size: .73rem; font-weight: 600;
    padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.pt-badge.open       { background:#e7eefb; color:#1a4f9c; }
.pt-badge.inprogress { background:#fdf6e9; color:#a9750f; }
.pt-badge.resolved   { background:#edfaf5; color:#0d7a54; }
.pt-badge.closed     { background:#eef2f8; color:#5a7099; }
.pt-badge.autoclosed { background:#f0eef5; color:#6b5a8f; }

.pt-badge.prio-low    { background:#eef2f8; color:#5a7099; }
.pt-badge.prio-normal { background:#e7eefb; color:#1a4f9c; }
.pt-badge.prio-high   { background:#fdf6e9; color:#a9750f; }
.pt-badge.prio-urgent { background:#fdf1f0; color:#b5271a; }

.pt-dot { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; }
.pt-dot.on  { background: var(--success); box-shadow: 0 0 0 3px rgba(26,158,110,.18); }
.pt-dot.off { background: var(--text-muted); }

/* ── Alerts ───────────────────────────────────────────────── */
.pt-alert {
    display: flex; gap: 9px; align-items: flex-start;
    padding: 11px 14px; border-radius: var(--radius-sm);
    font-size: .86rem; margin: 10px 0;
}
.pt-alert.error   { background: var(--error-bg);   color: var(--error);   border:1px solid #f5c6c2; }
.pt-alert.success { background: var(--success-bg); color: #0d7a54; border:1px solid #a8e8cf; }
.pt-alert.warn    { background: var(--warning-bg); color: #a9750f; border:1px solid #f0d9a8; }
.pt-alert.info    { background: #eef4fc; color: var(--brand-accent); border:1px solid #c4dbf3; }

/* ── Empty state ──────────────────────────────────────────── */
.pt-empty { text-align: center; padding: 50px 20px; color: var(--text-muted); }
.pt-empty .pt-empty-icon { font-size: 2.6rem; margin-bottom: 8px; }

/* ── Chat layout ──────────────────────────────────────────── */
.pt-chat-wrap { display: grid; grid-template-columns: 320px 1fr; gap: 16px; min-height: 70vh; }
/* Grid children default to min-width:auto and would grow to fit long content,
   pushing past the viewport. Allow them to shrink so inner text can clip/wrap. */
.pt-chat-wrap > * { min-width: 0; }
.pt-chat-list { max-height: 76vh; overflow-y: auto; }
/* Conversation-list row — shared by the Support Chats and WhatsApp Inbox screens
   (rendered by PC.row() in /js/portal-chat.js). WhatsApp-style: avatar + name/time +
   preview + unread bubble + a row of small status chips. */
.pt-chat-item {
    display: flex; gap: 11px; align-items: center;
    padding: 11px 14px; border-bottom: 1px solid var(--surface-3);
    cursor: pointer; transition: var(--transition); min-width: 0;
}
.pt-chat-item:hover  { background: var(--surface-2); }
.pt-chat-item.unread { background: #f0faf4; }
.pt-chat-item.active { background: #eef4fc; }
.pt-ci-avatar, .pt-ch-avatar {
    border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 600; box-shadow: var(--shadow-soft); user-select: none;
}
.pt-ci-avatar { width: 44px; height: 44px; font-size: .95rem; letter-spacing: .3px; }
.pt-ch-avatar { width: 38px; height: 38px; font-size: .85rem; }
.pt-ci-main { flex: 1; min-width: 0; }
.pt-ci-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pt-ci-name { font-weight: 600; font-size: .92rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-chat-item.unread .pt-ci-name { font-weight: 700; }
.pt-ci-time { font-size: .72rem; color: var(--text-muted); flex-shrink: 0; white-space: nowrap; }
.pt-ci-row2 { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.pt-ci-preview { font-size: .8rem; color: var(--text-secondary); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-chat-item.unread .pt-ci-preview { color: var(--text-primary); font-weight: 500; }
.pt-ci-badge {
    flex-shrink: 0; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
    background: var(--success); color: #fff; font-size: .72rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}
.pt-ci-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--error); }
.pt-ci-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.pt-ci-tags:empty { display: none; }

/* Conversation-list search box (list header). */
.pt-search-wrap { padding: 9px 12px; border-bottom: 1px solid var(--border); }
.pt-search {
    width: 100%; padding: 8px 13px; border: 1px solid var(--border); border-radius: 20px;
    font-family: var(--font-body); font-size: .84rem; outline: none;
    background: var(--surface-2); transition: var(--transition);
}
.pt-search:focus { border-color: var(--brand-accent); background: #fff; }
/* Small count chip shown next to the list title (total unread conversations). */
.pt-unread-total {
    min-width: 18px; height: 18px; padding: 0 6px; border-radius: 9px;
    background: var(--success); color: #fff; font-size: .7rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; line-height: 1;
}

.pt-conv { display: flex; flex-direction: column; height: 76vh; }
.pt-conv-head {
    padding: 13px 16px; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;          /* lets the side group flow to a 2nd line on narrow widths */
    row-gap: 6px;
}
/* The meta column (avatar + name + phone) gets all remaining width, so the phone
   line never collapses to one digit per row. The side group (badges / ticket link)
   flows to a second row when the viewport can't hold both on one line. */
.pt-conv-head .pt-ch-meta { min-width: 0; flex: 1 1 60%; }
.pt-conv-head .pt-ch-side {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
@media (max-width: 540px) {
    /* Force the side group to its own line on phones — even the smallest screen
       keeps the phone number readable. */
    .pt-conv-head .pt-ch-side { flex-basis: 100%; justify-content: flex-start; }
}
/* mobile-only "back to list" button (hidden on desktop, shown in the media query below) */
.pt-conv-back {
    display: none; align-items: center; gap: 5px;
    padding: 6px 12px 6px 9px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); color: var(--text-primary); font-family: var(--font-body);
    font-size: .82rem; font-weight: 600; cursor: pointer; flex-shrink: 0; line-height: 1;
    transition: background var(--transition), border-color var(--transition), color var(--transition), transform .05s;
}
.pt-conv-back svg { display: block; }
.pt-conv-back:hover { background: var(--surface-2); border-color: var(--brand-accent); color: var(--brand-accent); }
.pt-conv-back:active { transform: scale(.96); }
[dir="rtl"] .pt-conv-back { padding: 6px 9px 6px 12px; }
[dir="rtl"] .pt-conv-back svg { transform: scaleX(-1); }

/* generic back button (e.g. Tickets detail) — arrow + label, RTL-aware */
.pt-back { display: inline-flex; align-items: center; gap: 6px; }
.pt-back svg { display: block; }
[dir="rtl"] .pt-back svg { transform: scaleX(-1); }

/* Manual WhatsApp send / broadcast UI (shared by the tenant Send page + the system-admin
   tenant panel; markup = _ManualSend partial, behaviour = /portal-manual-send.js). */
.msg-seg { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.msg-seg-btn { padding: 7px 14px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-2);
               cursor: pointer; font-family: var(--font-body); font-size: .85rem; transition: var(--transition); }
.msg-seg-btn.active { background: var(--brand-accent); color: #fff; border-color: var(--brand-accent); }
.msg-vrow { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.msg-vrow input { flex: 1; }
.msg-vrow .msg-del { flex-shrink: 0; background: none; border: none; color: var(--error, #c0392b); cursor: pointer; font-size: 1.1rem; line-height: 1; }
.msg-card { border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.msg-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-weight: 600; font-size: .85rem; }
.msg-card-del { background: none; border: none; color: var(--error, #c0392b); cursor: pointer; }
.msg-prog { height: 10px; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.msg-prog-bar { height: 100%; width: 0; background: var(--brand-accent); transition: width .2s ease; }
.pt-conv-head .pt-ch-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Phone numbers — keep on one line and ellipsise if the column is tight.
   Without `white-space: nowrap` the flex parent on narrow mobile widths was
   wrapping the number one character per line (each digit on its own line). */
.pt-conv-head .pt-ch-phone {
    font-size: .8rem; color: var(--text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pt-conv-body {
    flex: 1; overflow-y: auto; padding: 18px;
    background: #e7edf3;
    display: flex; flex-direction: column; gap: 9px;
}
.pt-msg { max-width: 72%; padding: 9px 13px; border-radius: 13px; font-size: .87rem; line-height: 1.4; white-space: pre-wrap; word-wrap: break-word; }
.pt-msg .pt-msg-meta { font-size: .68rem; margin-top: 4px; opacity: .7; }
.pt-msg.inbound  { align-self: flex-start; background: #fff; border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.pt-msg.bot      { align-self: flex-end; background: var(--surface-3); color: var(--text-secondary); border-bottom-right-radius: 4px; }
.pt-msg.agent    { align-self: flex-end; background: var(--brand-accent); color: #fff; border-bottom-right-radius: 4px; }
/* Outbound (business) delivery ticks — WhatsApp style. */
.pt-tick { margin-inline-start: 5px; font-size: .7rem; letter-spacing: -1px; }
.pt-msg.agent .pt-tick      { color: rgba(255,255,255,.8); }
.pt-msg.agent .pt-tick.read { color: #aef0ff; opacity: 1; }
/* Chat video: a constrained tile that never exceeds the bubble; dark backing while the poster frame
   loads (preload="metadata") so it doesn't flash wider than the bubble. */
.pt-msg .pt-chat-vid { display: block; width: 260px; max-width: 100%; max-height: 300px; border-radius: 8px; background: #0b141a; object-fit: contain; }
.pt-conv-foot { padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.pt-conv-foot .pt-compose { display: flex; gap: 9px; }
.pt-conv-foot textarea {
    flex: 1; resize: none; font-family: var(--font-body); font-size: .88rem;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    outline: none; min-height: 44px; max-height: 120px;
}
.pt-conv-foot textarea:focus { border-color: var(--brand-accent); }
.pt-conv-placeholder { flex:1; display:flex; align-items:center; justify-content:center; color:var(--text-muted); }

/* Composer "attach photo/video" button. */
.pt-attach {
    flex-shrink: 0; width: 42px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--surface-2); cursor: pointer; font-size: 1.15rem; line-height: 1;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.pt-attach:hover { background: var(--surface-3); border-color: var(--brand-accent); }

/* Photo/video preview-before-send overlay. */
.pc-media-overlay {
    position: fixed; inset: 0; background: rgba(13,43,85,0.55); z-index: 1000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.pc-media-card {
    background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card);
    width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 12px;
}
.pc-media-head { font-weight: 600; font-size: .9rem; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-media-body { display: flex; justify-content: center; background: var(--surface-2);
    border-radius: var(--radius-sm); padding: 8px; }
.pc-media-preview { max-width: 100%; max-height: 50vh; border-radius: 8px; display: block; }
.pc-media-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ── Ticket detail ────────────────────────────────────────── */
.pt-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 16px; }
.pt-meta-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--surface-3); font-size: .87rem; }
.pt-meta-row:last-child { border-bottom: none; }
.pt-meta-row .pt-meta-label { color: var(--text-muted); }
.pt-timeline { list-style: none; }
.pt-timeline li { padding: 9px 0 9px 18px; border-left: 2px solid var(--border); position: relative; font-size: .84rem; }
.pt-timeline li::before {
    content:''; position:absolute; left:-6px; top:13px;
    width:10px; height:10px; border-radius:50%;
    background: var(--brand-accent); border: 2px solid #fff;
}
.pt-timeline .pt-tl-time { font-size: .73rem; color: var(--text-muted); }

/* ── Modal ────────────────────────────────────────────────── */
.pt-modal-bg {
    position: fixed; inset: 0; background: rgba(13,43,85,.45);
    display: none; align-items: center; justify-content: center; z-index: 50;
}
.pt-modal-bg.show { display: flex; }
.pt-modal {
    background: #fff; border-radius: var(--radius-md);
    width: 420px; max-width: 92vw; max-height: 92vh; box-shadow: var(--shadow-card);
    overflow: hidden; display: flex; flex-direction: column;
}
.pt-modal-head { background: var(--brand-primary); color: #fff; padding: 15px 18px; font-weight: 600; }
.pt-modal-body { padding: 18px; overflow-y: auto; }   /* scroll long forms on small screens */
.pt-modal-foot { padding: 13px 18px; background: var(--surface-2); display: flex; justify-content: flex-end; gap: 9px; }

.pt-field { margin-bottom: 13px; }
.pt-field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 5px; color: var(--text-secondary); }
.pt-field .pt-input, .pt-field .pt-select, .pt-field textarea { width: 100%; }

/* ── Password reveal/hide toggle (added to every type=password input) ── */
.pt-pw-wrap { position: relative; display: block; }
.pt-pw-wrap > .pt-input { padding-right: 42px; }
[dir="rtl"] .pt-pw-wrap > .pt-input { padding-right: 12px; padding-left: 42px; }
.pt-pw-toggle {
    position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
    background: none; border: none; padding: 6px; margin: 0; cursor: pointer;
    color: var(--text-secondary); display: inline-flex; align-items: center;
    line-height: 0; border-radius: 6px;
}
[dir="rtl"] .pt-pw-toggle { right: auto; left: 6px; }
.pt-pw-toggle:hover { color: var(--text-primary); background: rgba(0,0,0,.05); }

/* ── Login ────────────────────────────────────────────────── */
.pt-login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(ellipse 80% 60% at 50% -10%, rgba(26,111,196,0.12) 0%, transparent 70%), var(--surface-2);
    padding: 20px;
}
.pt-login-card {
    width: 400px; max-width: 94vw; background: #fff;
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    border: 1px solid var(--border); overflow: hidden;
    display: flex; flex-direction: column;
}
.pt-login-head {
    background: #ffffff;
    color: var(--brand-primary);
    padding: 30px 26px 22px;
    text-align: center;
    border-bottom: 2px solid var(--brand-accent);
}
.pt-login-head img { height: 48px; margin-bottom: 14px; }
.pt-login-head h1 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--brand-primary); }
.pt-login-head p  { color: var(--text-secondary); font-size: .85rem; margin-top: 4px; }
.pt-login-body { padding: 26px; flex: 1 0 auto; }

/* Subtle credit footer pinned to the bottom of the login card. */
.pt-login-foot {
    padding: 14px 26px 18px; text-align: center;
    font-size: .78rem; color: var(--text-muted);
    border-top: 1px solid var(--border); background: var(--surface);
}
.pt-login-foot a { color: var(--text-secondary); font-weight: 600; }
.pt-login-foot a:hover { color: var(--brand-accent); text-decoration: none; }

.pt-muted { color: var(--text-muted); }
.pt-small { font-size: .8rem; }
.pt-spin {
    width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff; border-radius: 50%;
    animation: pt-rot .7s linear infinite; display: inline-block;
}
@keyframes pt-rot { to { transform: rotate(360deg); } }

@media (max-width: 880px) {
    .pt-chat-wrap, .pt-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) and (min-width: 721px) {
    .pt-nav a { padding: 8px 10px; }
}

/* ── Notification bell ─────────────────────────────────────────── */
.pt-bell {
    position: relative; cursor: pointer; color: var(--text-secondary);
    padding: 8px 10px; border-radius: var(--radius-sm);
    transition: var(--transition); display: inline-flex; align-items: center;
}
.pt-bell:hover { background: var(--surface-3); color: var(--brand-primary); }
.pt-bell-badge {
    position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px;
    padding: 0 4px; background: var(--brand-gold); color: var(--brand-primary);
    border-radius: 9px; font-size: .68rem; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1;
}
.pt-user-email { display: inline; }

/* ── Notification drawer ───────────────────────────────────────── */
.pt-notif-drawer {
    position: fixed; top: 62px; right: 14px; width: 340px; max-width: 92vw;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-card);
    max-height: 70vh; overflow: hidden;
    transform: translateY(-10px); opacity: 0; pointer-events: none;
    transition: transform .18s ease, opacity .18s ease;
    z-index: 40;
}
.pt-notif-drawer.show { transform: translateY(0); opacity: 1; pointer-events: auto; }
.pt-notif-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid var(--border);
}
.pt-notif-list { overflow-y: auto; max-height: calc(70vh - 50px); }
.pt-notif-item {
    padding: 11px 14px; border-bottom: 1px solid var(--surface-3);
    cursor: pointer; transition: var(--transition);
}
.pt-notif-item:hover { background: var(--surface-2); }
.pt-notif-item.read { opacity: .65; }
.pt-notif-item.read .pt-notif-title { font-weight: 500; }
.pt-notif-title { font-weight: 600; font-size: .88rem; }
.pt-notif-msg   { font-size: .82rem; color: var(--text-secondary); margin-top: 3px; }
.pt-notif-time  { font-size: .72rem; color: var(--text-muted); margin-top: 4px; }

/* ── Toast ──────────────────────────────────────────────────────── */
.pt-toasts {
    position: fixed; bottom: 18px; right: 18px; z-index: 60;
    display: flex; flex-direction: column; gap: 9px;
}
.pt-toast {
    background: var(--brand-primary); color: #fff;
    padding: 12px 16px; border-radius: var(--radius-md);
    box-shadow: var(--shadow-card); min-width: 240px; max-width: 320px;
    transform: translateX(110%); transition: transform .25s ease;
    font-size: .87rem;
}
.pt-toast.show { transform: translateX(0); }
.pt-toast strong { display: block; font-size: .9rem; margin-bottom: 3px; }
.pt-toast div    { font-size: .82rem; color: #c3d4ea; }

/* ── Install banner ─────────────────────────────────────────────── */
.pt-install {
    position: fixed; bottom: 14px; left: 14px; right: 14px;
    background: var(--brand-primary); color: #fff;
    padding: 12px 16px; border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    font-size: .88rem; z-index: 55;
}
.pt-install span { flex: 1; }
@media (min-width: 880px) {
    .pt-install { left: auto; right: 18px; max-width: 460px; }
}

/* ── Nav badge (unseen indicator) ──────────────────────────────── */
.pt-nav a { position: relative; }
.pt-nav-badge {
    position: absolute; top: 3px; right: 5px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #e8402b;
    border: 2px solid #ffffff;
    display: none;
}
.pt-nav-badge.show { display: block; }

/* ── Table wrapper (enables horizontal scroll on narrow viewports) ── */
.pt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Mobile responsiveness ─────────────────────────────────────── */
@media (max-width: 720px) {
    /* Two-row header on small screens:
         Row 1 — logo(s) on the left, the action cluster on the right.
         Row 2 — the nav, full-width with a top divider.
       The action cluster (.pt-actions) is ONE flex unit, so Change password
       and Sign out always stay together and never wrap one-button-per-line.
       If the row is too tight the whole cluster drops as a tidy block. */
    .pt-topbar {
        height: auto; min-height: 52px; padding: 8px 12px;
        display: flex; flex-wrap: wrap; align-items: center;
        column-gap: 8px; row-gap: 6px;
    }
    .pt-topbar img        { height: 24px; }
    .pt-topbar .pt-brand  { display: none; }            /* the logo alone identifies the app */
    .pt-topbar .pt-tenant { display: none; }
    .pt-topbar .pt-spacer { display: none; }            /* alignment handled by .pt-actions margin */
    .pt-tenant-logo       { height: 22px; max-width: 96px; }
    .pt-logo-div          { height: 20px; }

    .pt-actions {
        margin-left: auto;                              /* always right-aligned, even when wrapped */
        gap: 6px; flex-wrap: nowrap;
    }
    .pt-bell              { padding: 6px 8px; }
    .pt-user-email        { display: none; }
    /* On phones the dropdown should hug the right edge of the screen, not the
       avatar — gives the menu its full width and avoids clipping. */
    .pt-user-menu { right: 4px; min-width: 220px; }
    [dir="rtl"] .pt-user-menu { left: 4px; right: auto; }

    .pt-nav {
        order: 99; flex-basis: 100%; width: calc(100% + 24px);
        display: flex; justify-content: space-around;
        border-top: 1px solid var(--border);
        margin: 4px -12px 0;
    }
    .pt-nav a { flex: 1; text-align: center; padding: 9px 4px; font-size: .82rem; border-radius: 0; }
    /* A lone nav item (e.g. an Inbox-only agent): don't stretch it edge-to-edge — center it as a tab. */
    .pt-nav.pt-nav-solo { justify-content: center; }
    .pt-nav.pt-nav-solo a { flex: 0 1 auto; min-width: 150px; }
    /* Backstop: never let page content force horizontal scrolling on phones.
       (The sticky topbar is a sibling of .pt-main, so its stickiness is unaffected.) */
    .pt-main { padding: 12px; overflow-x: hidden; }
    .pt-chat-wrap, .pt-detail-grid { grid-template-columns: 1fr; gap: 12px; }

    /* Chats master-detail on phones: show EITHER the conversation list OR the open
       conversation — never both stacked (which squashed the open chat). */
    .pt-chat-wrap.viewing-conv > .pt-list-card { display: none; }
    .pt-chat-wrap:not(.viewing-conv) > .pt-conv { display: none; }
    .pt-chat-list { max-height: calc(100vh - 240px); }
    .pt-conv { height: calc(100vh - 180px); min-height: 380px; }
    .pt-conv-back { display: inline-flex; }

    .pt-toolbar { flex-wrap: wrap; }
    .pt-toolbar .pt-input { min-width: 0; flex: 1; }
    .pt-toolbar .pt-select { min-width: 0; }
    .pt-table { font-size: .8rem; }
    .pt-table thead th, .pt-table tbody td { padding: 8px 10px; }
    /* Hide non-critical columns on mobile so table fits without squishing */
    .col-hide-sm { display: none; }
    .pt-login-card { border-radius: 0; min-height: 100vh; box-shadow: none; }
    .pt-login-page { padding: 0; align-items: flex-start; }
    /* Toolbar: stack filters vertically on small screens */
    .pt-toolbar { gap: 8px; }
    .pt-toolbar .pt-select { flex: 1; min-width: 0; }
    /* Detail grid sidebar stacks below main content */
    #detailContent .pt-detail-grid { display: flex; flex-direction: column; gap: 12px; }
}

@media (max-width: 400px) {
    /* Tighten the action cluster so bell + avatar + lang switcher fit side by side. */
    .pt-actions { gap: 5px; }
    .pt-bell { padding: 6px 6px; }
}

/* ── Language switcher ─────────────────────────────────────────────── */
.pt-lang {
    appearance: auto; -webkit-appearance: auto;
    border: 1px solid var(--border); background: var(--surface);
    color: var(--text-secondary); border-radius: var(--radius-sm);
    padding: 5px 8px; font-size: .8rem; cursor: pointer; max-width: 140px;
}
@media (max-width: 720px) { .pt-lang { padding: 5px 6px; font-size: .76rem; max-width: 110px; } }

/* ── Feedback: long comments must wrap, not overflow (mobile-safe) ──── */
.pt-table-feedback .pt-fb-comment {
    white-space: normal; word-break: break-word; overflow-wrap: anywhere;
    min-width: 120px;
}
/* Any table can fall back to horizontal scroll instead of breaking the page. */
.pt-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── RTL (Arabic / right-to-left display languages) ────────────────────
   The portal is flexbox-based, so most layout mirrors automatically under
   [dir="rtl"]. These rules flip only the explicitly-directional properties so
   the design stays perfect in RTL without touching the LTR styles. */
[dir="rtl"] .pt-topbar .pt-tenant {
    padding-left: 0; margin-left: 0; border-left: none;
    padding-right: 14px; margin-right: 2px; border-right: 1px solid var(--border);
}
[dir="rtl"] .pt-table thead th { text-align: right; }
[dir="rtl"] .pt-dot { margin-right: 0; margin-left: 6px; }
[dir="rtl"] input[type="checkbox"]::after { left: auto; right: 2px; }
[dir="rtl"] input[type="checkbox"]:checked::after { transform: translateX(-16px); }
[dir="rtl"] .pt-bell-badge { right: auto; left: 2px; }
[dir="rtl"] .pt-notif-drawer { right: auto; left: 14px; }
[dir="rtl"] .pt-toasts { right: auto; left: 18px; }
[dir="rtl"] .pt-toast { transform: translateX(-110%); }
[dir="rtl"] .pt-toast.show { transform: translateX(0); }
[dir="rtl"] .pt-timeline li { padding-left: 0; padding-right: 18px; border-left: none; border-right: 2px solid var(--border); }
[dir="rtl"] .pt-install { left: 14px; right: 14px; }
@media (min-width: 720px) { [dir="rtl"] .pt-install { left: 18px; right: auto; } [dir="rtl"] .pt-actions { margin-left: 0; margin-right: auto; } }