/**
 * Farasync — Notifications tab styles (v1.0.0, Round M).
 *
 * Follows the command-center design language (CSS custom properties from
 * admin-command-center.css): soft surfaces, 14px radii, low-saturation
 * state colors. Scoped under [data-panel="notify"] so nothing leaks.
 */

[data-panel="notify"] {
    --fntx-bg: #f3f6fb;
    --fntx-border: #e2e8f0;
    --fntx-primary: #2563eb;
    --fntx-ok: #059669;
    --fntx-ok-bg: #ecfdf5;
    --fntx-ok-bd: #a7f3d0;
    --fntx-err: #dc2626;
    --fntx-err-bg: #fef2f2;
    --fntx-err-bd: #fecaca;
    --fntx-off: #64748b;
    --fntx-off-bg: #f1f5f9;
    --fntx-off-bd: #e2e8f0;
}

[data-panel="notify"] .farasync-notify-head h2 {
    margin: 6px 0 4px;
    font-size: 20px;
}

[data-panel="notify"] .farasync-notify-lead {
    margin: 0 0 5px;
    color: #64748b;
    font-size: 13px;
    line-height: 1.9;
    /* max-width: 900px; */
}

/* ---- bot cards ---------------------------------------------------------- */

[data-panel="notify"] .farasync-notify-bots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

[data-panel="notify"] .farasync-notify-bot {
    background: var(--fntx-bg);
    border: 1.5px solid var(--fntx-border);
    border-radius: 14px;
    padding: 16px;
}

[data-panel="notify"] .farasync-notify-bot-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

[data-panel="notify"] .farasync-notify-bot-name {
    font-weight: 700;
    font-size: 14.5px;
}

[data-panel="notify"] .farasync-notify-pill {
    margin-inline-start: auto;
    font-size: 11.5px;
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 12px;
}

[data-panel="notify"] .farasync-notify-pill.is-ok {
    background: var(--fntx-ok-bg);
    border: 1px solid var(--fntx-ok-bd);
    color: var(--fntx-ok);
}

[data-panel="notify"] .farasync-notify-pill.is-err {
    background: var(--fntx-err-bg);
    border: 1px solid var(--fntx-err-bd);
    color: var(--fntx-err);
}

[data-panel="notify"] .farasync-notify-pill.is-off {
    background: var(--fntx-off-bg);
    border: 1px solid var(--fntx-off-bd);
    color: var(--fntx-off);
}

[data-panel="notify"] .farasync-notify-label {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 10px;
}

[data-panel="notify"] .farasync-notify-label input {
    display: block;
    width: 100%;
    margin-top: 4px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    direction: ltr;
    text-align: left;
}

[data-panel="notify"] .farasync-notify-err {
    margin: 0 0 10px;
    font-size: 12px;
    color: var(--fntx-err);
    background: var(--fntx-err-bg);
    border: 1px dashed var(--fntx-err-bd);
    border-radius: 8px;
    padding: 6px 10px;
}

[data-panel="notify"] .farasync-notify-bot-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

[data-panel="notify"] .farasync-notify-hint {
    font-size: 11.5px;
    color: #94a3b8;
}

/* ---- events matrix ------------------------------------------------------ */

[data-panel="notify"] .farasync-notify-events {
    background: #ffffff;
    border: 1.5px solid var(--fntx-border);
    border-radius: 14px;
    padding: 16px 18px 14px;
    margin-bottom: 20px;
}

[data-panel="notify"] .farasync-notify-events h3 {
    margin: 0 0 12px;
    font-size: 15px;
}

[data-panel="notify"] .farasync-notify-table {
    width: 100%;
    border-collapse: collapse;
}

[data-panel="notify"] .farasync-notify-table th,
[data-panel="notify"] .farasync-notify-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #eef2f7;
    font-size: 13px;
}

[data-panel="notify"] .farasync-notify-table thead th {
    color: #64748b;
    font-weight: 600;
    background: #f8fafc;
    border-bottom: 1.5px solid var(--fntx-border);
}

[data-panel="notify"] .farasync-notify-table th.col-bot,
[data-panel="notify"] .farasync-notify-table td.col-bot {
    width: 96px;
    text-align: center;
}

[data-panel="notify"] .farasync-notify-table tbody tr:hover td {
    background: #f8fafc;
}

