/* =========================================================
   AMM website chat - shared by every club website.
   Self-contained: every rule is scoped under .sc-root.
   The accent colour comes from each club's chat settings
   (set on .sc-root by amm-chat.js); these are the defaults.
   ========================================================= */
.sc-root {
    --sc-accent: #d4001a;
    --sc-accent-dark: #a30014;
    --sc-accent-ink: #ffffff;
    --sc-head: #111111;
    --sc-head-ink: #ffffff;
    --sc-bg: #ffffff;
    --sc-ink: #1b1b1f;
    --sc-muted: #6b6b75;
    --sc-bot: #f1f1f4;
    --sc-line: #e3e3e8;
    --sc-radius: 16px;
    --sc-shadow: 0 18px 50px rgba(0, 0, 0, .25);
    font-family: inherit;
    font-size: 15px;
    line-height: 1.45;
    color: var(--sc-ink);
}
.sc-root *, .sc-root *::before, .sc-root *::after { box-sizing: border-box; }

/* ---------- launcher ---------- */
.sc-launcher {
    position: fixed; right: 20px; bottom: 20px; z-index: 99998;
    width: 62px; height: 62px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--sc-accent); color: var(--sc-accent-ink);
    box-shadow: var(--sc-shadow);
    display: flex; align-items: center; justify-content: center;
    transition: transform .2s ease, background .2s ease;
}
.sc-launcher:hover { background: var(--sc-accent-dark); transform: scale(1.06); }
.sc-launcher:focus-visible { outline: 3px solid var(--sc-head); outline-offset: 3px; }
.sc-launcher svg { width: 28px; height: 28px; fill: currentColor; }
.sc-launcher .sc-ico-close { display: none; }
.sc-root.sc-open .sc-launcher .sc-ico-chat { display: none; }
.sc-root.sc-open .sc-launcher .sc-ico-close { display: block; }

.sc-badge {
    position: absolute; top: -2px; right: -2px; width: 18px; height: 18px;
    border-radius: 50%; background: #ffcc00; color: #111; font-size: 11px;
    font-weight: 700; display: flex; align-items: center; justify-content: center;
    border: 2px solid #fff;
}
.sc-root.sc-open .sc-badge, .sc-badge[hidden] { display: none; }

/* ---------- teaser bubble ---------- */
.sc-teaser {
    position: fixed; right: 92px; bottom: 30px; z-index: 99998;
    max-width: 240px; padding: 12px 34px 12px 14px;
    background: var(--sc-bg); color: var(--sc-ink);
    border-radius: 14px 14px 4px 14px; box-shadow: var(--sc-shadow);
    font-size: 14px; cursor: pointer;
    animation: sc-pop .25s ease-out;
}
.sc-teaser strong { display: block; color: var(--sc-accent); }
.sc-teaser-x {
    position: absolute; top: 6px; right: 8px; border: 0; background: none;
    font-size: 18px; line-height: 1; color: var(--sc-muted); cursor: pointer;
}
.sc-root.sc-open .sc-teaser, .sc-teaser[hidden] { display: none; }

/* ---------- panel ---------- */
.sc-panel {
    position: fixed; right: 20px; bottom: 94px; z-index: 99999;
    width: 380px; height: 600px; max-height: calc(100vh - 120px);
    display: none; flex-direction: column; overflow: hidden;
    background: var(--sc-bg); border-radius: var(--sc-radius);
    box-shadow: var(--sc-shadow);
}
.sc-root.sc-open .sc-panel { display: flex; animation: sc-pop .22s ease-out; }

.sc-head {
    display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px;
    background: var(--sc-head); color: var(--sc-head-ink);
    border-bottom: 4px solid var(--sc-accent);
}
.sc-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex: 0 0 40px;
    background: #fff; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.sc-avatar img { width: 34px; height: 34px; object-fit: contain; }
.sc-head-text { flex: 1; min-width: 0; }
.sc-title { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-sub { font-size: 12px; opacity: .8; display: flex; align-items: center; gap: 6px; }
.sc-sub::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2fd36b; }
.sc-icon-btn {
    border: 0; background: rgba(255, 255, 255, .1); color: inherit; cursor: pointer;
    width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
}
.sc-icon-btn:hover { background: rgba(255, 255, 255, .22); }
.sc-icon-btn svg { width: 16px; height: 16px; fill: currentColor; }

