/**
 * TitleThrive Quick Tools Widget
 * Floating Action Button (FAB) + panel styles
 * @since v0.35.0
 * @since v0.36.0 — Left position, anchored panel, tooltip, descriptions, tabs, animation, pulse
 *
 * CSS variables (overridable via Custom CSS):
 *   --tt-widget-z: 999998       z-index layer
 *   --tt-widget-font: inherit   font family
 *   --tt-widget-color: #0073aa  brand color (set via inline style from settings)
 *   --tt-widget-offset-right    used for both left and right horizontal offset
 */

/* ── Root container ───────────────────────────────────────── */

.tt-quick-widget {
    position: fixed;
    bottom: calc(var(--tt-widget-offset-bottom, 24px) + env(safe-area-inset-bottom, 0px));
    right: calc(var(--tt-widget-offset-right, 16px) + env(safe-area-inset-right, 0px));
    z-index: var(--tt-widget-z, 999998);
    font-family: var(--tt-widget-font, inherit);
    font-size: 15px;
    line-height: 1.4;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.tt-quick-widget *,
.tt-quick-widget *::before,
.tt-quick-widget *::after {
    box-sizing: border-box;
}

/* ── Screen-reader only ──────────────────────────────────── */

.tt-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* v0.36.0: Left-side position variant */
.tt-quick-widget--bottom-left {
    right: auto;
    left: calc(var(--tt-widget-offset-right, 16px) + env(safe-area-inset-left, 0px));
}

/* ── FAB button ───────────────────────────────────────────── */

.tt-quick-widget__fab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background-color: var(--tt-widget-color, #0073aa);
    color: #fff;
    cursor: pointer;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

.tt-quick-widget__fab:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
    transform: scale(1.05);
}

.tt-quick-widget__fab:active {
    transform: scale(0.97);
}

/* Focus styles: :focus-visible for keyboard, :focus fallback */
.tt-quick-widget__fab:focus-visible {
    outline: 2px solid var(--tt-widget-color, #0073aa);
    outline-offset: 3px;
}

.tt-quick-widget__fab:focus:not(:focus-visible) {
    outline: none;
}

/* Icon toggle: open icon visible by default, close icon hidden */
.tt-quick-widget__icon-open {
    transition: opacity 0.15s ease, transform 0.2s ease;
}

.tt-quick-widget__icon-close {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg);
    transition: opacity 0.15s ease, transform 0.2s ease;
}

/* When panel is open (aria-expanded="true"), swap icons */
.tt-quick-widget__fab[aria-expanded="true"] .tt-quick-widget__icon-open {
    opacity: 0;
    transform: rotate(90deg);
}

.tt-quick-widget__fab[aria-expanded="true"] .tt-quick-widget__icon-close {
    opacity: 1;
    transform: rotate(0deg);
}

/* ── Panel ────────────────────────────────────────────────── */

.tt-quick-widget__panel {
    position: absolute;
    bottom: calc(100% + 12px);
    right: 0;
    width: min(300px, calc(100vw - 32px));
    max-height: min(480px, calc(100vh - 120px));
    overflow-y: auto;
    background-color: #fff;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border-top: 3px solid var(--tt-widget-color, #0073aa);
    padding: 0;
    transform-origin: bottom right;
    /* v0.36.0: CSS-driven visibility (replaces [hidden] toggling) */
    opacity: 0;
    transform: translateY(8px) scale(0.96);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, width 0.25s ease;
}

/* v0.36.0: Panel open state — CSS-driven via class toggle */
.tt-quick-widget__panel--open {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
    pointer-events: auto;
}

/* v0.36.0: Left-side panel alignment */
.tt-quick-widget--bottom-left .tt-quick-widget__panel {
    right: auto;
    left: 0;
    transform-origin: bottom left;
}

/* v0.36.0: Anchored panel style — slides up from FAB corner */
.tt-quick-widget--anchored .tt-quick-widget__panel {
    bottom: 0;
    border-radius: 12px 12px 0 0;
    width: min(340px, calc(100vw - 32px));
    max-height: min(480px, calc(100vh - 80px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    /* Solid slide — no fade, panel starts fully below the FAB */
    opacity: 1;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1), width 0.25s ease;
}

.tt-quick-widget--anchored .tt-quick-widget__panel--open {
    transform: translateY(0);
}

/* v0.37.0: Panel expanded state — inline tool hosting.
   max-height lets short content (login form) shrink to fit while tall
   content (calculators) caps and scrolls internally via tool-body. */
.tt-quick-widget__panel--expanded {
    width: min(420px, calc(100vw - 32px));
    max-height: min(80vh, calc(100vh - 80px));
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
}
/* Hide panel title in tool-detail view — back arrow + tool name is sufficient */
.tt-quick-widget__panel--expanded > .tt-quick-widget__header {
    display: none;
}

.tt-quick-widget--anchored .tt-quick-widget__panel--expanded {
    width: min(420px, calc(100vw - 32px));
    max-height: min(85vh, calc(100vh - 60px));
}

/* ── Chooser region ──────────────────────────────────────── */

.tt-quick-widget__chooser[hidden] { display: none; }

/* ── Panel header ─────────────────────────────────────────── */

.tt-quick-widget__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    border-bottom: 1px solid #f0f0f1;
    letter-spacing: -0.01em;
}

/* v0.36.0: Panel close button (anchored mode) */
.tt-quick-widget__panel-close {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #50575e;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
    transition: background-color 0.12s ease;
}

.tt-quick-widget__panel-close:hover {
    background-color: #f0f0f1;
}

.tt-quick-widget__panel-close:focus-visible {
    outline: 2px solid var(--tt-widget-color, #0073aa);
    outline-offset: -2px;
}

.tt-quick-widget__panel-close:focus:not(:focus-visible) {
    outline: none;
}

/* Hide close button on desktop for non-anchored mode */
.tt-quick-widget__panel-close--mobile-only {
    display: none;
}

/* Backdrop (mobile only — CSS above controls visibility) */
.tt-quick-widget__backdrop {
    display: none;
}

/* ── Action links ─────────────────────────────────────────── */

.tt-quick-widget__actions {
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tt-quick-widget__action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    min-height: 48px;
    border-radius: 8px;
    text-decoration: none;
    color: #1d2327;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 0.12s ease;
    cursor: pointer;
}

.tt-quick-widget__action:hover {
    background-color: #f6f7f7;
    text-decoration: none;
    color: #1d2327;
}

.tt-quick-widget__action:active {
    background-color: #f0f0f1;
}

.tt-quick-widget__action:focus-visible {
    outline: 2px solid var(--tt-widget-color, #0073aa);
    outline-offset: -2px;
    border-radius: 8px;
}

.tt-quick-widget__action:focus:not(:focus-visible) {
    outline: none;
}

.tt-quick-widget__action svg {
    flex-shrink: 0;
    color: var(--tt-widget-color, #0073aa);
}

/* v0.36.0: Card layout with description text */
.tt-quick-widget__action-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.tt-quick-widget__action-text span {
    font-size: 14px;
    font-weight: 500;
}

.tt-quick-widget__action-desc {
    font-size: 12px;
    font-weight: 400;
    color: #787c82;
    line-height: 1.3;
}

.tt-quick-widget__action-chevron {
    flex-shrink: 0;
    color: #a7aaad;
    transition: transform 0.12s ease;
}

.tt-quick-widget__action:hover .tt-quick-widget__action-chevron {
    transform: translateX(2px);
}

/* ── Tooltip ─────────────────────────────────────────────── */

.tt-quick-widget__tooltip {
    position: absolute;
    bottom: calc(100% + 14px);
    right: 0;
    transform: translateY(4px);
    width: max-content;
    max-width: min(320px, calc(100vw - 40px));
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    padding: 12px 16px;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    pointer-events: none;
}

.tt-quick-widget__tooltip.tt-quick-widget__tooltip--visible {
    opacity: 1;
    transform: translateY(0);
    /* pointer-events stays none — tooltip is intentionally non-interactive.
       Dismissal works via document-level capture listener. */
}

.tt-quick-widget__tooltip[hidden] { display: none; }

.tt-quick-widget__tooltip p {
    margin: 0;
    font-size: 13px;
    line-height: 1.45;
    color: #1d2327;
}

/* Tail/caret pointing down toward FAB center */
.tt-quick-widget__tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 22px; /* FAB center (28px) minus half caret (6px) */
    width: 12px;
    height: 12px;
    background: #fff;
    transform: rotate(45deg);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.08);
}

/* Left-side: tooltip left-aligned, caret on left */
.tt-quick-widget--bottom-left .tt-quick-widget__tooltip {
    right: auto;
    left: 0;
}

.tt-quick-widget--bottom-left .tt-quick-widget__tooltip::after {
    right: auto;
    left: 22px;
}

/* Anchored mode: tooltip above the panel area */
.tt-quick-widget--anchored .tt-quick-widget__tooltip {
    bottom: calc(100% + 12px);
}

/* ── Disclaimer ───────────────────────────────────────────── */

.tt-quick-widget__disclaimer {
    padding: 8px 20px 12px;
    margin: 0;
    font-size: 11px;
    line-height: 1.45;
    color: #787c82;
    border-top: 1px solid #f0f0f1;
}

/* ── Powered by ───────────────────────────────────────────── */

.tt-quick-widget__powered-by {
    padding: 6px 20px 10px;
    margin: 0;
    font-size: 10px;
    color: #a7aaad;
    text-align: center;
    letter-spacing: 0.02em;
}

.tt-quick-widget__powered-by a {
    color: inherit;
    text-decoration: none;
}

.tt-quick-widget__powered-by a:hover,
.tt-quick-widget__powered-by a:focus-visible {
    text-decoration: underline;
}

/* ── Hide on mobile ───────────────────────────────────────── */

@media (max-width: 782px) {
    .tt-quick-widget--hide-mobile {
        display: none;
    }
}

/* ── Mobile: near-full-screen panel ──────────────────────── */

@media (max-width: 640px) {
    .tt-quick-widget__panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 90dvh;
        border-radius: 16px 16px 0 0;
        transform-origin: bottom center;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        transform: translateY(100%);
        opacity: 1;
        transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        z-index: var(--tt-widget-z, 999998); /* Above backdrop (999997) */
    }

    .tt-quick-widget__panel--open {
        transform: translateY(0);
    }

    .tt-quick-widget__panel--expanded {
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }

    /* Left-side: override left alignment on mobile */
    .tt-quick-widget--bottom-left .tt-quick-widget__panel {
        left: 0;
        right: 0;
    }

    /* Anchored: override anchored positioning on mobile */
    .tt-quick-widget--anchored .tt-quick-widget__panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: 16px 16px 0 0;
    }

    .tt-quick-widget--anchored .tt-quick-widget__panel--expanded {
        height: 100dvh;
        border-radius: 0;
    }

    /* Always show close button on mobile (including mobile-only variant) */
    .tt-quick-widget__panel-close,
    .tt-quick-widget__panel-close--mobile-only {
        display: flex;
    }

    /* Backdrop overlay for mobile menu mode */
    .tt-quick-widget__backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        z-index: calc(var(--tt-widget-z, 999998) - 1);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    .tt-quick-widget__backdrop--visible {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
    .tt-quick-widget__panel {
        transition: none;
    }

    .tt-quick-widget__backdrop {
        transition: none;
    }
}

/* ── Desktop: widen offset ────────────────────────────────── */

@media (min-width: 783px) {
    .tt-quick-widget {
        right: calc(var(--tt-widget-offset-right, 24px) + env(safe-area-inset-right, 0px));
    }
    .tt-quick-widget--bottom-left {
        right: auto;
        left: calc(var(--tt-widget-offset-right, 24px) + env(safe-area-inset-left, 0px));
    }
}

/* ── Reduced motion ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .tt-quick-widget__fab,
    .tt-quick-widget__icon-open,
    .tt-quick-widget__icon-close,
    .tt-quick-widget__panel,
    .tt-quick-widget__tooltip,
    .tt-quick-widget__action-chevron {
        transition: none;
    }

    .tt-quick-widget__fab:hover {
        transform: none;
    }

    .tt-quick-widget__fab:active {
        transform: none;
    }

    .tt-quick-widget__tool-spinner span {
        animation: none;
        opacity: 0.6;
    }
}

/* ── Entrance animation (subtle) ──────────────────────────── */

@keyframes tt-widget-entrance {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.tt-quick-widget__fab {
    animation: tt-widget-entrance 0.3s ease forwards;
}

@media (prefers-reduced-motion: reduce) {
    .tt-quick-widget__fab {
        animation: none;
    }
}

/* ── Attention pulse animation (v0.36.0) ──────────────────── */

@keyframes tt-widget-pulse {
    0%   { transform: scale(1);    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
    50%  { transform: scale(1.12); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); }
    100% { transform: scale(1);    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
}

.tt-quick-widget__fab--pulse {
    animation: tt-widget-pulse 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .tt-quick-widget__fab--pulse {
        animation: none;
    }
}

/* ══════════════════════════════════════════════════════════════
   v0.37.0: Inline Tool Area — Calculator loads inside panel
   ══════════════════════════════════════════════════════════════ */

/* ── Tool area layout ────────────────────────────────────────── */

.tt-quick-widget__tool-area {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.tt-quick-widget__tool-area[hidden] { display: none; }

.tt-quick-widget__tool-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f1;
    flex-shrink: 0;
}

.tt-quick-widget__tool-back {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #50575e;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.tt-quick-widget__tool-back:hover { background-color: #f0f0f1; }

.tt-quick-widget__tool-back:focus-visible {
    outline: 2px solid var(--tt-widget-color, #0073aa);
    outline-offset: -2px;
}

.tt-quick-widget__tool-back:focus:not(:focus-visible) { outline: none; }

.tt-quick-widget__tool-title {
    font-size: 14px;
    font-weight: 600;
    color: #1d2327;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-quick-widget__tool-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
}

/* Mapbox dropdown: JS toggles overflow on the full ancestor chain
   (tool-body class + inline style on tool-area and panel) via setMapboxOverflow(). */
.tt-quick-widget__tool-body--allow-overflow { overflow: visible; }

.tt-quick-widget__tool-content { padding: 12px; }
.tt-quick-widget__tool-content[hidden] { display: none; }

/* ── Skeleton loader ─────────────────────────────────────────── */

.tt-quick-widget__tool-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;
}

.tt-quick-widget__tool-loader[hidden] { display: none; }
.tt-quick-widget__tool-loader p { margin: 0; font-size: 13px; color: #50575e; }

.tt-quick-widget__tool-spinner {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    justify-content: center;
}

.tt-quick-widget__tool-spinner span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tt-widget-color, #0073aa);
    animation: tt-widget-pulse 1.4s ease-in-out infinite;
}

.tt-quick-widget__tool-spinner span:nth-child(2) { animation-delay: 0.16s; }
.tt-quick-widget__tool-spinner span:nth-child(3) { animation-delay: 0.32s; }

/* ── Error state (inline) ────────────────────────────────────── */

.tt-quick-widget__tool-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    gap: 16px;
    text-align: center;
}

.tt-quick-widget__tool-error[hidden] { display: none; }

.tt-quick-widget__tool-error-message { margin: 0; font-size: 14px; color: #d63638; }

/* ── Calculator CSS resets inside tool-content ────────────────── */

.tt-quick-widget__tool-content .tt-calc-container { margin: 0; max-width: none; }
.tt-quick-widget__tool-content .tt-calc-form { display: block; }
.tt-quick-widget__tool-content .tt-role-breakdown__grid { grid-template-columns: 1fr; }
.tt-quick-widget__tool-content .tt-calc-actions { flex-wrap: wrap; justify-content: center; }

.tt-quick-widget__tool-content .tt-net-address-input-wrap,
.tt-quick-widget__tool-content .tt-calc-address-input-wrap {
    position: relative;
    z-index: 1;
}

/* ── Compact overrides for calculator inside inline panel ─────
   The calculator's responsive breakpoints are viewport-based, but
   the inline panel is only ~420px wide regardless of viewport.
   Replicate the 480px/600px compact styles scoped to tool-content. */

/* Payment Overview — single column, smaller values */
.tt-quick-widget__tool-content .tt-payment-overview { padding: 12px 14px; }
.tt-quick-widget__tool-content .tt-payment-overview__header { font-size: 14px; margin-bottom: 8px; }
.tt-quick-widget__tool-content .tt-payment-overview__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.tt-quick-widget__tool-content .tt-payment-overview__value { font-size: 16px; }
.tt-quick-widget__tool-content .tt-payment-overview__label { font-size: 11px; }
.tt-quick-widget__tool-content .tt-payment-overview__savings { font-size: 11px; }

/* Summary cards — single column */
.tt-quick-widget__tool-content .tt-calc-summary-overview { grid-template-columns: 1fr; }

/* Results header — stack */
.tt-quick-widget__tool-content .tt-calc-results-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Results table — compact (mirrors 480px breakpoint) */
.tt-quick-widget__tool-content .tt-calc-results-table,
.tt-quick-widget__tool-content .tt-calc-results-table th,
.tt-quick-widget__tool-content .tt-calc-results-table td { box-sizing: border-box; }
.tt-quick-widget__tool-content .tt-calc-results-table { table-layout: fixed; width: 100%; }
.tt-quick-widget__tool-content .tt-calc-results-table th,
.tt-quick-widget__tool-content .tt-calc-results-table td { padding: 4px 5px; font-size: 12px; line-height: 1.3; }
.tt-quick-widget__tool-content .tt-calc-results-table .tt-cell-header { font-size: 11px; padding: 6px 5px; white-space: nowrap; }
.tt-quick-widget__tool-content .tt-calc-results-table.tt-cols-3 thead th:first-child { width: 46%; }
.tt-quick-widget__tool-content .tt-calc-results-table.tt-cols-3 thead th:nth-child(2),
.tt-quick-widget__tool-content .tt-calc-results-table.tt-cols-3 thead th:nth-child(3) { width: 27%; }
.tt-quick-widget__tool-content .tt-calc-results-table.tt-cols-2 thead th:first-child { width: 60%; }
.tt-quick-widget__tool-content .tt-calc-results-table.tt-cols-2 thead th:nth-child(2) { width: 40%; }
.tt-quick-widget__tool-content .tt-calc-results-table td.tt-cell-label:first-child,
.tt-quick-widget__tool-content .tt-calc-results-table th.tt-cell-label:first-child {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0;
}
.tt-quick-widget__tool-content .tt-calc-results-table .tt-cell-label { padding: 4px 5px; }
.tt-quick-widget__tool-content .tt-calc-results-table .tt-cell-amount { padding: 4px 5px; font-size: 12px; white-space: nowrap; }
.tt-quick-widget__tool-content .tt-calc-results-table .tt-cell-indent { padding-left: 10px; }
.tt-quick-widget__tool-content .tt-calc-results-table .tt-cell-grand { font-size: 13px; padding: 6px 5px; }
.tt-quick-widget__tool-content .tt-calc-results-table .tt-cell-note { font-size: 9px; padding: 1px 5px 1px 10px; }
.tt-quick-widget__tool-content .tt-calc-results-table .tt-cell-discount { font-size: 11px; }
.tt-quick-widget__tool-content .tt-calc-category-header td { font-size: 11px; padding: 5px; }
.tt-quick-widget__tool-content .tt-calc-results-table .tt-calc-subtotal .tt-cell-label,
.tt-quick-widget__tool-content .tt-calc-results-table .tt-calc-subtotal .tt-cell-amount { padding: 6px 5px; }

/* Role card chart — smaller, stacked */
.tt-quick-widget__tool-content .tt-role-card__body { flex-direction: column; align-items: flex-start; }
.tt-quick-widget__tool-content .tt-role-card__chart-wrap { width: 140px; height: 140px; margin: 0 auto; }
.tt-quick-widget__tool-content .tt-role-card { padding: 14px; }
.tt-quick-widget__tool-content .tt-role-card__title { font-size: 14px; }
.tt-quick-widget__tool-content .tt-role-breakdown__header { font-size: 14px; }

/* Action buttons — full width stack */
.tt-quick-widget__tool-content .tt-calc-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}
.tt-quick-widget__tool-content .tt-calc-actions .tt-calc-btn {
    width: 100%;
    justify-content: center;
}

/* Endorsement callout — compact */
.tt-quick-widget__tool-content .tt-note-card { padding: 10px 12px; font-size: 12px; }

/* Endorsement preview badge — stack summary above Details button in narrow panel */
.tt-quick-widget__tool-content #tt-endorsement-preview {
    padding: 10px 12px !important;
    min-height: 0 !important;
    margin-bottom: 10px !important;
}
.tt-quick-widget__tool-content #tt-endorsement-preview > div:first-child {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px;
}
.tt-quick-widget__tool-content #tt-endorsement-preview-summary {
    font-size: 12px !important;
}
.tt-quick-widget__tool-content #tt-endorsement-preview-toggle {
    margin-left: 0 !important;
}