/* column hidden while its bot is switched off */
[data-panel="notify"] .farasync-notify-table .is-hidden {
    display: none;
}

[data-panel="notify"] .farasync-notify-table.has-no-cols + .farasync-notify-empty,
[data-panel="notify"] .farasync-notify-empty {
    margin: 10px 0 4px;
    font-size: 12.5px;
    color: #94a3b8;
    font-style: italic;
}

[data-panel="notify"] .farasync-notify-num {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: #475569;
}

[data-panel="notify"] .farasync-notify-num input {
    width: 90px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 5px 8px;
}

/* Round Q: one shared footer row per events card — the numeric field keeps
   its natural place at the inline start (right in RTL) while the sample
   button is pushed to the inline end (left in RTL), vertically centered:
   «هم‌تراز با فیلد آستانه هشدار». */
[data-panel="notify"] .farasync-notify-foot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 14px;
}

[data-panel="notify"] .farasync-notify-foot-row .farasync-notify-num {
    margin-top: 0;
}

/* v1.0.0 (Round Y20): the generic sample button was removed from the
   foot-row (user request) — the per-side sample buttons now live in the
   save row, styled in admin-notify-templates.css (.farasync-notify-save-row). */

[data-panel="notify"] .farasync-notify-legend {
    display: inline-block;
    margin-inline-start: 12px;
    font-size: 11.5px;
    color: #94a3b8;
    max-width: 560px;
    vertical-align: middle;
    line-height: 1.8;
}

/* ---- toast ---------------------------------------------------------------
   Round Q: renamed .farasync-toast → .farasync-notify-toast. The old name
   collides with admin-command-center.css, which forces a WHITE background
   (!important) + a 3-column grid on .farasync-toast — the notify toast (a
   bare text div) became a white box with white text: the blank popups the
   user saw on every button click. Unique class + inline styles in JS = no
   collision possible. */

.farasync-notify-toast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    background: #172033;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.9;
    border-radius: 10px;
    padding: 10px 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
    z-index: 99999;
    max-width: 70vw;
    text-align: center;
}

