/* boof.css — «از بوف بوفی بپرسید» (2026-10-29). The owl in the search bar,
   the ask row in the dropdown, and the chat panel (boof.js). The panel wears
   the owl's own colours, green and yellow, so it reads the same on the dark
   media ground and the light news ground. */

:root {
  --bf-green: #1f7a3a;
  --bf-green2: #2c9a4c;
  --bf-gold: #f2c230;
  --bf-cream: #fffaf0;
  --bf-ink: #1d2a20;
  --bf-mut: #5f6b62;
}

/* ---------- the owl in the bar ---------- */
.boof-ask {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  margin-inline-start: 6px; padding: 3px 10px 3px 4px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--bf-green), var(--bf-green2)); color: #fff;
  font: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(31,122,58,.35); position: relative; white-space: nowrap;
}
.boof-ask img {
  width: 30px; height: 30px; border-radius: 50%; background: #fff; display: block;
  animation: boof-peek 7s ease-in-out infinite; transform-origin: 50% 80%;
}
.boof-ask .bfa-t { padding-inline-end: 2px; }
.boof-ask:hover { filter: brightness(1.08); }
.boof-ask.has-news::after {
  content: ''; position: absolute; top: -2px; inset-inline-end: -2px; width: 12px; height: 12px;
  border-radius: 50%; background: #e53935; border: 2px solid #fff;
}
@keyframes boof-peek {
  0%, 82%, 100% { transform: rotate(0) scale(1); }
  86% { transform: rotate(-12deg) scale(1.12); }
  90% { transform: rotate(10deg) scale(1.12); }
  94% { transform: rotate(-4deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { .boof-ask img { animation: none; } }
/* a narrow bar keeps the face and drops the word */
@media (max-width: 420px) { .boof-ask .bfa-t { display: none; } .boof-ask { padding: 3px; } }
/* the header one: always there, a step bigger, the word kept on a phone too */
.boof-hdr { margin: 0 6px; padding: 4px 12px 4px 5px; font-size: 15px; }
.boof-hdr img { width: 34px; height: 34px; }
/* zoomg's header is a three-column grid (zg.css) where every child names its
   cell; an unnamed one wraps to a second row. The owl shares the menu's cell,
   just past the 44px menu button. */
html[data-zg] .app-top .boof-hdr { grid-column: 1; grid-row: 1; justify-self: start; margin: 0; margin-inline-start: 50px; }
/* A phone's header has no room: the wordmark fills the middle and the owl
   ended up pressed against it. There a twin floats in the corner instead,
   above the player bar (boof.js keeps --boof-b at the bar's height), with a
   gold «?» so it reads as «ask». It is its own element on <body> (.boof-fab,
   made by boof.js): the zoomg header has a clip-path, and a fixed child of it
   is clipped to the header's box, i.e. invisible. */
.boof-fab { display: none; }
@media (max-width: 767px) {
  .boof-hdr { display: none !important; }
  .boof-fab {
    display: flex; position: fixed; z-index: 120; left: 14px; bottom: calc(var(--boof-b, 16px) + env(safe-area-inset-bottom));
    width: 62px; height: 62px; margin: 0; padding: 0; justify-content: center; border-radius: 50%;
    border: 3px solid var(--bf-gold); box-shadow: 0 6px 22px rgba(0,0,0,.4);
  }
  .boof-fab .bfa-t { display: none; }
  .boof-fab img { width: 54px; height: 54px; }
  .boof-fab::before {
    content: '؟'; position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--bf-gold); color: #1d2a20; font-size: 15px; font-weight: 800; line-height: 22px; text-align: center;
  }
  html.boof-lock .boof-fab, html.msrch-lock .boof-fab, html.zgd-lock .boof-fab { display: none; }
}
/* the once-a-visit speech bubble beside the floating owl */
.boof-tip {
  position: fixed; z-index: 121; left: 84px; bottom: calc(var(--boof-b, 16px) + 10px + env(safe-area-inset-bottom));
  max-width: 220px; padding: 10px 14px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--bf-ink);
  font-size: 15px; line-height: 1.7; box-shadow: 0 6px 22px rgba(0,0,0,.3); cursor: pointer;
  animation: boof-tip-in .35s ease both; direction: rtl;
}
.boof-tip b { color: var(--bf-green); }
@keyframes boof-tip-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }
@media (min-width: 768px) { .boof-tip { display: none; } }

/* the placeholder fades as it changes */
.boof-ph-fade::placeholder { transition: opacity .35s; opacity: 0; }