/* Disclaimer — tighter in inline panel */
.tt-quick-widget__tool-content .tt-calc-disclaimer {
    font-size: 10px;
    line-height: 1.35;
    margin: 10px 0 14px;
}

/* ── Compact overrides for Seller Net Sheet inside inline panel ──
   Same container-vs-viewport problem: narrow panel, wide viewport. */

/* Net sheet form container — remove max-width constraint */
.tt-quick-widget__tool-content .tt-net-sheet { max-width: none; }

/* Form inputs — full width */
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-field-group input[type="text"],
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-field-group input[type="number"] { max-width: 100%; }

/* Payoff / proration rows — wrap (mirrors 900px breakpoint) */
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-payoff-row,
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-proration-row { flex-wrap: wrap; }
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-payoff-label,
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-proration-label { width: 100%; min-width: 0; }
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-payoff-amount,
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-proration-amount { width: auto; flex: 1; }

/* Commission row — tighter layout */
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-commission-row { flex-wrap: wrap; gap: 4px; }
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-commission-pct { width: 50px; }
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-commission-amt { flex: 1; min-width: 80px; }

/* Pre-step row — stack on narrow panel */
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-pre-step__row { max-width: 100%; }

/* Hero amount — compact */
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-hero__amount { font-size: 26px; }
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-hero__summary { flex-direction: column; gap: 4px; }

