/* =========================================================================
   שיחה — VOIP + Chat  ·  clean WhatsApp-style UI
   ========================================================================= */

:root {
  --bg:        #ffffff;   /* elevated surface: sidebar, chat panel, cards */
  --panel:     #f0f2f5;   /* headers, pills, incoming bubbles */
  --panel-2:   #f2f4f7;   /* page ground behind cards */
  --chat-bg:   #efeae2;
  --input:     #ffffff;   /* form fields */
  --text:      #111b21;
  --text-dim:  #667781;
  --border:    #d7dde0;
  --hover:     #f5f6f6;
  --active:    #eef0f2;
  --accent:    #00a884;
  --accent-ink:#ffffff;
  --bubble-out:#d9fdd3;
  --bubble-in: #ffffff;
  --danger:    #ea4335;
  --unread:    #25d366;
  --link:      #0a6ea8;
  --shadow:    0 2px 10px rgba(11,20,26,.10);
  --shadow-sm: 0 1px 2px rgba(11,20,26,.10);
  --header-h:  60px;
}

:root[data-theme="dark"] {
  --bg:        #111b21;
  --panel:     #202c33;
  --panel-2:   #0b141a;
  --chat-bg:   #0b141a;
  --input:     #2a3942;
  --text:      #e9edef;
  --text-dim:  #9fb0bb;
  --border:    #2f3d47;
  --hover:     #202c33;
  --active:    #2a3942;
  --accent:    #00a884;
  --bubble-out:#005c4b;
  --bubble-in: #202c33;
  --danger:    #f15c6d;
  --link:      #53bdeb;
  --shadow:    0 6px 20px rgba(0,0,0,.5);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#111b21; --panel:#202c33; --panel-2:#0b141a; --chat-bg:#0b141a;
    --input:#2a3942; --text:#e9edef; --text-dim:#9fb0bb; --border:#2f3d47;
    --hover:#202c33; --active:#2a3942; --bubble-out:#005c4b; --bubble-in:#202c33;
    --danger:#f15c6d; --link:#53bdeb; --shadow:0 6px 20px rgba(0,0,0,.5); --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The [hidden] attribute must always win over class-level `display` rules
   (.main, .call-overlay, .call-controls … all set display, which otherwise
   overrides the UA [hidden] style and leaves "hidden" elements visible). */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans Hebrew", Arial, sans-serif;
  background: var(--panel-2);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  overflow-x: hidden; /* a stray overflow should clip, never create a page-wide h-scroll */
}

button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
input  { font: inherit; }

svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor;
      stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.brand-logo svg, .chat-empty svg, .ic-phone { fill: currentColor; stroke: none; }

/* --app-height is kept in sync with window.visualViewport by app.js so the
   layout shrinks to the space actually left above the on-screen keyboard,
   instead of the keyboard covering the composer (100dvh alone isn't
   reliable for this on every Android browser). */
#app { height: 100dvh; height: var(--app-height, 100dvh); }

/* ---------- Avatars ---------- */
.avatar {
  --sz: 40px;
  width: var(--sz); height: var(--sz);
  min-width: var(--sz);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 600; text-transform: uppercase;
  font-size: calc(var(--sz) * .4);
  user-select: none;
  background: #64748b;
}
.avatar.xl { --sz: 116px; font-size: 44px; box-shadow: var(--shadow); }
.avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* =========================================================================
   Login
   ========================================================================= */
.login {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: 24px;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(0,168,132,.16), transparent 60%),
    var(--panel-2);
}
.login-card {
  width: 100%; max-width: 380px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 28px 24px;
  box-shadow: var(--shadow);
  text-align: center;
}
.brand-logo {
  width: 64px; height: 64px; margin: 0 auto 14px;
  color: var(--accent);
}
.brand h1 { font-size: 26px; letter-spacing: .5px; }
.brand-sub { color: var(--text-dim); font-size: 13px; margin-top: 4px; }

