/* SHABAB METRIC PRO 1.5.3 — NEXA AI chat (top bar button, side panel / phone full screen, page #/nexa, More card, Search line). Theme tokens only. */
.top .nxbtn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; border: 0; background: var(--btn); color: var(--onAccent); font-weight: 700; font-size: 12px; letter-spacing: .08em; cursor: pointer; flex: none; box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent); }
.top .nxbtn svg { width: 16px; height: 16px; }
.top .nxbtn:hover { filter: brightness(1.08); }
.top .nxbtn:focus-visible { outline: 2px solid var(--topInk); outline-offset: 2px; }
.top .nxbtn[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--topInk); }

.nxstar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--btn); color: var(--onAccent); flex: none; }
.nxstar svg { width: 16px; height: 16px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* panel: PC = a side panel (the page stays usable), phone = full screen */
.nxpanel { position: fixed; top: 0; bottom: 0; inset-inline-end: 0; z-index: 60; width: min(440px, 100vw); display: flex; flex-direction: column; background: var(--card2); color: var(--ink); border-inline-start: 1px solid var(--line); box-shadow: -12px 0 40px rgba(0, 0, 0, .18); animation: nxin .22s ease; }
html[dir=rtl] .nxpanel, .nxpanel[dir=rtl] { box-shadow: 12px 0 40px rgba(0, 0, 0, .18); }
@keyframes nxin { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.nxpanel[dir=rtl] { animation-name: nxinr; } @keyframes nxinr { from { transform: translateX(-24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .nxpanel { animation: none; } }
.nxhd { display: flex; align-items: center; gap: 10px; padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); background: var(--hero); color: var(--heroInk); }
.nxhd b { display: block; letter-spacing: .12em; font-size: 15px; } .nxhd small { display: block; color: var(--heroMute); font-size: 11px; }
.nxhd .nxstar { background: var(--heroChip); color: var(--heroAccent); width: 34px; height: 34px; } .nxhd .nxstar svg { width: 19px; height: 19px; }
.nxhd .sp, .nxro .sp { flex: 1; }
.nxhd .btn.g { color: var(--heroInk); border-color: color-mix(in srgb, var(--heroInk) 35%, transparent); background: transparent; }
.nxhd .nxx { min-width: 34px; font-size: 15px; line-height: 1; }

.nxchat { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.nxlist { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 12px; overscroll-behavior: contain; }
.nxm { max-width: 100%; }
.nxm.me { align-self: flex-end; max-width: 85%; background: var(--accent); color: var(--onAccent); padding: 9px 13px; border-radius: 16px 16px 4px 16px; font-weight: 500; overflow-wrap: anywhere; }
.nxchat[dir=rtl] .nxm.me { border-radius: 16px 16px 16px 4px; }
.nxm.nx { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: start; }
.nxb { background: var(--soft); border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; padding: 10px 12px; min-width: 0; }
.nxchat[dir=rtl] .nxb { border-radius: 16px 4px 16px 16px; }
.nxm.nx.closed .nxb { border-color: color-mix(in srgb, var(--amber) 45%, var(--line)); }
.nxp { display: inline-block; font-size: 11px; color: var(--accentInk); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 999px; padding: 1px 8px; margin-bottom: 6px; }
.nxa { margin: 0; line-height: 1.55; overflow-wrap: anywhere; }
.nxt { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.nxt td { padding: 6px 4px; border-top: 1px solid var(--line2); vertical-align: top; }
.nxt td.k { overflow-wrap: anywhere; } .nxt td.k small { display: block; color: var(--mute); font-size: 11.5px; }
.nxt td.v { text-align: end; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.nxl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nxl .btn svg { width: 14px; height: 14px; }
.nxs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.nxs .pill { font-size: 12.5px; padding: 5px 11px; cursor: pointer; text-align: start; }
.nxs .pill:hover { border-color: var(--accent); color: var(--accentInk); }
.nxm.wait .nxb, .nxm.wait > .dots { display: inline-flex; }
.dots { display: inline-flex; gap: 4px; align-items: center; padding: 12px 14px; background: var(--soft); border: 1px solid var(--line); border-radius: 4px 16px 16px 16px; width: max-content; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); opacity: .35; animation: nxdot 1s infinite; } .dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes nxdot { 50% { opacity: 1; transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .dots i { animation: none; opacity: .7; } }

.nxft { border-top: 1px solid var(--line); padding: 10px 12px; padding-bottom: max(10px, env(safe-area-inset-bottom)); background: var(--card2); }
.nxf { display: flex; gap: 8px; }
.nxf .in { flex: 1; min-width: 0; }
.nxf .btn { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.nxf .btn svg { width: 16px; height: 16px; }
.nxro { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; color: var(--mute); }
.nxro svg { width: 13px; height: 13px; flex: none; }

/* the page #/nexa */
.nxpage .dhead h2 { display: flex; align-items: center; gap: 8px; } .nxpage .dhead h2 small { color: var(--mute); font-weight: 500; font-size: 13px; }
.nxchat.page { background: var(--card2); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); height: calc(100vh - 200px); height: calc(100dvh - 200px); min-height: 420px; overflow: hidden; }
/* the More page card (phone) */
.nxmore { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); margin-bottom: 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line)); }
.nxmore .nxstar { width: 40px; height: 40px; } .nxmore .nxstar svg { width: 22px; height: 22px; }
.nxmore b { display: block; } .nxmore small { display: block; color: var(--mute); font-size: 12px; } .nxmore > div { flex: 1; min-width: 0; }
/* Search (Ctrl+K) line */
.sit.nxsit b { display: inline-flex; align-items: center; gap: 6px; } .sit.nxsit .nxstar { width: 22px; height: 22px; } .sit.nxsit .nxstar svg { width: 13px; height: 13px; }

@media (max-width: 820px) {
  .nxpanel { width: 100vw; border-inline-start: 0; box-shadow: none; }
}
@media (max-width: 640px) {
  .nxchat.page { height: calc(100dvh - 240px); min-height: 340px; border-radius: 14px; }
  .nxlist { padding: 12px 10px; }
  .nxm.me { max-width: 92%; }
}
/* phone header: NEXA = the icon only (no side scroll at 360 - 420 px) */
@media (max-width: 440px) {
  .top .nxbtn { width: 32px; height: 32px; padding: 0; justify-content: center; }
  .top .nxbtn span { display: none; }
}
@media (max-width: 440px) { .top:has(.nxbtn) { gap: 5px; padding-inline: 8px; } .top:has(.nxbtn) .brand { gap: 5px; } .top:has(.nxbtn) .brand b { font-size: 12px; } .top:has(.nxbtn) .sbtn, .top .nxbtn { width: 30px; height: 30px; } }