/* Results item rows — compact */
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-item-row { padding: 6px 8px 6px 12px; }
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-grand-total { font-size: 15px; }

/* Section toggle — compact */
.tt-quick-widget__tool-content .tt-net-sheet .tt-net-section-toggle { font-size: 13px; }

/* Sale price slider — suppress in widget panel (too narrow) */
.tt-quick-widget__tool-content .tt-net-slider { display: none !important; }

/* Assist panels — full width inputs */
.tt-quick-widget__tool-content .tt-assist-panel__row input,
.tt-quick-widget__tool-content .tt-assist-panel__row select { max-width: 100%; }

/* ══════════════════════════════════════════════════════════════
   v0.35.1: Inline Overlay — Calculator popup overlay styles
   ══════════════════════════════════════════════════════════════ */

/* ── Overlay base ────────────────────────────────────────────── */

.tt-widget-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-family: var(--tt-widget-font, inherit);
    -webkit-font-smoothing: antialiased;
}

.tt-widget-overlay[hidden] {
    display: none !important;
}

.tt-widget-overlay *,
.tt-widget-overlay *::before,
.tt-widget-overlay *::after {
    box-sizing: border-box;
}

/* ── Backdrop ────────────────────────────────────────────────── */

.tt-widget-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tt-widget-overlay.tt-widget-overlay--open .tt-widget-overlay__backdrop {
    opacity: 1;
}