#loginForm { margin-top: 26px; display: grid; gap: 12px; }
#loginForm input {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--input); color: var(--text);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
#loginForm input::placeholder { color: var(--text-dim); }
#loginForm input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0,168,132,.2); }
#loginForm button {
  padding: 13px 16px; border-radius: 12px;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 600; transition: filter .15s;
}
#loginForm button:hover { filter: brightness(1.05); }
#loginForm button:disabled { opacity: .6; cursor: default; }
.login-error { color: var(--danger); font-size: 13px; line-height: 1.5; }
.login-foot { margin-top: 18px; font-size: 12px; color: var(--text-dim); }
.login-manual { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.login-manual:hover { text-decoration: underline; }

/* =========================================================================
   Main layout
   ========================================================================= */
.main { display: flex; height: 100dvh; height: var(--app-height, 100dvh); overflow: hidden;
        max-width: 1600px; margin-inline: auto;
        background: var(--bg); position: relative; }

.net-banner {
  position: absolute; inset-inline: 0; top: 0; z-index: 60;
  background: #b23c17; color: #fff; text-align: center;
  font-size: 13px; padding: 6px;
}

/* ---------- Sidebar ---------- */
.sidebar {
  width: 34%; min-width: 300px; max-width: 460px;
  display: flex; flex-direction: column;
  border-inline-end: 1px solid var(--border);
  background: var(--bg);
}
.sidebar-head {
  padding: 10px 16px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: var(--panel);
}
.app-brand { display: flex; align-items: baseline; gap: 8px; width: 100%; margin-bottom: 6px; }
.app-brand-name { font-weight: 800; font-size: 15px; color: var(--accent); letter-spacing: .2px; }
.app-brand-sub { font-size: 11px; color: var(--text-dim); }
.sidebar-actions-row { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.sidebar-actions { display: flex; gap: 4px; }
/* Your own identity — the point is that it reads as YOURS, not one more
   row in a list, so it gets real size and the center of the header. */
.me { display: flex; flex-direction: row; align-items: center; gap: 10px;
      min-width: 0; max-width: 100%; cursor: pointer; padding-top: 2px; }
.me .avatar { --sz: 50px; font-size: 19px; flex-shrink: 0; }
.me-info { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.me-name { font-weight: 700; font-size: 17px; white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.me-status { font-size: 12px; color: var(--unread); }

.icon-btn {
  width: 40px; height: 40px; min-width: 40px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--text-dim);
  transition: background .15s, color .15s;
}
.icon-btn svg { width: 22px; height: 22px; }
.icon-btn:hover { background: var(--hover); color: var(--text); }
.icon-btn:active { background: var(--active); }

.search {
  padding: 8px 12px; background: var(--bg);
  position: relative;
}
.search-ic {
  position: absolute; inset-inline-start: 24px; top: 50%;
  width: 16px; height: 16px; transform: translateY(-50%);
  color: var(--text-dim);
}
.search input {
  width: 100%; padding: 9px 14px 9px 40px;
  border: 0; border-radius: 10px;
  background: var(--input); color: var(--text);
  outline: none;
}
.search input::placeholder { color: var(--text-dim); }
[dir="rtl"] .search input { padding: 9px 40px 9px 14px; }

/* ---------- Online-now strip ---------- */
.online-bar {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  padding: 10px 0 12px;
}
.online-bar-head {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px 8px;
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: .4px;
}
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--unread);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .25);
}
.online-count {
  margin-inline-start: auto;
  background: var(--panel); color: var(--text-dim);
  border-radius: 9px; min-width: 20px; height: 18px; padding: 0 6px;
  display: grid; place-items: center; font-size: 11px;
}
.online-list {
  list-style: none; display: flex; flex-direction: column;
  max-height: 40vh; overflow-y: auto;
}
.online-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 16px; cursor: pointer;
  transition: background .12s;
}
.online-row:hover { background: var(--hover); }
.online-row .avatar {
  --sz: 42px;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--unread);
}
.online-row .or-name {
  flex: 1; min-width: 0; font-weight: 600; font-size: 14.5px;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.or-call {
  width: 38px; height: 38px; min-width: 38px;
  border-radius: 50%; display: grid; place-items: center;
  color: var(--accent);
  background: rgba(0, 168, 132, .12);
  transition: background .15s, transform .1s;
}
.or-call:hover { background: var(--accent); color: #fff; }
.or-call:active { transform: scale(.92); }
.or-call svg { width: 19px; height: 19px; }
.or-call .ic-fill { fill: currentColor; stroke: none; }
.or-kick {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%; display: grid; place-items: center;
  color: var(--danger);
  background: rgba(234, 67, 53, .1);
  transition: background .15s, transform .1s;
}
.or-kick:hover { background: var(--danger); color: #fff; }
.or-kick:active { transform: scale(.92); }
.or-kick svg { width: 15px; height: 15px; }
.or-edit {
  width: 32px; height: 32px; min-width: 32px;
  border-radius: 50%; display: grid; place-items: center;
  color: var(--text-dim);
  background: var(--hover);
  transition: background .15s, transform .1s;
}
.or-edit:hover { background: var(--accent); color: #fff; }
.or-edit:active { transform: scale(.92); }
.or-edit svg { width: 15px; height: 15px; }
.online-empty { padding: 6px 16px 2px; font-size: 12.5px; color: var(--text-dim); }

/* ---------- Conference selection ---------- */
.conf-toggle {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-dim);
  transition: background .15s, color .15s;
}
.conf-toggle svg { width: 17px; height: 17px; }
.conf-toggle:hover { background: var(--hover); color: var(--text); }
.conf-toggle.active { background: var(--accent); color: #fff; }
.conference-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 16px 10px; font-size: 13px; color: var(--text-dim);
}
.conference-bar #conferenceCount { flex: 1; }
.conf-action {
  padding: 7px 14px; border-radius: 16px;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
  transition: opacity .15s;
}
.conf-action:disabled { opacity: .45; cursor: default; }
.conf-copy { background: var(--panel); color: var(--text); }
.conf-cancel { padding: 7px 10px; color: var(--text-dim); font-size: 13px; }
.online-row.selectable { cursor: pointer; }
.select-check {
  width: 22px; height: 22px; min-width: 22px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--bg);
  display: none; place-items: center; color: #fff;
  transition: background .12s, border-color .12s;
}
.select-check svg { width: 13px; height: 13px; }
.online-bar.selecting .select-check { display: grid; }
.online-bar.selecting .or-call { display: none; }
.online-row.checked .select-check { background: var(--accent); border-color: var(--accent); }

.chat-list { list-style: none; overflow-y: auto; flex: 1; }
.chat-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .12s;
}
.chat-item:hover { background: var(--hover); }
.chat-item.selected { background: var(--active); }
.chat-item .avatar { --sz: 46px; }
.ci-body { flex: 1; min-width: 0; }
.ci-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ci-name { font-weight: 600; font-size: 15px; white-space: nowrap;
           overflow: hidden; text-overflow: ellipsis; }
.ci-time { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.ci-bottom { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 2px; }
.ci-preview { font-size: 13px; color: var(--text-dim); white-space: nowrap;
              overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ci-delete {
  width: 32px; height: 32px; min-width: 32px; flex-shrink: 0; border-radius: 50%;
  display: grid; place-items: center; color: var(--danger);
  background: rgba(234, 67, 53, .1); opacity: 0; transition: opacity .12s, background .15s;
}
.ci-delete svg { width: 15px; height: 15px; }
.ci-delete:hover { background: var(--danger); color: #fff; }
.chat-item:hover .ci-delete { opacity: 1; }
@media (hover: none) { .ci-delete { opacity: .7; } }
.ci-badge {
  background: var(--unread); color: #04101a;
  font-size: 11px; font-weight: 700;
  min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 10px; display: grid; place-items: center;
}
/* how many of MY sent messages this person hasn't read yet — visually
   distinct from .ci-badge (which counts THEIR unread messages to me) */
.ci-sent-badge {
  background: transparent; color: var(--text-dim);
  border: 1.5px solid var(--border);
  font-size: 10.5px; font-weight: 700;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; display: grid; place-items: center;
}
.presence-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--unread); flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--bg);
}
.presence-dot.off { background: #9aa6ac; }

.sidebar-hint { padding: 24px; text-align: center; color: var(--text-dim);
                font-size: 13px; line-height: 1.7; }

/* ---------- Chat panel ---------- */
.chat { flex: 1; display: flex; flex-direction: column; min-width: 0;
        background: var(--chat-bg); position: relative; }

.chat-empty {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  color: var(--text-dim);
}
.chat-empty svg { width: 72px; height: 72px; opacity: .35; }

/* "New room" — video-conference room you create and share a link to,
   whether or not anyone's picked from the list yet. Two entry points
   (header + empty-chat screen) share this one style. */
.new-room-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 20px;
  background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600;
  transition: filter .15s, transform .1s;
}
.new-room-btn svg { width: 17px; height: 17px; }
.new-room-btn:hover { filter: brightness(1.06); }
.new-room-btn:active { transform: scale(.97); }
#newRoomBtn { padding: 8px 14px; font-size: 13px; }
#newRoomBtn svg { width: 16px; height: 16px; }

.chat-open { display: flex; flex-direction: column; height: 100%; }

.chat-head {
  height: var(--header-h); min-height: var(--header-h);
  padding-inline: 10px 8px;
  display: flex; align-items: center; gap: 10px;
  background: var(--panel);
}
.chat-head .avatar { --sz: 40px; }
.chat-head .back { display: none; }
.peer-meta { flex: 1; min-width: 0; }
.peer-name { display: block; font-weight: 600; font-size: 15px;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.peer-status { display: block; font-size: 12px; color: var(--text-dim); }
.peer-status.live { color: var(--accent); }
.chat-head-actions { display: flex; gap: 2px; }

.messages {
  flex: 1; overflow-y: auto;
  padding: 14px clamp(12px, 6vw, 90px);
  display: flex; flex-direction: column; gap: 3px;
  background-color: var(--chat-bg);
  /* Sketchy doodle wallpaper — two tiny vector tiles (~6KB each) so it
     stays light: chat-bg.svg (pale gray on the light chat background) and
     chat-bg-dark.svg (faint white on the dark one), same art either way. */
  background-image: url('chat-bg.svg');
  background-repeat: repeat;
  background-size: 260px 260px;
}
:root[data-theme="dark"] .messages { background-image: url('chat-bg-dark.svg'); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .messages { background-image: url('chat-bg-dark.svg'); }
}

.day-sep { align-self: center; margin: 10px 0;
           background: var(--panel); color: var(--text-dim);
           font-size: 12px; padding: 5px 12px; border-radius: 8px;
           box-shadow: var(--shadow-sm); }

/* No width/display sizing trick at all — a flex item (.messages is
   display:flex; flex-direction:column) whose align-self ISN'T stretch is
   sized to its max-content size by the flex algorithm itself, per spec.
   That's a DIFFERENT computation than the width:fit-content/display:table/
   inline-block tricks tried earlier, all of which could size a bubble
   wrong with mixed Hebrew/Latin (bidi) text. Plain flex auto-sizing is
   what the working chat-bg preview used, and it doesn't have that bug. */
.bubble {
  max-width: min(75%, 560px);
  padding: 8px 11px 9px;
  border-radius: 10px;
  font-size: var(--msg-font, 16.5px); line-height: 1.42;
  box-shadow: var(--shadow-sm);
  position: relative;
  word-wrap: break-word; overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.bubble.in  { align-self: flex-start; background: var(--bubble-in); border-start-start-radius: 3px; }
.bubble.out { align-self: flex-end; background: var(--bubble-out); border-start-end-radius: 3px; }
/* A handful of naked emoji get to be the whole message, not a caption —
   no bubble, no padding, just big. The higher specificity here (three
   classes) is what beats .bubble.in/.out's background without !important. */
.bubble.in.big-emoji, .bubble.out.big-emoji {
  background: transparent; box-shadow: none;
  padding: 2px 4px 4px; font-size: 46px; line-height: 1.2;
  border-start-start-radius: 10px; border-start-end-radius: 10px;
}
.bubble.big-emoji .meta { display: block; margin-inline-start: 0; }
.bubble .meta {
  /* Genuinely plain inline content — not inline-flex/inline-block. Those
     are "atomic" inline-level boxes: mixing one into a line next to normal
     text, with its own line-height/vertical-align, makes the browser grow
     the whole LINE BOX to fit both pieces, which showed up as extra blank
     space above short single-line messages, pushing the text toward the
     bottom of the bubble instead of the bubble hugging it. Plain inline
     content has no box of its own to inflate the line with. */
  display: inline; white-space: nowrap;
  margin-inline-start: 10px;
  font-size: 10.5px; color: var(--text-dim);
}
.bubble .tick { width: 14px; height: 11px; vertical-align: -2px; margin-inline-start: 3px; }
.bubble .tick.read { color: #53bdeb; }

/* Reply-to button: a small affordance on every bubble. Always visible on
   touch (no hover there); fades in on hover for mouse users. */
.bubble .reply-btn {
  position: absolute; bottom: 2px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-dim);
  background: var(--bg); box-shadow: var(--shadow-sm);
  opacity: 0; transition: opacity .12s;
}
.bubble.in .reply-btn  { inset-inline-end: -32px; }
.bubble.out .reply-btn { inset-inline-start: -32px; }
.bubble .reply-btn svg { width: 14px; height: 14px; }
@media (hover: hover) {
  .bubble:hover .reply-btn { opacity: 1; }
}
@media (hover: none) {
  .bubble .reply-btn { opacity: .8; }
}

/* Quoted-message block shown at the top of a reply bubble. */
.bubble .quote-block {
  display: block; margin-bottom: 5px; padding: 4px 8px;
  border-inline-start: 3px solid var(--accent);
  background: rgba(0,0,0,.05); border-radius: 6px;
  font-size: 12.5px; line-height: 1.35; cursor: pointer;
}
:root[data-theme="dark"] .bubble .quote-block { background: rgba(255,255,255,.06); }
.bubble .quote-block .quote-name { display: block; font-weight: 700; color: var(--accent); }
.bubble .quote-block .quote-text { display: block; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bubble.flash { animation: bubble-flash 1.1s ease; }
@keyframes bubble-flash {
  0%, 100% { box-shadow: var(--shadow-sm); }
  30% { box-shadow: 0 0 0 3px var(--accent); }
}

/* File / voice-note bubbles */
.msg-image { display: block; max-width: 260px; border-radius: 8px; margin-bottom: 2px; cursor: pointer; }
.msg-file {
  display: flex; align-items: center; gap: 10px;
  min-width: 180px; padding: 4px 2px;
}
.msg-file .file-ic {
  width: 38px; height: 38px; min-width: 38px; border-radius: 50%;
  background: var(--panel); display: grid; place-items: center; color: var(--accent);
}
.msg-file .file-ic svg { width: 18px; height: 18px; }
.msg-file .file-meta { min-width: 0; }
.msg-file .file-name { font-size: 13.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; max-width: 220px; }
.msg-file .file-size { font-size: 11.5px; color: var(--text-dim); }
.msg-voice { display: flex; align-items: center; min-width: 220px; }
.msg-voice audio { width: 220px; height: 36px; }

.call-note {
  align-self: center; margin: 8px 0;
  background: var(--panel); color: var(--text-dim);
  font-size: 12.5px; padding: 6px 12px; border-radius: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  box-shadow: var(--shadow-sm);
}
.call-note svg { width: 14px; height: 14px; }
.call-note.missed { color: var(--danger); }

/* ---------- Reply preview (above composer) ---------- */
.reply-preview {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--panel);
  border-top: 1px solid var(--border);
}
.reply-preview-bar { width: 3px; align-self: stretch; background: var(--accent); border-radius: 2px; }
.reply-preview-body { flex: 1; min-width: 0; }
.reply-preview-name { display: block; font-size: 12.5px; font-weight: 700; color: var(--accent); }
.reply-preview-text { display: block; font-size: 12.5px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Voice recorder bar (replaces the composer while recording) ---------- */
.recorder {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: var(--panel);
}
.rec-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--danger);
  animation: rec-pulse 1s ease-in-out infinite;
}
@keyframes rec-pulse { 50% { opacity: .3; } }
.rec-time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }
.rec-hint { color: var(--text-dim); font-size: 13px; flex: 1; }
.recorder .send { width: 40px; height: 40px; }
.recorder .send svg { width: 18px; height: 18px; }

/* ---------- Composer ---------- */
.composer {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 8px 12px;
  background: var(--panel);
  position: relative; /* anchors the quick-replies list */
}
.composer textarea {
  flex: 1; min-width: 0; /* a text field won't actually shrink below its content
    size in a flex row without this — that's what was pushing the send button
    off-screen on narrow phones once attach/mic were added */
  padding: 11px 16px;
  border: 0; border-radius: 20px;
  background: var(--input); color: var(--text);
  outline: none;
  resize: none; font: inherit; line-height: 1.35;
  max-height: 120px; overflow-y: auto;
}
.composer textarea::placeholder { color: var(--text-dim); }
/* icon buttons sit on the textarea's first line, not stretched to its height */
.composer .icon-btn, .composer .send, .composer .emoji-wrap, .composer .quick-wrap { margin-bottom: 2px; }
.send {
  width: 44px; height: 44px; min-width: 44px; flex-shrink: 0;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: #fff;
  transition: transform .1s, filter .15s;
}
.send svg { width: 20px; height: 20px; margin-inline-start: 2px; }
.send:hover { filter: brightness(1.05); }
.send:active { transform: scale(.94); }

/* ---------- Emoji picker ---------- */
.emoji-wrap { position: relative; }
#emojiBtn.active { background: var(--active); color: var(--text); }
.emoji-picker {
  position: absolute; bottom: calc(100% + 10px); inset-inline-start: 0;
  width: min(320px, 92vw); max-height: 330px; overflow-y: auto;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow);
  padding: 8px 10px 10px; z-index: 10;
}
.ep-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.ep-tabs button {
  flex: 1; padding: 7px 4px; border-radius: 9px; font-size: 13px; font-weight: 600;
  background: var(--panel); color: var(--text-dim);
}
.ep-tabs button.on { background: var(--accent); color: #fff; }
.ep-emoji { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.ep-emoji button {
  font-size: 21px; line-height: 1; padding: 6px 0;
  border-radius: 8px; text-align: center;
}
.ep-emoji button:hover { background: var(--hover); }

/* sticker tray (second tab of the emoji picker) */
.sp-packs { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
.sp-packs [data-sp-pack] {
  flex: 1; padding: 6px 4px; border-radius: 16px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); color: var(--text-dim); white-space: nowrap;
}
.sp-packs [data-sp-pack].on { border-color: var(--accent); color: var(--accent); background: rgba(0,168,132,.1); }
.sp-edit { width: 30px; height: 30px; min-width: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--text-dim); }
.sp-edit svg { width: 16px; height: 16px; }
.sp-edit.on { background: var(--danger); color: #fff; }
.sp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sp-item { position: relative; aspect-ratio: 1; border-radius: 10px; padding: 3px; }
.sp-item:hover { background: var(--hover); }
.sp-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sp-del {
  display: none; position: absolute; top: 0; inset-inline-end: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--danger); color: #fff; font-size: 12px; line-height: 22px; text-align: center;
}
.sp-grid.editing .sp-del { display: block; }
.sp-empty { padding: 14px 8px; text-align: center; font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.sp-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.sp-actions button {
  padding: 8px 10px; border-radius: 10px; background: var(--panel);
  font-size: 13px; font-weight: 600; text-align: start;
}
.sp-actions button:hover { background: var(--hover); }

/* sticker message: no bubble, just the picture */
.bubble.sticker, .bubble.sticker.in, .bubble.sticker.out {
  background: transparent; box-shadow: none; padding: 2px 4px 4px;
  border-radius: 10px; white-space: normal;
}
.msg-sticker { display: block; width: 150px; max-width: 100%; height: auto; }
.bubble.sticker .meta { display: block; margin-inline-start: 0; }
.sticker-save {
  position: absolute; top: 4px; inset-inline-end: 6px;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--bg); color: var(--accent); box-shadow: var(--shadow-sm);
  display: grid; place-items: center; font-size: 15px; font-weight: 700; opacity: 0;
  transition: opacity .12s;
}
@media (hover: hover) { .bubble.sticker:hover .sticker-save { opacity: 1; } }
@media (hover: none) { .sticker-save { opacity: .85; } }

/* ---------- Emoji maker (face -> sticker pack) ---------- */
.maker-sheet { max-width: 440px; }
.mk-big { width: 100%; padding: 13px; font-size: 15px; margin-bottom: 8px; }
.mk-alt {
  display: block; width: 100%; padding: 11px 12px; margin-bottom: 8px; border-radius: 10px;
  background: var(--panel); font-size: 14px; font-weight: 600; text-align: start;
}
.mk-alt:hover { background: var(--hover); }
.mk-sep { height: 1px; background: var(--border); margin: 14px 0 12px; }
.mk-cam {
  position: relative; width: min(100%, 340px); aspect-ratio: 1; margin: 0 auto 8px;
  border-radius: 16px; overflow: hidden; background: #000;
}
.mk-cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); /* mirror, like a selfie */ }
.mk-guide {
  position: absolute; inset: 9%; border-radius: 50%;
  border: 3px dashed rgba(255,255,255,.9); box-shadow: 0 0 0 999px rgba(0,0,0,.5);
}
.mk-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.mk-row .profile-link-btn { margin-top: 0; color: var(--text-dim); }
.mk-stage {
  width: min(100%, 300px); aspect-ratio: 1; margin: 0 auto 6px; border-radius: 14px;
  background: repeating-conic-gradient(var(--panel) 0 25%, var(--bg) 0 50%) 50% / 20px 20px;
  touch-action: none; /* dragging the picture must not scroll the sheet */
}
.mk-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.mk-stage canvas:active { cursor: grabbing; }
.mk-slider { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; font-size: 13px; color: var(--text-dim); }
.mk-slider input { flex: 1; accent-color: var(--accent); }
.mk-label { margin-top: 12px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; margin-bottom: 12px; }
.mk-grid canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: 8px; background: var(--panel); }

