/* Bell dropdown (Follow notifications).
 *
 * Anchored to the header bell by JS (fixed positioning), so the only layout
 * rules here are the panel, the rows and the empty state. Colours come from the
 * shell's design tokens with literal fallbacks, so the panel still looks right
 * if it is ever rendered before design.css.
 */
.bell-menu{
  position:fixed;
  z-index:1200;
  width:min(360px, calc(100vw - 24px));
  overflow:auto;
  overscroll-behavior:contain;
  background:var(--card, #fff);
  color:var(--text, #0f172a);
  border:1px solid var(--border, #e2e8f0);
  border-radius:16px;
  box-shadow:0 22px 60px rgba(15,23,42,.24);
  padding:6px;
  animation:bellIn .14s ease-out;
}
.bell-menu[hidden]{display:none}
@keyframes bellIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.bell-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px 10px;
}
.bell-head-title{font-size:13.5px;font-weight:800}
.bell-mark{
  border:0;background:transparent;color:var(--brand-600,#4f46e5);
  font:inherit;font-size:12px;font-weight:700;cursor:pointer;
  padding:4px 8px;border-radius:999px;white-space:nowrap;
}
.bell-mark:hover{background:rgba(79,70,229,.08)}
.bell-mark[disabled]{color:var(--text-3,#94a3b8);cursor:default;background:transparent}

.bell-list{display:flex;flex-direction:column;gap:2px;max-height:min(52vh,360px);overflow:auto}
.bell-item{
  display:flex;align-items:flex-start;gap:12px;width:100%;text-align:start;
  border:0;background:transparent;color:inherit;font:inherit;cursor:pointer;
  padding:12px 10px;border-radius:12px;position:relative;
}
/* Hairline between rows: without it a long Persian body and the next row's
   title run together, which is what made the phone panel read as a wall. */
.bell-item + .bell-item::before{
  content:"";position:absolute;top:0;left:10px;right:10px;height:1px;
  background:var(--border,#eef2f7);
}
.bell-item:hover{background:var(--surface-2,#f8fafc)}
.bell-item.unread{background:rgba(79,70,229,.05)}
.bell-item.unread:hover{background:rgba(79,70,229,.09)}
.bell-ico{
  flex:none;width:34px;height:34px;border-radius:11px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2,#f1f5f9);font-size:17px;line-height:1;
}
.bell-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.bell-actor{font-size:12px;font-weight:800;color:var(--brand-600,#4f46e5);line-height:1.3}
.bell-title{
  font-size:13px;font-weight:600;line-height:1.45;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.bell-text{
  font-size:12.5px;color:var(--text-2,#475569);line-height:1.5;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.bell-time{font-size:11px;color:var(--text-3,#94a3b8);margin-top:3px;line-height:1.2}
.bell-dot{
  flex:none;width:8px;height:8px;border-radius:999px;background:#ef4444;
  align-self:center;box-shadow:0 0 0 3px rgba(239,68,68,.14);
}
.bell-empty{padding:26px 14px;text-align:center;font-size:13px;color:var(--text-3,#94a3b8)}
.bell-foot{border-top:1px solid var(--border,#e2e8f0);margin-top:6px;padding:6px 4px 2px}
.bell-all{
  width:100%;border:0;background:transparent;color:var(--brand-600,#4f46e5);
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  padding:8px;border-radius:10px;
}
.bell-all:hover{background:rgba(79,70,229,.08)}

/* Phones: the bell lives in a crowded top bar — let the panel use the width it
   has instead of trying to align to a 40px button. Rows get real breathing room
   (the tinted unread block + a hairline instead of 2px gaps), the list is a
   single scroll region and the unread dot moves out of the text column so a
   title never wraps around it. */
@media (max-width:520px){
  .bell-menu{
    width:auto !important;left:8px !important;right:8px !important;
    top:auto !important;
    bottom:calc(8px + env(safe-area-inset-bottom,0px));
    max-height:min(78vh,640px) !important;
    border-radius:20px;padding:4px 6px 6px;
    box-shadow:0 24px 70px rgba(15,23,42,.32);
  }
  .bell-head{padding:12px 12px 10px;gap:8px}
  .bell-head-title{font-size:15px;letter-spacing:.1px}
  .bell-mark{font-size:12.5px;padding:6px 10px}
  .bell-list{max-height:none;overflow:visible;gap:0}
  .bell-item{gap:12px;padding:14px 12px;border-radius:14px}
  .bell-item + .bell-item::before{left:58px;right:12px}
  .bell-ico{width:36px;height:36px;border-radius:12px;font-size:18px}
  .bell-body{gap:3px;padding-inline-end:16px}
  .bell-actor{font-size:12px}
  .bell-title{font-size:14px;line-height:1.5;-webkit-line-clamp:3}
  .bell-text{font-size:12.5px;line-height:1.6;-webkit-line-clamp:3}
  .bell-time{font-size:11.5px;margin-top:5px}
  /* Opposite the icon in BOTH directions: the icon is the row's first child,
     so the dot must sit at the logical END or it lands on the emoji in RTL.
     Only the logical property is set — a physical `right` would win over it. */
  .bell-dot{position:absolute;top:16px;inset-inline-end:12px;align-self:auto}
  .bell-all{font-size:13.5px;padding:12px}
}