/*
 * The floating help bubble — see app/Views/components/help-bubble.php.
 *
 * Fixed to the bottom corner on every page that has a tenant behind it. Sits
 * above page content but below modals and flash messages: it is the thing a
 * reader reaches for when something else has gone wrong, so it must never be
 * the thing covering the message that explains it.
 */
.help-bubble {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}

.help-bubble-ball {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 9999px;
    background: #16a34a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .25);
    transition: transform .15s ease, background-color .15s ease;
}
.help-bubble-ball:hover { background: #15803d; transform: translateY(-1px); }
.help-bubble-ball svg { width: 1.6rem; height: 1.6rem; }

.help-bubble-card {
    width: 17rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, .25);
    padding: .875rem;
}

.help-bubble-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .5rem;
}
.help-bubble-title { font-size: .875rem; font-weight: 600; color: #1f2937; }
.help-bubble-close { font-size: 1.25rem; line-height: 1; color: #9ca3af; padding: 0 .25rem; }
.help-bubble-close:hover { color: #4b5563; }

.help-bubble-note { font-size: .75rem; color: #6b7280; margin-bottom: .625rem; }

.help-bubble-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .55rem .75rem;
    border-radius: .5rem;
    background: #16a34a;
    color: #fff;
    font-size: .875rem;
    font-weight: 500;
}
.help-bubble-link:hover { background: #15803d; }
.help-bubble-link svg { width: 1.1rem; height: 1.1rem; }

.help-bubble-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    margin-top: .5rem;
    padding: .5rem .75rem;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    background: #f9fafb;
    text-align: left;
}
.help-bubble-copy:hover { background: #f3f4f6; }
.help-bubble-copy.is-copied { border-color: #16a34a; }
.help-bubble-number { font-size: .875rem; color: #1f2937; font-weight: 500; }
.help-bubble-copy-label { font-size: .7rem; color: #6b7280; text-transform: uppercase; letter-spacing: .03em; }
.help-bubble-copy.is-copied .help-bubble-copy-label { color: #16a34a; }

/* A phone has less room, and the card should not reach across the whole screen. */
@media (max-width: 420px) {
    .help-bubble-card { width: calc(100vw - 2rem); }
}

/* Dark admin pages. */
.dark .help-bubble-card { background: #1e293b; border-color: #334155; }
.dark .help-bubble-title { color: #e2e8f0; }
.dark .help-bubble-note { color: #94a3b8; }
.dark .help-bubble-copy { background: #0f172a; border-color: #334155; }
.dark .help-bubble-number { color: #e2e8f0; }

@media print { .help-bubble { display: none !important; } }