.farasync-notify-toast.is-show { opacity: 1; }
.farasync-notify-toast.is-ok { box-shadow: 0 0 0 2px var(--fntx-ok-bd, #a7f3d0) inset; }
.farasync-notify-toast.is-err { box-shadow: 0 0 0 2px var(--fntx-err-bd, #fecaca) inset; }

/* chat-id discovery row (Round N) */
[data-panel="notify"] .farasync-notify-chatid-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: -2px 0 10px;
}

/* Round P: masked token input (type=text + text-security → no Chrome
   «suggest strong password» popup), clickable column headers */
[data-panel="notify"] .farasync-secret {
    -webkit-text-security: disc;
}
[data-panel="notify"] .farasync-notify-table th.col-bot {
    cursor: pointer;
    user-select: none;
}
[data-panel="notify"] .farasync-notify-table th.col-bot:hover {
    color: var(--fntx-primary, #2563eb);
}

/* v1.0.0: the SITE channel column — the independent panel-bell channel.
   Same width/centering as a bot column; the header is clickable (tick the
   whole column) exactly like a bot column header. */
[data-panel="notify"] .farasync-notify-table th.col-site,
[data-panel="notify"] .farasync-notify-table td.col-site {
    width: 96px;
    text-align: center;
}
[data-panel="notify"] .farasync-notify-table th.col-site {
    cursor: pointer;
    user-select: none;
}
[data-panel="notify"] .farasync-notify-table th.col-site:hover {
    color: var(--fntx-primary, #2563eb);
}

/* ==========================================================================
   v1.0.0 (Round Y): quiet hours card + header notification bell + backup card
   ========================================================================== */

/* ---- quiet hours (notify tab) -------------------------------------------- */
[data-panel="notify"] .farasync-notify-quiet {
    background: #ffffff;
    border: 1px solid var(--fntx-border, #e2e8f0);
    border-radius: 14px;
    padding: 14px 18px;
    margin: 0 0 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
[data-panel="notify"] .farasync-notify-quiet-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
[data-panel="notify"] .farasync-notify-quiet-row strong {
    font-size: 14px;
    color: #0f172a;
}
[data-panel="notify"] .farasync-notify-quiet-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
}
[data-panel="notify"] .farasync-notify-quiet-grid .farasync-notify-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 13px;
    color: #334155;
}
[data-panel="notify"] .farasync-notify-quiet-grid input[type="time"] {
    min-width: 110px;
    border: 1px solid var(--fntx-border, #e2e8f0);
    border-radius: 8px;
    padding: 4px 8px;
    line-height: 1.6;
}
[data-panel="notify"] .farasync-notify-quiet .farasync-notify-hint {
    margin: 10px 0 0;
    color: #64748b;
    font-size: 12px;
    line-height: 1.9;
}

/* ---- header bell ----------------------------------------------------------
   Lives in .farasync-header-actions (outside the notify tab — works on all
   tabs), so it cannot be scoped under [data-panel="notify"]. */
.farasync-header-actions .farasync-bell {
    position: relative;
    display: inline-flex;
}
/* v1.0.0 (Round Y3): gray bell when everything is read…
   v1.0.0 (user request): the button is a step SMALLER (40→34) — the
   compact size reads better inside the hero header and matches the
   smaller pin-to-the-corner placement on every breakpoint. */
.farasync-header-actions .farasync-bell-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border-radius: 11px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    color: #94a3b8;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
    transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
/* …INDIGO button when unread notifications exist… */
.farasync-header-actions .farasync-bell.is-unread .farasync-bell-btn {
    color: #4f46e5;
    border-color: #c7d2fe;
}
/* …a solid INDIGO box on hover (v1.0.0 palette rework — the old
   blue→purple gradient fought the rest of the palette).
   v1.0.0: the SAME look PERSISTS while the panel is open (.is-open) —
   the button returns to normal the moment the panel closes.
   v1.0.0 (user request): the bell GLYPH itself is painted WHITE on
   hover/open — explicitly on the icon (not inherited), so the white
   bell on the indigo box can never depend on CSS inheritance quirks. */
.farasync-header-actions .farasync-bell-btn:hover,
.farasync-header-actions .farasync-bell-btn:focus-visible,
.farasync-header-actions .farasync-bell-btn.is-open {
    background: #4f46e5;
    color: #ffffff;
    border-color: #4f46e5;
    box-shadow: 0 6px 16px rgba(79, 70, 229, 0.32);
}
.farasync-header-actions .farasync-bell-btn:hover .dashicons,
.farasync-header-actions .farasync-bell-btn:focus-visible .dashicons,
.farasync-header-actions .farasync-bell-btn.is-open .dashicons {
    color: #ffffff;
}
.farasync-header-actions .farasync-bell-btn .dashicons {
    font-size: 17px;
    width: 17px;
    height: 17px;
}
.farasync-header-actions .farasync-bell-badge {
    position: absolute;
    top: -5px;
    inset-inline-end: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #4f46e5;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
    /* v1.0.0: a white ring separates the badge from the button — the
       standard badge treatment (GitHub/Notion style). */
    box-shadow: 0 0 0 2px #ffffff, 0 1px 4px rgba(15, 23, 42, 0.25);
}
/* v1.0.0: the panel is PORTALED to <body> by JS and pinned under the bell
   with position:fixed — the command-center header's overflow:hidden can no
   longer clip the dropdown. */
.farasync-bell-panel {
    position: fixed;
    top: -9999px;
    left: -9999px;
    width: min(430px, 86vw);
    max-height: 62vh;
    overflow: auto;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    /* v1.0.0 (Round Y8): the SCROLLBAR side keeps SQUARE corners — the
       scrollbar track must not sit on a rounded edge (user request). The
       panel is dir-aware: RTL scrolls on the left, LTR on the right. */
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    z-index: 100050;
    /* v1.0.0 (user request): the header must TOUCH the top of the window —
       the old 6px top padding left a white sliver above the dark header.
       The breathing room moved into the list's bottom padding, and the TOP
       border goes too so the dark header starts at the panel's very edge
       (the mobile sheet already behaves exactly like this). */
    border-top: 0;
    padding: 0;
    /* v1.0.0 (Round Y5): the panel lives outside .farasync-command-center
       (portal), so the plugin font cascade stops at <body> — re-declare
       Vazirmatn here. */
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif;
}
/* v1.0.0 (Round Y8): LTR panel — the scrollbar flips to the RIGHT side,
   so the right corners go square instead. */
.farasync-bell-panel[dir="ltr"] {
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* v1.0.0 (Round Y5, follow-up): admin themes style bare element selectors
   (div/span/button/…) which beat plain inheritance INSIDE the portaled
   panel — re-force Vazirmatn on every element type the feed uses. The
   ID-scoped variants win any specificity fight against theme fonts. */
.farasync-bell-panel div,
.farasync-bell-panel span,
.farasync-bell-panel a,
.farasync-bell-panel p,
.farasync-bell-panel li,
.farasync-bell-panel strong,
.farasync-bell-panel em,
.farasync-bell-panel code,
.farasync-bell-panel button,
.farasync-bell-panel input,
.farasync-bell-panel select,
.farasync-bell-panel .button-link,
#farasync-bell-panel-portal div,
#farasync-bell-panel-portal span,
#farasync-bell-panel-portal a,
#farasync-bell-panel-portal p,
#farasync-bell-panel-portal li,
#farasync-bell-panel-portal strong,
#farasync-bell-panel-portal em,
#farasync-bell-panel-portal code,
#farasync-bell-panel-portal button,
#farasync-bell-panel-portal input,
#farasync-bell-panel-portal select,
#farasync-bell-panel-portal .button-link {
    font-family: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, sans-serif !important;
}
.farasync-bell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 16px 8px;
    font-size: 13px;
    /* v1.0.0 (user request): the desktop panel header now mirrors the
       plugin dashboard header — the SAME dark gradient (the mobile sheet
       already had it) — and stays OPAQUE while the feed scrolls beneath
       it (sticky + z-index, no see-through). */
    background: linear-gradient(121deg, #0f172a 0%, #172554 48%, #312e81 100%);
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    position: sticky;
    top: 0;
    z-index: 5;
}
/* The «خوانده شد» action must stay readable on the dark header. */
.farasync-bell-head .farasync-bell-clear {
    color: #ffffff;
    opacity: .92;
}
.farasync-bell-head .farasync-bell-clear:hover {
    opacity: 1;
}
.farasync-bell-clear {
    color: var(--fntx-primary, #2563eb);
    font-size: 12px;
    cursor: pointer;
    /* v1.0.0 (Round Y18): WP's .wp-core-ui .button-link underline outranked
       the plain (0,1,0) rule — the pill showed a bare underline. !important
       wins over ANY core shape; bold reads as an action, not a link. */
    text-decoration: none !important;
    font-weight: 700;
    /* v1.0.0 (user report): clicking the button painted WP's blue focus
       BOX-SHADOW/outline around the label. That stroke is gone for good;
       the click is acknowledged by the brief .is-done fade instead — a
       subtle state, never a ring. */
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    transition: opacity .18s ease;
    /* v1.0.0 (UI audit): the bare label was an 18px-tall tap target —
       give it real padding so it is comfortable on touch screens. */
    padding: 6px 12px;
    min-height: 28px;
    line-height: 1.2;
    border-radius: 8px;
}
.farasync-bell-clear:focus,
.farasync-bell-clear:focus-visible,
.farasync-bell-clear:active {
    outline: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}
.farasync-bell-clear:active {
    opacity: .55;
}
.farasync-bell-clear.is-done {
    opacity: .5;
}

/* ==========================================================================
   v1.0.0: the SOURCE ADMIN's «رزروها» tab (user request).
   Reuses the widefat admin table chrome; adds only the specifics.
   ========================================================================== */
.farasync-admin-res-title {
    margin: 4px 0 6px;
    font-size: 16px;
    font-weight: 700;
}
.farasync-admin-res-lead {
    color: #64748b;
    font-size: 12.5px;
    margin: 0 0 14px;
    max-width: 900px;
}
.farasync-admin-res-empty {
    color: #64748b;
    background: #f8fafc;
    border: 1px dashed #e2e8f0;
    border-radius: 10px;
    padding: 18px;
    text-align: center;
}
.farasync-admin-res-table .farasync-admin-res-cancel {
    color: #dc2626;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
}
.farasync-admin-res-table .farasync-admin-res-cancel:hover {
    color: #b91c1c;
}
.farasync-admin-res-table .farasync-admin-res-cancel:disabled {
    color: #94a3b8;
    cursor: wait;
}
.farasync-admin-res-table .farasync-admin-res-status.farasync-res-released {
    color: #64748b;
}
.farasync-admin-res-table .farasync-rep-countdown-wrap {
    display: block;
    font-size: 11.5px;
    color: #475569;
}
.farasync-admin-res-table .farasync-rep-countdown-until {
    display: block;
    color: #94a3b8;
    font-size: 10.5px;
}
.farasync-bell-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 6px;
}
/* v1.0.0 (user report): the row is a GRID — [light dot | content] — so
   every extra block (the pipe detail line, the failure message, the pay
   pill) lands on ITS OWN LINE UNDER the title, never BESIDE it. The old
   flex row pushed .fs-feed-sub/.fs-feed-msg/.fs-feed-links into the same
   horizontal lane as the title whenever they existed. A notification may
   now grow to 2–4 lines; the dot stays pinned to the first line. */
.fs-feed-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 1px 10px;
    padding: 9px 16px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 12.5px;
    line-height: 1.8;
    transition: background 140ms ease;
}
.fs-feed-item:last-child {
    border-bottom: 0;
}
.fs-feed-dot {
    grid-column: 1;
    grid-row: 1;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    margin-top: 8px;
    background: #94a3b8;
}
.fs-feed-item.is-ok .fs-feed-dot { background: #10b981; }
.fs-feed-item.is-fail .fs-feed-dot { background: #ef4444; }
.fs-feed-item.is-mute .fs-feed-dot { background: #f59e0b; }
/* v1.0.0: campaign rows — the violet dot the user asked for (a visibly
   different color for campaign notifications). */
.fs-feed-item.is-camp .fs-feed-dot { background: #8b5cf6; }
.fs-feed-main {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}
.fs-feed-sub,
.fs-feed-msg,
.fs-feed-links,
.fs-feed-dt {
    grid-column: 2;
}
.fs-feed-title { color: #0f172a; font-weight: 500; }
.fs-feed-meta { color: #94a3b8; font-size: 11.5px; }
/* v1.0.0: the pipe-format detail line under the row title
   («ID - نام محصول | تعداد: x» — the same line the messenger shows). */
.fs-feed-sub {
    color: #64748b;
    font-size: 11.5px;
    line-height: 1.9;
    margin-top: 2px;
    overflow-wrap: anywhere;
    white-space: pre-line;
}
/* v1.0.0 (user request): the date/time line — «تاریخ: …   |  ساعت: …» —
   sits UNDER the details as its own quiet row (it used to sit between
   the title and the details). */
.fs-feed-dt {
    color: #94a3b8;
    font-size: 11px;
    line-height: 1.7;
    margin-top: 1px;
    unicode-bidi: plaintext;
}
/* ---- v1.0.0 (user request): UNREAD vs READ rows -------------------------
 * v1.0.0 palette rework: unread = indigo-50 tint + indigo-900 title + a
 * subtle indigo ring on the dot; read = pure white with slate-700 title —
 * the dimming is COLOR-based now (the old opacity:.82 also washed out the
 * dot and the meta line).
 * v1.0.0 (user request): read rows are REMOVED from the list the next time
 * the bell opens — while the panel stays open they survive in place. */
.fs-feed-item.is-unread {
    background: #eef2ff;
}
.fs-feed-item.is-unread:hover {
    background: #e0e7ff;
}
.fs-feed-item.is-unread .fs-feed-title {
    font-weight: 700;
    color: #312e81;
}
.fs-feed-item.is-unread .fs-feed-dot {
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.16);
}
.fs-feed-item.is-readstate .fs-feed-title {
    font-weight: 400;
    color: #334155;
}
.fs-feed-item:not(.is-unread):hover {
    background: #f8fafc;
}
.fs-feed-msg {
    color: #b91c1c;
    font-size: 11.5px;
    direction: ltr;
    text-align: left;
    overflow-wrap: anywhere;
}
/* ---- v1.0.0: the ROW TITLE is the link; the only extra is the approved
   «پرداخت فاکتور» pill on the two pay events. No summaries, no label rows.
   v1.0.0 (user request): linked titles = NO underline, BOLD, BLUE — in
   BOTH the unread and the read state (the color/weight ride the anchor
   itself so the state rules cannot wash them out). */
.fs-feed-title .fs-feed-title-link,
.fs-feed-title-link {
    color: #1d4ed8;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 0;
}
.fs-feed-title .fs-feed-title-link:hover,
.fs-feed-title-link:hover {
    color: #1e40af;
}
.fs-feed-title-link:focus,
.fs-feed-title-link:active {
    outline: none;
    box-shadow: none;
}
.fs-feed-links {
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.fs-feed-link {
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid #c7d2fe;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 11.5px;
    font-weight: 600;
    text-decoration: none;
}
.fs-feed-link:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
}
.fs-feed-link:focus,
.fs-feed-link:active {
    outline: none;
    box-shadow: none;
}
.farasync-bell-empty {
    margin: 0;
    padding: 18px 16px 14px;
    text-align: center;
    color: #94a3b8;
    font-size: 12.5px;
}

/* ---- settings export / import card (dashboard tab) ------------------------ */
.farasync-backup-section .farasync-backup-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 6px;
}
.farasync-backup-section .farasync-backup-row .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}
.farasync-backup-section .farasync-backup-warn {
    color: #b45309;
    font-size: 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 3px 10px;
    line-height: 1.8;
}
.farasync-backup-section .farasync-backup-result {
    margin: 10px 0 0;
    font-size: 12.5px;
    min-height: 1em;
}
.farasync-backup-section .farasync-backup-result.is-ok { color: #059669; }
.farasync-backup-section .farasync-backup-result.is-err { color: #dc2626; }

/* ==========================================================================
   v1.0.0 (Round Y2): quiet-hours queue + dropzone + time-zone card
   ========================================================================== */
.fs-feed-item.is-queue .fs-feed-dot { background: #d97706; }
.farasync-notify-queue-note { font-weight: 600; color: #92400e; }

.farasync-backup-section .farasync-backup-desc { margin: 4px 0 10px; color: #475569; max-width: 72ch; }
.farasync-backup-section .farasync-dropzone {
    margin-top: 10px; padding: 18px 12px; border: 2px dashed #cbd5e1; border-radius: 10px;
    /* v1.0.0 (Round Y8): taller drop area (user request) — the box was a
       thin one-liner; now it reads as a real drop target. */
    min-height: 150px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: #64748b; font-size: 13px; background: #f8fafc; transition: all .15s ease;
}
.farasync-backup-section .farasync-dropzone.is-drag {
    border-color: #7c3aed; background: #f5f3ff; color: #5b21b6;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}
.farasync-backup-result.is-ok { color: #15803d; }
.farasync-backup-result.is-err { color: #d63638; }

.farasync-tz-section .farasync-tz-desc { margin: 4px 0 12px; color: #475569; max-width: 78ch; }
.farasync-tz-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.farasync-tz-row select,
.farasync-tz-row input[type="text"] { min-width: 260px; }
.farasync-tz-now { margin: 10px 0 2px; color: #334155; }
.farasync-tz-now strong { color: #1e293b; }
.farasync-tz-label {
    display: inline-block; margin-inline-start: 8px; padding: 1px 8px; border-radius: 99px;
    background: rgba(148, 163, 184, .16); border: 1px solid rgba(148, 163, 184, .35);
    font-size: 11.5px; color: #475569;
}

/* ==========================================================================
   v1.0.0 (Round Y14): MOBILE fullscreen notifications sheet
   On phones (≤600px) the bell dropdown stops being a pinned dropdown and
   becomes a fullscreen sheet covering the whole viewport: a plugin-hero
   style header (same dark gradient, white title, gradient bell glyph) with
   an X button that closes it, and the feed scrolling underneath. Desktop
   and tablet keep the pinned dropdown — the glyph + X stay display:none.
   NOTE: the panel hides via the UA [hidden]{display:none} rule, so NO
   display override may land on the panel itself (an author !important
   display would keep it always visible).
   ========================================================================== */
.farasync-bell-head-ico,
.farasync-bell-close {
    display: none;
}

/* v1.0.0 (Round Y16): the credit footer rides inside the panel markup as
   the fixed bottom bar of the MOBILE sheet — invisible on desktop/tablet
   where the panel stays the pinned dropdown. */
.farasync-bell-panel .farasync-credit-footer,
#farasync-bell-panel-portal .farasync-credit-footer {
    display: none !important;
}

/* v1.0.0: the Y5 font cascade (above) forces Vazirmatn !important on EVERY
   span/button inside the portaled panel — it silently kills the dashicons
   glyph font on the two NEW chrome elements (bell chip + X). Restore the
   icon font with HIGHER specificity (the ID-scoped cascade rule is
   (1,0,1), so a plain class selector would lose). */
.farasync-bell-panel .farasync-bell-head-ico,
#farasync-bell-panel-portal .farasync-bell-head-ico,
.farasync-bell-panel .farasync-bell-head-ico::before,
#farasync-bell-panel-portal .farasync-bell-head-ico::before,
.farasync-bell-panel .farasync-bell-close .dashicons,
#farasync-bell-panel-portal .farasync-bell-close .dashicons,
.farasync-bell-panel .farasync-bell-close .dashicons::before,
#farasync-bell-panel-portal .farasync-bell-close .dashicons::before {
    font-family: dashicons !important;
}

@keyframes farasync-sheet-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
    /* The JS pins the portal with inline top/left — on phones !important
       owns the geometry instead: edge-to-edge, full height, no dropdown
       chrome. 100dvh beats 100vh on browsers that support it (URL bar). */
    .farasync-bell-panel,
    #farasync-bell-panel-portal {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100vw !important;
        max-width: none !important;
        height: 100vh !important;
        height: 100dvh !important;
        max-height: none !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        animation: farasync-sheet-in 200ms ease;
        overscroll-behavior: contain;
    }
    /* Hero-style sheet header — mirrors the plugin header gradient.
       v1.0.0 (Y16): the head stays PINNED while the feed scrolls. */
    .farasync-bell-panel .farasync-bell-head {
        position: sticky;
        top: 0;
        z-index: 5;
        padding: calc(12px + env(safe-area-inset-top, 0px)) 14px 12px;
        background: linear-gradient(121deg, #0f172a 0%, #172554 48%, #312e81 100%);
        color: #ffffff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    }
    .farasync-bell-panel .farasync-bell-head strong {
        flex: 1 1 auto;
        color: #ffffff;
        font-size: 14.5px;
        font-weight: 600;
        line-height: 1.6;
    }
    /* Gradient bell chip before the title — echoes the header logo.
       v1.0.0: indigo family, consistent with the reworked palette. */
    .farasync-bell-panel .farasync-bell-head-ico {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        border-radius: 9px;
        background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%);
        color: #ffffff;
        box-shadow: 0 4px 12px rgba(79, 70, 229, 0.40);
    }
    .farasync-bell-panel .farasync-bell-head-ico::before {
        font-size: 16px;
        line-height: 30px;
    }
    /* «خوانده شد» — translucent pill on the dark bar. */
    .farasync-bell-panel .farasync-bell-clear {
        flex: 0 0 auto;
        margin: 0;
        padding: 4px 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff !important;
        font-size: 11.5px;
        line-height: 1.6;
        /* v1.0.0 (Round Y18): no underline, bold — same as desktop. */
        text-decoration: none !important;
        font-weight: 700;
    }
    .farasync-bell-panel .farasync-bell-clear:hover {
        background: rgba(255, 255, 255, 0.22);
    }
    /* The X — visible ONLY on phones; red hover reads as "close". */
    .farasync-bell-panel .farasync-bell-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 32px;
        height: 32px;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.35);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.12);
        color: #ffffff;
        cursor: pointer;
        box-shadow: none;
        appearance: none;
        -webkit-appearance: none;
    }
    .farasync-bell-panel .farasync-bell-close:hover,
    .farasync-bell-panel .farasync-bell-close:focus {
        background: #e11d48;
        border-color: transparent;
        color: #ffffff;
        box-shadow: none;
    }
    .farasync-bell-panel .farasync-bell-close .dashicons {
        font-size: 18px;
        width: 18px;
        height: 18px;
    }
    /* The feed breathes inside the sheet (safe-area aware bottom).
       v1.0.0 (Y16): extra floor clearance for the fixed credit footer. */
    .farasync-bell-panel .farasync-bell-list {
        padding: 4px 0 calc(80px + env(safe-area-inset-bottom, 0px));
    }
    .farasync-bell-panel .farasync-bell-empty {
        padding: 26px 16px calc(96px + env(safe-area-inset-bottom, 0px));
    }
    /* v1.0.0 (Y16): the dashboard's branded credit footer — FIXED bottom
       strip of the sheet (same gradient bar as the dashboard floor). */
    .farasync-bell-panel .farasync-credit-footer,
    #farasync-bell-panel-portal .farasync-credit-footer {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 6;
        margin: 0 !important;
        padding: 11px 16px calc(11px + env(safe-area-inset-bottom, 0px)) !important;
        border-radius: 0;
    }
    /* JS-toggled while the sheet is open — the page behind stops scrolling.
       <html> is locked too: the admin theme sets its own overflow, which
       would otherwise keep the viewport scrollable. */
    html.farasync-bell-lock,
    body.farasync-bell-lock {
        overflow: hidden !important;
    }
}

/* v1.0.0 (item 5): a bot column whose bot is NOT connected renders its
   ticks muted instead of disabled — the tick always takes, the intent is
   saved, and nothing is sent until the bot actually connects. */
.farasync-notify-table input.farasync-notify-tick.is-muted-bot {
    opacity: .45;
}

/* ==========================================================================
   v1.0.0 (user report «تیک‌ها بی‌قاعده می‌شوند» — mobile): on phones the
   matrix columns overflowed the card with NO horizontal scroll, so the tick
   squares sat BEYOND the viewport (tap point = nothing) and a swipe on the
   header silently flipped whole columns. The card now scrolls horizontally,
   the table keeps a sane minimum width, and ticks get a real touch target.
   ========================================================================== */
[data-panel="notify"] .farasync-notify-events {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
[data-panel="notify"] .farasync-notify-table {
    min-width: 460px;
}
@media (max-width: 600px) {
    [data-panel="notify"] .farasync-notify-table th.col-bot,
    [data-panel="notify"] .farasync-notify-table td.col-bot,
    [data-panel="notify"] .farasync-notify-table th.col-site,
    [data-panel="notify"] .farasync-notify-table td.col-site {
        width: 72px;
        min-width: 72px;
        padding: 10px 6px;
    }
}
@media (pointer: coarse) {
    [data-panel="notify"] input.farasync-notify-tick,
    [data-panel="notify"] input.farasync-notify-site-tick {
        width: 24px;   /* v1.0.0: 22px was under the 24px WCAG floor */
        height: 24px;
    }
}

/* ========================================================================
   v1.0.0 (item 3): customizable-messages modal (hidden secret icon).
   Uses the shared .farasync-modal chrome; only the inner layout is new.
   ======================================================================== */
.farasync-msgs-content {
    max-width: 720px;
}
.farasync-msgs-lead {
    margin: -6px 0 14px;
    color: var(--farasync-text-light, #64748b);
    font-size: 13px;
    line-height: 1.9;
}
.farasync-msgs-card {
    border: 1px solid var(--farasync-border, #e2e8f0);
    border-radius: 14px;
    padding: 14px 16px 16px;
    margin: 0 0 14px;
    background: var(--farasync-bg, #f8fafc);
}
.farasync-msgs-card h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--farasync-text, #0f172a);
}
.farasync-msgs-lang {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px 12px;
    border: 1px dashed var(--farasync-border, #cbd5e1);
    border-radius: 10px;
    margin-bottom: 10px;
    background: #fff;
}
.farasync-msgs-lang:last-of-type {
    margin-bottom: 0;
}
.farasync-msgs-lang-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #4f46e5;
    background: #eef2ff;
    border-radius: 999px;
    padding: 2px 10px;
}
.farasync-msgs-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.farasync-msgs-field-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--farasync-text-light, #475569);
}
.farasync-msgs-input {
    width: 100%;
    max-width: 100%;
    border: 1px solid var(--farasync-border, #cbd5e1);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
    line-height: 1.7;
    background: #fff;
}
.farasync-msgs-input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99, 102, 241, .15);
}
.farasync-msgs-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.farasync-msgs-hint {
    font-size: 12px;
    color: var(--farasync-text-light, #64748b);
}
/* The secret icon itself shares .farasync-secret-btn styling; no extra
   button rules needed beyond the hidden-state mirror of the family. */
.farasync-tpl-secret-msgs.farasync-secret-hidden {
    display: none !important;
}
@media (max-width: 600px) {
    .farasync-msgs-content {
        max-width: 100%;
        padding: 20px 16px;
    }
    .farasync-msgs-lang {
        padding: 8px 10px;
    }
}

/* ============================================================
   v1.0.0 (UI audit) — keyboard focus must remain VISIBLE.
   The rules above removed outlines with no alternative; each now
   gets a :focus-visible ring (pattern from command-center).
   ============================================================ */
.farasync-bell-clear:focus-visible,
.fs-feed-title-link:focus-visible,
.fs-feed-link:focus-visible,
.farasync-admin-res-cancel:focus-visible {
    outline: 2px solid #6366f1 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25) !important;
}