/* Optional external assistant module — neutral host chrome only.
   Badge -> intro/subscribe modal -> floating action button -> iframe panel.
   No assistant-specific product logic lives here; everything shown is driven
   by a cloud-supplied manifest. Reuses the app's design tokens. */

/* --- intro badge (shown before opt-in) --- */
.assistant-badge {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 150;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 10px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: rgba(var(--panel-glass-rgb), 0.92);
    backdrop-filter: blur(10px);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    touch-action: none; /* let the pointer-drag reposition it on touch */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.assistant-badge:hover { border-color: var(--accent); }
.assistant-badge-icon { font-size: 16px; line-height: 1; }
.assistant-badge-x {
    margin-left: 4px;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1;
}
.assistant-badge-x:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-primary); }

/* --- floating action button (after opt-in) --- */
.assistant-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 150;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, white 28%);
    /* Glossy accent orb: top-left specular highlight over a diagonal
       accent gradient, kept slightly translucent with a backdrop blur. */
    background:
        radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 52%),
        linear-gradient(148deg,
            color-mix(in srgb, var(--accent) 68%, white 32%) 0%,
            color-mix(in srgb, var(--accent) 90%, transparent) 46%,
            color-mix(in srgb, var(--accent) 80%, black 14%) 100%);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    touch-action: none; /* let the pointer-drag reposition it on touch */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    box-shadow:
        0 8px 22px color-mix(in srgb, var(--accent) 45%, transparent),
        0 2px 6px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.45),
        inset 0 -3px 7px rgba(0, 0, 0, 0.22);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
.assistant-fab:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow:
        0 13px 30px color-mix(in srgb, var(--accent) 58%, transparent),
        0 4px 9px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.55),
        inset 0 -3px 7px rgba(0, 0, 0, 0.22);
}
.assistant-fab:active { transform: translateY(0) scale(0.95); }
.assistant-fab.active { filter: brightness(0.95) saturate(1.05); }

/* --- chat panel (external iframe host) --- */
.assistant-panel {
    position: fixed;
    right: 20px;
    bottom: 88px;
    z-index: 140;
    width: 400px;
    max-width: calc(100vw - 40px);
    height: 560px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    /* Discreet accent glow to match the FAB, without shouting. */
    border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
    border-radius: var(--radius, 10px);
    overflow: hidden;
    background: rgba(var(--panel-glass-rgb), 0.96);
    backdrop-filter: blur(12px);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.6),
        0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
        0 6px 26px color-mix(in srgb, var(--accent) 20%, transparent);
}
.assistant-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 13px;
    cursor: move;
    touch-action: none; /* let the pointer-drag move the panel on touch */
    user-select: none;
    -webkit-user-select: none;
}
/* While dragging/resizing, stop the iframe from swallowing pointer moves. */
.assistant-panel.asst-dragging .assistant-iframe { pointer-events: none; }
/* Resize grip (bottom-right corner). */
.assistant-panel-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    touch-action: none;
    z-index: 2;
    background:
        linear-gradient(135deg, transparent 0 50%, var(--text-secondary) 50% 60%, transparent 60% 70%, var(--text-secondary) 70% 80%, transparent 80%);
    opacity: 0.55;
}
.assistant-panel-resize:hover { opacity: 0.9; }