/* ── Container ───────────────────────────────────────────────── */

.tt-widget-overlay__container {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
    max-height: 100%;
    width: 100%;
    z-index: 1;
}

/* ── Header ──────────────────────────────────────────────────── */

.tt-widget-overlay__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 8px 12px 8px 20px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.tt-widget-overlay__title {
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
}

.tt-widget-overlay__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: #50575e;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.12s ease;
    flex-shrink: 0;
}

.tt-widget-overlay__close:hover {
    background-color: #f0f0f1;
}

.tt-widget-overlay__close:focus-visible {
    outline: 2px solid var(--tt-widget-color, #0073aa);
    outline-offset: -2px;
}

.tt-widget-overlay__close:focus:not(:focus-visible) {
    outline: none;
}

/* ── Overlay tabs (v0.36.0) ──────────────────────────────────── */

.tt-widget-overlay__tabs {
    display: flex;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
    width: 100%;
    order: 1;
}

.tt-widget-overlay__tab {
    flex: 1;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #50575e;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease;
}

.tt-widget-overlay__tab:hover {
    color: #1d2327;
}

.tt-widget-overlay__tab--active {
    color: var(--tt-widget-color, #0073aa);
    border-bottom-color: var(--tt-widget-color, #0073aa);
}

.tt-widget-overlay__tab:focus-visible {
    outline: 2px solid var(--tt-widget-color, #0073aa);
    outline-offset: -2px;
}

.tt-widget-overlay__tab:focus:not(:focus-visible) {
    outline: none;
}

/* ── Body ────────────────────────────────────────────────────── */

.tt-widget-overlay__body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
}

/* ── Loader ──────────────────────────────────────────────────── */

.tt-widget-overlay__loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
}

.tt-widget-overlay__loader[hidden] {
    display: none;
}

.tt-widget-overlay__spinner {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    justify-content: center;
}

.tt-widget-overlay__spinner span {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--tt-widget-color, #0073aa);
    animation: tt-widget-pulse 1.4s ease-in-out infinite;
}

.tt-widget-overlay__spinner span:nth-child(2) { animation-delay: 0.16s; }
.tt-widget-overlay__spinner span:nth-child(3) { animation-delay: 0.32s; }

@keyframes tt-widget-pulse {
    0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

.tt-widget-overlay__loader p {
    margin: 0;
    font-size: 14px;
    color: #50575e;
}

/* ── Content containers ──────────────────────────────────────── */

.tt-widget-overlay__content {
    padding: 16px;
}

.tt-widget-overlay__content[hidden] {
    display: none;
}

/* Calculator CSS reset inside overlay */
.tt-widget-overlay__content .tt-calc-container {
    margin: 0;
    max-width: none;
}

/* Role breakdown charts: single column in overlay so legends aren't clipped */
.tt-widget-overlay__content .tt-role-breakdown__grid {
    grid-template-columns: 1fr;
}

/* Action buttons: centered and wrap-friendly in overlay */
.tt-widget-overlay__content .tt-calc-actions {
    flex-wrap: wrap;
    justify-content: center;
}

/* Mapbox dropdown clipping fix */
.tt-widget-overlay__content .tt-net-address-input-wrap,
.tt-widget-overlay__content .tt-calc-address-input-wrap {
    position: relative;
    z-index: 1;
}

/* ── Error state ─────────────────────────────────────────────── */

.tt-widget-overlay__error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    gap: 16px;
    text-align: center;
}

.tt-widget-overlay__error[hidden] {
    display: none;
}

.tt-widget-overlay__error-message {
    margin: 0;
    font-size: 14px;
    color: #d63638;
}

/* ══════════════════════════════════════════════════════════════
   Overlay Modes
   ══════════════════════════════════════════════════════════════ */

/* ── Drawer (default) ────────────────────────────────────────── */

.tt-widget-overlay--drawer {
    align-items: flex-end;
}

.tt-widget-overlay--drawer .tt-widget-overlay__container {
    max-height: 90dvh;
    border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

.tt-widget-overlay--drawer.tt-widget-overlay--open .tt-widget-overlay__container {
    transform: translateY(0);
}

@media (min-width: 768px) {
    .tt-widget-overlay--drawer .tt-widget-overlay__container {
        max-width: 640px;
    }
}

/* ── Fullscreen ──────────────────────────────────────────────── */

.tt-widget-overlay--fullscreen {
    align-items: stretch;
}

.tt-widget-overlay--fullscreen .tt-widget-overlay__container {
    width: 100%;
    height: 100%;
    border-radius: 0;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tt-widget-overlay--fullscreen.tt-widget-overlay--open .tt-widget-overlay__container {
    opacity: 1;
    transform: translateY(0);
}

/* ── Modal ───────────────────────────────────────────────────── */

.tt-widget-overlay--modal {
    align-items: center;
    padding: 20px;
}

.tt-widget-overlay--modal .tt-widget-overlay__container {
    max-width: 600px;
    max-height: 80dvh;
    border-radius: 12px;
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.tt-widget-overlay--modal.tt-widget-overlay--open .tt-widget-overlay__container {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Modal -> drawer fallback on mobile */
@media (max-width: 640px) {
    .tt-widget-overlay--modal {
        align-items: flex-end;
        padding: 0;
    }

    .tt-widget-overlay--modal .tt-widget-overlay__container {
        max-width: 100%;
        max-height: 90dvh;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
        transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    }

    .tt-widget-overlay--modal.tt-widget-overlay--open .tt-widget-overlay__container {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ══════════════════════════════════════════════════════════════
   Overlay — Reduced motion
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .tt-widget-overlay__backdrop,
    .tt-widget-overlay__container,
    .tt-widget-overlay__tab {
        transition: none !important;
    }

    .tt-widget-overlay__spinner span,
    .tt-quick-widget__tool-spinner span {
        animation: none;
        opacity: 0.6;
    }
}

/* ══════════════════════════════════════════════════════════════
   v0.46.0: Portal Auth — Agent Sign In inside FAB widget
   ══════════════════════════════════════════════════════════════ */

/* ── Portal card — fixed height, description clamp ──────────── */

.tt-quick-widget__action--portal {
    min-height: 48px;
}

.tt-quick-widget__action--portal .tt-quick-widget__action-desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

/* ── Auth form base ─────────────────────────────────────────── */

.tt-widget-auth {
    font-size: 14px;
    line-height: 1.5;
    padding: 16px;
}

.tt-widget-auth *,
.tt-widget-auth *::before,
.tt-widget-auth *::after {
    box-sizing: border-box;
}

.tt-widget-auth__title {
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 16px;
}

/* ── Form fields ────────────────────────────────────────────── */

.tt-widget-auth__field {
    margin-bottom: 12px;
}

.tt-widget-auth__label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: #1d2327;
    margin-bottom: 4px;
}

.tt-widget-auth__input {
    display: block;
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.4;
    color: #1d2327;
    background: #fff;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    outline: none;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.tt-widget-auth__input:focus {
    border-color: var(--tt-widget-color, #0073aa);
    box-shadow: 0 0 0 1px var(--tt-widget-color, #0073aa);
}

/* ── Buttons ────────────────────────────────────────────────── */

.tt-widget-auth__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.12s ease, opacity 0.12s ease;
}

.tt-widget-auth__btn--primary {
    background-color: var(--tt-widget-color, #0073aa);
    color: #fff;
}

.tt-widget-auth__btn--primary:hover {
    opacity: 0.9;
}

.tt-widget-auth__btn--primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.tt-widget-auth__btn--primary:focus-visible {
    outline: 2px solid var(--tt-widget-color, #0073aa);
    outline-offset: 2px;
}

.tt-widget-auth__btn--primary:focus:not(:focus-visible) {
    outline: none;
}

.tt-widget-auth__btn--secondary {
    background-color: #f0f0f1;
    color: #1d2327;
    margin-top: 8px;
}

.tt-widget-auth__btn--secondary:hover {
    background-color: #e0e0e1;
}

.tt-widget-auth__btn--secondary:focus-visible {
    outline: 2px solid var(--tt-widget-color, #0073aa);
    outline-offset: 2px;
}

.tt-widget-auth__btn--secondary:focus:not(:focus-visible) {
    outline: none;
}

/* ── Error / status messages ────────────────────────────────── */

.tt-widget-auth__error {
    font-size: 13px;
    color: #d63638;
    margin: 0 0 12px;
    min-height: 0;
}

.tt-widget-auth__error:empty {
    display: none;
}

.tt-widget-auth__info {
    font-size: 13px;
    color: #00a32a;
    margin: 0 0 12px;
    min-height: 0;
}

.tt-widget-auth__info:empty {
    display: none;
}

/* ── Toggle links (forgot password / back to login) ─────────── */

.tt-widget-auth__links {
    margin-top: 12px;
    font-size: 13px;
    text-align: center;
}

.tt-widget-auth__link {
    color: var(--tt-widget-color, #0073aa);
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
    cursor: pointer;
    text-decoration: underline;
}

.tt-widget-auth__link:hover {
    opacity: 0.8;
}

.tt-widget-auth__link:focus-visible {
    outline: 2px solid var(--tt-widget-color, #0073aa);
    outline-offset: 2px;
}

.tt-widget-auth__link:focus:not(:focus-visible) {
    outline: none;
}

/* ── Section toggle (login ↔ reset) ─────────────────────────── */

.tt-widget-auth__section[hidden] {
    display: none;
}

/* ── Success state ──────────────────────────────────────────── */

.tt-widget-auth__success {
    text-align: center;
    padding: 24px 16px;
}

.tt-widget-auth__success-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #f0f7f1;
    margin: 0 auto 12px;
}

.tt-widget-auth__success-icon svg {
    color: #00a32a;
}

.tt-widget-auth__success-icon:has(.tt-widget-auth__success-headshot) {
    background-color: transparent;
    width: 56px;
    height: 56px;
}

.tt-widget-auth__success-headshot {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.tt-widget-auth__success-name {
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
    margin: 0 0 4px;
}

.tt-widget-auth__success-msg {
    font-size: 13px;
    color: #50575e;
    margin: 0 0 16px;
}

/* ── Agency picker ──────────────────────────────────────────── */

.tt-widget-auth__picker-title {
    font-size: 14px;
    font-weight: 500;
    color: #1d2327;
    margin: 0 0 10px;
}

.tt-widget-auth__agencies {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.tt-widget-auth__agency-btn {
    display: block;
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    text-align: left;
    background: #f6f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
    color: #1d2327;
}

.tt-widget-auth__agency-btn:hover {
    background: #e8eaec;
    border-color: var(--tt-widget-color, #0073aa);
}

.tt-widget-auth__agency-btn:focus-visible {
    outline: 2px solid var(--tt-widget-color, #0073aa);
    outline-offset: -2px;
}

.tt-widget-auth__agency-btn:focus:not(:focus-visible) {
    outline: none;
}

.tt-widget-auth__agency-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ── Register link ──────────────────────────────────────────── */

.tt-widget-auth__register {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f1;
    font-size: 13px;
    text-align: center;
    color: #50575e;
}

.tt-widget-auth__register a {
    color: var(--tt-widget-color, #0073aa);
}

.tt-widget-auth__register a:focus-visible {
    outline: 2px solid var(--tt-widget-color, #0073aa);
    outline-offset: 2px;
}