/* ---------- messages ---------- */
.sc-log {
    flex: 1; overflow-y: auto; padding: 16px 14px 8px;
    display: flex; flex-direction: column; gap: 8px;
    scroll-behavior: smooth; background: var(--sc-bg);
}
.sc-msg {
    max-width: 85%; padding: 10px 13px; border-radius: 14px;
    word-wrap: break-word; white-space: pre-line; animation: sc-in .2s ease-out;
}
.sc-msg a { color: var(--sc-accent); font-weight: 600; }
.sc-bot { align-self: flex-start; background: var(--sc-bot); border-bottom-left-radius: 4px; }
.sc-user {
    align-self: flex-end; background: var(--sc-accent); color: var(--sc-accent-ink);
    border-bottom-right-radius: 4px;
}
.sc-card {
    align-self: flex-start; max-width: 92%; padding: 12px 14px; border-radius: 12px;
    border: 1px solid var(--sc-line); border-left: 4px solid var(--sc-accent);
    background: var(--sc-bg); animation: sc-in .2s ease-out; white-space: normal;
}
.sc-card h4 { margin: 0 0 2px; font-size: 15px; }
.sc-card .sc-tag {
    display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--sc-accent); margin-bottom: 4px;
}
.sc-card p { margin: 4px 0 0; font-size: 14px; color: var(--sc-ink); }
.sc-card a { color: var(--sc-accent); font-weight: 600; font-size: 13px; }
.sc-card-img { display: block; width: calc(100% + 28px); max-width: none; margin: -12px -14px 10px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.sc-card { overflow: hidden; }
.sc-log > * { flex-shrink: 0; } /* stop cards being squashed in the scrolling list */
.sc-avatar-text { font-weight: 800; font-size: 18px; color: var(--sc-head); }

.sc-summary { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.sc-summary td { padding: 3px 0; vertical-align: top; }
.sc-summary td:first-child { color: var(--sc-muted); padding-right: 10px; white-space: nowrap; }

.sc-typing { align-self: flex-start; background: var(--sc-bot); padding: 12px 14px; border-radius: 14px; display: flex; gap: 4px; }
.sc-typing span { width: 7px; height: 7px; border-radius: 50%; background: #9a9aa5; animation: sc-dot 1s infinite ease-in-out; }
.sc-typing span:nth-child(2) { animation-delay: .15s; }
.sc-typing span:nth-child(3) { animation-delay: .3s; }

/* ---------- quick replies ---------- */
.sc-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 10px; }
.sc-chips:empty { display: none; }
.sc-chip {
    border: 1.5px solid var(--sc-accent); background: var(--sc-bg); color: var(--sc-accent);
    border-radius: 999px; padding: 7px 13px; font: inherit; font-size: 13.5px; font-weight: 600;
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.sc-chip:hover, .sc-chip:focus-visible { background: var(--sc-accent); color: var(--sc-accent-ink); outline: none; }
.sc-chip.sc-chip-muted { border-color: var(--sc-line); color: var(--sc-muted); }
.sc-chip.sc-chip-muted:hover { background: var(--sc-bot); color: var(--sc-ink); }

/* ---------- input ---------- */
.sc-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--sc-line); background: var(--sc-bg); }
.sc-input {
    flex: 1; min-width: 0; border: 1.5px solid var(--sc-line); border-radius: 10px;
    padding: 10px 12px; font: inherit; font-size: 15px; color: var(--sc-ink); background: var(--sc-bg);
}
.sc-input:focus { outline: none; border-color: var(--sc-accent); }
.sc-input:disabled { background: #f7f7f9; cursor: not-allowed; }
.sc-send {
    border: 0; border-radius: 10px; width: 44px; flex: 0 0 44px; cursor: pointer;
    background: var(--sc-accent); color: var(--sc-accent-ink);
    display: flex; align-items: center; justify-content: center;
}
.sc-send:disabled { opacity: .4; cursor: not-allowed; }
.sc-send svg { width: 18px; height: 18px; fill: currentColor; }
.sc-foot { font-size: 11px; color: var(--sc-muted); text-align: center; padding: 0 12px 8px; background: var(--sc-bg); }
.sc-foot a { color: var(--sc-muted); }
.sc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* ---------- animation ---------- */
@keyframes sc-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes sc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sc-dot { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

/* ---------- mobile ---------- */
@media (max-width: 480px) {
    .sc-panel { right: 0; bottom: 0; width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
    .sc-root.sc-open .sc-launcher { display: none; }
    .sc-teaser { right: 88px; bottom: 26px; max-width: 200px; }
    .sc-input { font-size: 16px; } /* stops iOS zoom */
}
@media (prefers-reduced-motion: reduce) {
    .sc-root * { animation: none !important; transition: none !important; }
}