/* ============================================================ fonts */
@font-face { font-family: "Plex Arabic"; font-weight: 400; font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-weight: 500; font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-weight: 600; font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-weight: 700; font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Plex Arabic"; font-weight: 400; font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-weight: 500; font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-weight: 600; font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plex Arabic"; font-weight: 700; font-display: swap;
  src: url(../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Headings use the website's typefaces (ahmad-hamid.com): Reem Kufi for Arabic, Marcellus for Latin (both OFL). */
@font-face { font-family: "Reem Kufi"; font-weight: 400 700; font-display: swap;
  src: url(../fonts/reem-kufi-arabic.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+FB50-FDFF, U+FE70-FEFC; }
@font-face { font-family: "Reem Kufi"; font-weight: 400 700; font-display: swap;
  src: url(../fonts/reem-kufi-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Marcellus"; font-weight: 400; font-display: swap;
  src: url(../fonts/marcellus-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }

/* ============================================================ tokens
   Same theme as ahmad-hamid.com (2026-10-24): espresso brown bars and covers,
   warm sand surfaces, lavender for buttons, badges and my bubbles, brass for
   the ornament and hairlines. The ornament is Saudi: the Najdi lattice of the
   Diriyah cover (traced in tools/najdi.py: lattice with dotted joints, fleur
   motifs, bead border, Sadu diamonds) in brass, cream and lavender, and the
   Asiri Al-Qatt sawtooth under the bars. The ornament tiles are masks
   generated by tools/build_theme.py, so they take their colours from these
   tokens. */
:root {
  --fs: 1;
  --lav: #6b4fa0; --deep: #4a3570; --lav-light: #c9b3ef; --lav-soft: #ebe3f5;
  --cream: #f3ebdf; --gold: #cfa968; --gold-deep: #9c7a43; --mud: #2b1c15;
  --cover-a: #2b1c15; --cover-b: #3d2920;
  --brand: #6b4fa0; --brand-2: #8a6bc9; --brand-ink: #fff; --accent: #b8914f;
  --bg: #f3ece2; --panel: #fbf8f3; --panel-2: #f2ebe1; --line: #e2d5c4; --hover: #efe7dc; --active: #ebe3f5;
  --ink: #2b1c15; --ink-2: #5e4a3f; --ink-3: #6f5b4f; --off: #a8998c; --muted-badge: #8c7a6d; --muted-badge-ink: #fff;
  --head-bg: #2b1c15; --head-ink: #f3ebdf; --head-ink-2: #c9b7a7; --head-line: rgba(184,145,79,.5);
  --chat-bg: #f5efe6; --bubble-in: #fffdf9; --bubble-out: #e6dcf6; --bubble-ink: #2b1c15;
  --sys: #f3e7d1; --sys-ink: #5e4a3f; --tick: #3f8fc4; --link: #2a5d96; --danger: #c43d3d; --badge: #6b4fa0; --online: #4caf6a; --tick-out: #2a6fae;
  --shadow: 0 1px 1px rgba(43,28,21,.06), 0 2px 10px rgba(43,28,21,.08);
  --shadow-lg: 0 14px 44px rgba(43,28,21,.3);
  --wm-opacity: .065;
  --wall-a: #6b4532; --wall-a-o: .07; --wall-b: #8a6bc9; --wall-b-o: .13; --wall-tile: 120px;
  --band-lines: var(--gold); --band-a: var(--cream); --band-b: var(--lav-light);
  --band-lines-o: .62; --band-a-o: .6; --band-b-o: .8; --band-tile: 132px;
  --radius: 16px; --side-w: 400px;
  --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* @najdi-start */
  --najdi-lines: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M59.192 9.192L90.808 40.808M90.808 59.192L59.192 90.808M40.808 90.808L9.192 59.192M9.192 40.808L40.808 9.192' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3Cg fill='%23000'%3E%3Ccircle cx='50' cy='0' r='2.9'/%3E%3Ccircle cx='55.515' cy='5.515' r='1.95'/%3E%3Ccircle cx='55.515' cy='-5.515' r='1.95'/%3E%3Ccircle cx='44.485' cy='5.515' r='1.95'/%3E%3Ccircle cx='44.485' cy='-5.515' r='1.95'/%3E%3Ccircle cx='100' cy='50' r='2.9'/%3E%3Ccircle cx='105.515' cy='55.515' r='1.95'/%3E%3Ccircle cx='105.515' cy='44.485' r='1.95'/%3E%3Ccircle cx='94.485' cy='55.515' r='1.95'/%3E%3Ccircle cx='94.485' cy='44.485' r='1.95'/%3E%3Ccircle cx='50' cy='100' r='2.9'/%3E%3Ccircle cx='55.515' cy='105.515' r='1.95'/%3E%3Ccircle cx='55.515' cy='94.485' r='1.95'/%3E%3Ccircle cx='44.485' cy='105.515' r='1.95'/%3E%3Ccircle cx='44.485' cy='94.485' r='1.95'/%3E%3Ccircle cx='0' cy='50' r='2.9'/%3E%3Ccircle cx='5.515' cy='55.515' r='1.95'/%3E%3Ccircle cx='5.515' cy='44.485' r='1.95'/%3E%3Ccircle cx='-5.515' cy='55.515' r='1.95'/%3E%3Ccircle cx='-5.515' cy='44.485' r='1.95'/%3E%3C/g%3E%3C/svg%3E");
  --najdi-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cg id='na'%3E%3Cpath fill-rule='evenodd' d='M0 -0.43C0.09 -0.48 0.155 -0.57 0.15 -0.66C0.145 -0.8 0.06 -0.92 0 -1C-0.06 -0.92 -0.145 -0.8 -0.15 -0.66C-0.155 -0.57 -0.09 -0.48 0 -0.43ZM0.03 -0.625A0.03 0.03 0 1 0 -0.03 -0.625A0.03 0.03 0 1 0 0.03 -0.625Z'/%3E%3Cpath d='M0.007 -0.415L0.038 -0.405L0.07 -0.398L0.101 -0.394L0.133 -0.395L0.165 -0.4L0.196 -0.409L0.227 -0.423L0.257 -0.441L0.286 -0.463L0.204 -0.537L0.19 -0.516L0.174 -0.497L0.157 -0.481L0.139 -0.468L0.118 -0.457L0.096 -0.448L0.07 -0.442L0.043 -0.44L0.013 -0.441ZM-0.013 -0.441L-0.043 -0.44L-0.07 -0.442L-0.096 -0.448L-0.118 -0.457L-0.139 -0.468L-0.157 -0.481L-0.174 -0.497L-0.19 -0.516L-0.204 -0.537L-0.286 -0.463L-0.257 -0.441L-0.227 -0.423L-0.196 -0.409L-0.165 -0.4L-0.133 -0.395L-0.101 -0.394L-0.07 -0.398L-0.038 -0.405L-0.007 -0.415Z'/%3E%3Cellipse cx='0.272' cy='-0.552' rx='0.102' ry='0.084' transform='rotate(-38 0.272 -0.552)'/%3E%3Cellipse cx='-0.272' cy='-0.552' rx='0.102' ry='0.084' transform='rotate(38 -0.272 -0.552)'/%3E%3C/g%3E%3Cpath id='ne' d='M0 -0.058C0.03 -0.086 0.055 -0.138 0.054 -0.188C0.053 -0.234 0.03 -0.26 0 -0.26C-0.03 -0.26 -0.053 -0.234 -0.054 -0.188C-0.055 -0.138 -0.03 -0.086 0 -0.058Z'/%3E%3Cg id='nm'%3E%3Cuse href='%23na' transform='rotate(0)'/%3E%3Cuse href='%23na' transform='rotate(90)'/%3E%3Cuse href='%23na' transform='rotate(180)'/%3E%3Cuse href='%23na' transform='rotate(270)'/%3E%3Cuse href='%23ne' transform='rotate(0)'/%3E%3Cuse href='%23ne' transform='rotate(45)'/%3E%3Cuse href='%23ne' transform='rotate(90)'/%3E%3Cuse href='%23ne' transform='rotate(135)'/%3E%3Cuse href='%23ne' transform='rotate(180)'/%3E%3Cuse href='%23ne' transform='rotate(225)'/%3E%3Cuse href='%23ne' transform='rotate(270)'/%3E%3Cuse href='%23ne' transform='rotate(315)'/%3E%3Ccircle cx='0.34' cy='0.34' r='0.04'/%3E%3Ccircle cx='-0.34' cy='0.34' r='0.04'/%3E%3Ccircle cx='0.34' cy='-0.34' r='0.04'/%3E%3Ccircle cx='-0.34' cy='-0.34' r='0.04'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23nm' fill='%23000' transform='translate(50 50) scale(27.5)'/%3E%3C/svg%3E");
  --najdi-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cdefs%3E%3Cg id='na'%3E%3Cpath fill-rule='evenodd' d='M0 -0.43C0.09 -0.48 0.155 -0.57 0.15 -0.66C0.145 -0.8 0.06 -0.92 0 -1C-0.06 -0.92 -0.145 -0.8 -0.15 -0.66C-0.155 -0.57 -0.09 -0.48 0 -0.43ZM0.03 -0.625A0.03 0.03 0 1 0 -0.03 -0.625A0.03 0.03 0 1 0 0.03 -0.625Z'/%3E%3Cpath d='M0.007 -0.415L0.038 -0.405L0.07 -0.398L0.101 -0.394L0.133 -0.395L0.165 -0.4L0.196 -0.409L0.227 -0.423L0.257 -0.441L0.286 -0.463L0.204 -0.537L0.19 -0.516L0.174 -0.497L0.157 -0.481L0.139 -0.468L0.118 -0.457L0.096 -0.448L0.07 -0.442L0.043 -0.44L0.013 -0.441ZM-0.013 -0.441L-0.043 -0.44L-0.07 -0.442L-0.096 -0.448L-0.118 -0.457L-0.139 -0.468L-0.157 -0.481L-0.174 -0.497L-0.19 -0.516L-0.204 -0.537L-0.286 -0.463L-0.257 -0.441L-0.227 -0.423L-0.196 -0.409L-0.165 -0.4L-0.133 -0.395L-0.101 -0.394L-0.07 -0.398L-0.038 -0.405L-0.007 -0.415Z'/%3E%3Cellipse cx='0.272' cy='-0.552' rx='0.102' ry='0.084' transform='rotate(-38 0.272 -0.552)'/%3E%3Cellipse cx='-0.272' cy='-0.552' rx='0.102' ry='0.084' transform='rotate(38 -0.272 -0.552)'/%3E%3C/g%3E%3Cpath id='ne' d='M0 -0.058C0.03 -0.086 0.055 -0.138 0.054 -0.188C0.053 -0.234 0.03 -0.26 0 -0.26C-0.03 -0.26 -0.053 -0.234 -0.054 -0.188C-0.055 -0.138 -0.03 -0.086 0 -0.058Z'/%3E%3Cg id='nm'%3E%3Cuse href='%23na' transform='rotate(0)'/%3E%3Cuse href='%23na' transform='rotate(90)'/%3E%3Cuse href='%23na' transform='rotate(180)'/%3E%3Cuse href='%23na' transform='rotate(270)'/%3E%3Cuse href='%23ne' transform='rotate(0)'/%3E%3Cuse href='%23ne' transform='rotate(45)'/%3E%3Cuse href='%23ne' transform='rotate(90)'/%3E%3Cuse href='%23ne' transform='rotate(135)'/%3E%3Cuse href='%23ne' transform='rotate(180)'/%3E%3Cuse href='%23ne' transform='rotate(225)'/%3E%3Cuse href='%23ne' transform='rotate(270)'/%3E%3Cuse href='%23ne' transform='rotate(315)'/%3E%3Ccircle cx='0.34' cy='0.34' r='0.04'/%3E%3Ccircle cx='-0.34' cy='0.34' r='0.04'/%3E%3Ccircle cx='0.34' cy='-0.34' r='0.04'/%3E%3Ccircle cx='-0.34' cy='-0.34' r='0.04'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23nm' fill='%23000' transform='translate(0 0) scale(27.5)'/%3E%3Cuse href='%23nm' fill='%23000' transform='translate(100 0) scale(27.5)'/%3E%3Cuse href='%23nm' fill='%23000' transform='translate(0 100) scale(27.5)'/%3E%3Cuse href='%23nm' fill='%23000' transform='translate(100 100) scale(27.5)'/%3E%3C/svg%3E");
  --najdi-border: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23' height='12.25' viewBox='0 0 23 12.25'%3E%3Cg fill='%23000'%3E%3Crect x='0' y='0' width='2.75' height='12.25'/%3E%3Ccircle cx='11.25' cy='6.125' r='4.4'/%3E%3Crect x='19.75' y='0' width='1.5' height='12.25'/%3E%3C/g%3E%3C/svg%3E");
  --najdi-border-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12.25' height='23' viewBox='0 0 12.25 23'%3E%3Cg fill='%23000' transform='matrix(0 1 1 0 0 0)'%3E%3Crect x='0' y='0' width='2.75' height='12.25'/%3E%3Ccircle cx='11.25' cy='6.125' r='4.4'/%3E%3Crect x='19.75' y='0' width='1.5' height='12.25'/%3E%3C/g%3E%3C/svg%3E");
  --sadu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='28' viewBox='0 0 35 7'%3E%3Cpath fill='%23000' shape-rendering='crispEdges' d='M4 0h1v1h-1zM3 1h1v1h-1zM4 1h1v1h-1zM5 1h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM5 2h1v1h-1zM6 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM6 3h1v1h-1zM7 3h1v1h-1zM8 3h1v1h-1zM1 4h1v1h-1zM2 4h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM6 4h1v1h-1zM7 4h1v1h-1zM3 5h1v1h-1zM4 5h1v1h-1zM5 5h1v1h-1zM4 6h1v1h-1z'/%3E%3Cpath fill='%23000' shape-rendering='crispEdges' d='M17 0h1v1h-1zM16 1h1v1h-1zM17 1h1v1h-1zM18 1h1v1h-1zM14 2h1v1h-1zM15 2h1v1h-1zM16 2h1v1h-1zM18 2h1v1h-1zM19 2h1v1h-1zM20 2h1v1h-1zM13 3h1v1h-1zM14 3h1v1h-1zM15 3h1v1h-1zM19 3h1v1h-1zM20 3h1v1h-1zM21 3h1v1h-1zM14 4h1v1h-1zM15 4h1v1h-1zM16 4h1v1h-1zM18 4h1v1h-1zM19 4h1v1h-1zM20 4h1v1h-1zM16 5h1v1h-1zM17 5h1v1h-1zM18 5h1v1h-1zM17 6h1v1h-1z'/%3E%3Cpath fill='%23000' shape-rendering='crispEdges' d='M30 0h1v1h-1zM29 1h1v1h-1zM30 1h1v1h-1zM31 1h1v1h-1zM27 2h1v1h-1zM28 2h1v1h-1zM29 2h1v1h-1zM31 2h1v1h-1zM32 2h1v1h-1zM33 2h1v1h-1zM26 3h1v1h-1zM27 3h1v1h-1zM28 3h1v1h-1zM32 3h1v1h-1zM33 3h1v1h-1zM34 3h1v1h-1zM27 4h1v1h-1zM28 4h1v1h-1zM29 4h1v1h-1zM31 4h1v1h-1zM32 4h1v1h-1zM33 4h1v1h-1zM29 5h1v1h-1zM30 5h1v1h-1zM31 5h1v1h-1zM30 6h1v1h-1z'/%3E%3C/svg%3E");
  --najdi-flower: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='-0.27 -0.27 0.54 0.54'%3E%3Cg fill='%23000'%3E%3Cpath d='M0 -0.058C0.03 -0.086 0.055 -0.138 0.054 -0.188C0.053 -0.234 0.03 -0.26 0 -0.26C-0.03 -0.26 -0.053 -0.234 -0.054 -0.188C-0.055 -0.138 -0.03 -0.086 0 -0.058Z' transform='rotate(0)'/%3E%3Cpath d='M0 -0.058C0.03 -0.086 0.055 -0.138 0.054 -0.188C0.053 -0.234 0.03 -0.26 0 -0.26C-0.03 -0.26 -0.053 -0.234 -0.054 -0.188C-0.055 -0.138 -0.03 -0.086 0 -0.058Z' transform='rotate(45)'/%3E%3Cpath d='M0 -0.058C0.03 -0.086 0.055 -0.138 0.054 -0.188C0.053 -0.234 0.03 -0.26 0 -0.26C-0.03 -0.26 -0.053 -0.234 -0.054 -0.188C-0.055 -0.138 -0.03 -0.086 0 -0.058Z' transform='rotate(90)'/%3E%3Cpath d='M0 -0.058C0.03 -0.086 0.055 -0.138 0.054 -0.188C0.053 -0.234 0.03 -0.26 0 -0.26C-0.03 -0.26 -0.053 -0.234 -0.054 -0.188C-0.055 -0.138 -0.03 -0.086 0 -0.058Z' transform='rotate(135)'/%3E%3Cpath d='M0 -0.058C0.03 -0.086 0.055 -0.138 0.054 -0.188C0.053 -0.234 0.03 -0.26 0 -0.26C-0.03 -0.26 -0.053 -0.234 -0.054 -0.188C-0.055 -0.138 -0.03 -0.086 0 -0.058Z' transform='rotate(180)'/%3E%3Cpath d='M0 -0.058C0.03 -0.086 0.055 -0.138 0.054 -0.188C0.053 -0.234 0.03 -0.26 0 -0.26C-0.03 -0.26 -0.053 -0.234 -0.054 -0.188C-0.055 -0.138 -0.03 -0.086 0 -0.058Z' transform='rotate(225)'/%3E%3Cpath d='M0 -0.058C0.03 -0.086 0.055 -0.138 0.054 -0.188C0.053 -0.234 0.03 -0.26 0 -0.26C-0.03 -0.26 -0.053 -0.234 -0.054 -0.188C-0.055 -0.138 -0.03 -0.086 0 -0.058Z' transform='rotate(270)'/%3E%3Cpath d='M0 -0.058C0.03 -0.086 0.055 -0.138 0.054 -0.188C0.053 -0.234 0.03 -0.26 0 -0.26C-0.03 -0.26 -0.053 -0.234 -0.054 -0.188C-0.055 -0.138 -0.03 -0.086 0 -0.058Z' transform='rotate(315)'/%3E%3C/g%3E%3C/svg%3E");
  /* @najdi-end */
  color-scheme: light;
}
:root[data-theme="dark"] {
  --cover-a: #1f1612; --cover-b: #2c1e18;
  --brand: #c3aaea; --brand-2: #d6c3f3; --brand-ink: #1a1210; --accent: #cfa968;
  --bg: #140e0b; --panel: #1c1410; --panel-2: #261c17; --line: #3a2c24; --hover: #2c211b; --active: #33283f;
  --ink: #f1e7da; --ink-2: #d9cab9; --ink-3: #b5a08f; --off: #6f5b4f; --muted-badge: #8c7a6d; --muted-badge-ink: #140e0b; --gold-deep: #cfa968;
  --head-bg: #1f1612; --head-ink: #f3ebdf; --head-ink-2: #b9a697; --head-line: rgba(207,169,104,.35);
  --chat-bg: #17100d; --bubble-in: #261c17; --bubble-out: #3d2f57; --bubble-ink: #f5ede2;
  --sys: #2c2118; --sys-ink: #d9cab9; --tick: #6cb9e6; --link: #9cc8f0; --danger: #f0665f; --badge: #c3aaea; --online: #6fcf85; --tick-out: #a9d6f5;
  --shadow: 0 1px 1px rgba(0,0,0,.4); --shadow-lg: 0 14px 44px rgba(0,0,0,.65);
  --wm-opacity: .06;
  --wall-a: #c9b3ef; --wall-a-o: .05; --wall-b: #cfa968; --wall-b-o: .09;
  color-scheme: dark;
}

/* ============================================================ base */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
html { font-size: calc(16px * var(--fs)); }
body {
  font-family: "Plex Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  background: var(--bg); color: var(--ink); line-height: 1.55; overscroll-behavior: none;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: var(--brand); }
.muted { color: var(--ink-3); }
.small { font-size: .82rem; }
.ic { flex: none; display: block; }
[dir="rtl"] .ic.flip { transform: scaleX(-1); }
.noscript, .fatal { padding: 40px 20px; text-align: center; }

.btn { border: 0; border-radius: 999px; padding: 10px 20px; font-weight: 600; background: var(--panel-2); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: filter .15s, transform .1s; text-decoration: none; }
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--brand); color: var(--brand-ink); box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 28%, transparent); }
.btn.danger { background: var(--danger); color: #fff; }
.btn.ghost { background: transparent; color: var(--brand); }
.btn.small { padding: 6px 12px; font-size: .85rem; }
.btn.wide { width: 100%; padding: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.link-btn { background: none; border: 0; color: var(--ink-3); text-decoration: underline; padding: 8px; }
.link-btn.danger { color: var(--danger); }
.icon-btn { width: 40px; height: 40px; border: 0; background: transparent; border-radius: 50%; display: inline-grid; place-items: center;
  color: var(--ink-2); flex: none; transition: background .15s; }
.icon-btn:hover { background: var(--hover); }
.icon-btn.on { color: var(--brand); }
.icon-btn.danger { color: var(--danger); }
.icon-btn.light { color: #fff; }
.icon-btn.light:hover { background: rgba(255,255,255,.12); }
.input { width: 100%; border: 1px solid var(--line); background: var(--panel-2); border-radius: 12px; padding: 11px 14px; outline: none; transition: border .15s, box-shadow .15s; }
.input:focus { border-color: var(--brand); background: var(--panel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.field { display: grid; gap: 6px; margin: 12px 0; }
.field > span { font-size: .85rem; color: var(--ink-2); font-weight: 500; }
.row-end { display: flex; gap: 10px; justify-content: flex-end; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.alert { border-radius: 12px; padding: 10px 14px; margin: 10px 0; font-size: .92rem; }
.alert.error { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.spinner { display: inline-block; background-color: var(--brand); vertical-align: middle;
  -webkit-mask: var(--najdi-flower) center / contain no-repeat; mask: var(--najdi-flower) center / contain no-repeat;
  animation: spin 1.6s cubic-bezier(.5,.1,.5,.9) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.tag { font-style: normal; font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: var(--active); color: var(--deep); white-space: nowrap; }
:root[data-theme="dark"] .tag { color: var(--brand); }
.tag.muted { background: var(--panel-2); color: var(--ink-3); }

/* ============================================================ auth pages */
.auth-page { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: calc(24px + var(--safe-top)) 20px calc(24px + var(--safe-bottom)); }
html:has(> body.auth-page) { height: auto; min-height: 100%; }
body.auth-page { height: auto; min-height: 100vh; min-height: 100dvh; }
.auth-page > .najdi-band, .auth-page > .najdi-edge { position: absolute; }
.auth-card { width: min(440px, 100%); padding: 10px 6px; text-align: center; color: var(--cream); position: relative; z-index: 1; }
.auth-card h1 { margin: 14px 0 2px; font-size: 1.9rem; font-weight: 700; letter-spacing: .01em; color: #f3ebdf; }
.auth-card .muted { color: #f3ebdf; opacity: .92; }
.auth-card .field > span { color: #e9dccb; }
.auth-card .input { background: rgba(255,255,255,.12); border-color: rgba(207,169,104,.6); color: #fff; }
.auth-card .input:focus { background: rgba(255,255,255,.18); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(207,169,104,.3); }
.auth-card .input::placeholder { color: rgba(243,235,223,.5); }
.auth-card .btn.primary { background: var(--lav-light); color: #24160f; margin-top: 6px; box-shadow: 0 10px 26px rgba(18,11,8,.3); }
.auth-card .alert.error { background: rgba(255,255,255,.92); color: #b0263c; border: 0; }
.auth-card .link-btn { color: var(--gold); }
.auth-form { text-align: start; margin-top: 18px; }
.auth-logo { display: grid; place-items: center; }
.auth-logo img { width: 76px; height: 76px; border-radius: 22px; object-fit: cover; }
.logo-mark, .splash-logo { width: 88px; height: 88px; border-radius: 26px; display: block;
  background: url(../img/icon-192.png) center/cover no-repeat, linear-gradient(135deg, var(--cover-a), var(--cover-b)); box-shadow: 0 16px 40px rgba(18,11,8,.45); border: 1px solid rgba(207,169,104,.5); }
.splash { height: 100vh; height: 100dvh; display: grid; place-items: center; }

@keyframes pulse { 50% { transform: scale(.92); opacity: .8; } }

/* ============================================================ app layout */
.chat-body { overflow: hidden; position: fixed; inset: 0; }
.app { display: grid; grid-template-columns: var(--side-w) 1fr; height: 100vh; height: var(--vvh, 100dvh); overflow: hidden; background: var(--bg); }
.sidebar { position: relative; display: flex; flex-direction: column; background: var(--panel); border-inline-end: 1px solid var(--line); min-width: 0; overflow: hidden; }
.main { position: relative; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.side-head { display: flex; align-items: center; gap: 6px; padding: calc(10px + var(--safe-top)) 12px 16px; color: var(--head-ink);
  background: var(--head-bg); position: relative; isolation: isolate; overflow: hidden; }
.side-head h1 { flex: 1; margin: 0 6px; font-size: 1.25rem; font-weight: 700; color: var(--head-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* bars: the lattice on the end side (behind the icons, away from the title) + the bead border along the bottom */
.side-head .najdi-band, .chat-head .najdi-band { --band-lines-o: .42; --band-a-o: .28; --band-b-o: .42; --band-tile: 64px; --band-dir: to left;
  inset-inline: auto 0; width: 62%; max-width: 380px; }
[dir="rtl"] .side-head .najdi-band, [dir="rtl"] .chat-head .najdi-band { --band-dir: to right; }
/* Al-Qatt Al-Asiri along the bottom of the bars (as on the website's cards): a brass hairline over a row of lavender triangles */
.side-head::after, .chat-head::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 9px; pointer-events: none; opacity: .9;
  background: linear-gradient(var(--gold), var(--gold)) 0 0 / 100% 1px no-repeat,
    conic-gradient(from 135deg at 50% 0, var(--lav-light) 0 90deg, transparent 90deg) 0 1px / 14px 8px repeat-x; }
.side-head .icon-btn, .chat-head .icon-btn { color: var(--head-ink); background: rgba(243,235,223,.07); box-shadow: inset 0 0 0 1px rgba(243,235,223,.14); width: 38px; height: 38px; margin-inline-start: 2px; }
.side-head .avatar, .chat-head .avatar { box-shadow: 0 0 0 2px rgba(255,244,230,.8); }
.side-head .icon-btn:hover, .chat-head .icon-btn:hover { background: rgba(201,179,239,.16); color: var(--head-ink); }
.side-head .icon-btn.on, .chat-head .icon-btn.on { color: var(--gold); }
.me-btn { border: 0; background: none; padding: 0; border-radius: 50%; }
.conn-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); flex: none; margin: 0 4px; }
.conn-dot.on { background: var(--online); box-shadow: 0 0 0 3px color-mix(in srgb, var(--online) 25%, transparent); }
.install-bar { display: flex; align-items: center; gap: 10px; margin: 10px 12px 4px; padding: 10px 12px; border-radius: 14px; background: var(--active); font-size: .85rem; color: var(--ink-2); border: 1px solid color-mix(in srgb, var(--brand) 25%, transparent); }
.install-bar span { flex: 1; }

/* ============================================================ chat list */
.chatlist { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.search-box { display: flex; align-items: center; gap: 8px; margin: 10px 12px 8px; padding: 0 14px; background: var(--panel-2); border-radius: 14px; color: var(--ink-3); border: 1px solid transparent; transition: border .15s, background .15s; }
.search-box:focus-within { border-color: color-mix(in srgb, var(--brand) 45%, transparent); background: var(--panel); }
.search-box input { flex: 1; border: 0; background: transparent; outline: none; padding: 10px 0; min-width: 0; color: var(--ink); }
.search-box.small { margin: 0; flex: 1; }
.search-box.small input { padding: 7px 0; }
.filters { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.chip { border: 0; background: var(--panel-2); color: var(--ink-2); border-radius: 999px; padding: 5px 14px; font-size: .86rem; white-space: nowrap; }
.chip.on { background: var(--active); color: var(--brand); font-weight: 600; }
.chip b { background: var(--badge); color: var(--brand-ink); border-radius: 999px; padding: 0 6px; font-size: .72rem; }
.list-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: calc(10px + var(--safe-bottom)); }
.list-sep { padding: 14px 18px 6px; font-size: .8rem; color: var(--brand); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.list-sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.empty-list { padding: 40px 20px; text-align: center; color: var(--ink-3); font-size: .9rem; }
.chat-row { display: flex; align-items: center; gap: 12px; padding: 0 14px; cursor: pointer; user-select: none; -webkit-user-select: none; transition: background .12s; touch-action: pan-y; }
.chat-row:hover { background: var(--hover); }
.chat-row.active { background: var(--active); }
.chat-row-main { flex: 1; min-width: 0; border-bottom: 1px solid var(--line); padding: 12px 0; }
.row-top, .row-bottom { display: flex; align-items: center; gap: 8px; }
.row-title { flex: 1; font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-time { font-size: .74rem; color: var(--ink-3); flex: none; }
.row-time.hot { color: var(--badge); font-weight: 600; }
.row-preview { flex: 1; min-width: 0; color: var(--ink-2); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 3px; }
.row-preview .rich { overflow: hidden; text-overflow: ellipsis; }
.row-preview .emoji { width: 1.15em; height: 1.15em; }
.row-badges { display: flex; align-items: center; gap: 4px; flex: none; }
.badge { min-width: 21px; height: 21px; padding: 0 6px; border-radius: 999px; background: var(--badge); color: var(--brand-ink); font-size: .74rem; font-weight: 700; display: inline-grid; place-items: center; }
.badge.muted { background: var(--muted-badge); color: var(--muted-badge-ink); }
.muted-ic { color: var(--ink-3); }
.typing-text { color: var(--brand) !important; font-style: normal; font-weight: 500; }

/* ============================================================ avatar */
.avatar { position: relative; border-radius: 50%; background: var(--av, var(--brand)); color: #fff; display: grid; place-items: center; flex: none; font-weight: 600; }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.avatar span { display: grid; place-items: center; line-height: 1; }
.dot-online { position: absolute; bottom: 1px; inset-inline-end: 1px; width: 26%; height: 26%; min-width: 10px; min-height: 10px; border-radius: 50%; background: var(--online); border: 2.5px solid var(--panel); }

/* ============================================================ chat pane */
.chat-pane { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--chat-bg); }
/* wallpaper: the whole Najdi lattice, lines + first motifs in brown, second motifs in lavender */
.chat-pane::before, .chat-pane::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: var(--wall-a-o); background-color: var(--wall-a);
  -webkit-mask: var(--najdi-lines) center / var(--wall-tile) var(--wall-tile) repeat, var(--najdi-a) center / var(--wall-tile) var(--wall-tile) repeat;
  mask: var(--najdi-lines) center / var(--wall-tile) var(--wall-tile) repeat, var(--najdi-a) center / var(--wall-tile) var(--wall-tile) repeat; }
.chat-pane::after { opacity: var(--wall-b-o); background-color: var(--wall-b);
  -webkit-mask: var(--najdi-b) center / var(--wall-tile) var(--wall-tile) repeat; mask: var(--najdi-b) center / var(--wall-tile) var(--wall-tile) repeat; }
.chat-pane.empty { display: grid; place-items: center; }
.chat-head { position: relative; z-index: 3; display: flex; align-items: center; gap: 4px; padding: calc(8px + var(--safe-top)) 8px 14px; color: var(--head-ink);
  background: var(--head-bg); isolation: isolate; overflow: hidden; }
.chat-head .back { display: none; }
.head-who { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; border: 0; background: none; text-align: start; padding: 2px 4px; }
.head-text { display: grid; min-width: 0; }
.head-text b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02rem; }
.head-text small { color: var(--head-ink-2); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-head .typing-text { color: var(--head-ink) !important; }
.head-timer { color: var(--gold); display: grid; place-items: center; width: 30px; }
.conn-bar { position: relative; z-index: 2; background: var(--gold); color: var(--mud); font-size: .82rem; text-align: center; padding: 4px 10px; }

.messages { position: relative; z-index: 1; flex: 1; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 10px 4% 14px; display: flex; flex-direction: column; gap: 2px; scroll-behavior: auto; }
.loading-older { display: grid; place-items: center; padding: 10px; }
.chat-start { display: grid; justify-items: center; gap: 6px; margin: 10px 0 16px; }
.lock-note { background: var(--sys); color: var(--sys-ink); font-size: .78rem; border-radius: 10px; padding: 6px 12px; display: flex; gap: 6px; align-items: center; max-width: 90%; text-align: center; box-shadow: var(--shadow); }
.day-sep, .unread-sep { display: flex; justify-content: center; margin: 12px 0 8px; }
.day-sep span { background: var(--panel); color: var(--ink-2); font-size: .78rem; padding: 4px 12px; border-radius: 9px; box-shadow: var(--shadow); }
.unread-sep { position: static; }
.unread-sep span { background: color-mix(in srgb, var(--panel) 85%, transparent); color: var(--brand); font-size: .8rem; padding: 4px 20px; border-radius: 9px; width: 100%; text-align: center; }
.sys-line { display: flex; justify-content: center; margin: 6px 0; }
.sys-line > span { background: var(--sys); color: var(--sys-ink); font-size: .8rem; padding: 5px 12px; border-radius: 9px; text-align: center; max-width: 85%; box-shadow: var(--shadow); }
.sys-line.shot > span { background: color-mix(in srgb, var(--danger) 14%, var(--panel)); color: var(--danger); font-weight: 600; }

/* ============================================================ messages */
.msg { position: relative; display: flex; flex-direction: column; max-width: min(78%, 560px); align-self: flex-start; margin-top: 1px; transition: transform .15s; touch-action: pan-y; }
.msg.first { margin-top: 8px; }
.msg.out { align-self: flex-end; }
.msg.in { align-self: flex-start; }
.bubble { position: relative; background: var(--bubble-in); color: var(--bubble-ink); border-radius: 14px; padding: 6px 10px 5px; box-shadow: var(--shadow);
  min-width: 82px; overflow: hidden; font-size: .97rem; }
.msg.out .bubble { background: var(--bubble-out); }
.msg.first.in .bubble { border-start-start-radius: 3px; }
.msg.first.out .bubble { border-start-end-radius: 3px; }
.msg.bare .bubble { background: transparent; box-shadow: none; padding: 0; }
.msg.bare .meta { background: color-mix(in srgb, var(--panel) 80%, transparent); border-radius: 8px; padding: 0 6px; width: max-content; margin-inline-start: auto; }
.msg.media .bubble { padding: 3px 3px 4px; }
.msg.media .meta { padding: 0 6px; }
.msg.flash .bubble { animation: flash 1.6s ease; }
@keyframes flash { 0%, 60% { box-shadow: 0 0 0 3px var(--accent); } }
.bubble::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; background-image: var(--wm); background-size: 300px 170px; }
.wm-on .bubble::after { opacity: calc(var(--wm-opacity) * .45); }
.sender { font-size: .82rem; font-weight: 600; margin-bottom: 1px; }
.fwd { font-size: .76rem; color: var(--ink-3); font-style: italic; display: flex; gap: 4px; align-items: center; }
.text { white-space: pre-wrap; overflow-wrap: anywhere; unicode-bidi: plaintext; }
.text.caption { padding: 4px 6px 0; }
.text a { color: var(--link); }
.deleted { color: var(--ink-3); font-style: italic; display: flex; gap: 6px; align-items: center; font-size: .9rem; }
.meta { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-size: .68rem; color: var(--ink-3); margin-top: 1px; line-height: 1.2; float: inline-end; margin-inline-start: 10px; position: relative; top: 5px; }
.msg.media .meta, .msg.bare .meta { float: none; top: 0; margin-top: 3px; }
.meta .edited { font-style: italic; }
.ticks { display: inline-flex; color: var(--ink-3); }
.ticks.read { color: var(--tick); }
.msg.out .meta { color: var(--ink-2); }
.msg.out .ticks.read { color: var(--tick-out); }
.ticks.failed { color: var(--danger); font-weight: 800; padding: 0 3px; }
.ticks.pending { opacity: .8; }
.quote { display: grid; width: 100%; text-align: start; background: color-mix(in srgb, var(--ink) 6%, transparent); border: 0; border-inline-start: 4px solid var(--brand);
  border-radius: 8px; padding: 5px 9px; margin: 2px 0 4px; font-size: .84rem; color: var(--ink-2); overflow: hidden; }
.quote b { font-size: .8rem; }
.quote span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.reacts { align-self: flex-start; display: inline-flex; gap: 3px; background: var(--panel); border: 0; border-radius: 999px; padding: 2px 7px; margin-top: -6px; margin-inline-start: 8px;
  box-shadow: var(--shadow); position: relative; z-index: 1; font-size: .78rem; }
.msg.out .reacts { align-self: flex-end; margin-inline-end: 8px; }
.reacts span { display: inline-flex; align-items: center; gap: 2px; }
.reacts b { font-weight: 600; color: var(--ink-2); }
.swipe-reply { position: absolute; inset-inline-start: -34px; top: 50%; transform: translateY(-50%); color: var(--ink-2); background: var(--panel); border-radius: 50%; padding: 6px; box-shadow: var(--shadow); }
.progress { height: 3px; background: color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 3px; margin: 4px 2px 0; overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--brand); transition: width .2s; }
.fail-note { font-size: .74rem; color: var(--danger); margin-top: 2px; }
.typing-bubble { align-self: flex-start; display: inline-flex; gap: 4px; background: var(--bubble-in); padding: 12px 14px; border-radius: 14px; margin: 6px 0; box-shadow: var(--shadow); }
.typing-bubble i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: bounce 1.2s infinite; }
.typing-bubble i:nth-child(2) { animation-delay: .15s; } .typing-bubble i:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

/* emoji */
.rich { display: inline; }
.emoji { width: 1.3em; height: 1.3em; vertical-align: -0.28em; margin: 0 .05em; display: inline-block; }
.emoji.custom { width: 1.45em; height: 1.45em; vertical-align: -0.35em; }
.emoji-sm { width: 18px; height: 18px; vertical-align: middle; }
.emoji-md { width: 30px; height: 30px; vertical-align: middle; }
.rich.jumbo .emoji, .emoji-xl { width: 46px; height: 46px; margin: 2px; vertical-align: middle; }
.sticker-img { width: 168px; height: 168px; object-fit: contain; display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.12)); }

/* media */
.media-thumb { display: block; position: relative; border: 0; padding: 0; width: min(300px, 64vw); aspect-ratio: 1 / var(--ratio, .75); border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--ink) 10%, transparent); }
.media-thumb img, .media-thumb video, .video-ph { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-touch-callout: none; }
.play-badge { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: grid; place-items: center; }
.dur-badge { position: absolute; bottom: 6px; inset-inline-start: 8px; color: #fff; font-size: .74rem; background: rgba(0,0,0,.45); border-radius: 6px; padding: 0 6px; }
.file-card { display: flex; align-items: center; gap: 10px; min-width: 230px; padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--ink) 6%, transparent); color: inherit; text-decoration: none; }
.file-ic { position: relative; color: var(--brand); display: grid; place-items: center; }
.file-ic b { position: absolute; bottom: -6px; font-size: .55rem; background: var(--brand); color: var(--brand-ink); border-radius: 4px; padding: 0 3px; }
.file-info { flex: 1; display: grid; min-width: 0; }
.file-name { font-weight: 500; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.file-size { font-size: .75rem; color: var(--ink-3); }

/* voice */
.voice { display: flex; align-items: center; gap: 10px; min-width: min(270px, 62vw); padding: 4px 2px; }
.voice-play { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; flex: none; }
.voice-body { flex: 1; display: grid; gap: 3px; min-width: 0; }
.wave { height: 30px; display: flex; align-items: center; gap: 2px; cursor: pointer; direction: rtl; }
.wave i { flex: 1; min-width: 2px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 25%, transparent); transition: background .1s; }
.wave i.on { background: var(--brand); }
.voice-meta { display: flex; justify-content: space-between; align-items: center; font-size: .72rem; color: var(--ink-3); }
.speed { border: 0; background: color-mix(in srgb, var(--ink) 10%, transparent); border-radius: 999px; font-size: .7rem; padding: 0 8px; font-weight: 700; direction: ltr; }

.to-bottom { position: absolute; z-index: 4; inset-inline-end: 18px; bottom: 86px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--panel); color: var(--ink-2); box-shadow: var(--shadow-lg); display: grid; place-items: center; }
.to-bottom .badge { position: absolute; top: -6px; inset-inline-end: -4px; }

/* ============================================================ composer */
.composer-wrap { position: relative; z-index: 3; background: var(--panel-2); padding-bottom: var(--safe-bottom); }
.composer { display: flex; align-items: flex-end; gap: 4px; padding: 8px 8px; }
.input-wrap { flex: 1; min-width: 0; background: var(--panel); border-radius: 22px; padding: 2px 14px; display: flex; }
.input-wrap textarea { width: 100%; border: 0; outline: none; resize: none; background: transparent; padding: 9px 0; max-height: 160px; line-height: 1.45; font-size: 1rem; }
.send-btn { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; flex: none; transition: transform .15s, background .2s; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent); }
.send-btn:active { transform: scale(.93); }
.send-btn.recording { transform: scale(1.3); background: var(--danger); color: #fff; }
.locked-note { text-align: center; color: var(--ink-3); font-size: .88rem; padding: 14px; background: var(--panel-2); padding-bottom: calc(14px + var(--safe-bottom)); }
.compose-ctx { display: flex; align-items: center; gap: 10px; margin: 8px 8px 0; padding: 8px 10px; background: var(--panel); border-radius: 12px; border-inline-start: 4px solid var(--brand); color: var(--ink-2); }
.ctx-body { flex: 1; display: grid; min-width: 0; }
.ctx-body b { color: var(--brand); font-size: .84rem; }
.ctx-body span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .86rem; }
.rec-bar { position: absolute; inset: 0 0 auto 0; height: 100%; min-height: 62px; display: flex; align-items: center; gap: 10px; padding: 8px 64px 8px 14px; background: var(--panel-2); z-index: 2; }
[dir="rtl"] .rec-bar { padding: 8px 14px 8px 64px; }
.rec-bar.locked { padding: 8px 14px; }
.rec-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--danger); animation: pulse 1s infinite; }
.rec-time { font-variant-numeric: tabular-nums; min-width: 44px; }
.rec-levels { flex: 1; display: flex; align-items: center; gap: 2px; height: 26px; overflow: hidden; }
.rec-levels i { width: 3px; border-radius: 2px; background: var(--brand); flex: none; }
.rec-hint { color: var(--ink-3); font-size: .85rem; white-space: nowrap; }
.rec-lock { display: grid; justify-items: center; color: var(--ink-3); font-size: .62rem; position: absolute; bottom: 70px; inset-inline-end: 12px; background: var(--panel); padding: 8px 6px; border-radius: 20px; box-shadow: var(--shadow); animation: float 1.4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }

/* pickers */
.picker { background: var(--panel); border-top: 1px solid var(--line); height: min(340px, 42vh); display: flex; flex-direction: column; }
.picker.loading { display: grid; place-items: center; }
.picker.compact { height: min(380px, 60vh); border: 0; }
.picker-top { display: flex; gap: 8px; align-items: center; padding: 8px 10px 4px; }
.skins { display: flex; gap: 2px; }
.skin { border: 0; background: none; padding: 3px; border-radius: 8px; opacity: .55; }
.skin.on { opacity: 1; background: var(--active); }
.skin img { width: 20px; height: 20px; display: block; }
.picker-tabs { display: flex; gap: 2px; padding: 4px 8px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; flex: none; }
.picker-tabs::-webkit-scrollbar { display: none; }
.picker-tabs button { border: 0; background: none; padding: 6px 8px; border-radius: 10px; color: var(--ink-3); flex: none; display: grid; place-items: center; }
.picker-tabs button.on { background: var(--active); color: var(--brand); }
.picker-tabs img { width: 24px; height: 24px; object-fit: contain; }
.picker-body { flex: 1; overflow-y: auto; padding: 6px 8px 12px; overscroll-behavior: contain; }
.em-sec { font-size: .8rem; color: var(--ink-3); font-weight: 600; padding: 8px 4px 4px; }
.em-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
.em-grid.big { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); }
.em { border: 0; background: none; padding: 6px; border-radius: 10px; aspect-ratio: 1; display: grid; place-items: center; }
.em:hover { background: var(--hover); }
.em img { width: 30px; height: 30px; }
.em.custom img { width: 38px; height: 38px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 4px; }
.st { position: relative; border: 0; background: none; padding: 6px; border-radius: 12px; aspect-ratio: 1; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.st:hover { background: var(--hover); }
.st img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.fav-dot { position: absolute; top: 2px; inset-inline-end: 2px; font-style: normal; font-size: .7rem; }

/* ============================================================ panels, modals, sheets */
.side-panel { position: absolute; inset: 0; z-index: 20; background: var(--panel); display: flex; flex-direction: column; animation: slideIn .22s ease; }
.main .side-panel { inset-inline-start: auto; width: min(420px, 100%); border-inline-start: 1px solid var(--line); box-shadow: var(--shadow-lg); }
@keyframes slideIn { from { transform: translateX(-30px); opacity: 0; } }
[dir="rtl"] .side-panel { animation-name: slideInRtl; }
@keyframes slideInRtl { from { transform: translateX(30px); opacity: 0; } }
.panel-head { display: flex; align-items: center; gap: 8px; padding: calc(10px + var(--safe-top)) 10px 10px; border-bottom: 1px solid var(--line); }
.panel-head b { font-size: 1.05rem; }
.panel-body { flex: 1; overflow-y: auto; padding: 12px; display: grid; gap: 10px; align-content: start; padding-bottom: calc(20px + var(--safe-bottom)); }
.panel-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--panel-2); border: 0; text-align: start; color: inherit; text-decoration: none; width: 100%; }
.panel-card.col { display: grid; gap: 4px; }
.panel-card.clickable { cursor: pointer; }
.panel-card.clickable:hover { background: var(--hover); }
.panel-card.danger { color: var(--danger); }
.panel-card small { display: block; color: var(--ink-3); font-size: .8rem; }
.panel-card p { margin: 2px 0 0; }
.card-title { font-size: .85rem; color: var(--brand); margin-bottom: 4px; }
.about p { font-size: .8rem; color: var(--ink-3); margin: 2px 0; }
.profile-top { display: grid; justify-items: center; gap: 4px; padding: 12px 0; text-align: center; }
.profile-top h2 { margin: 8px 0 0; font-size: 1.3rem; }
.profile-top p { margin: 0; }
.member-row { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 12px; cursor: pointer; }
.member-row:hover { background: var(--hover); }
.member-row > span { flex: 1; display: grid; min-width: 0; }
.member-row small { color: var(--ink-3); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-card { display: flex; align-items: center; gap: 14px; border: 0; background: var(--panel-2); border-radius: var(--radius); padding: 14px; text-align: start; color: inherit; width: 100%; }
.me-card span { flex: 1; display: grid; }
.me-card small { color: var(--ink-3); }
.seg { display: flex; background: var(--panel); border-radius: 12px; padding: 3px; gap: 3px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 9px; padding: 7px 10px; color: var(--ink-2); }
.seg button.on { background: var(--brand); color: var(--brand-ink); font-weight: 600; }
.seg.small { flex: none; }
.seg.small button { padding: 4px 10px; font-size: .85rem; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; }
.setting-row > span { display: grid; }
.setting-row small { color: var(--ink-3); font-size: .76rem; }
.list-btn { display: flex; align-items: center; gap: 12px; border: 0; background: none; padding: 10px 2px; text-align: start; color: inherit; width: 100%; }
.hint-box { background: var(--active); border-radius: 12px; padding: 10px 12px; font-size: .85rem; color: var(--ink-2); }
.switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: var(--off); position: relative; cursor: pointer; transition: background .2s; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; }
.switch:checked { background: var(--brand); }
.switch:checked::after { transform: translateX(18px); }
[dir="rtl"] .switch:checked::after { transform: translateX(-18px); }

.modal-back { position: fixed; inset: 0; z-index: 100; background: rgba(18,11,8,.62); display: grid; place-items: center; padding: calc(16px + var(--safe-top)) 16px 16px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(440px, 100%); max-height: calc(100% - 20px); overflow: hidden; display: flex; flex-direction: column; background: var(--panel); border-radius: 20px; box-shadow: var(--shadow-lg); animation: pop .18s ease; }
.modal.wide { width: min(640px, 100%); }
@keyframes pop { from { transform: scale(.96); opacity: 0; } }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 4px 10px; }
[dir="rtl"] .modal-head { padding: 12px 18px 4px 10px; }
.modal-head h3 { margin: 0; font-size: 1.08rem; }
.modal-body { padding: 4px 18px 18px; overflow-y: auto; }
.confirm-text { font-size: 1rem; margin: 20px 0 6px; }
.sheet-back { place-items: end center; padding: 0; }
.sheet { width: min(480px, 100%); background: var(--panel); border-radius: 22px 22px 0 0; padding: 8px 8px calc(10px + var(--safe-bottom)); box-shadow: var(--shadow-lg); animation: up .2s ease; max-height: 85vh; overflow-y: auto; }
@media (min-width: 820px) { .sheet-back { place-items: center; padding: 16px; } .sheet { border-radius: 20px; padding-bottom: 10px; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet-title { text-align: center; font-weight: 600; padding: 10px; color: var(--ink-2); }
.sheet-item { display: flex; align-items: center; gap: 14px; width: 100%; border: 0; background: none; text-align: start; padding: 13px 16px; border-radius: 12px; font-size: 1rem; }
.sheet-item:hover { background: var(--hover); }
.sheet-item.danger { color: var(--danger); }
.sheet-item.cancel { justify-content: center; color: var(--ink-3); margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0; }
.react-bar { display: flex; justify-content: center; gap: 2px; padding: 8px 4px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; flex-wrap: wrap; }
.react-bar button { border: 0; background: none; padding: 6px; border-radius: 50%; transition: transform .12s; }
.react-bar button:hover { transform: scale(1.18); background: var(--hover); }
.react-bar button.on { background: var(--active); }
.react-bar .more { width: 42px; height: 42px; background: var(--panel-2); display: grid; place-items: center; color: var(--ink-2); }
.react-row, .info-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.info-row > span { flex: 1; display: grid; }
.info-row small { color: var(--ink-3); font-size: .78rem; }
.info-h { display: flex; align-items: center; gap: 8px; margin: 14px 0 4px; font-size: .9rem; color: var(--ink-2); }
.info-h.read { color: var(--tick); }
.radio-list { display: grid; gap: 6px; margin: 12px 0; }
.radio { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 12px; border-radius: 12px; background: var(--panel-2); cursor: pointer; }
.radio.on { background: var(--active); }
.radio small { grid-column: 2; color: var(--ink-3); font-size: .78rem; }
.radio input { accent-color: var(--brand); width: 18px; height: 18px; }
.pick-list { max-height: 50vh; overflow-y: auto; }
.pick-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.pick-row input { accent-color: var(--brand); width: 18px; height: 18px; }
.search-hit { display: grid; gap: 2px; text-align: start; border: 0; background: var(--panel-2); border-radius: 12px; padding: 10px 12px; color: inherit; }
.search-hit small { color: var(--ink-3); }
.date-jump { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink-2); }
.date-jump input { border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; background: var(--panel-2); }
.profile-edit { display: grid; justify-items: center; gap: 4px; }
.profile-edit .field { width: 100%; }
.avatar-edit { position: relative; cursor: pointer; }
.avatar-cam { position: absolute; bottom: 4px; inset-inline-end: 4px; background: var(--brand); color: var(--brand-ink); border-radius: 50%; width: 36px; height: 36px; display: grid; place-items: center; border: 3px solid var(--panel); }
.send-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 50vh; overflow-y: auto; }
.send-media img, .send-media video { width: 100%; border-radius: 12px; max-height: 46vh; object-fit: contain; background: #000; }
.send-media-row { flex-wrap: nowrap; }

.toasts { position: fixed; z-index: 200; bottom: calc(90px + var(--safe-bottom)); inset-inline: 0; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { background: var(--head-bg); color: #f3ebdf; padding: 10px 18px; border-radius: 14px; font-size: .9rem; box-shadow: var(--shadow-lg); animation: up .2s; max-width: 480px; text-align: center; border: 1px solid rgba(207,169,104,.35); }
.toast.error { background: #c43d3d; color: #fff; border-color: transparent; }

.viewer { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.92); display: flex; flex-direction: column; animation: fade .15s; }
.viewer-bar { display: flex; align-items: center; gap: 10px; padding: calc(8px + var(--safe-top)) 10px 8px; color: #fff; }
.viewer-title { flex: 1; font-size: .9rem; }
.viewer-body { position: relative; flex: 1; display: grid; place-items: center; min-height: 0; padding: 10px; overflow: hidden; }
.viewer-body img, .viewer-body video { max-width: 100%; max-height: 100%; object-fit: contain; -webkit-touch-callout: none; }
.viewer-body img { pointer-events: none; }

.welcome { flex: 1; display: grid; place-content: center; justify-items: center; text-align: center; gap: 6px; padding: 30px; }
.welcome h2 { margin: 12px 0 0; font-size: 2rem; letter-spacing: .01em; position: relative; color: #f3ebdf; }
.welcome p { margin: 0; color: #e9dccb; position: relative; }
.welcome .muted { color: #f3ebdf; opacity: .9; }
.welcome p.muted { display: inline-flex; align-items: center; gap: 5px; }
.welcome-art { width: 124px; height: 124px; border-radius: 38px; background: url(../img/icon-192.png) center/cover; box-shadow: 0 24px 60px rgba(18,11,8,.45); border: 1px solid rgba(207,169,104,.5); position: relative; }

/* ============================================================ protection */
.wm-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; display: none; background-image: var(--wm); background-size: 300px 170px;
  opacity: var(--wm-opacity); animation: drift 90s linear infinite; mix-blend-mode: multiply; }
:root[data-theme="dark"] .wm-layer { mix-blend-mode: screen; }
.wm-on .wm-layer { display: block; }
@keyframes drift { from { background-position: 0 0; } to { background-position: 300px 340px; } }
.veiled .chat-pane .messages, .veiled .viewer-body, .veiled .chat-row-main { filter: blur(14px); transition: filter .15s; }
.no-copy .messages, .no-copy .chat-row, .no-copy .viewer { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.no-copy img { -webkit-user-drag: none; }
@media print { .no-print * { display: none !important; } .no-print::after { content: "الطباعة غير مسموحة"; display: block; } }
.printing .app { display: none; }

/* ============================================================ responsive */
@media (max-width: 1100px) { :root { --side-w: 340px; } }
@media (max-width: 819px) {
  .app { grid-template-columns: 1fr; }
  .sidebar, .main { grid-area: 1 / 1; }
  .main { transform: translateX(-100%); transition: transform .25s ease; z-index: 5; }
  [dir="rtl"] .main { transform: translateX(100%); }
  .app.has-chat .main { transform: none; }
  .app.has-chat .sidebar { visibility: hidden; transition: visibility 0s .25s; }
  .chat-head .back { display: inline-grid; }
  .messages { padding: 8px 10px 12px; }
  .msg { max-width: 86%; }
  .main .side-panel { width: 100%; }
  .welcome { display: none; }
}
@media (hover: none) { .chat-row:hover, .icon-btn:hover, .em:hover, .st:hover, .member-row:hover { background: none; }
  .side-head .icon-btn:hover, .chat-head .icon-btn:hover { background: rgba(243,235,223,.07); color: var(--head-ink); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ============================================================ diriyah cover pieces
   .cover: the espresso cover (login, splash, welcome, calls).
   .najdi-band (+ an inner <i>): the lattice band on the leading edge, three
   layers like the printed cover - gold bars and joints, cream motifs, pink motifs
   in the other diamonds - fading toward the content.
   .najdi-edge: the bead border at the very edge (outer rule, beads, inner rule). */
/* Auth pages put .cover on <body>: clipping there would disable page scrolling (band is fixed anyway). */
.auth-page.cover { overflow: visible; }
.cover { position: relative; isolation: isolate; color: var(--cream); overflow: hidden;
  background: radial-gradient(1100px 760px at 72% 18%, rgba(201,179,239,.10), transparent 62%), linear-gradient(150deg, var(--cover-a), var(--cover-b)); }
.najdi-band { --band-dir: to left; position: absolute; inset-block: 0; inset-inline-start: 30px; width: 46%; max-width: 620px; pointer-events: none; z-index: -1;
  -webkit-mask: linear-gradient(var(--band-dir), #000 55%, transparent); mask: linear-gradient(var(--band-dir), #000 55%, transparent); }
[dir="ltr"] .najdi-band { --band-dir: to right; }
.auth-page > .najdi-band { width: max(0px, calc(50% - 260px)); }
.welcome > .najdi-band { width: max(0px, calc(50% - 190px)); }
.call-screen > .najdi-band { width: max(0px, calc(50% - 200px)); }
.najdi-band::before, .najdi-band::after, .najdi-band > i { content: ""; position: absolute; inset: 0; }
.najdi-band::before { background-color: var(--band-lines); opacity: var(--band-lines-o);
  -webkit-mask: var(--najdi-lines) 0 0 / var(--band-tile) var(--band-tile) repeat; mask: var(--najdi-lines) 0 0 / var(--band-tile) var(--band-tile) repeat; }
.najdi-band::after { background-color: var(--band-a); opacity: var(--band-a-o);
  -webkit-mask: var(--najdi-a) 0 0 / var(--band-tile) var(--band-tile) repeat; mask: var(--najdi-a) 0 0 / var(--band-tile) var(--band-tile) repeat; }
.najdi-band > i { background-color: var(--band-b); opacity: var(--band-b-o);
  -webkit-mask: var(--najdi-b) 0 0 / var(--band-tile) var(--band-tile) repeat; mask: var(--najdi-b) 0 0 / var(--band-tile) var(--band-tile) repeat; }
.najdi-edge { position: absolute; inset-block: 0; inset-inline-start: 0; width: 30px; pointer-events: none; z-index: -1; background-color: var(--gold); opacity: .9;
  -webkit-mask: var(--najdi-border) 0 0 / 30px 16px repeat-y; mask: var(--najdi-border) 0 0 / 30px 16px repeat-y; }
[dir="rtl"] .najdi-edge { transform: scaleX(-1); }
.ornament { display: inline-flex; align-items: center; gap: 12px; margin: 10px 0 8px; position: relative; }
.ornament i { display: block; width: 70px; height: 14px; background-color: var(--gold);
  -webkit-mask: var(--sadu) center / contain no-repeat; mask: var(--sadu) center / contain no-repeat; }
.ornament::before, .ornament::after { content: ""; width: 34px; height: 1px; background: color-mix(in srgb, var(--gold) 80%, transparent); }
@media (max-width: 819px) {
  .cover .najdi-band, .auth-page > .najdi-band { --band-dir: to bottom; inset-inline: 0; inset-block: calc(30px + var(--safe-top)) auto; width: auto; max-width: none; height: 38%; --band-tile: 112px; }
  .call-screen > .najdi-band { inset-block-start: calc(84px + var(--safe-top)); height: 30%; }
  .call-screen.cover { padding-top: calc(40px + var(--safe-top)); }
  .cover .najdi-edge, .auth-page > .najdi-edge { inset-inline: 0; inset-block: var(--safe-top) auto; width: auto; height: 30px; transform: none;
    -webkit-mask: var(--najdi-border-h) 0 0 / 16px 30px repeat-x; mask: var(--najdi-border-h) 0 0 / 16px 30px repeat-x; }
  .auth-card { margin-top: min(18vh, 120px); }
}
::selection { background: color-mix(in srgb, var(--brand) 30%, transparent); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn:focus-visible, .icon-btn:focus-visible { outline-offset: 0; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--brand) 35%, transparent) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--brand) 35%, transparent); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
.chat-row.active { box-shadow: inset 3px 0 0 var(--brand); }
[dir="rtl"] .chat-row.active { box-shadow: inset -3px 0 0 var(--brand); }
.row-title { color: var(--ink); }
.day-sep span { border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent); color: var(--ink-2); }
.lock-note, .sys-line > span { border: 1px solid color-mix(in srgb, var(--gold-deep) 30%, transparent); }
.composer-wrap { border-top: 1px solid var(--line); }
.me-card, .panel-card { border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
.chip.on { color: var(--deep); background: var(--active); }
:root[data-theme="dark"] .chip.on { color: var(--brand); }

/* ============================================================ voice calls */
.call-screen { position: fixed; inset: 0; z-index: 120; display: flex; flex-direction: column; padding: calc(10px + var(--safe-top)) 16px calc(28px + var(--safe-bottom)); animation: fade .2s; overflow: hidden auto; }
.call-top { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 10px; padding-inline-start: 30px; }
@media (max-width: 819px) { .call-top { padding-inline-start: 0; } }
.call-secure { font-size: .78rem; color: #f3ebdf; display: inline-flex; align-items: center; gap: 5px; }
.call-body { flex: 1; display: grid; place-content: center; justify-items: center; gap: 6px; text-align: center; }
.call-body h2 { margin: 18px 0 0; font-size: 1.8rem; }
.call-status { margin: 0; color: #e9dccb; font-size: 1.05rem; font-variant-numeric: tabular-nums; min-height: 1.6em; }
.call-note { margin: 0; color: #f3ebdf; font-size: .85rem; display: inline-flex; gap: 6px; align-items: center; }
.call-hint { margin: 6px 0 0; color: #f3ebdf; font-size: .78rem; max-width: 300px; }
.call-avatar { position: relative; border-radius: 50%; box-shadow: 0 20px 60px rgba(0,0,0,.45); }
.call-avatar .avatar { border: 3px solid rgba(207,169,104,.6); }
.call-avatar.pulse::before, .call-avatar.pulse::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--gold) 80%, transparent); animation: ringwave 2s ease-out infinite; }
.call-avatar.pulse::after { animation-delay: 1s; }
@keyframes ringwave { from { transform: scale(.86); opacity: .9; } to { transform: scale(1.4); opacity: 0; } }
.call-actions { display: flex; justify-content: center; gap: 48px; padding-top: 16px; }
.call-btn { display: grid; justify-items: center; gap: 8px; border: 0; background: none; color: var(--cream); font-size: .85rem; }
.call-btn .ic { width: 70px; height: 70px; padding: 20px; box-sizing: border-box; border-radius: 50%; background: rgba(255,255,255,.13); color: var(--cream); transition: transform .12s, background .15s; }
.call-btn:active .ic { transform: scale(.94); }
.call-btn.danger .ic { background: #d9443f; color: #fff; }
.call-btn.accept .ic { background: #2f9a52; color: #fff; animation: nudge 1.4s ease-in-out infinite; }
.call-btn.on .ic { background: var(--cream); color: var(--deep); }
@keyframes nudge { 0%, 100% { transform: none; } 50% { transform: scale(1.08); } }
.call-pill { position: fixed; z-index: 95; top: calc(74px + var(--safe-top)); inset-inline: 0; margin: 0 auto; width: max-content; max-width: 92%; border: 0; border-radius: 999px; padding: 8px 16px; background: #24733e; color: #fff; font-weight: 600; display: inline-flex; gap: 8px; align-items: center; box-shadow: var(--shadow-lg); animation: up .2s; font-variant-numeric: tabular-nums; }
.chat-head .icon-btn.call { color: var(--head-ink); }
.sys-line.call > span { display: inline-flex; align-items: center; gap: 6px; background: var(--panel); color: var(--ink-2); font-weight: 500; }
.sys-line.call.bad > span { color: var(--danger); }
.sys-line.call small { color: var(--ink-3); font-size: .72rem; margin-inline-start: 4px; }
@media (prefers-reduced-motion: reduce) { .call-avatar.pulse::before, .call-avatar.pulse::after, .call-btn.accept .ic { animation: none; } }

/* iOS standalone with a translucent status bar: keep the status bar on the espresso bar colour on every
   screen (panels, modals, admin, auth), not on whatever happens to be painted there. */
body::before { content: ""; position: fixed; top: 0; inset-inline: 0; height: var(--safe-top); background: var(--head-bg); z-index: 1000; pointer-events: none; }
body.cover::before { background: var(--cover-a); }

/* ============================================================ brand: Tawasul
   The mark is one cell of the Najdi lattice turned into a speech bubble, carrying
   the Diriyah motif (tools/brand.py -> templates/_brand_mark.html, ui/brandmark.js).
   Colours: --bm-bubble / --bm-motif. ".play" runs the intro once: the bubble pops,
   the four arms grow out one after another, the flower blooms, the dots appear and
   the word slides in; ".alive" then keeps the flower turning and the bubble breathing. */
.brand { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.brand-mark { width: 44px; height: 44px; flex: none; overflow: visible; display: block; }
.brand-mark .bm-bubble { fill: var(--bm-bubble, var(--brand)); transform-origin: 50px 47px; }
.brand-mark .bm-motif { fill: var(--bm-motif, var(--cream)); }
.brand-word { font-weight: 700; letter-spacing: .03em; unicode-bidi: isolate; line-height: 1; }
.brand-lockup { display: grid; justify-items: center; gap: 8px; text-align: center; }
.brand-lockup .brand-mark { width: 104px; height: 104px; filter: drop-shadow(0 14px 26px rgba(18,11,8,.4)); }
.brand-lockup .brand-word { font-size: 2.4rem; color: #f3ebdf; }
.brand-lockup .brand-ar { font-size: 1rem; color: var(--lav-light); font-weight: 600; letter-spacing: 0; }
.brand-tagline { color: #e9dccb; font-size: .98rem; }
.cover .brand-mark { --bm-bubble: var(--cream); --bm-motif: var(--deep); }

.side-head .brand { flex: 1; min-width: 0; margin: 0 4px; overflow: visible; }
.side-head .brand-mark { width: 34px; height: 34px; --bm-bubble: var(--cream); --bm-motif: var(--deep); filter: drop-shadow(0 2px 4px rgba(8,5,3,.4)); }
.side-head .brand-word { font-size: 1.3rem; color: var(--head-ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; }
/* 34px on a 1x screen: the flower and dots blur into a blob, the bubble and four arms stay crisp */
@media (max-resolution: 1.4dppx), (-webkit-max-device-pixel-ratio: 1.4) { .side-head .bm-flower, .side-head .bm-dots { display: none; } }

.play .bm-bubble { animation: bm-pop .6s cubic-bezier(.2,1.35,.4,1) both; }
.play .bm-arm { animation: bm-grow .5s .28s cubic-bezier(.2,1.5,.45,1) both; }
.play .bm-arm.bm-i1 { animation-delay: .37s; } .play .bm-arm.bm-i2 { animation-delay: .46s; } .play .bm-arm.bm-i3 { animation-delay: .55s; }
.play .bm-flower { animation: bm-bloom .7s .22s cubic-bezier(.2,1.2,.4,1) both; }
.play .bm-dot { animation: bm-dot .35s .7s ease-out both; }
.play .bm-dot.bm-i1 { animation-delay: .77s; } .play .bm-dot.bm-i2 { animation-delay: .84s; } .play .bm-dot.bm-i3 { animation-delay: .91s; }
.play .brand-word { animation: bm-word .7s .55s cubic-bezier(.2,.9,.3,1) backwards; } /* no clip left behind */
.play .brand-ar, .brand-tagline.play, .ornament.play { animation: bm-fade .6s .95s ease-out both; }
.alive .bm-flower { animation: bm-bloom .7s .22s cubic-bezier(.2,1.2,.4,1) both, bm-turn 18s 1.2s linear infinite; }
.alive .bm-bubble { animation: bm-pop .6s cubic-bezier(.2,1.35,.4,1) both, bm-breathe 3.6s 1.4s ease-in-out infinite; }
@keyframes bm-pop { 0% { transform: scale(.35) rotate(-14deg); opacity: 0; } 70% { transform: scale(1.05) rotate(2deg); opacity: 1; } 100% { transform: none; } }
@keyframes bm-grow { from { transform: scale(0); } }
@keyframes bm-bloom { from { transform: rotate(-120deg) scale(0); } }
@keyframes bm-dot { from { transform: scale(0); opacity: 0; } }
@keyframes bm-turn { to { transform: rotate(360deg); } }
@keyframes bm-breathe { 50% { transform: scale(1.035); } }
@keyframes bm-word { from { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateY(6px); } to { clip-path: inset(0 0 0 0); opacity: 1; transform: none; } }
@keyframes bm-fade { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .play .bm-bubble, .play .bm-arm, .play .bm-flower, .play .bm-dot, .play .brand-word, .play .brand-ar, .brand-tagline.play, .ornament.play,
  .alive .bm-flower, .alive .bm-bubble, .spinner { animation: none !important; }
}
.splash .brand-lockup { position: relative; z-index: 1; }
/* The server-rendered splash (app/index.html) sits over the app until it has booted, then fades out. */
#splash { position: fixed; inset: 0; z-index: 90; }
@media (prefers-reduced-motion: no-preference) { #splash { transition: opacity .25s ease-out; } }
#splash.gone { opacity: 0; pointer-events: none; }
.auth-card .brand-lockup { margin-bottom: 4px; }
.welcome .brand-lockup .brand-mark { width: 132px; height: 132px; }
/* short phones: keep the sign-in button above the fold */
@media (max-height: 700px) {
  .auth-card .brand-lockup .brand-mark { width: 72px; height: 72px; }
  .auth-card .brand-lockup .brand-word { font-size: 1.9rem; }
  .auth-card .ornament { margin: 4px 0; }
  .auth-card .auth-note { display: none; }
}
@media (max-width: 819px) and (max-height: 700px) { .auth-card { margin-top: min(6vh, 36px); } }

/* review fixes: quotes in my bubbles, dark pills and offline bar, desktop call minimise button */
.msg.out .quote b { filter: brightness(.8) saturate(1.15); }
:root[data-theme="dark"] .msg.out .quote { background: color-mix(in srgb, #000 22%, transparent); }
:root[data-theme="dark"] .msg.out .quote b { filter: brightness(1.25); }
:root[data-theme="dark"] .lock-note, :root[data-theme="dark"] .sys-line > span, :root[data-theme="dark"] .day-sep span { border-color: color-mix(in srgb, var(--brand) 25%, transparent); }
:root[data-theme="dark"] .conn-bar { background: #3a2c24; color: var(--ink); }
.call-top .icon-btn { background: rgba(243,235,223,.08); }

/* ---- groups made by the people: picker, chips, member sheet ---- */
.people-pick { display: grid; gap: 8px; }
.people-pick .pick-list { max-height: none; }
.modal .people-pick .pick-list { max-height: 45vh; }
.pick-text { flex: 1; display: grid; min-width: 0; }
.pick-text small { color: var(--ink-3); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sel-chip { display: inline-flex; align-items: center; gap: 6px; border: 0; background: var(--panel-2); color: var(--ink); border-radius: 999px; padding: 3px 10px 3px 4px; font-size: .84rem; }
.panel-foot { padding: 10px 12px calc(10px + var(--safe-bottom)); border-top: 1px solid var(--line); background: var(--panel); }
.panel-head .end { margin-inline-start: auto; }
.card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.round-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--brand); color: var(--brand-ink); flex: none; }

/* ---- tones in settings ---- */
.sub-title { font-size: .82rem; color: var(--ink-2); margin-top: 6px; font-weight: 600; }
.tone-row { display: flex; align-items: center; gap: 10px; padding: 4px 6px; border-radius: 10px; cursor: pointer; }
.tone-row:hover { background: var(--hover); }
.tone-row.on { background: var(--active); }
.tone-row > span { flex: 1; }
.tone-dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line); flex: none; }
.tone-row.on .tone-dot { border-color: var(--brand); background: radial-gradient(circle, var(--brand) 45%, transparent 52%); }

/* ---- sign-up ---- */
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.auth-switch { margin: 16px 0 6px; color: #f3ebdf; }
.auth-switch a { color: var(--gold); font-weight: 600; }

/* ---- headings in the website's typefaces ---- */
.brand-word { font-family: "Marcellus", "Reem Kufi", "Plex Arabic", serif; font-weight: 400; letter-spacing: .02em; }
.brand-ar, .auth-card h1:not(.brand-word), .profile-top h2, .panel-head b, .modal-head h3, .welcome h2:not(.brand-word) { font-family: "Reem Kufi", "Plex Arabic", sans-serif; }