/* ============================================================
 * Gymnasia Parent Line — floating widget
 * Design language matches the room-booking bot (#1a6b4a green,
 * Open Sans, mint/cyan message bubbles, rounded pills).
 * ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

/* Authoritative hidden override.
 *
 * Several rules in this file use `display: flex !important` (needed to survive
 * Astra's aggressive button reset). That would normally override the browser's
 * default handling of the `hidden` attribute, breaking every state toggle in
 * the widget's JS. This one line — scoped to the widget so we don't affect the
 * rest of the site — makes `hidden` win over all `display: … !important` below.
 */
#gpl-widget-root [hidden] { display: none !important; }

#gpl-widget-root {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2147483000; /* effectively top of the stack — beats sliders, modals, cookie bars */
    font-family: 'Open Sans', system-ui, -apple-system, "Segoe UI", "Heebo", sans-serif;
    font-size: 14px;
    line-height: 1.5;
    direction: rtl;
}
#gpl-widget-root, #gpl-widget-root * {
    box-sizing: border-box;
    font-family: 'Open Sans', system-ui, -apple-system, "Segoe UI", "Heebo", sans-serif;
}

/* CRITICAL: force the HTML `hidden` attribute to work everywhere inside the widget.
   Rules like `.gpl-state-panel { display: flex }` would otherwise beat the UA
   `[hidden] { display: none }` due to CSS specificity, causing all panels to
   stack visibly on top of each other. */
#gpl-widget-root [hidden] { display: none !important; }

/* ---------- Bubble (closed state) ---------- */
#gpl-bubble {
    width: 62px !important;
    height: 62px !important;
    border-radius: 50% !important;
    background: #1a6b4a !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
    box-shadow: 0 6px 18px rgba(26, 107, 74, 0.35), 0 2px 6px rgba(0,0,0,0.12) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease !important;
    outline: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}
#gpl-bubble:hover,
#gpl-bubble:focus,
#gpl-bubble:focus-visible {
    background: #0f5238 !important;
    transform: scale(1.05);
    box-shadow: 0 8px 22px rgba(26, 107, 74, 0.5), 0 3px 8px rgba(0,0,0,0.15) !important;
}
#gpl-bubble svg {
    width: 28px;
    height: 28px;
    display: block;
}
#gpl-bubble-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 22px;
    height: 22px;
    background: #dc2626;
    color: #fff;
    border-radius: 11px;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.4);
    border: 2px solid #fff;
    animation: gplBadgePulse 1.6s ease-in-out infinite;
}
@keyframes gplBadgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}

/* ---------- Widget (open state) ---------- */
#gpl-widget {
    position: absolute;
    bottom: 76px;
    right: 0;
    /* Hard width lock — don't let Astra, a long word, or a wide <select>
     * push us wider. iOS zoom on inputs is neutralised via font-size below. */
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
    max-height: min(620px, calc(100vh - 110px));
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 24px 48px rgba(20, 80, 60, 0.22), 0 8px 20px rgba(0,0,0,0.1);
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
    animation: gplWidgetOpen 0.24s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: bottom right;
}
#gpl-widget-body {
    overflow-x: hidden !important;
}
@keyframes gplWidgetOpen {
    from { opacity: 0; transform: translateY(16px) scale(0.94); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Header ---------- */
#gpl-widget-header {
    background: #1a6b4a;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    flex-shrink: 0;
}
.gpl-logo-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    overflow: hidden;
    flex-shrink: 0;
}
.gpl-logo-circle img { width: 100%; height: 100%; object-fit: contain; }
.gpl-logo-circle svg { width: 22px; height: 22px; }
.gpl-widget-title { flex: 1; min-width: 0; }
.gpl-widget-name {
    font-size: 15.5px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.2;
}
.gpl-widget-status {
    font-size: 12px;
    color: #c8e6c9;
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.gpl-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34c577;
    box-shadow: 0 0 0 2px rgba(52,197,119,0.3);
    display: inline-block;
}
.gpl-widget-status.gpl-status-offline .gpl-status-dot {
    background: #9ca3af;
    box-shadow: 0 0 0 2px rgba(156,163,175,0.3);
}
.gpl-widget-close {
    background: rgba(255,255,255,0.15) !important;
    border: none !important;
    color: #ffffff !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 22px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    outline: none !important;
    flex-shrink: 0;
}
.gpl-widget-close:hover,
.gpl-widget-close:focus,
.gpl-widget-close:focus-visible {
    background: rgba(255,255,255,0.28) !important;
    color: #ffffff !important;
}