/* ---------- Dictation button, inside the text field ---------- */
.input-wrap { flex: 1; min-width: 0; position: relative; display: flex; }
.input-wrap textarea { flex: 1; width: 100%; }
.input-wrap.has-dictate textarea { padding-inline-end: 44px; }
.dictate-btn {
  position: absolute; inset-inline-end: 5px; bottom: 6px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-dim);
  transition: background .15s, color .15s;
}
.dictate-btn svg { width: 19px; height: 19px; }
.dictate-btn:hover { background: var(--hover); color: var(--text); }
.dictate-btn.listening { background: var(--danger); color: #fff; animation: rec-pulse 1s ease-in-out infinite; }

/* ---------- Quick replies (ready-made answers) ---------- */
#quickBtn.active { background: var(--active); color: var(--text); }
.quick-picker {
  position: absolute; bottom: calc(100% + 8px); inset-inline-start: 8px;
  width: min(360px, calc(100% - 16px));
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow);
  padding: 6px; z-index: 10;
}
.quick-title { padding: 6px 10px 4px; font-size: 12px; font-weight: 600; color: var(--text-dim); }
.quick-picker button {
  display: block; width: 100%; text-align: start;
  padding: 10px 12px; border-radius: 9px; font-size: 14.5px; line-height: 1.4;
}
.quick-empty { padding: 10px 12px; font-size: 13px; color: var(--text-dim); }
.quick-picker button:hover { background: var(--hover); }
.quick-picker button:active { background: var(--active); }

