/* eDash bot web chat panel (TKT-000546, ported from
   edashboard/console/public/edashbotPanel.{js,css} -- console/ is not
   served to real users, this is). Same shape as PDAM wtp.systems' Traya
   panel: a round glass button opens a chat sheet; every line goes to
   POST /api/v1/bot/chat, the same handler table the Telegram bot runs,
   under a web:<user> id, so the browser never reaches Telegram.

   Desktop (min-width: 901px): a docked side panel, pinned under the
   global header (z-index 800) and never on top of it.
   Phone (max-width: 900px, the drawer breakpoint): a bottom sheet that
   stops above the header band and sits BELOW the off-canvas drawer
   (z-index 690/700) in stacking order, so an open drawer always wins
   and the sheet never paints over the phone header or the drawer.

   Glass here is the control layer (the button, the sheet chrome) and
   uses the existing --mat-* tokens from css/glass.css with literal
   fallbacks, unedited. Bubbles are content and stay solid, same rule
   as the console version. Reduced transparency falls back to solid. */

:root {
  --eb-z: 650;
}

.eb-fab {
  /* Stacked above the feedback button (css/feedback-fab.css: 44px tall,
     14px from the bottom right) instead of on top of it: both floating
     buttons used to sit in the same corner, one covering the other. */
  position: fixed;
  right: calc(14px + env(safe-area-inset-right, 0px));
  bottom: calc(14px + 44px + 12px + env(safe-area-inset-bottom, 0px));
  z-index: var(--eb-z);
  width: 56px;
  height: 56px;
  border-radius: var(--r-chip);
  border: 1px solid rgba(255, 255, 255, .6);
  background: var(--mat-regular, rgba(255, 255, 255, .9));
  -webkit-backdrop-filter: var(--mat-filter-regular);
  backdrop-filter: var(--mat-filter-regular);
  box-shadow: var(--mat-shadow-2, 0 12px 28px rgba(11, 79, 84, .18));
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .15s ease;
  padding: 0;
}
.eb-fab:hover { transform: translateY(-1px); }
.eb-fab.on { outline: 2px solid var(--primary, #0F6A71); outline-offset: 2px; }
.eb-fab img { width: 28px; height: 28px; object-fit: contain; border-radius: var(--r-chip); }
.eb-fab-dot { display: none; }

.eb-sheet {
  position: fixed;
  z-index: var(--eb-z);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .55);
  background: var(--mat-regular, rgba(255, 255, 255, .92));
  -webkit-backdrop-filter: var(--mat-filter-regular);
  backdrop-filter: var(--mat-filter-regular);
  box-shadow: var(--mat-shadow-3, 0 24px 48px rgba(11, 79, 84, .22));
  overflow: hidden;
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--ink, #25343F);
}
.eb-sheet[hidden] { display: none; }

/* Desktop: docked side panel, pinned to the right edge, its top offset
   by the header height token so it never sits under (or over) the
   header band. */
@media (min-width: 901px) {
  .eb-sheet {
    top: calc(var(--edash-header-h, 69px) + 12px);
    right: 22px;
    bottom: 24px;
    width: min(380px, calc(100vw - 32px));
    border-radius: var(--r-card);
  }
}

/* Phone (the drawer breakpoint): a bottom sheet. Bounded well below the
   header band, and never taller than the space left under it, so it
   cannot cover the header. Sits at --eb-z (650), under the drawer's
   690/700, so an open drawer always paints above it. */
@media (max-width: 900px) {
  /* same stacking on a phone: above the feedback button, never on it */
  .eb-fab { right: calc(14px + env(safe-area-inset-right, 0px)); bottom: calc(14px + 44px + 12px + env(safe-area-inset-bottom, 0px)); }
  .eb-sheet {
    left: 8px;
    right: 8px;
    bottom: 84px;
    width: auto;
    max-height: calc(100dvh - var(--edash-header-h, 69px) - 96px);
    height: min(70dvh, calc(100dvh - var(--edash-header-h, 69px) - 96px));
    border-radius: var(--r-card);
  }
}

.eb-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--primary, #0F6A71); color: #fff; }
.eb-head img { border-radius: var(--r-chip); }
.eb-head b { font-size: var(--type-card-title-size); }
.eb-sub { font-size: var(--type-label-size); color: rgba(255, 255, 255, .92); flex: 1; }
.eb-lang, .eb-close {
  border: 1px solid rgba(255, 255, 255, .35);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  border-radius: var(--r-chip);
  height: 28px;
  min-width: 28px;
  padding: 0 8px;
  cursor: pointer;
  font: 600 12px 'Poppins', sans-serif;
}
.eb-log { flex: 1; overflow: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.eb-msg { display: flex; }
.eb-msg.in { justify-content: flex-end; }
.eb-bubble {
  max-width: 85%;
  padding: 8px 12px;
  border-radius: var(--r-card);
  font-size: var(--type-body-size);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #E7EDEE);
}
.eb-msg.in .eb-bubble { background: var(--primary, #0F6A71); color: #fff; border-color: transparent; border-bottom-right-radius: 4px; }
.eb-msg.out .eb-bubble { border-bottom-left-radius: 4px; }
.eb-bubble a { color: inherit; text-decoration: underline; }
.eb-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 12px 8px; }
.eb-chip {
  border: 1px solid var(--border, #E7EDEE);
  background: var(--surface, #fff);
  color: var(--primary-dark, #0B4F54);
  border-radius: var(--r-chip);
  padding: 5px 10px;
  font: 500 12px 'Poppins', sans-serif;
  cursor: pointer;
}
.eb-chip:hover { background: var(--primary-soft, #E4F1F1); }
.eb-form {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  /* env(safe-area-inset-bottom) keeps the input clear of a phone's home
     indicator; the JS side also pins the sheet above the software
     keyboard via visualViewport, see edashbot-panel.js. */
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border, #E7EDEE);
}
.eb-form input {
  flex: 1;
  border: 1px solid var(--border, #E7EDEE);
  border-radius: var(--r-ctl);
  padding: 8px 10px;
  font: 13px 'Poppins', sans-serif;
  background: var(--surface, #fff);
  color: inherit;
}
.eb-send { border: 0; border-radius: var(--r-ctl); background: var(--primary, #0F6A71); color: #fff; width: 40px; cursor: pointer; flex: none; }

/* Background is not repeated here on purpose: .eb-sheet and .eb-fab
   already read var(--mat-regular), which css/glass.css redefines
   under :root[data-theme="dark"] (see glass.css's :root[data-theme=
   "dark"] block). A second, literal background rule here would sit at
   higher specificity than the light rule above and always win the
   overlay checker's single-winner resolution (scripts/
   check-overlay-surfaces.py), so the light background would never
   actually be verified. Only the border tint, which has no token
   equivalent, is theme-specific here. */
:root[data-theme="dark"] .eb-sheet, :root[data-theme="dark"] .eb-fab {
  border-color: rgba(255, 255, 255, .12);
}

/* No background line here: var(--mat-regular) already falls back to
   the opaque --glass-paper under this same media condition (see
   css/glass.css's gate (b)/(c) block), same rule shape as the rest of
   glass.css -- "no component selector appears in any gate
   definition". A second background rule on .eb-fab/.eb-sheet here
   would tie the base rule's specificity and, being later in source
   order, would win the overlay checker's single-winner resolution
   unconditionally (scripts/check-overlay-surfaces.py), which would
   again stop the checker from verifying the rule that actually
   paints in the common case. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .eb-fab, .eb-sheet {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}