/* Docked panels sit flush against an edge (no rounded corner there). */
.assistant-panel.dock-left, .assistant-panel.dock-right, .assistant-panel.dock-bottom {
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);
}
.assistant-panel.dock-left .assistant-panel-resize,
.assistant-panel.dock-right .assistant-panel-resize,
.assistant-panel.dock-bottom .assistant-panel-resize { display: none; }
/* Edge resize handle (docked): a thin bar on the inner edge. */
.assistant-panel-dockresize { position: absolute; z-index: 3; background: transparent; }
.assistant-panel-dockresize:hover { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.assistant-panel.dock-left  .assistant-panel-dockresize { top: 0; bottom: 0; right: -1px; width: 7px; cursor: ew-resize; }
.assistant-panel.dock-right .assistant-panel-dockresize { top: 0; bottom: 0; left: -1px; width: 7px; cursor: ew-resize; }
.assistant-panel.dock-bottom .assistant-panel-dockresize { left: 0; right: 0; top: -1px; height: 7px; cursor: ns-resize; }

/* Drop-zone preview while dragging toward an edge. */
.assistant-dock-preview {
    position: fixed;
    z-index: 139;
    pointer-events: none;
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent);
    border-radius: var(--radius, 10px);
}
.assistant-dock-preview.dock-left   { left: 0; top: 0; bottom: 0; width: 360px; }
.assistant-dock-preview.dock-right  { right: 0; top: 0; bottom: 0; width: 360px; }
.assistant-dock-preview.dock-bottom { left: 0; right: 0; bottom: 0; height: 300px; }
.assistant-panel-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.assistant-panel-actions { display: flex; align-items: center; gap: 2px; flex: none; }
.assistant-panel-actions button { font-size: 15px; }
.assistant-panel-icon { font-size: 16px; line-height: 1; flex: none; }
.assistant-panel-icon-img { width: 20px; height: 20px; flex: none; object-fit: contain; border-radius: 5px; display: block; }
/* When the manifest supplies an image icon, let it fill the round FAB (its own
   dark background blends in), clipped to the FAB's shape. */
.assistant-fab-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
/* Image FAB: drop the glossy "accent orb" chrome (light border + white inner
   highlights + accent gradient) — it clashes with the dark icon. Keep only a
   soft drop shadow for depth, and clip the image to the round shape. */
.assistant-fab.has-img {
    border: none;
    background: #0a0f1a;
    overflow: hidden;
    padding: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    text-shadow: none;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.5);
}
.assistant-fab.has-img:hover {
    box-shadow: 0 13px 30px rgba(0, 0, 0, 0.55), 0 4px 9px rgba(0, 0, 0, 0.5);
}
.assistant-panel-header button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
}
.assistant-panel-header button:hover { color: var(--text-primary); }
.assistant-iframe {
    flex: 1;
    min-height: 0;
    width: 100%;
    border: 0;
    background: transparent;
}

/* --- intro / subscribe modal --- */
.assistant-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
}
.assistant-intro {
    width: 460px;
    max-width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    background: rgba(var(--panel-glass-rgb), 0.98);
    backdrop-filter: blur(14px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    padding: 20px;
    color: var(--text-primary);
}
.assistant-intro-head { display: flex; align-items: flex-start; gap: 12px; }
.assistant-intro-icon { font-size: 28px; line-height: 1; }
.assistant-intro-title { font-size: 17px; font-weight: 700; }
.assistant-intro-tag { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }
.assistant-intro-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}
.assistant-intro-close:hover { color: var(--text-primary); }
.assistant-intro-body { margin: 14px 0 10px; color: var(--text-secondary); font-size: 13px; line-height: 1.5; }
.assistant-intro-bullets { margin: 0 0 16px; padding-left: 18px; color: var(--text-primary); font-size: 13px; }
.assistant-intro-bullets li { margin: 4px 0; }
.assistant-intro-actions { display: flex; gap: 10px; }
.assistant-intro-links { margin-top: 12px; display: flex; gap: 14px; font-size: 12px; }
.assistant-intro-links a { color: var(--text-secondary); text-decoration: none; }
.assistant-intro-links a:hover { color: var(--accent); text-decoration: underline; }

.assistant-intro-alt {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius, 10px);
    background: rgba(255, 255, 255, 0.03);
}
.assistant-intro-alt-title { font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.assistant-intro-alt-list { margin: 0 0 8px; padding-left: 18px; font-size: 12px; color: var(--text-primary); }
.assistant-intro-alt-list li { margin: 3px 0; }
.assistant-intro-alt-note { font-size: 11px; color: var(--text-secondary); margin-bottom: 10px; line-height: 1.4; }

@media (max-width: 480px) {
    .assistant-panel {
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        height: 72vh;
        border-radius: var(--radius, 10px) var(--radius, 10px) 0 0;
    }
}