/* =========================================================================
   Call overlay
   ========================================================================= */
.call-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: #0b141a;
  color: #e9edef;
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: max(48px, env(safe-area-inset-top)) 24px max(40px, env(safe-area-inset-bottom));
  overflow: hidden;
}
.local-video { display: none; }
/* Off-screen but never display:none, so autoplaying audio for voice-only
   calls keeps playing on browsers that pause media inside display:none
   ancestors (notably some mobile WebKit builds). */
.audio-sinks { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.call-tiles {
  position: absolute; inset: 0; display: none;
  gap: 2px; background: #000;
}
.call-overlay.video .call-tiles { display: grid; }
.call-tiles.n1 { grid-template-columns: 1fr; }
.call-tiles.n2 { grid-template-columns: 1fr 1fr; }
.call-tiles.n3, .call-tiles.n4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.call-tiles.n5plus { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.call-tile { position: relative; background: #14202a; overflow: hidden; }
.call-tile video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.call-tile.connecting::after {
  content: 'מתחבר…'; position: absolute; inset: 0;
  display: grid; place-items: center; color: #cdd6db; font-size: 13px;
}
.call-tile.cam-off video { opacity: .12; }
.call-tile .tile-avatar { position: absolute; inset: 0; display: grid; place-items: center; }
.call-tile .tile-avatar .avatar { --sz: 64px; font-size: 26px; }
.call-tile .tile-label {
  position: absolute; inset-inline-start: 8px; bottom: 8px; z-index: 1;
  background: rgba(0,0,0,.55); color: #fff; font-size: 12px;
  padding: 3px 9px; border-radius: 7px; display: flex; align-items: center; gap: 5px;
}
.call-tile .tile-badge { width: 13px; height: 13px; color: var(--danger); }

.local-video {
  position: absolute; inset-block-start: 20px; inset-inline-end: 20px;
  width: 108px; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 12px; border: 2px solid rgba(255,255,255,.25);
  z-index: 2; background: #222;
}
.call-overlay.video .local-video:not([hidden]) { display: block; }

.call-info {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  margin-top: 6vh; text-align: center;
  transition: opacity .3s;
}
.call-overlay.video .call-info {
  margin-top: 0; background: linear-gradient(rgba(0,0,0,.45), transparent);
  position: absolute; inset-inline: 0; top: 0; padding: 40px 0 30px;
}
.call-overlay.connected.video .call-info { padding: 16px 0 24px; }
.call-overlay.connected.video .call-info h2 { font-size: 16px; }
.call-overlay.connected.video .call-info p { font-size: 12px; }
.call-info h2 { font-size: 24px; font-weight: 600; }
.call-info p { font-size: 15px; color: #cdd6db; letter-spacing: .3px; }
.call-roster { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; max-width: 320px; }
.call-roster .avatar { --sz: 90px; font-size: 34px; box-shadow: var(--shadow); }
.call-overlay.connected .call-roster .avatar { --sz: 40px; font-size: 16px; }
.call-roster.many .avatar { --sz: 56px; font-size: 22px; }
.roster-avatar { position: relative; display: inline-block; }
.roster-badge {
  position: absolute; bottom: -1px; inset-inline-end: -1px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--danger); border: 2px solid #0b141a;
  display: grid; place-items: center; color: #fff;
}
.roster-badge svg { width: 8px; height: 8px; }

.call-controls, .call-incoming {
  position: relative; z-index: 2;
  display: flex; gap: 26px; align-items: center;
}
.call-overlay.video .call-controls {
  position: absolute; inset-inline: 0; bottom: max(40px, env(safe-area-inset-bottom));
}
/* Incoming VIDEO call: .call-info goes absolute there, which left the answer /
   decline buttons as the only in-flow child — stuck at the top, on top of the
   caller's name. Pin them to the bottom like the in-call controls. */
.call-overlay.video .call-incoming {
  position: absolute; inset-inline: 0; justify-content: center;
  bottom: max(40px, env(safe-area-inset-bottom));
}
.call-btn {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.16);
  color: #fff;
  transition: transform .12s, background .15s;
}
.call-btn svg { width: 28px; height: 28px; }
.call-btn:active { transform: scale(.92); }
.call-btn.active { background: #fff; color: #0b141a; }
.call-btn.accept  { background: #00a884; }
.call-btn.decline, .call-btn.hangup { background: var(--danger); }
.ic-phone-end { transform: rotate(135deg); }

@keyframes ring-pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.06); }
}
.call-btn.accept, .call-incoming .call-btn.decline { animation: ring-pulse 1.2s ease-in-out infinite; }

/* ---------- Audio output picker (speaker / headset / Bluetooth) ---------- */
.audio-out-wrap { position: relative; }
.audio-out-menu {
  position: absolute; bottom: calc(100% + 12px); inset-inline-start: 50%;
  transform: translateX(-50%); /* app is RTL-only (see html[dir=rtl]) */
  width: 220px; background: var(--bg); color: var(--text);
  border-radius: 12px; box-shadow: var(--shadow); padding: 6px;
  z-index: 3;
}
.audio-out-menu button {
  display: block; width: 100%; text-align: start;
  padding: 9px 12px; border-radius: 8px; font-size: 13.5px;
}
.audio-out-menu button:hover { background: var(--hover); }
.audio-out-menu button.current { color: var(--accent); font-weight: 700; }

/* =========================================================================
   Profile settings
   ========================================================================= */
.profile-modal {
  position: fixed; inset: 0; z-index: 105;
  background: rgba(11,20,26,.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.profile-sheet {
  width: 100%; max-width: 380px; max-height: 90vh; overflow-y: auto;
  background: var(--bg); color: var(--text);
  border-radius: 16px; box-shadow: var(--shadow);
  padding: 20px;
}
.profile-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.profile-head h2 { font-size: 18px; font-weight: 700; }
.profile-avatar-row { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; }
.profile-avatar-row .avatar { --sz: 96px; font-size: 36px; }
.profile-avatar-actions { display: flex; gap: 8px; }
.profile-field { margin-bottom: 18px; }
.profile-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.profile-hint { font-size: 12px; color: var(--text-dim); margin-bottom: 6px; }
.profile-field-row { display: flex; gap: 8px; }
.profile-field-row input {
  flex: 1; min-width: 0; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--input); color: var(--text); outline: none;
}
.profile-field-row input:focus { border-color: var(--accent); }
.profile-btn {
  padding: 9px 14px; border-radius: 10px; white-space: nowrap;
  background: var(--accent); color: #fff; font-size: 13px; font-weight: 600;
  transition: filter .15s;
}
.profile-btn:hover { filter: brightness(1.06); }
.profile-btn:disabled { opacity: .5; cursor: default; }
.profile-link-btn { margin-top: 8px; font-size: 12.5px; color: var(--danger); text-decoration: underline; }
.profile-danger-btn {
  width: 100%; margin-top: 6px; padding: 11px; border-radius: 10px;
  background: var(--panel); color: var(--danger); font-size: 13.5px; font-weight: 600;
}
.profile-danger-btn:hover { filter: brightness(.97); }

/* =========================================================================
   Camera capture — take a photo and send it, no gallery round-trip
   ========================================================================= */
.camera-modal {
  position: fixed; inset: 0; z-index: 110;
  background: #000; color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
#cameraPreview, #cameraSnapshot {
  width: 100%; height: 100%; object-fit: contain; background: #000;
}
.camera-controls {
  position: absolute; inset-inline: 0; bottom: max(32px, env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; gap: 28px;
}
.camera-shot-btn {
  width: 68px; height: 68px; border-radius: 50%;
  background: #fff; border: 4px solid rgba(255,255,255,.4);
  transition: transform .1s;
}
.camera-shot-btn:active { transform: scale(.92); }
.camera-controls .call-btn { width: 52px; height: 52px; background: rgba(255,255,255,.16); }
.camera-controls .call-btn svg { width: 22px; height: 22px; }
.camera-controls .send { width: 60px; height: 60px; }

/* =========================================================================
   Mobile
   ========================================================================= */
@media (max-width: 820px) {
  .sidebar { width: 100%; min-width: 0; max-width: none;
             border-inline-end: 0; }
  .chat {
    position: absolute; inset: 0; z-index: 20;
    transform: translateX(0);
    transition: transform .22s ease;
  }
  [dir="rtl"] .chat { transform: translateX(-100%); }
  [dir="ltr"] .chat { transform: translateX(100%); }
  body.chat-open .chat { transform: translateX(0); }
  .chat-head .back { display: grid; }
  .messages { padding-inline: 10px; gap: 4px; }
  .bubble { max-width: 85%; font-size: var(--msg-font, 16.5px); line-height: 1.45; }
  .bubble .reply-btn { opacity: .85; } /* no hover on touch — keep it visible */

  /* Composer got two more buttons (attach + mic); on a narrow phone give the
     send button real breathing room from the screen edge instead of letting
     four 40px+ circles fight the input for space. */
  .composer { gap: 4px; padding-inline: 8px; }
  .composer .icon-btn { width: 36px; height: 36px; min-width: 36px; }
  .composer .icon-btn svg { width: 19px; height: 19px; }
  .composer textarea { padding: 10px 14px; }
  .send { width: 42px; height: 42px; min-width: 42px; }
}

/* =========================================================================
   Three-dot menu, groups, app settings
   ========================================================================= */
.menu-wrap { position: relative; }
.menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 40;
  min-width: 220px; padding: 6px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
}
.menu button {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  padding: 10px 12px; border-radius: 8px; font-size: 14px;
}
.menu button svg { width: 19px; height: 19px; min-width: 19px; color: var(--text-dim); }
.menu button:hover { background: var(--hover); }
.menu button.danger, .menu button.danger svg { color: var(--danger); }
.menu-sep { height: 1px; margin: 5px 4px; background: var(--border); }

/* group avatar = coloured circle with a two-person glyph */
.avatar .group-ic { width: 56%; height: 56%; }
.chat-head.is-group .avatar, .chat-head.is-group .peer-meta { cursor: pointer; }

/* who said it, above a group bubble */
.bubble .sender { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 2px; }
.call-note.system-note { text-align: center; max-width: 90%; }

/* delete-message button: sits beside the reply button (group bubbles only) */
.bubble .del-btn {
  position: absolute; bottom: 2px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; color: var(--text-dim);
  background: var(--bg); box-shadow: var(--shadow-sm);
  opacity: 0; transition: opacity .12s, color .12s;
}
.bubble .del-btn:hover { color: var(--danger); }
.bubble.in .del-btn  { inset-inline-end: -62px; }
.bubble.out .del-btn { inset-inline-start: -62px; }
.bubble .del-btn svg { width: 14px; height: 14px; }
@media (hover: hover) { .bubble:hover .del-btn { opacity: 1; } }
@media (hover: none) { .bubble .del-btn { opacity: .8; } }
.bubble.deleted { font-style: italic; color: var(--text-dim); }
.bubble.deleted .deleted-note { font-size: 14px; }

.delete-sheet .profile-btn, .delete-sheet .profile-danger-btn { width: 100%; padding: 11px; margin-top: 0; font-size: 14px; }
.delete-sheet .profile-hint { margin: 5px 2px 14px; }
.delete-preview {
  margin-bottom: 14px; padding: 8px 12px; border-radius: 8px;
  background: var(--panel); color: var(--text-dim); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* WhatsApp (wa.me) sender */
.profile-sheet textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--input); color: var(--text); font: inherit; resize: vertical; outline: none;
}
.profile-sheet textarea:focus { border-color: var(--accent); }
.wa-cc { flex: 0 0 74px !important; text-align: center; }
.wa-preview { margin-top: 6px; font-size: 12.5px; color: var(--text-dim); min-height: 1.4em; direction: ltr; text-align: start; }
.wa-preview.bad { color: var(--danger); direction: rtl; }
.wa-actions { display: flex; gap: 8px; margin: 4px 0 18px; }
.wa-actions .profile-btn { flex: 1; padding: 11px 8px; font-size: 14px; }
.wa-open { background: #128c4a; }
.wa-alt { background: var(--panel); color: var(--text); }
.wa-saved { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.wa-saved li { display: flex; align-items: center; gap: 6px; }
.wa-saved .wa-pick {
  flex: 1; min-width: 0; text-align: start; padding: 8px 12px; border-radius: 10px;
  background: var(--panel); font-size: 13.5px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.wa-saved .wa-pick:hover { background: var(--hover); }
.wa-saved .wa-pick bdi { color: var(--text-dim); flex-shrink: 0; }
.wa-saved .wa-del {
  width: 30px; height: 30px; min-width: 30px; border-radius: 50%; display: grid; place-items: center;
  color: var(--danger); background: rgba(234, 67, 53, .1);
}
.wa-saved .wa-del svg { width: 13px; height: 13px; }
.wa-saved .wa-del:hover { background: var(--danger); color: #fff; }

/* WhatsApp bridge */
.wb-warn { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: rgba(234, 130, 20, .12); color: #a35a0a; font-size: 13px; line-height: 1.55; }
:root[data-theme="dark"] .wb-warn { color: #f1b56a; }
.wb-title { font-weight: 600; font-size: 14px; color: var(--text); }
.wb-qr { display: grid; place-items: center; background: #fff; border-radius: 14px; padding: 12px; margin: 8px auto 12px; width: min(100%, 280px); }
.wb-qr img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.wb-code {
  text-align: center; font: 700 30px/1.2 ui-monospace, Consolas, monospace; letter-spacing: 4px;
  padding: 16px 8px; margin: 8px 0 12px; border-radius: 14px; background: var(--panel); user-select: all;
}
.wb-steps { margin: 0 0 8px; padding-inline-start: 22px; font-size: 13.5px; line-height: 1.7; color: var(--text-dim); }
/* ===== system admin: code screen, panel, and the read-only "watched" conversations ===== */
#profileModal { z-index: 106; }                     /* opens above the admin panel when edited from it */
#adminCodeForm { display: flex; gap: 8px; }
#adminCodeInput, .admin-body input[type="text"], .admin-body input[type="password"], .admin-body select, .admin-body textarea {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--input); color: var(--text); outline: none; font: inherit; font-size: 14px;
}
.admin-body textarea { width: 100%; resize: vertical; margin-bottom: 8px; }
.admin-body .profile-field input[type="text"], .admin-body .profile-field input[type="password"] { width: 100%; margin-bottom: 8px; }
.watch-strip { display: none; }
body.watch-chat .watch-strip { display: block; padding: 12px; text-align: center; background: var(--panel); color: var(--text-dim); font-size: 13px; }
.admin-sheet { max-width: 760px; display: flex; flex-direction: column; }
.admin-head-actions { display: flex; align-items: center; gap: 10px; }
.admin-tabs { flex-wrap: wrap; margin-bottom: 12px; }
.admin-tabs button { flex: 1 1 30%; }
.admin-body { flex: 1 1 auto; overflow-y: auto; min-height: 260px; padding-bottom: 6px; }
.admin-list { list-style: none; margin: 0; padding: 0; }
.admin-row { padding: 12px 0; border-top: 1px solid var(--border); }
.ar-main { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 8px; }
.ar-name { font-weight: 700; font-size: 15px; margin-inline-end: 4px; }
.ar-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: var(--panel); font-size: 12px; color: var(--text-dim); }
.ar-chip.on { background: rgba(37, 211, 102, .18); color: var(--text); }
.ar-chip.warn { background: rgba(255, 170, 0, .18); }
.ar-chip.bad { background: rgba(234, 67, 53, .18); color: var(--danger); font-weight: 600; }
.ar-x { padding: 0 2px; font-size: 12px; color: var(--danger); }
.ar-actions, .ac-add, .ac-head, .ar-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ar-chips { margin: 8px 0; }
.ar-actions button, .ac-add button, .ac-head button {
  padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); font-size: 12.5px;
}
.ar-actions button:hover, .ac-add button:hover, .ac-head button:hover { background: var(--active); }
.ar-actions .danger, .ac-add .danger { color: var(--danger); border-color: rgba(234, 67, 53, .4); }
.ac-add .profile-btn { background: var(--panel); color: var(--text); border: 1px solid var(--border); font-weight: 600; }
.admin-card { padding: 12px; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 12px; }
.ac-head input { font-weight: 700; }
.watch-mode { display: block; padding: 8px 0; font-size: 14px; cursor: pointer; }
.watch-mode small { color: var(--text-dim); }
.watch-viewer { margin: 6px 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-size: 13.5px; }
.watch-viewer summary { cursor: pointer; }
.ar-sum { color: var(--text-dim); }
.watch-opt { display: inline-flex; align-items: center; gap: 6px; margin: 6px 12px 0 0; font-size: 13px; }
.admin-log { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; font-size: 12.5px; line-height: 1.6; }
.admin-log li { padding: 4px 0; border-top: 1px solid var(--border); }
.admin-log li span { color: var(--text-dim); margin-inline-end: 6px; }
.monitor-notice { margin: 6px 12px; padding: 8px 10px; border-radius: 10px; background: rgba(108, 92, 231, .16); font-size: 12.5px; line-height: 1.5; }
.watch-tag { background: #6c5ce7; color: #fff; }
/* someone else's conversation that I may read: read-only */
body.watch-chat #videoCallBtn, body.watch-chat #voiceCallBtn, body.watch-chat #deleteChatBtn, body.watch-chat #composer,
body.watch-chat .reply-btn, body.watch-chat .del-btn, body.watch-chat .sticker-save { display: none !important; }

/* "בדיקת התראות" result lines */
.push-diag { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13.5px; line-height: 1.6; color: var(--text-dim); }
.push-diag li { padding: 5px 0; border-top: 1px solid var(--border, rgba(127, 127, 127, .2)); }
.push-diag li.bad { color: #c0392b; font-weight: 600; }
#setPushTestBtn { margin-top: 8px; }
.wb-on { padding: 12px 14px; border-radius: 12px; background: rgba(37, 211, 102, .14); margin-bottom: 16px; font-size: 14.5px; }
.wa-tag { margin-inline-start: 6px; padding: 0 6px; border-radius: 8px; background: #25d366; color: #04231a; font-size: 10px; font-weight: 700; vertical-align: 1px; }
/* a WhatsApp chat is text only: no calls, files, camera, voice notes, stickers or replies */
body.wa-chat #videoCallBtn, body.wa-chat #voiceCallBtn, body.wa-chat #attachBtn, body.wa-chat #cameraBtn,
body.wa-chat #micBtn, body.wa-chat .reply-btn, body.wa-chat [data-ep-tab="stickers"] { display: none !important; }

.group-sheet { max-width: 420px; }
.group-avatar-row { display: flex; justify-content: center; margin-bottom: 16px; }
.group-avatar-row .avatar { --sz: 72px; }
.group-search {
  width: 100%; margin-bottom: 8px; padding: 9px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--input); color: var(--text); outline: none;
}
.group-search:focus { border-color: var(--accent); }
.group-members, .group-pick {
  list-style: none; max-height: 220px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 10px;
}
.group-members:empty, .group-pick:empty { display: none; }
.group-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--border);
}
.group-row:last-child { border-bottom: 0; }
.group-row .avatar { --sz: 34px; font-size: 13px; }
.group-row .gr-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 600;
                      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-row .gr-tag { font-size: 11px; color: var(--accent); font-weight: 700; }
.group-row .gr-remove {
  width: 28px; height: 28px; min-width: 28px; border-radius: 50%;
  display: grid; place-items: center; color: var(--danger); background: rgba(234, 67, 53, .1);
}
.group-row .gr-remove svg { width: 13px; height: 13px; }
.group-row .gr-remove:hover { background: var(--danger); color: #fff; }
.group-pick .group-row { cursor: pointer; }
.group-pick .group-row:hover { background: var(--hover); }
.pick-check {
  width: 22px; height: 22px; min-width: 22px; border-radius: 50%;
  border: 2px solid var(--border); background: var(--bg);
  display: grid; place-items: center; color: #fff;
}
.pick-check svg { width: 13px; height: 13px; opacity: 0; }
.group-row.checked .pick-check { background: var(--accent); border-color: var(--accent); }
.group-row.checked .pick-check svg { opacity: 1; }
.group-empty { padding: 12px; font-size: 13px; color: var(--text-dim); text-align: center; }
.group-submit { width: 100%; padding: 11px; margin-top: 4px; font-size: 14px; }

/* settings: editable list of ready-made answers */
.qr-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.qr-row { display: flex; align-items: center; gap: 6px; }
.qr-row input {
  flex: 1; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--input); color: var(--text); outline: none; font-size: 14px;
}
.qr-row input:focus { border-color: var(--accent); }
.qr-del {
  width: 30px; height: 30px; min-width: 30px; border-radius: 50%;
  display: grid; place-items: center; color: var(--danger); background: rgba(234, 67, 53, .1);
}
.qr-del svg { width: 14px; height: 14px; }
.qr-del:hover { background: var(--danger); color: #fff; }
.qr-actions { display: flex; align-items: center; gap: 14px; }
.qr-actions .profile-link-btn { margin-top: 0; }

.seg { display: flex; gap: 6px; }
.seg button {
  flex: 1; padding: 9px 6px; border-radius: 10px;
  background: var(--panel); font-size: 13px; font-weight: 600;
}
.seg button.on { background: var(--accent); color: #fff; }
.setting-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 4px 0; font-size: 14px; cursor: pointer;
}
.setting-row small { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-dim); }
.setting-row input { width: 20px; height: 20px; accent-color: var(--accent); flex-shrink: 0; }

/* =========================================================================
   Links in messages + inline YouTube player
   ========================================================================= */
.bubble .msg-link { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }

/* The card sits inside a pre-wrap bubble — reset that for its own markup. */
.yt { display: block; width: min(280px, 62vw); margin-top: 6px; white-space: normal; }
.yt-stage { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; overflow: hidden; }
.yt-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.yt-stage:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
.yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; }
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.yt-play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 36px; border-radius: 10px;
  background: rgba(255, 0, 0, .92); display: grid; place-items: center;
  transition: transform .12s;
}
.yt-thumb:hover .yt-play { transform: scale(1.08); }
.yt-play svg { width: 18px; height: 18px; fill: #fff; stroke: none; margin-inline-start: 2px; }
.yt.playing .yt-thumb { display: none; }

.yt-bar { display: flex; align-items: center; gap: 2px; margin-top: 3px; font-size: 12px; color: var(--text-dim); }
.yt-label { flex: 1; font-weight: 600; }
.yt-bar button, .yt-bar a {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: inherit;
}
.yt-bar button:hover, .yt-bar a:hover { background: var(--hover); color: var(--text); }
.yt-bar svg { width: 16px; height: 16px; }
.yt-bar .yt-stop { display: none; }
.yt.playing .yt-stop { display: grid; }
.yt .ic-collapse { display: none; }
.yt.expanded .ic-expand { display: none; }
.yt.expanded .ic-collapse { display: block; }

/* Enlarged: the same card (so playback never restarts) becomes a full-window
   overlay. Tapping the dark area, the ⤡ button, or Esc shrinks it back. */
.yt.expanded {
  position: fixed; inset: 0; z-index: 60; width: auto; margin: 0; padding: 12px;
  background: rgba(0, 0, 0, .93);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.yt.expanded .yt-stage {
  width: min(96vw, calc((100vh - 84px) * 16 / 9)); border-radius: 10px;
}
.yt.expanded .yt-bar { width: min(96vw, calc((100vh - 84px) * 16 / 9)); color: #cfd8dc; }
.yt.expanded .yt-bar button:hover, .yt.expanded .yt-bar a:hover { background: rgba(255,255,255,.14); color: #fff; }
.yt.expanded .yt-bar svg { width: 20px; height: 20px; }

/* ---------- toast (generic short confirmation, e.g. "link copied") ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(8px);
  background: var(--text); color: var(--bg);
  padding: 10px 18px; border-radius: 20px;
  font-size: 13.5px; font-weight: 600;
  box-shadow: var(--shadow);
  z-index: 200; opacity: 0;
  transition: opacity .2s, transform .2s;
  max-width: min(90vw, 360px); text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }