/*
 * NOTIF-DS-1 — the two topbar bells, «التنبيهات» and «إشعارات المحادثات»
 * (design v1 approved by Kamal 6-10-2026: «نفذ وخليهم منفصلين»;
 * mockups ~/Downloads/HOMEi-notifications-design-v1).
 *
 * House system: --lm-d-* tokens (+ the four --nt-* tile tints in
 * tokens.css), no hex, text never below 12px, logical properties only so
 * Arabic RTL and English LTR share every rule. Prefix nt-.
 *
 * Registered right BEFORE navigation.css; the dropdown shell keeps its
 * .hn-pop placement from there and is resized here with .hn-pop.nt-pop
 * (two classes beat navigation.css's one).
 */

/* ── The dropdown ─────────────────────────────────────────────────── */
.hn-pop.nt-pop {
    inline-size: 420px;
    max-inline-size: calc(100vw - 24px);
    max-block-size: calc(100vh - var(--hn-topbar-h, 68px) - 14px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    border-color: var(--lm-d-border);
    background: var(--lm-d-surface);
    box-shadow: 0 18px 48px var(--lm-d-sheet-shadow), 0 2px 6px var(--lm-d-shadow);
    color: var(--lm-d-ink);
}

/* ── The phone screen: same panel, full height ─────────────────────── */
.hn-screen.nt-screen {
    background: var(--lm-d-surface);
    color: var(--lm-d-ink);
    padding-block-end: env(safe-area-inset-bottom, 0px);
}

.nt-ic { inline-size: 16px; block-size: 16px; flex: none; }

/* ── Head: title · «N جديد» · «قراءة الكل» · ⋯ ─────────────────────── */
.nt-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px 10px;
    flex: none;
}

.nt-screen .nt-head { padding: 10px 12px; touch-action: none; }

.nt-back {
    display: grid;
    place-items: center;
    inline-size: 36px;
    block-size: 36px;
    border-radius: 10px;
    border: 1px solid var(--lm-d-border);
    background: none;
    color: var(--lm-d-ink);
    cursor: pointer;
    flex: none;
}

[dir='ltr'] .nt-back svg { transform: scaleX(-1); }

.nt-head-title {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-inline-size: 0;
}