/* ---------- the ask row at the top of the dropdown ---------- */
.boof-row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: start;
  margin: 4px 0 8px; padding: 10px 12px; border: 1.5px solid rgba(242,194,48,.55); border-radius: 14px;
  background: linear-gradient(135deg, rgba(31,122,58,.22), rgba(242,194,48,.14));
  color: inherit; font: inherit; cursor: pointer;
}
.boof-row:hover { border-color: var(--bf-gold); }
.boof-row img { width: 44px; height: 44px; border-radius: 50%; background: #fff; flex: none; }
.boof-row .bfr-m { min-width: 0; flex: 1; }
.boof-row .bfr-k { font-size: 13px; opacity: .8; }
.boof-row .bfr-q { font-size: 16px; font-weight: 700; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.boof-row .bfr-go { flex: none; font-size: 14px; font-weight: 700; color: var(--bf-gold); }
.boof-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.boof-chips button {
  border: 1px solid rgba(242,194,48,.45); background: transparent; color: inherit; font: inherit;
  font-size: 14px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
}
.boof-chips button:hover { background: rgba(242,194,48,.12); }

/* ---------- the chat panel ---------- */
.boof-panel {
  /* above the player bar (boof.js keeps --boof-b at its height + 16) */
  position: fixed; z-index: 10050; inset-inline-end: auto; left: 20px; bottom: var(--boof-b, 20px);
  width: 400px; height: min(640px, calc(100vh - var(--boof-b, 20px) - 20px));
  display: flex; flex-direction: column; background: var(--bf-cream); color: var(--bf-ink);
  border-radius: 22px; overflow: hidden; box-shadow: 0 18px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06);
  font-size: 16px; direction: rtl;
  transform: translateY(16px) scale(.98); opacity: 0; pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
.boof-panel.open { transform: none; opacity: 1; pointer-events: auto; }
.boof-bd { display: none; }
@media (max-width: 767px) {
  .boof-panel { left: 0; right: 0; bottom: 0; top: 0; width: auto; height: 100%; height: 100svh; border-radius: 0; }
}

.bfp-head {
  flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: linear-gradient(135deg, var(--bf-green), var(--bf-green2)); color: #fff;
}
.bfp-head img { width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 2px solid var(--bf-gold); }
.bfp-head .bfp-tt { flex: 1; min-width: 0; }
.bfp-head b { display: block; font-size: 18px; font-family: 'Javan', inherit; font-weight: 400; }
.bfp-head span { display: block; font-size: 13px; opacity: .9; }
.bfp-head button {
  flex: none; border: 0; background: rgba(255,255,255,.16); color: #fff; font: inherit;
  height: 38px; min-width: 38px; padding: 0 10px; border-radius: 19px; cursor: pointer; font-size: 14px;
}
.bfp-head button:hover { background: rgba(255,255,255,.26); }
.bfp-head .bfp-x { font-size: 20px; padding: 0; }

.bfp-body { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.bfp-hi { text-align: center; padding: 6px 4px 2px; }
.bfp-hi img { width: 120px; height: auto; display: block; margin: 0 auto 6px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.15)); }
.bfp-hi p { margin: 0 0 12px; font-size: 16px; line-height: 1.9; }
.bfp-hi .boof-chips { justify-content: center; }
.bfp-hi .boof-chips button { border-color: rgba(31,122,58,.35); color: var(--bf-green); background: #fff; }
.bfp-hi .boof-chips button:hover { background: #eef7f0; }

.bfm { max-width: 88%; padding: 10px 14px; border-radius: 18px; line-height: 1.95; font-size: 16px; word-break: break-word; }
.bfm.u { align-self: flex-start; background: var(--bf-green); color: #fff; border-end-start-radius: 6px; }
.bfm.b { align-self: flex-end; background: #fff; border: 1px solid rgba(242,194,48,.6); border-end-end-radius: 6px; }
.bfm.o { align-self: flex-end; background: #fff3c4; border: 1px solid var(--bf-gold); border-end-end-radius: 6px; }
.bfm.o::before { content: 'مدیر سایت'; display: block; font-size: 13px; font-weight: 700; color: #8a6d00; }
.bfm.n { align-self: center; background: transparent; color: var(--bf-mut); font-size: 14px; text-align: center; padding: 2px 8px; }
.bfm a { color: var(--bf-green); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bfm.u a { color: #fff; }

.bfp-typing { align-self: flex-end; display: flex; align-items: center; gap: 8px; color: var(--bf-mut); font-size: 14px; }
.bfp-typing img { width: 30px; height: 30px; border-radius: 50%; animation: boof-peek 1.6s ease-in-out infinite; }
.bfp-typing i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--bf-green); margin: 0 1px; animation: boof-dot 1s infinite; }
.bfp-typing i:nth-child(2) { animation-delay: .15s; }
.bfp-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes boof-dot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.bfp-foot { flex: none; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(0,0,0,.07); background: #fff; }
.bfp-foot textarea {
  flex: 1; resize: none; border: 1.5px solid rgba(31,122,58,.3); border-radius: 20px; padding: 9px 14px;
  font: inherit; font-size: 16px; line-height: 1.6; max-height: 120px; color: var(--bf-ink); background: #fff; outline: none;
}
.bfp-foot textarea:focus { border-color: var(--bf-green); }
.bfp-foot button {
  flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--bf-green); color: #fff; display: grid; place-items: center;
}
.bfp-foot button:disabled { opacity: .45; cursor: default; }
.bfp-foot svg { width: 22px; height: 22px; transform: scaleX(-1); }
.bfp-note { flex: none; text-align: center; font-size: 13px; color: var(--bf-mut); padding: 0 12px 8px; background: #fff; }
html.boof-lock { overflow: hidden; }

/* the zoomg drawer: its form is not a flex row, so the owl would wrap under
   the field; the drawer already opens with the ask row, so the button goes.
   The drawer is light: the gold word turns green to stay readable. */
.zgd-form .boof-ask { display: none; }
.zg-drawer .boof-row { color: var(--bf-ink); border-color: rgba(31,122,58,.35); background: linear-gradient(135deg, #eef7f0, #fff8dc); }
.zg-drawer .boof-row .bfr-go { color: var(--bf-green); }