/* ---------- Body / state panels ---------- */
#gpl-widget-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    min-height: 0;
}
.gpl-state-panel {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* Loading */
#gpl-widget-loading {
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #7a8a80;
    font-size: 14px;
    gap: 14px;
}
.gpl-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e0f0e8;
    border-top-color: #1a6b4a;
    border-radius: 50%;
    animation: gplSpin 0.9s linear infinite;
}
@keyframes gplSpin {
    to { transform: rotate(360deg); }
}

/* ---------- Form panel ---------- */
.gpl-form-panel {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    background: #ffffff;
    display: block;
}
.gpl-form-panel .gpl-field { margin-bottom: 13px; max-width: 100%; }
.gpl-form-panel label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 13px;
    color: #0f3a28;
}
.gpl-form-panel input[type="text"],
.gpl-form-panel input[type="tel"],
.gpl-form-panel select,
.gpl-form-panel textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* neutralise the default input `size` attribute */
    padding: 10px 12px;
    /* 16px is the magic minimum — anything smaller triggers iOS Safari to zoom
     * in on the input, which visually enlarges the widget and creates the
     * horizontal scroll the user was seeing. */
    font-size: 16px !important;
    border: 1px solid #d4dcd9;
    border-radius: 10px;
    background: #ffffff;
    color: #0f3a28;
    font-family: inherit;
    outline: none;
    transition: border-color 0.18s;
    box-sizing: border-box;
}
.gpl-form-panel textarea { resize: none; min-height: 60px; } /* no vertical resize handle → can't push width */
.gpl-form-panel input:focus,
.gpl-form-panel select:focus,
.gpl-form-panel textarea:focus { border-color: #1a6b4a; }
.gpl-otp-row { display: flex; gap: 8px; min-width: 0; }
.gpl-otp-row input { flex: 1 1 0; min-width: 0; }
.gpl-otp-row input { flex: 1; }
.gpl-btn-secondary {
    padding: 10px 16px !important;
    background: #f5fbf8 !important;
    color: #1a6b4a !important;
    border: 1px solid #1a6b4a !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}
.gpl-btn-secondary:hover,
.gpl-btn-secondary:focus,
.gpl-btn-secondary:focus-visible {
    background: #e1f0ea !important;
    color: #1a6b4a !important;
}
#gpl-form-submit,
#gpl-form-submit:focus,
#gpl-form-submit:active,
#gpl-form-submit:focus-visible {
    width: 100% !important;
    padding: 12px !important;
    background: #1a6b4a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    outline: none !important;
    box-shadow: 0 3px 10px rgba(26, 107, 74, 0.3) !important;
    transition: background 0.18s !important;
    margin-top: 4px;
}
#gpl-form-submit:hover {
    background: #0f5238 !important;
    color: #ffffff !important;
}
#gpl-form-submit:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Notices */
.gpl-notice {
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.4;
}
.gpl-notice-warn  { background: #fef3c7; color: #78350f; }
.gpl-notice-error { background: #fee2e2; color: #7f1d1d; margin-top: 10px; margin-bottom: 0; }

/* ---------- Chat panel ---------- */
.gpl-chat-panel { background: #fafafa; }
#gpl-messages {
    flex: 1;
    overflow-y: auto;
    padding: 18px 14px;
    background: #fafafa;
    scroll-behavior: smooth;
}
#gpl-messages::-webkit-scrollbar { width: 6px; }
#gpl-messages::-webkit-scrollbar-thumb { background: #cfd8d4; border-radius: 3px; }

.gpl-msg { margin: 8px 0; display: flex; flex-direction: column; }
.gpl-msg-body {
    display: inline-block;
    max-width: 82%;
    padding: 10px 14px;
    border-radius: 16px;
    word-break: break-word;
    line-height: 1.5;
    font-size: 14px;
    font-weight: 500;
    white-space: pre-wrap;
}
.gpl-msg-body a {
    color: #0f5238;
    text-decoration: underline;
    word-break: break-all;
    font-weight: 600;
}
.gpl-msg-body a:hover { color: #1a6b4a; }
.gpl-msg-secretary .gpl-msg-body a,
.gpl-msg-system .gpl-msg-body a { color: #0d3b3f; }
.gpl-msg-time {
    font-size: 10.5px;
    color: #98a29c;
    margin-top: 3px;
    padding: 0 4px;
}

/* Parent (self) — green bubble, aligned left (visually near send button in RTL) */
.gpl-msg-parent { align-items: flex-start; }
.gpl-msg-parent .gpl-msg-body {
    background: #c8e6c9;
    color: #1c3a1f;
    border-bottom-left-radius: 4px;
}
.gpl-msg-parent .gpl-msg-time { text-align: left; }

/* Secretary (them) — cyan bubble, aligned right */
.gpl-msg-secretary { align-items: flex-end; }
.gpl-msg-secretary .gpl-msg-body {
    background: #e0f7fa;
    color: #0d3b3f;
    border-bottom-right-radius: 4px;
}
.gpl-msg-secretary .gpl-msg-time { text-align: right; }

/* System — centered, muted, small */
.gpl-msg-system { align-items: center; }
.gpl-msg-system .gpl-msg-body {
    background: #eef2f1;
    color: #4b5563;
    font-size: 12.5px;
    font-weight: 500;
    padding: 6px 12px;
    border-radius: 10px;
    max-width: 90%;
    text-align: center;
}
.gpl-msg-system .gpl-msg-time { display: none; }

/* Chat input row */
.gpl-chat-input-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 14px;
    background: #ffffff;
    border-top: 1px solid #eef2f1;
    flex-shrink: 0;
}
#gpl-chat-input {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid #d4dcd9;
    border-radius: 22px;
    padding: 10px 16px;
    font-size: 16px !important;
    background: #f7f9f8;
    outline: none;
    resize: none;
    line-height: 1.4;
    font-family: inherit;
    color: #0f3a28;
    min-height: 42px;
    max-height: 120px;
    transition: border-color 0.18s;
}
#gpl-chat-input:focus { border-color: #1a6b4a; }
#gpl-chat-send,
#gpl-chat-send:focus,
#gpl-chat-send:active,
#gpl-chat-send:focus-visible {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #1a6b4a !important;
    border: none !important;
    cursor: pointer !important;
    color: #ffffff !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 10px rgba(26, 107, 74, 0.3) !important;
    transition: all 0.18s !important;
    outline: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1 !important;
}
#gpl-chat-send:hover {
    background: #0f5238 !important;
    color: #ffffff !important;
}
#gpl-chat-send svg,
#gpl-chat-send:focus svg,
#gpl-chat-send:active svg { fill: #ffffff !important; width: 20px; height: 20px; }
#gpl-chat-send svg path,
#gpl-chat-send:focus svg path,
#gpl-chat-send:active svg path { fill: #ffffff !important; }

