/* ==========================================================================
   Section: Website Chat Widget (Phase 3)
   Independent component — scoped entirely under .agc-chat*. Reuses the same
   body.has-cookie-banner / body.has-footer-overlap state classes main.min.js
   already toggles for .sticky-whatsapp, so the trigger reacts identically
   without a second observer. Stacked above .sticky-whatsapp (bottom:30px,
   56px tall) with a 12px gap, never overlapping it.
   ========================================================================== */

.agc-chat__trigger {
    position: fixed;
    right: 24px;
    bottom: calc(98px + env(safe-area-inset-bottom, 0px));
    z-index: 99979;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    cursor: pointer;
    background: linear-gradient(135deg, #17384f 0%, #0b2434 100%);
    box-shadow: 0 6px 16px rgba(2, 18, 9, 0.34), 0 0 0 1px rgba(64, 243, 255, 0.38), 0 0 12px rgba(64, 243, 255, 0.22);
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.agc-chat__trigger svg {
    width: 26px;
    height: 26px;
    stroke: #40f3ff;
    fill: none;
}

.agc-chat__trigger:hover {
    box-shadow: 0 8px 18px rgba(2, 18, 9, 0.4), 0 0 0 1px rgba(64, 243, 255, 0.5), 0 0 14px rgba(64, 243, 255, 0.32);
}

.agc-chat__trigger:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.agc-chat__trigger-label {
    display: none;
}

.agc-chat__trigger-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #ff5a5a;
    border: 2px solid #0a1f2d;
}

body.has-cookie-banner .agc-chat__trigger {
    bottom: calc(204px + env(safe-area-inset-bottom, 0px));
}

body.has-footer-overlap .agc-chat__trigger {
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
}

.agc-chat_open .agc-chat__trigger {
    display: none;
}

/* ── Desktop launcher: replaces the floating WhatsApp button's slot with an
   oval "Glass Assistant" pill (WhatsApp itself is hidden on desktop via
   main.min.css). Mobile keeps the original circular trigger untouched. ── */
@media (min-width: 851px) {
    .agc-chat__trigger {
        right: 24px;
        bottom: calc(30px + env(safe-area-inset-bottom, 0px));
        width: auto;
        height: 56px;
        padding: 0 22px 0 18px;
        gap: 10px;
        border-radius: 999px;
    }

    .agc-chat__trigger-label {
        display: block;
        color: #fff;
        font-family: var(--font-secondary);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        white-space: nowrap;
    }

    body.has-cookie-banner .agc-chat__trigger {
        bottom: calc(136px + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Panel ─────────────────────────────────────────────────────────────── */
.agc-chat__panel {
    position: fixed;
    right: 24px;
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    z-index: 99981;
    width: min(400px, calc(100vw - 32px));
    max-height: min(640px, calc(100vh - 96px));
    display: flex;
    flex-direction: column;
    background: #0d2432;
    border-radius: 16px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(64, 243, 255, 0.18);
    overflow: hidden;
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.agc-chat_open .agc-chat__panel {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.agc-chat__panel_hidden {
    display: none;
}

.agc-chat__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 14px;
    background: linear-gradient(135deg, #123449 0%, #0b2434 100%);
    flex: 0 0 auto;
}

/* flex:1 fills whatever space isn't taken by Back/actions, replacing the old
   justify-content:space-between now that there can be a third (Back) child
   on the left — with Back hidden, this alone reproduces the old two-child
   space-between layout exactly (text grows to fill, actions pinned right),
   so the title still starts flush at the header's edge with no leftover gap. */
.agc-chat__header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.agc-chat__header-back {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: -8px 0 -8px -8px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #cfeef3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.agc-chat__header-back svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
}

.agc-chat__header-back:hover {
    background: rgba(255, 255, 255, 0.1);
}

.agc-chat__header-back:focus-visible {
    outline: 2px solid #fff;
    outline-offset: -2px;
    background: rgba(255, 255, 255, 0.1);
}

.agc-chat__header-back[hidden] {
    display: none;
}

.agc-chat__header-brand {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
}

.agc-chat__header-sub {
    font-size: 12px;
    color: #9fd6df;
}

.agc-chat__header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.agc-chat__header-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: #cfeef3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.agc-chat__header-btn:hover,
.agc-chat__header-btn:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

.agc-chat__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    -webkit-overflow-scrolling: touch;
}

.agc-chat__bubble {
    background: #123449;
    color: #eaf7fa;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 14px;
    line-height: 1.45;
    max-width: 92%;
}

.agc-chat__helper {
    font-size: 12px;
    color: #8fb9c2;
    margin-top: -4px;
}

.agc-chat__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agc-chat__option {
    text-align: left;
    background: #123449;
    border: 1px solid rgba(64, 243, 255, 0.25);
    color: #eaf7fa;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.agc-chat__option:hover,
.agc-chat__option:focus-visible {
    background: #174057;
    border-color: rgba(64, 243, 255, 0.55);
    outline: none;
}

.agc-chat__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.agc-chat__label {
    font-size: 12px;
    color: #9fd6df;
    font-weight: 600;
}

.agc-chat__input {
    background: #0b2434;
    border: 1px solid rgba(159, 214, 223, 0.3);
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    padding: 11px 12px;
    min-height: 44px;
    width: 100%;
    box-sizing: border-box;
}

.agc-chat__input:focus-visible {
    outline: 2px solid #40f3ff;
    outline-offset: 1px;
}

.agc-chat__error {
    color: #ff9b9b;
    font-size: 12px;
}

.agc-chat__panel-group {
    border: 1px solid rgba(159, 214, 223, 0.25);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agc-chat__panel-group-row {
    display: flex;
    gap: 8px;
}

.agc-chat__panel-group-row .agc-chat__field {
    flex: 1 1 0;
    min-width: 0;
}

.agc-chat__link-btn {
    background: none;
    border: 0;
    color: #40f3ff;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 0;
    text-align: left;
}

.agc-chat__photos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
    gap: 8px;
}

.agc-chat__photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    background: #0b2434;
    border: 1px solid rgba(159, 214, 223, 0.25);
}

.agc-chat__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.agc-chat__photo-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 4px;
    text-align: center;
    color: #9fd6df;
}

.agc-chat__photo-fallback-icon {
    flex: 0 0 auto;
}

.agc-chat__photo-fallback-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 9px;
    color: #cfeef2;
}

.agc-chat__photo-fallback-status {
    font-size: 9px;
    color: #40f3ff;
}

.agc-chat__photo-progress {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 36, 52, 0.7);
    color: #fff;
    font-size: 11px;
}

.agc-chat__photo-error {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    background: rgba(64, 10, 10, 0.7);
    color: #fff;
    font-size: 10px;
    padding: 4px;
    text-align: center;
}

.agc-chat__photo-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}

.agc-chat__photo-add {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed rgba(159, 214, 223, 0.4);
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    cursor: pointer;
    color: #9fd6df;
    font-size: 22px;
    min-height: 44px;
}

/* Descriptive hero copy is mobile-only (see the media query below) — hidden
   at every other width so the tile renders exactly as it always has
   (a bare "+") on desktop regardless of which modifier class is present. */
.agc-chat__photo-add-label,
.agc-chat__photo-add-sub {
    display: none;
}

.agc-chat__footer {
    flex: 0 0 auto;
    padding: 14px 16px 16px;
    border-top: 1px solid rgba(159, 214, 223, 0.12);
    display: flex;
    justify-content: center;
    align-items: center;
}

.agc-chat__primary-btn {
    flex: 0 0 auto;
    background: var(--color-accent);
    color: #000;
    font-weight: 700;
    border: 0;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    cursor: pointer;
    min-height: 44px;
}

.agc-chat__primary-btn:hover {
    box-shadow: 0 0 16px rgba(0, 247, 255, 0.35);
}

.agc-chat__primary-btn:active {
    transform: translateY(1px);
}

.agc-chat__primary-btn:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

.agc-chat__primary-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.agc-chat__menu-btn {
    background: none;
    border: 0;
    color: #9fd6df;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    min-height: 44px;
    border-radius: 8px;
}

.agc-chat__menu-btn-icon {
    font-size: 15px;
    line-height: 1;
}

.agc-chat__menu-btn:hover,
.agc-chat__menu-btn:focus-visible {
    color: #eaf7fa;
    background: rgba(159, 214, 223, 0.08);
    outline: none;
}

.agc-chat__menu-btn:focus-visible {
    outline: 2px solid #9fd6df;
    outline-offset: 1px;
    background: transparent;
}

/* ── Mobile: near-full-screen sheet ───────────────────────────────────── */
@media (max-width: 640px) {
  .agc-chat__panel {
    right: 0;
    left: 0;
    bottom: 0;
    top: env(safe-area-inset-top, 0px);
    width: 100%;
    max-height: none;
    height: auto;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Primary CTA into the bottom thumb zone. .agc-chat__body is the
     scrolling flex column every screen's content (including the button)
     renders into; margin-top:auto makes the button absorb all the leftover
     space above itself, so it settles right above the footer when content
     is short, and simply follows the content in normal (scrollable) flow
     when content is tall enough to fill the screen on its own — no fixed
     positioning, no JS, no risk of covering content or hiding below the
     footer. Height/flex-grow already fixed (flex: 0 0 auto, base rule). */
  .agc-chat__primary-btn {
    margin-top: auto;
  }

  /* ── Photo upload — empty state: one large centered hero card ────────── */
  /* Vertically centers the card in the free space between the helper text
     above and the primary CTA below, without touching .agc-chat__body's own
     justify-content (which would risk clipping the top of the content on a
     short viewport — the classic flex-center + overflow:auto bug). Instead,
     both this element and .agc-chat__primary-btn (margin-top:auto, above)
     are flex siblings inside the same column with their own margin-top:auto
     — flexbox splits whatever free space actually exists evenly between the
     two auto margins, so the card settles in the middle of the gap. When
     content is tall enough to fill/exceed the viewport, free space is zero,
     both auto margins collapse to 0, and normal top-aligned scrollable flow
     takes over automatically — no separate short-viewport rule needed.
     Only applies to the empty (0-photo) state; the has-photos grid has no
     such margin and stays top-aligned as before. */
  .agc-chat__photos_empty {
    display: flex;
    justify-content: center;
    margin-top: auto;
    padding: 4px 0;
  }

  .agc-chat__photo-add_hero {
    width: 160px;
    height: 160px;
    flex-direction: column;
    gap: 8px;
    border-width: 2px;
    border-color: rgba(64, 243, 255, 0.5);
    background: rgba(64, 243, 255, 0.05);
    border-radius: 16px;
  }

  .agc-chat__photo-add_hero .agc-chat__photo-add-icon {
    font-size: 34px;
    line-height: 1;
  }

  .agc-chat__photo-add_hero .agc-chat__photo-add-label,
  .agc-chat__photo-add_hero .agc-chat__photo-add-sub {
    display: block;
  }

  .agc-chat__photo-add_hero .agc-chat__photo-add-label {
    font-size: 14px;
    font-weight: 700;
    color: #eaf7fa;
  }

  .agc-chat__photo-add_hero .agc-chat__photo-add-sub {
    font-size: 11px;
    font-weight: 400;
    color: #8fb9c2;
    padding: 0 14px;
    text-align: center;
    line-height: 1.3;
  }

  /* ── Photo upload — has-photos state: emphasize the add-more tile ────── */
  .agc-chat__photo-add_active {
    border-width: 2px;
    border-color: rgba(64, 243, 255, 0.65);
    background: rgba(64, 243, 255, 0.08);
    box-shadow: 0 0 0 1px rgba(64, 243, 255, 0.2);
  }

  .agc-chat__photo-add_active .agc-chat__photo-add-icon {
    font-size: 26px;
  }
}

/* ── Reduced motion ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .agc-chat__trigger,
  .agc-chat__panel {
    transition: none;
  }
}