.nt-new {
    font-size: 12px;
    font-weight: 700;
    background: var(--lm-d-accent-soft);
    color: var(--lm-d-accent-ink);
    border-radius: 20px;
    padding: 1px 9px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.nt-head-tools {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 2px;
    flex: none;
}

.nt-hbtn {
    block-size: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: var(--lm-d-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.nt-hbtn:hover,
.nt-hbtn.nt-on { background: var(--lm-d-quiet-bg); color: var(--lm-d-ink); }
.nt-hbtn-ic { inline-size: 32px; padding: 0; justify-content: center; }

/* On a phone «قراءة الكل» keeps its icon only (its title says it). */
.nt-screen .nt-hbtn-label { display: none; }
.nt-screen .nt-hbtn { inline-size: 36px; block-size: 36px; padding: 0; justify-content: center; }

.nt-menu {
    position: absolute;
    inset-block-start: 46px;
    inset-inline-end: 12px;
    inline-size: 220px;
    background: var(--lm-d-surface);
    border: 1px solid var(--lm-d-border);
    border-radius: 12px;
    box-shadow: 0 12px 30px var(--lm-d-sheet-shadow);
    padding: 6px;
    z-index: 3;
}

.nt-menu hr { border: 0; border-block-start: 1px solid var(--lm-d-divider); margin: 4px 0; }

.nt-menu-row {
    display: flex;
    align-items: center;
    gap: 10px;
    inline-size: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--lm-d-ink);
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.nt-menu-row:hover { background: var(--lm-d-quiet-bg); }
.nt-menu-row.nt-danger { color: var(--lm-d-danger); }
.nt-menu-row small { margin-inline-start: auto; color: var(--lm-d-subtle); font-size: 12px; }
.nt-menu-ic { inline-size: 16px; block-size: 16px; flex: none; }

/* ── Tabs: one segmented control + «غير المقروء بس» ───────────────── */
.nt-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 16px 12px;
    border-block-end: 1px solid var(--lm-d-divider);
    flex: none;
}

.nt-screen .nt-tabs { padding: 0 12px 10px; }

.nt-seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: var(--lm-d-quiet-bg);
    min-inline-size: 0;
}

.nt-screen .nt-seg { flex: 1; }

.nt-seg-tab {
    block-size: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 11px;
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--lm-d-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.nt-screen .nt-seg-tab { flex: 1; padding: 0 6px; }
.nt-seg-tab b { font-size: 12px; font-weight: 700; color: var(--lm-d-subtle); font-variant-numeric: tabular-nums; }
.nt-seg-tab.nt-on { background: var(--lm-d-surface); color: var(--lm-d-ink); box-shadow: 0 1px 3px var(--lm-d-shadow); }
.nt-seg-tab.nt-on b { color: var(--lm-d-accent-ink); }

.nt-switch {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    background: none;
    color: var(--lm-d-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    padding: 0;
}

.nt-switch-track {
    position: relative;
    inline-size: 30px;
    block-size: 18px;
    border-radius: 10px;
    background: var(--lm-d-control-edge);
    flex: none;
}

.nt-switch-track::after {
    content: '';
    position: absolute;
    inset-block-start: 2px;
    inset-inline-start: 2px;
    inline-size: 14px;
    block-size: 14px;
    border-radius: 50%;
    background: var(--lm-d-surface);
    transition: inset-inline-start 0.15s;
}

.nt-switch-track.nt-on { background: var(--lm-d-tab-on-bg); }
.nt-switch-track.nt-on::after { inset-inline-start: 14px; background: var(--lm-d-tab-on-ink); }

/* ── Body: day groups + rows ──────────────────────────────────────── */
.nt-body {
    flex: 1;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nt-day {
    position: sticky;
    inset-block-start: 0;
    z-index: 1;
    padding: 8px 16px 6px;
    background: var(--lm-d-surface);
    font-size: 12px;
    font-weight: 700;
    color: var(--lm-d-subtle);
}

.nt-day span { font-weight: 600; font-variant-numeric: tabular-nums; }

.nt-row {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 10px 16px 10px 14px;
    border-block-end: 1px solid var(--lm-d-divider);
    background: var(--lm-d-surface);
}

.nt-row:hover,
.nt-row:focus-within { background: var(--lm-d-hover); }
.nt-row.nt-unread { background: var(--lm-d-row-hl); cursor: pointer; }

/* The unread mark: a bar on the reading-start edge, not a dot. */
.nt-row.nt-unread::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    inset-block: 10px;
    inline-size: 3px;
    border-start-end-radius: 3px;
    border-end-end-radius: 3px;
    background: var(--lm-d-accent);
}

.nt-row .nt-tile {
    inline-size: 36px;
    block-size: 36px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    flex: none;
    font-size: 17px;
}

.nt-tile-ic { inline-size: 18px; block-size: 18px; }
.nt-tone-task { background: var(--lm-d-info-soft); color: var(--lm-d-info); }
.nt-tone-req { background: var(--nt-violet-soft); color: var(--lm-d-ai); }
.nt-tone-money { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.nt-tone-cust { background: var(--lm-d-accent-soft); color: var(--lm-d-accent-ink); }
.nt-tone-site { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.nt-tone-co { background: var(--nt-navy-soft); color: var(--lm-d-ink); }
.nt-tone-alert { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.nt-tone-tick { background: var(--nt-teal-soft); color: var(--nt-teal); }

.nt-main { flex: 1; min-inline-size: 0; }

.nt-r1 { display: flex; align-items: baseline; gap: 8px; }

.nt-title {
    flex: 1;
    min-inline-size: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--lm-d-ink);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nt-unread .nt-title { font-weight: 700; }

.nt-via { font-size: 12px; font-weight: 500; color: var(--lm-d-subtle); margin-inline-start: 6px; }

.nt-time {
    flex: none;
    font-size: 12px;
    color: var(--lm-d-subtle);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.nt-unread .nt-time { color: var(--lm-d-accent-ink); font-weight: 700; }

.nt-text {
    margin-block-start: 1px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--lm-d-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

/* chips and the action on ONE line */
.nt-r3 { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-block-start: 6px; }
.nt-acts { margin-inline-start: auto; display: flex; gap: 6px; }
.nt-meta { display: flex; align-items: center; gap: 6px; margin-block-start: 4px; min-inline-size: 0; overflow: hidden; }

.nt-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    block-size: 22px;
    padding: 0 8px;
    border-radius: 6px;
    background: var(--lm-d-chip-bg);
    color: var(--lm-d-muted);
    font-size: 12px;
    font-weight: 600;
    font-style: normal;
    white-space: nowrap;
    flex: none;
}

.nt-chip-ic { inline-size: 14px; block-size: 14px; }
.nt-chip-code { color: var(--lm-d-ink); font-variant-numeric: tabular-nums; }
.nt-chip-red { background: var(--lm-d-danger-soft); color: var(--lm-d-danger); }
.nt-chip-warn { background: var(--lm-d-warn-soft); color: var(--lm-d-warn); }
.nt-chip-ok { background: var(--lm-d-ok-soft); color: var(--lm-d-ok); }
.nt-chip-detail { flex: 0 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 22px; }

.nt-stack {
    flex: none;
    font-size: 12px;
    font-weight: 700;
    color: var(--lm-d-muted);
    background: var(--lm-d-quiet-bg);
    border-radius: 20px;
    padding: 0 7px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
}

.nt-act {
    block-size: 28px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
    border-radius: 8px;
    border: 1px solid var(--lm-d-accent-line);
    background: var(--lm-d-surface);
    color: var(--lm-d-accent-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
}

.nt-act:hover { background: var(--lm-d-accent-soft); }
.nt-act-primary,
.nt-act-primary:hover { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); }
.nt-act-ok,
.nt-act-ok:hover { background: var(--lm-d-ok); border-color: var(--lm-d-ok); color: var(--lm-d-surface); }
.nt-act-neutral { border-color: var(--lm-d-control-edge); color: var(--lm-d-ink); }
.nt-act-neutral:hover { background: var(--lm-d-quiet-bg); }
.nt-act-ic { inline-size: 14px; block-size: 14px; }

.nt-row .nt-thumb {
    inline-size: 44px;
    block-size: 44px;
    border-radius: 9px;
    flex: none;
    margin-inline-start: 0;
}

/* Hover / focus tools: read · remove — where the time sits. */
.nt-tools {
    position: absolute;
    inset-block-start: 6px;
    inset-inline-end: 10px;
    display: none;
    gap: 2px;
    padding: 2px;
    background: var(--lm-d-surface);
    border: 1px solid var(--lm-d-border);
    border-radius: 9px;
    box-shadow: 0 4px 12px var(--lm-d-shadow);
}

.nt-row:hover .nt-tools,
.nt-row:focus-within .nt-tools { display: flex; }
.nt-row:hover .nt-r1 .nt-time,
.nt-row:focus-within .nt-r1 .nt-time { visibility: hidden; }

.nt-tool {
    inline-size: 28px;
    block-size: 24px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 7px;
    background: none;
    color: var(--lm-d-muted);
    cursor: pointer;
}

.nt-tool:hover { background: var(--lm-d-quiet-bg); color: var(--lm-d-ink); }
.nt-tool-ic { inline-size: 16px; block-size: 16px; }

/* ── A conversation row ───────────────────────────────────────────── */
.nt-conv { align-items: center; }
.nt-conv .nt-tools { inset-block-start: 50%; transform: translateY(-50%); inset-inline-end: 76px; }
.nt-reply { flex: none; }

.nt-av {
    position: relative;
    inline-size: 38px;
    block-size: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: none;
    font-size: 13px;
    font-weight: 700;
    color: var(--cv-d-on-avatar);
}

.nt-av-navy { background: var(--cv-d-avatar-navy); }
.nt-av-orange { background: var(--cv-d-avatar-orange); }
.nt-av-red { background: var(--cv-d-avatar-red); }
.nt-av-teal { background: var(--cv-d-avatar-teal); }

.nt-av-ch {
    position: absolute;
    inset-block-end: -3px;
    inset-inline-start: -3px;
    inline-size: 18px;
    block-size: 18px;
    border-radius: 50%;
    background: var(--lm-d-surface);
    display: grid;
    place-items: center;
}

.nt-av-ch svg { inline-size: 14px; block-size: 14px; }
.nt-ch-wa { color: var(--lm-d-ok); }
.nt-ch-other { color: var(--lm-d-info); }

/* On a phone «رد» is its icon. */
.nt-screen .nt-reply { inline-size: 34px; padding: 0; justify-content: center; }
.nt-screen .nt-reply-label { display: none; }
.nt-screen .nt-conv .nt-reply .nt-act-ic { inline-size: 16px; block-size: 16px; }

/* ── Foot, more, empty ────────────────────────────────────────────── */
.nt-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-block-start: 1px solid var(--lm-d-divider);
    background: var(--lm-d-surface);
    flex: none;
}

.nt-foot-note { font-size: 13px; font-weight: 600; color: var(--lm-d-muted); min-inline-size: 0; }

.nt-foot-btn {
    margin-inline-start: auto;
    block-size: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--lm-d-control-edge);
    background: none;
    color: var(--lm-d-ink);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    flex: none;
}

.nt-foot-btn:hover { background: var(--lm-d-quiet-bg); }
.nt-foot-primary,
.nt-foot-primary:hover { background: var(--lm-d-accent); border-color: var(--lm-d-accent); color: var(--lm-d-on-accent); }

.nt-more {
    display: block;
    inline-size: 100%;
    padding: 12px;
    border: 0;
    background: none;
    color: var(--lm-d-accent-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.nt-empty { padding: 46px 30px; text-align: center; color: var(--lm-d-muted); }
.nt-empty b { display: block; color: var(--lm-d-ink); font-size: 15px; margin-block-end: 2px; }
.nt-empty p { font-size: 13px; margin: 0; }

.nt-empty-ic {
    inline-size: 56px;
    block-size: 56px;
    border-radius: 16px;
    background: var(--lm-d-ok-soft);
    color: var(--lm-d-ok);
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
}

.nt-empty-ic .nt-ic { inline-size: 22px; block-size: 22px; }

@media (max-width: 1023px) {
    .nt-screen .nt-row { padding-inline: 14px 12px; }
}