/* Ended actions row (below chat when conversation closes) */
#gpl-chat-ended-actions {
    padding: 14px;
    background: #ffffff;
    border-top: 1px solid #eef2f1;
    text-align: center;
    flex-shrink: 0;
}
#gpl-start-new,
#gpl-start-new:focus,
#gpl-start-new:active,
#gpl-start-new:focus-visible {
    padding: 10px 22px !important;
    background: #1a6b4a !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.3 !important;
    outline: none !important;
    box-shadow: 0 3px 10px rgba(26, 107, 74, 0.3) !important;
    transition: background 0.18s !important;
}
#gpl-start-new:hover {
    background: #0f5238 !important;
    color: #ffffff !important;
}

/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    #gpl-widget-root { bottom: 12px; right: 12px; left: 12px; }
    #gpl-bubble { position: fixed !important; bottom: 12px; right: 12px; left: auto; }
    #gpl-widget {
        position: fixed;
        bottom: 12px;
        right: 12px;
        left: 12px;
        /* Override the desktop hard-lock: on phones we want widget to fill the
         * space between the 12px gutters. Explicit calc() rather than `auto`
         * so we still have a definite width value that inputs can size to. */
        width: calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        max-height: calc(100vh - 24px);
        border-radius: 18px;
    }
    #gpl-widget-header { padding: 14px 16px; }
    .gpl-logo-circle { width: 38px; height: 38px; }
    .gpl-widget-name { font-size: 15px; }
    .gpl-form-panel { padding: 16px; }
    .gpl-chat-input-row { padding: 12px; }
    #gpl-messages { padding: 14px 12px; }
}