/* ==========================================================================
   Tricentis Docs Chatbot (TDC)
   Scoped under .tdc-* prefix to avoid collisions with Flare skin styles,
   HomeTiles.css, Styles.css, and the existing .search-bar rules.
   Surfaces:
     - Search-bar enlargement + welded "Ask AI" button
     - Floating chat docked bottom-right
     - Persistent launcher pill (bottom-right, after first interaction)
     - AI Overview card on search.htm (phase 2)
   ========================================================================== */

:root {
    --tdc-color-primary: var(--TricentisBlue, #004C97);
    --tdc-color-accent: var(--Brand5, #FF6C0E);
    --tdc-color-deep: var(--Brand2, #1B365D);
    --tdc-color-cyan: var(--Brand4, #59C8E6);
    --tdc-color-bg: #FFFFFF;
    --tdc-color-bg-soft: #F7F9FB;
    --tdc-color-bg-shell: #ECF1F4;
    --tdc-color-border: rgba(0, 0, 0, 0.08);
    --tdc-color-border-strong: rgba(0, 0, 0, 0.18);
    --tdc-color-text: #2B2B2B;
    --tdc-color-text-muted: #5A6C7D;
    --tdc-radius-pill: 999px;
    --tdc-radius-card: 14px;
    --tdc-radius-input: 10px;
    --tdc-shadow-card: 0 16px 48px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
    --tdc-shadow-pill: 0 8px 24px rgba(0, 76, 151, 0.28), 0 2px 6px rgba(0, 0, 0, 0.10);
    --tdc-z-overlay: 10000;
    --tdc-z-launcher: 9998;
    --tdc-z-panel: 9999;
    --tdc-font: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    /* Width of the docked right-column chat. Overridden by chatbot.js from
       config (dockWidthPx). */
    --tdc-dock-width: 420px;
}

/* =========================================================================
   1. Search-bar enlargement + welded "Ask AI" button
   ========================================================================= */

/* Enlarge the existing nav search wrapper. The class .tdc-enlarged is added
   by chatbot.js once Flare has hydrated the search bar. */
.nav-search-wrapper.tdc-enlarged {
    flex: 1 1 auto;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.nav-search-wrapper.tdc-enlarged .search-bar {
    height: 44px;
    border-radius: var(--tdc-radius-input);
    border: 1px solid var(--tdc-color-border-strong);
    background: var(--tdc-color-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

.nav-search-wrapper.tdc-enlarged .search-bar:focus-within {
    border-color: var(--tdc-color-primary);
    box-shadow: 0 0 0 3px rgba(0, 76, 151, 0.15);
}

.nav-search-wrapper.tdc-enlarged .search-field {
    font-size: 0.95rem;
    height: 100%;
    background-color: transparent;
}

/* Vertical divider before the "Ask AI" button so it reads as a welded affordance */
.tdc-search-divider {
    width: 1px;
    height: 24px;
    background: var(--tdc-color-border-strong);
    margin: 0 6px;
    flex: 0 0 auto;
    align-self: center;
}

/* "Ask AI" button welded inside .search-bar */
.tdc-ask-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    margin: 0 6px 0 0;
    flex: 0 0 auto;
    align-self: center;
    border: 0;
    border-radius: var(--tdc-radius-pill);
    background: linear-gradient(135deg, var(--tdc-color-primary) 0%, var(--tdc-color-deep) 100%);
    color: #FFFFFF;
    font-family: var(--tdc-font);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.tdc-ask-ai-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 76, 151, 0.25);
    filter: brightness(1.05);
}

.tdc-ask-ai-btn:active {
    transform: translateY(0);
}

.tdc-ask-ai-btn:focus-visible {
    outline: 2px solid var(--tdc-color-accent);
    outline-offset: 2px;
}

.tdc-ask-ai-btn .tdc-icon-spark {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
}

/* Hide the welded button on very narrow viewports — fall back to the launcher pill */
@media (max-width: 600px) {
    .nav-search-wrapper.tdc-enlarged .tdc-ask-ai-btn,
    .nav-search-wrapper.tdc-enlarged .tdc-search-divider {
        display: none;
    }
}

/* =========================================================================
   2. Persistent launcher pill (bottom-right, only after first chat use)
   ========================================================================= */

.tdc-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: var(--tdc-z-launcher);
    display: none;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px 0 14px;
    border: 0;
    border-radius: var(--tdc-radius-pill);
    background: linear-gradient(135deg, var(--tdc-color-primary) 0%, var(--tdc-color-deep) 100%);
    color: #FFFFFF;
    font-family: var(--tdc-font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--tdc-shadow-pill);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.tdc-launcher.tdc-visible {
    display: inline-flex;
    animation: tdc-pop 0.25s ease;
}

.tdc-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 76, 151, 0.36), 0 4px 8px rgba(0, 0, 0, 0.12);
}

.tdc-launcher:focus-visible {
    outline: 2px solid var(--tdc-color-accent);
    outline-offset: 3px;
}

.tdc-launcher .tdc-icon-spark {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

@keyframes tdc-pop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Hide the launcher when the panel is open so they don't stack */
.tdc-panel.tdc-open ~ .tdc-launcher {
    display: none !important;
}

/* =========================================================================
   3. Floating chat panel (bottom-right docked, 380 x 560 desktop)
   ========================================================================= */

.tdc-panel {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 440px;
    height: 660px;
    max-height: calc(100vh - 48px);
    z-index: var(--tdc-z-panel);
    display: none;
    flex-direction: column;
    background: var(--tdc-color-bg);
    border-radius: var(--tdc-radius-card);
    /* Brand accent on the panel itself (not the header) so it curves into the
       rounded top corners, matching the AI Overview card. overflow:hidden
       clips the inner content, not the panel's own border. */
    border-top: 3px solid var(--tdc-color-primary);
    box-shadow: var(--tdc-shadow-card);
    overflow: hidden;
    font-family: var(--tdc-font);
    color: var(--tdc-color-text);
}

.tdc-panel.tdc-open {
    display: flex;
    animation: tdc-panel-in 0.22s ease;
}

@keyframes tdc-panel-in {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* -------------------------------------------------------------------------
   Dock-to-the-side mode: the panel becomes a persistent full-height right
   column and the page content reflows left (never overlaid). Driven by
   html.tdc-docked + .tdc-panel.tdc-docked-mode, tracking --tdc-dock-width.
   Selectors below are specific to the Tricentis Side Nav skin.
   ------------------------------------------------------------------------- */

/* Reflow all in-flow content (header row, sidenav, body, mini-TOC). */
html.tdc-docked .off-canvas-content.inner-wrap {
    margin-right: var(--tdc-dock-width);
    transition: margin-right 0.2s ease;
}

/* The header is position:fixed; width:100% — offset it too. */
html.tdc-docked .title-bar-container {
    right: var(--tdc-dock-width);
    width: auto;
}

/* The panel itself becomes the right column: square edge, full height, no
   pop-in animation, a soft left shadow to separate it from the content. */
.tdc-panel.tdc-docked-mode {
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--tdc-dock-width);
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border-left: 1px solid var(--tdc-color-border);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
}

.tdc-panel.tdc-docked-mode.tdc-open {
    animation: none;
}

/* Kill smooth scrolling on the transcript and suppress it briefly while a
   replayed (resumed) conversation snaps to the bottom, so navigating pages in
   docked mode doesn't show the fast scroll "ricochet". */
.tdc-webchat-root .webchat__basic-transcript__scrollable {
    scroll-behavior: auto !important;
}

.tdc-panel.tdc-replay-snapping .webchat__basic-transcript__scrollable {
    opacity: 0;
}

/* Drag handle on the docked column's left edge to resize the pane. Only
   active in docked mode. */
.tdc-dock-resizer {
    display: none;
}

.tdc-panel.tdc-docked-mode .tdc-dock-resizer {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    margin-left: -4px;
    cursor: col-resize;
    z-index: 2;
    background: transparent;
    transition: background 0.15s ease;
    touch-action: none;
}

.tdc-panel.tdc-docked-mode .tdc-dock-resizer:hover,
.tdc-panel.tdc-docked-mode .tdc-dock-resizer:focus-visible {
    background: rgba(0, 76, 151, 0.18);
    outline: none;
}

/* While actively dragging: kill reflow easing for a 1:1 feel and prevent the
   page from selecting text or flashing the wrong cursor. */
body.tdc-dock-resizing {
    cursor: col-resize !important;
    user-select: none !important;
}

body.tdc-dock-resizing .off-canvas-content.inner-wrap {
    transition: none !important;
}

/* Keep other fixed bottom-right UI clear of the docked column. */
html.tdc-docked #feedback-button {
    right: calc(20px + var(--tdc-dock-width)) !important;
}

html.tdc-docked .tdc-launcher {
    right: calc(24px + var(--tdc-dock-width));
}

/* Backdrop only on mobile (full-screen takeover). On desktop the chat is a
   small floating card and we don't dim the rest of the page. Must sit BELOW
   the panel — otherwise on mobile it covers the full-screen chat and blocks
   every tap. */
.tdc-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    z-index: calc(var(--tdc-z-panel) - 1);
    display: none;
}

@media (max-width: 768px) {
    .tdc-backdrop.tdc-visible {
        display: block;
    }
}

/* Panel header — light/white to match the AI search highlight: thin brand
   accent on top, dark text, hairline divider from the body. */
.tdc-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--tdc-color-bg);
    border-bottom: 1px solid var(--tdc-color-border);
    color: var(--tdc-color-deep);
    flex: 0 0 auto;
}

/* AI.svg badge in a subtle pale-blue disc (echoes the "Expert" pill). */
.tdc-panel-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 76, 151, 0.08);
    flex: 0 0 auto;
}

.tdc-panel-avatar svg,
.tdc-panel-avatar img {
    width: 20px !important;
    height: 20px !important;
    max-width: none !important;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    display: block;
    object-fit: contain;
    box-sizing: content-box;
}

.tdc-panel-titles {
    flex: 1 1 auto;
    min-width: 0;
}

.tdc-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tdc-panel-subtitle {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--tdc-color-text-muted);
    line-height: 1.2;
    margin-top: 2px;
}

.tdc-panel-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.tdc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background 0.12s ease;
}

.tdc-icon-btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Light header: dark icons with a subtle dark hover instead of white-on-navy. */
.tdc-panel-header .tdc-icon-btn {
    color: var(--tdc-color-text-muted);
}

.tdc-panel-header .tdc-icon-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--tdc-color-deep);
}

.tdc-icon-btn:focus-visible {
    outline: 2px solid var(--tdc-color-accent);
    outline-offset: 2px;
}

.tdc-icon-btn svg {
    width: 16px;
    height: 16px;
}

/* Panel body */
.tdc-panel-body {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    background: var(--tdc-color-bg-soft);
    overflow: hidden;
}

/* The WebChat root or the iframe fallback both fill the body */
.tdc-webchat-root,
.tdc-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tdc-iframe {
    background: var(--tdc-color-bg);
}

/* Loading spinner while WebChat boots */
.tdc-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--tdc-color-text-muted);
    font-size: 0.85rem;
}

.tdc-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(0, 76, 151, 0.16);
    border-top-color: var(--tdc-color-primary);
    border-radius: 50%;
    animation: tdc-spin 0.8s linear infinite;
}

@keyframes tdc-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Branded "Thinking…" indicator — replaces WebChat's three-dot typing
   animation. A small pill anchored just above the send box, with a gently
   pulsing AI badge and a muted label. */
.tdc-thinking {
    position: absolute;
    left: 14px;
    bottom: 60px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px 6px 8px;
    background: var(--tdc-color-bg);
    border: 1px solid var(--tdc-color-border);
    border-radius: var(--tdc-radius-pill);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    font-family: var(--tdc-font);
    max-width: calc(100% - 28px);
}

.tdc-thinking[hidden] {
    display: none;
}

/* While the "Thinking…" pill is visible, reserve space at the bottom of the
   transcript so the pill floats in its own band instead of overlapping the
   last message bubble. WebChat auto-scrolls to the bottom, so the last
   bubble lifts above the padding (and thus above the pill). */
.tdc-panel.tdc-thinking-active .webchat__basic-transcript__scrollable {
    padding-bottom: 52px;
}

.tdc-thinking-badge {
    display: inline-flex;
    flex: 0 0 auto;
    animation: tdc-thinking-pulse 1.4s ease-in-out infinite;
}

.tdc-thinking-badge svg,
.tdc-thinking-badge img {
    width: 20px !important;
    height: 20px !important;
    max-width: none !important;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    display: block;
    object-fit: contain;
    box-sizing: content-box;
}

.tdc-thinking-label {
    color: var(--tdc-color-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

@keyframes tdc-thinking-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.9); }
}

/* Mobile: full-screen takeover */
@media (max-width: 768px) {
    .tdc-panel {
        right: 0;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .tdc-launcher {
        right: 16px;
        bottom: 16px;
    }

    /* Dock is a desktop-only feature: release the reflow and let the panel
       fall back to the full-screen mobile chat. */
    html.tdc-docked .off-canvas-content.inner-wrap {
        margin-right: 0;
    }

    html.tdc-docked .title-bar-container {
        right: 0;
        width: 100%;
    }

    html.tdc-docked #feedback-button {
        right: 16px !important;
    }

    html.tdc-docked .tdc-launcher {
        right: 16px;
    }

    .tdc-panel.tdc-docked-mode {
        top: auto;
        border-left: none;
        box-shadow: none;
    }

    .tdc-dock-btn {
        display: none;
    }

    .tdc-panel.tdc-docked-mode .tdc-dock-resizer {
        display: none;
    }
}

/* =========================================================================
   4. WebChat style overrides (when WebChat is rendered inside .tdc-webchat-root)
   These ride on top of WebChat's built-in styles. We use CSS custom properties
   that WebChat itself reads, plus a few selectors for the chrome.
   ========================================================================= */

.tdc-webchat-root .webchat__send-box {
    border-top: 1px solid var(--tdc-color-border);
    background: var(--tdc-color-bg);
}

.tdc-webchat-root .webchat__suggested-actions {
    background: transparent;
}

.tdc-webchat-root .webchat__bubble--from-user .webchat__bubble__content {
    background: var(--tdc-color-primary);
    color: #FFFFFF;
}

.tdc-webchat-root .webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
    background: var(--tdc-color-bg);
    border: 1px solid var(--tdc-color-border);
    color: var(--tdc-color-text);
}

/* A bit more horizontal padding inside bubbles so text isn't flush against
   the bubble edges. */
.tdc-webchat-root .webchat__bubble__content {
    padding-left: 6px !important;
    padding-right: 6px !important;
}

/* Font fallback: primaryFont (set in renderWebChat) should cover this, but
   force Open Sans on WebChat's stable text classes too so the chat always
   matches docs body text. Code stays monospace. */
.tdc-webchat-root .webchat__text-content,
.tdc-webchat-root .webchat__render-markdown,
.tdc-webchat-root .webchat__link-definitions,
.tdc-webchat-root .webchat__initialsAvatar__initials,
.tdc-webchat-root .webchat__activity-status,
.tdc-webchat-root .webchat__send-box textarea,
.tdc-webchat-root .webchat__suggested-action {
    font-family: var(--tdc-font) !important;
}

.tdc-webchat-root code,
.tdc-webchat-root pre {
    font-family: 'Consolas', 'Courier New', monospace !important;
}

/* Slightly smaller chat text so more content fits. */
.tdc-webchat-root .webchat__text-content,
.tdc-webchat-root .webchat__render-markdown,
.tdc-webchat-root .webchat__suggested-action {
    font-size: 0.85rem;
    line-height: 1.5;
}

.tdc-webchat-root .webchat__activity-status {
    font-size: 0.7rem;
}

/* Hide the You/Doc avatars and collapse their gutter so message bubbles
   use the full panel width. Sender is shown as a timestamp label below. */
.tdc-webchat-root .webchat__defaultAvatar {
    display: none !important;
}

.tdc-webchat-root .webchat__stacked-layout__avatar-gutter {
    width: 0 !important;
    min-width: 0 !important;
}

/* Prepend a sender label to each message's timestamp ("You \00B7 Just now"
   / "Product Expert \00B7 Just now"). User rows carry --self; bot rows
   don't. Label text comes from CSS vars set on .tdc-panel from config. */
.tdc-webchat-root .webchat__activity-status--self::before {
    content: var(--tdc-user-label, "You") " \00B7 ";
    font-weight: 600;
}

.tdc-webchat-root .webchat__activity-status:not(.webchat__activity-status--self)::before {
    content: var(--tdc-bot-label, "Product Expert") " \00B7 ";
    font-weight: 600;
}

/* Inset the transcript so message bubbles don't sit flush against the
   panel frame now that the avatar gutter is collapsed. */
.tdc-webchat-root .webchat__basic-transcript__transcript {
    padding-left: 10px;
    padding-right: 10px;
}

/* Match the send box input (and its placeholder) to the smaller chat
   text size — WebChat's default is noticeably larger. */
.tdc-webchat-root .webchat__send-box textarea,
.tdc-webchat-root .webchat__send-box-text-box,
.tdc-webchat-root .webchat__send-box-text-box__text-area {
    font-size: 0.85rem;
}

/* Scale down WebChat markdown headings — they default to large sizes that
   dwarf the 0.85rem chat body text. Keep them clearly larger than body but
   only modestly so, mirroring the AI Overview hierarchy. !important because
   WebChat sets heading sizes via its own Emotion classes. */
.tdc-webchat-root .webchat__render-markdown h1,
.tdc-webchat-root .webchat__render-markdown h2,
.tdc-webchat-root .webchat__render-markdown h3,
.tdc-webchat-root .webchat__render-markdown h4,
.tdc-webchat-root .webchat__render-markdown h5,
.tdc-webchat-root .webchat__render-markdown h6 {
    color: var(--tdc-color-deep);
    font-weight: 700;
    line-height: 1.3;
    margin: 12px 0 4px 0 !important;
}

.tdc-webchat-root .webchat__render-markdown h1 { font-size: 1.05rem !important; }
.tdc-webchat-root .webchat__render-markdown h2 { font-size: 0.95rem !important; }
.tdc-webchat-root .webchat__render-markdown h3 { font-size: 0.9rem !important; }
.tdc-webchat-root .webchat__render-markdown h4,
.tdc-webchat-root .webchat__render-markdown h5,
.tdc-webchat-root .webchat__render-markdown h6 { font-size: 0.85rem !important; }

/* Rich formatting for the Product Expert's answers — mirror the AI Overview
   blurb on search.htm so the chat reads with the same brand colours, links,
   and tables instead of WebChat's plain defaults. This WebChat build has no
   `--from-bot` modifier; the bot answer is rendered inside
   `.webchat__render-markdown` (user messages render as plain text), so that
   class is the reliable, bot-only hook. */
.tdc-webchat-root .webchat__render-markdown strong,
.tdc-webchat-root .webchat__render-markdown b {
    font-weight: 700 !important;
    color: var(--tdc-color-deep) !important;
}

.tdc-webchat-root .webchat__render-markdown em {
    font-style: italic;
}

.tdc-webchat-root .webchat__render-markdown a {
    color: var(--tdc-color-primary) !important;
    text-decoration: none !important;
    border-bottom: 1px solid rgba(0, 76, 151, 0.3);
    transition: border-color 0.12s ease;
}

.tdc-webchat-root .webchat__render-markdown a:hover {
    border-bottom-color: var(--tdc-color-primary);
}

.tdc-webchat-root .webchat__render-markdown ul,
.tdc-webchat-root .webchat__render-markdown ol {
    margin: 4px 0 10px 0;
    padding-left: 22px;
}

.tdc-webchat-root .webchat__render-markdown li {
    margin-bottom: 4px;
}

.tdc-webchat-root .webchat__render-markdown p {
    margin: 0 0 8px 0;
}

.tdc-webchat-root .webchat__render-markdown code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
    font-size: 0.85em;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
}

.tdc-webchat-root .webchat__render-markdown pre {
    background: var(--tdc-color-bg-soft);
    border: 1px solid var(--tdc-color-border);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 10px 0;
    overflow-x: auto;
    font-size: 0.85em;
    line-height: 1.5;
}

.tdc-webchat-root .webchat__render-markdown pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.tdc-webchat-root .webchat__render-markdown blockquote {
    margin: 10px 0;
    padding: 6px 14px;
    border-left: 3px solid var(--tdc-color-primary);
    color: var(--tdc-color-text-muted);
    font-style: italic;
}

.tdc-webchat-root .webchat__render-markdown table {
    border-collapse: collapse;
    margin: 10px 0;
    width: 100%;
    font-size: 0.9em;
}

.tdc-webchat-root .webchat__render-markdown th,
.tdc-webchat-root .webchat__render-markdown td {
    border: 1px solid var(--tdc-color-border) !important;
    padding: 6px 10px !important;
    text-align: left;
}

.tdc-webchat-root .webchat__render-markdown th {
    background: var(--tdc-color-bg-soft);
    font-weight: 700;
    color: var(--tdc-color-deep);
}

.tdc-webchat-root .webchat__render-markdown hr {
    border: 0;
    border-top: 1px solid var(--tdc-color-border);
    margin: 14px 0;
}

/* Numbered citation links inside the answer — render them as the same small
   brand chips used in the AI Overview blurb, and drop WebChat's external-link
   icon inside them so they read cleanly. */
.tdc-webchat-root .webchat__render-markdown a.webchat__render-markdown__pure-identifier {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin: 0 2px;
    vertical-align: super;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--tdc-color-primary) !important;
    background: rgba(0, 76, 151, 0.08);
    border: 1px solid rgba(0, 76, 151, 0.18);
    border-bottom: 1px solid rgba(0, 76, 151, 0.18);
    border-radius: var(--tdc-radius-pill);
}

.tdc-webchat-root .webchat__render-markdown a.webchat__render-markdown__pure-identifier:hover {
    background: rgba(0, 76, 151, 0.18);
}

.tdc-webchat-root .webchat__render-markdown a.webchat__render-markdown__pure-identifier .webchat__render-markdown__external-link-icon {
    display: none;
}

/* Answer sources block (WebChat .webchat__link-definitions — a <details> with
   an "N references" summary and boxed link items). Restyle the heavy default
   boxes into a light, wrapping row of brand chips, matching the AI Overview
   citations. */
.tdc-webchat-root .webchat__link-definitions {
    margin-top: 8px;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* "N references" caption — small muted label; still toggles the <details>. */
.tdc-webchat-root .webchat__link-definitions__header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0 !important;
    color: var(--tdc-color-text-muted) !important;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    list-style: none;
}

.tdc-webchat-root .webchat__link-definitions__header::-webkit-details-marker {
    display: none;
}

.tdc-webchat-root .webchat__link-definitions__header-filler {
    display: none;
}

/* Wrapping row of source chips (WebChat defaults the list to a flex column,
   so force row direction + top alignment so chips flow and wrap). */
.tdc-webchat-root .webchat__link-definitions__list {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 6px;
    margin: 0 !important;
    padding: 6px 0 0 0 !important;
}

.tdc-webchat-root .webchat__link-definitions__list-item {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

/* The chip itself (each source is an <a> .list-item-box) — shrink to content. */
.tdc-webchat-root .webchat__link-definitions__list-item-box {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    width: auto !important;
    max-width: 100%;
    min-width: 0 !important;
    padding: 4px 10px !important;
    background: rgba(0, 76, 151, 0.08) !important;
    border: 1px solid rgba(0, 76, 151, 0.18) !important;
    border-radius: var(--tdc-radius-pill) !important;
    box-shadow: none !important;
    color: var(--tdc-color-primary) !important;
    text-decoration: none !important;
    font-size: 0.78rem;
    line-height: 1.2;
    transition: background 0.12s ease;
}

.tdc-webchat-root .webchat__link-definitions__list-item-box:hover {
    background: rgba(0, 76, 151, 0.18) !important;
}

.tdc-webchat-root .webchat__link-definitions__list-item-body {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    min-width: 0 !important;
    padding: 0 !important;
}

.tdc-webchat-root .webchat__link-definitions__list-item-body-main {
    flex: 0 1 auto !important;
    min-width: 0 !important;
}

/* Number badge — a small inline blue number. */
.tdc-webchat-root .webchat__link-definitions__badge {
    min-width: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--tdc-color-primary) !important;
    font-weight: 700;
    font-size: 0.72rem;
}

/* Title text (lives in .list-item-text nested under .list-item-main-text):
   keep it, single line with ellipsis so the chip stays compact. */
.tdc-webchat-root .webchat__link-definitions__list-item-main-text {
    display: block !important;
    min-width: 0 !important;
    color: var(--tdc-color-primary) !important;
    font-weight: 600;
}

.tdc-webchat-root .webchat__link-definitions__list-item-text {
    color: var(--tdc-color-primary) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

/* Drop the external-link / open-in-new-window icon inside the chip. */
.tdc-webchat-root .webchat__link-definitions__list-item-box svg {
    display: none !important;
}

/* Let the bot bubble stretch so wide tables and content use the available
   panel/dock width (the transcript padding still keeps it off the frame).
   No `--from-bot` class exists, so target any bubble that isn't the user's. */
.tdc-webchat-root .webchat__bubble:not(.webchat__bubble--from-user),
.tdc-webchat-root .webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
    max-width: 100% !important;
}

/* Per-response Copy button: icon-only, revealed on hover of the bot bubble.
   A reserved bottom strip keeps it from overlapping the last line/sources. */
.tdc-webchat-root .webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content {
    position: relative;
}

/* Top-right so it never reserves a line under short answers and never
   overlaps the sources chips at the bottom. Hover-revealed, with a solid
   backing so it stays legible if it overlaps the first line. */
.tdc-msg-copy {
    position: absolute;
    right: 4px;
    top: 4px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--tdc-color-border);
    border-radius: 6px;
    background: var(--tdc-color-bg);
    color: var(--tdc-color-text-muted);
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.tdc-webchat-root .webchat__bubble:not(.webchat__bubble--from-user) .webchat__bubble__content:hover .tdc-msg-copy,
.tdc-msg-copy:focus-visible {
    opacity: 1;
}

.tdc-msg-copy:hover {
    color: var(--tdc-color-primary);
    border-color: var(--tdc-color-primary);
}

.tdc-msg-copy svg {
    width: 13px;
    height: 13px;
}

.tdc-msg-copy.tdc-copied {
    color: #047857;
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.08);
}

/* =========================================================================
   5. AI Overview card on search.htm (Phase 2 — full styling)
   The card is injected above #search-results on search.htm pages.
   Phase 1 ships the structure with a CTA fallback; Phase 2 fills in
   the streamed answer + citation chips.
   ========================================================================= */

.tdc-ai-overview {
    margin: 0 0 24px 0;
    padding: 20px 22px;
    background: #FFFFFF;
    border: 1px solid var(--tdc-color-border);
    border-top: 3px solid var(--tdc-color-primary);
    border-radius: var(--tdc-radius-card);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    font-family: var(--tdc-font);
    color: var(--tdc-color-text);
}

/* Badge and title share one row to save vertical space: a light "AI" pill
   (with the AI.svg badge) sits inline to the left of the question title. */
.tdc-ai-overview-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.tdc-ai-overview-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 4px 10px 4px 6px;
    border-radius: var(--tdc-radius-pill);
    background: rgba(0, 76, 151, 0.08);
    border: 1px solid rgba(0, 76, 151, 0.18);
    color: var(--tdc-color-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* AI.svg badge carries its own colors/shape — just size it. Defensive resets
   so global/skin img rules can't trim or restyle it. */
.tdc-ai-overview-badge img,
.tdc-ai-overview-badge svg {
    width: 16px !important;
    height: 16px !important;
    max-width: none !important;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    flex: 0 0 auto;
}

/* !important because the Flare skin scopes heading sizes via a higher-
   specificity id selector (e.g. #mc-main-content h2) that would otherwise
   inflate this title to an intrusive size. */
.tdc-ai-overview-title {
    flex: 1 1 240px;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--tdc-color-deep) !important;
    margin: 0 !important;
}

/* While loading we show only the rotating loader — hide the whole header
   (Expert pill + intro title) until the answer renders. */
.tdc-ai-overview.tdc-loading-state .tdc-ai-overview-header {
    display: none;
}

.tdc-ai-overview-body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--tdc-color-text);
    min-height: 60px;
}

/* Branded loading state: a gently pulsing AI.svg badge + a phased label
   (crossfaded by JS). Replaces the old spinner; left-aligned so it doesn't
   shift when the body swaps to the (left-aligned) answer. */
.tdc-ai-overview-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 60px;
}

.tdc-ai-overview-loading-badge {
    display: inline-flex;
    flex: 0 0 auto;
    animation: tdc-thinking-pulse 1.4s ease-in-out infinite;
}

.tdc-ai-overview-loading-badge img,
.tdc-ai-overview-loading-badge svg {
    width: 22px !important;
    height: 22px !important;
    max-width: none !important;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    display: block;
    object-fit: contain;
    box-sizing: content-box;
}

.tdc-ai-overview-loading-label {
    color: var(--tdc-color-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* Minimal loading state: hide the footer/actions until the answer renders. */
.tdc-ai-overview.tdc-loading-state .tdc-ai-overview-footer {
    display: none;
}

.tdc-ai-overview-body p {
    margin: 0 0 10px 0;
}

.tdc-ai-overview-body p:last-child {
    margin-bottom: 0;
}

/* Smooth-reveal animations for the AI Overview body. Two independent
   hooks driven by JS:
     1. `.tdc-revealed` — one-shot 400ms fade-up applied when the body
        transitions from the loading spinner to having real content.
        Class is removed by JS shortly after the animation finishes so
        subsequent re-renders during streaming don't re-trigger it.
     2. `.tdc-streaming` — present while bot activities are actively
        arriving. Applies a mask-image gradient that fades the bottom
        ~12% of the body so newly-arriving lines appear to rise into
        view rather than popping in. Removed after a brief idle. */
.tdc-ai-overview-body.tdc-revealed {
    animation: tdc-ai-overview-reveal 320ms ease-out;
}

@keyframes tdc-ai-overview-reveal {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tdc-ai-overview-body.tdc-streaming {
    -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    transition: -webkit-mask-image 280ms ease-out, mask-image 280ms ease-out;
}

.tdc-ai-overview-body h1,
.tdc-ai-overview-body h2,
.tdc-ai-overview-body h3,
.tdc-ai-overview-body h4 {
    color: var(--tdc-color-deep);
    font-weight: 700;
    line-height: 1.3;
    margin: 14px 0 6px 0;
}

.tdc-ai-overview-body h1 { font-size: 1.25rem; }
.tdc-ai-overview-body h2 { font-size: 1.125rem; }
.tdc-ai-overview-body h3 { font-size: 1rem; }
.tdc-ai-overview-body h4 { font-size: 0.95rem; }

.tdc-ai-overview-body > *:first-child { margin-top: 0; }

.tdc-ai-overview-body ul,
.tdc-ai-overview-body ol {
    margin: 4px 0 10px 0;
    padding-left: 24px;
}

.tdc-ai-overview-body li {
    margin-bottom: 4px;
}

.tdc-ai-overview-body li > ul,
.tdc-ai-overview-body li > ol {
    margin-top: 4px;
    margin-bottom: 4px;
}

.tdc-ai-overview-body strong {
    font-weight: 700;
    color: var(--tdc-color-deep);
}

.tdc-ai-overview-body em {
    font-style: italic;
}

.tdc-ai-overview-body a {
    color: var(--tdc-color-primary);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 76, 151, 0.3);
    transition: border-color 0.12s ease;
}

.tdc-ai-overview-body a:hover {
    border-bottom-color: var(--tdc-color-primary);
}

.tdc-ai-overview-body code {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.85em;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
}

.tdc-ai-overview-body pre {
    background: var(--tdc-color-bg-soft);
    border: 1px solid var(--tdc-color-border);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 10px 0;
    overflow-x: auto;
    font-size: 0.85em;
    line-height: 1.5;
}

.tdc-ai-overview-body pre code {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

.tdc-ai-overview-body blockquote {
    margin: 10px 0;
    padding: 6px 14px;
    border-left: 3px solid var(--tdc-color-primary);
    color: var(--tdc-color-text-muted);
    font-style: italic;
}

.tdc-ai-overview-body table {
    border-collapse: collapse;
    margin: 10px 0;
    width: 100%;
    font-size: 0.9em;
}

.tdc-ai-overview-body th,
.tdc-ai-overview-body td {
    border: 1px solid var(--tdc-color-border);
    padding: 6px 10px;
    text-align: left;
}

.tdc-ai-overview-body th {
    background: var(--tdc-color-bg-soft);
    font-weight: 700;
    color: var(--tdc-color-deep);
}

.tdc-ai-overview-body hr {
    border: 0;
    border-top: 1px solid var(--tdc-color-border);
    margin: 14px 0;
}

/* Numbered citation chips inside the streamed answer */
.tdc-citation {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    margin: 0 2px;
    vertical-align: super;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--tdc-color-primary);
    background: rgba(0, 76, 151, 0.08);
    border: 1px solid rgba(0, 76, 151, 0.18);
    border-radius: var(--tdc-radius-pill);
    text-decoration: none;
    transition: background 0.12s ease;
}

.tdc-citation:hover {
    background: rgba(0, 76, 151, 0.18);
    text-decoration: none;
}

.tdc-ai-overview-sources {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--tdc-color-border);
}

/* Sources disclosure toggle. Same defensive overrides as the body
   .tdc-ai-overview-toggle so docs themes can't restyle it into a chunky
   button. The label is the small uppercase "SOURCES" caption that used to
   be a static <div>; click it to reveal the citation list. */
.tdc-ai-overview-sources-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--tdc-color-text-muted) !important;
    font-family: var(--tdc-font);
    font-size: 0.75rem !important;
    font-weight: 700;
    line-height: 1.2 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: color 0.12s ease;
}

.tdc-ai-overview-sources-toggle:hover {
    color: var(--tdc-color-deep) !important;
    background: transparent !important;
}

.tdc-ai-overview-sources-toggle:focus-visible {
    outline: 2px solid var(--tdc-color-accent);
    outline-offset: 2px;
}

.tdc-ai-overview-sources-label {
    pointer-events: none;
}

/* The count pill was dropped — the per-source number chips already convey the
   count, and the pill competed with them. Hidden rather than removed from the
   markup to keep the change CSS-only. */
.tdc-ai-overview-sources-count {
    display: none !important;
}

.tdc-ai-overview-sources-toggle svg {
    width: 12px !important;
    height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    flex: 0 0 auto !important;
    transition: transform 0.18s ease;
}

.tdc-ai-overview-sources.tdc-sources-expanded .tdc-ai-overview-sources-toggle svg {
    transform: rotate(180deg);
}

/* Default-collapsed list. Revealed when the wrapper has
   .tdc-sources-expanded (toggled by the button click handler). */
.tdc-ai-overview-sources-list {
    display: none;
    margin-top: 10px;
}

.tdc-ai-overview-sources.tdc-sources-expanded .tdc-ai-overview-sources-list {
    display: block;
}

/* Number each source with the same small blue chip used inline in the answer
   (via CSS counters, no markup change), so source [n] reads identically to the
   answer's [n] citation. Replaces the dated ordered-list decimals. */
.tdc-ai-overview-sources ol {
    list-style: none;
    counter-reset: tdc-src;
    margin: 0;
    padding-left: 0;
    font-size: 0.85rem;
}

.tdc-ai-overview-sources li {
    counter-increment: tdc-src;
    margin-bottom: 4px;
}

.tdc-ai-overview-sources a {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: var(--tdc-color-primary);
    text-decoration: none;
}

.tdc-ai-overview-sources a::before {
    content: counter(tdc-src);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    color: var(--tdc-color-primary);
    background: rgba(0, 76, 151, 0.08);
    border: 1px solid rgba(0, 76, 151, 0.18);
    border-radius: var(--tdc-radius-pill);
}

.tdc-ai-overview-sources a:hover {
    text-decoration: underline;
}

.tdc-ai-overview-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--tdc-color-border);
    flex-wrap: wrap;
}

.tdc-ai-overview-attribution {
    flex: 1 1 240px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--tdc-color-text-muted);
}

.tdc-ai-overview-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.tdc-ai-overview-cta,
.tdc-ai-overview-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 14px;
    border-radius: var(--tdc-radius-pill);
    font-family: var(--tdc-font);
    font-size: 0.825rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.12s ease, transform 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.tdc-ai-overview-cta {
    border: 0;
    background: var(--tdc-color-primary);
    color: #FFFFFF;
}

.tdc-ai-overview-cta:hover {
    background: var(--tdc-color-deep);
    transform: translateY(-1px);
    text-decoration: none;
    color: #FFFFFF;
}

.tdc-ai-overview-secondary {
    border: 1px solid var(--tdc-color-border-strong);
    background: transparent;
    color: var(--tdc-color-deep);
}

.tdc-ai-overview-secondary:hover {
    border-color: var(--tdc-color-primary);
    color: var(--tdc-color-primary);
    transform: translateY(-1px);
}

.tdc-ai-overview-secondary.tdc-copied {
    border-color: #10B981;
    background: rgba(16, 185, 129, 0.08);
    color: #047857;
}

.tdc-ai-overview-secondary.tdc-copy-failed {
    border-color: #DC2626;
    background: rgba(220, 38, 38, 0.08);
    color: #B91C1C;
}

/* Icon-only variant (e.g. Copy answer): square button, no text label. */
.tdc-ai-overview-secondary.tdc-icon-only {
    width: 32px;
    padding: 0;
    justify-content: center;
    flex: 0 0 auto;
}

.tdc-ai-overview-cta svg,
.tdc-ai-overview-secondary svg {
    width: 14px;
    height: 14px;
}

@media (max-width: 600px) {
    .tdc-ai-overview-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    /* In the column layout the 240px flex-basis becomes a vertical size and
       stretches the disclaimer, leaving a big gap before the buttons — reset
       it so the attribution is only as tall as its text. */
    .tdc-ai-overview-attribution {
        flex: 0 0 auto;
    }
    .tdc-ai-overview-actions {
        justify-content: flex-end;
    }
}

/* -------------------------------------------------------------------------
   Variation C — two-column layout: the streamed answer on the left and a
   persistent "Sources" rail on the right (a scannable topic shortcut). Only
   engages when citations exist (.tdc-has-sources, added by JS) AND the card
   itself is wide enough (container query on the card's inline size, so it
   still stacks correctly when the content area is narrowed). Narrow/mobile
   keeps today's stacked single column with the collapsible Sources
   disclosure. The wide-mode rules are duplicated under a viewport-media
   fallback for engines without container-query support.
   ------------------------------------------------------------------------- */
.tdc-ai-overview {
    container-type: inline-size;
}

/* The inner wrapper (a child of the query container) is what flips to the
   grid, so the split responds to the CARD's own width — correct even when the
   content column is narrowed by the sidenav, mini-TOC, or a docked chat. */
@container (min-width: 480px) {
    .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(190px, 30cqi, 300px);
        column-gap: 22px;
        grid-template-areas:
            "header sources"
            "body   sources"
            "toggle sources"
            "footer sources";
    }

    .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner > .tdc-ai-overview-header { grid-area: header; }
    .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner > .tdc-ai-overview-body { grid-area: body; }
    .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner > .tdc-ai-overview-toggle { grid-area: toggle; }
    .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner > .tdc-ai-overview-footer { grid-area: footer; }

    /* The rail spans all rows, so its left divider runs the full card height,
       echoing the page's sidenav + content grid. */
    .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner > .tdc-ai-overview-sources {
        grid-area: sources;
        margin-top: 0;
        padding-top: 0;
        padding-left: 20px;
        border-top: 0;
        border-left: 1px solid var(--tdc-color-border);
    }

    /* The rail heading is a static "SOURCES n" caption (the list is always
       open here), so neutralize the disclosure button and hide its chevron. */
    .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner .tdc-ai-overview-sources-toggle {
        cursor: default !important;
        pointer-events: none;
        margin-bottom: 8px;
    }
    .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner .tdc-ai-overview-sources-toggle svg {
        display: none !important;
    }

    /* Force the citation list open regardless of the collapsed/expanded
       state used on narrow screens. */
    .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner .tdc-ai-overview-sources-list {
        display: block !important;
        margin-top: 0;
    }

    /* Topic-shortcut styling: each source is a tappable row. */
    .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner .tdc-ai-overview-sources li {
        margin-bottom: 2px;
    }
    .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner .tdc-ai-overview-sources li a {
        display: flex;
        padding: 6px 8px;
        margin-left: -8px;
        border-radius: var(--tdc-radius-input);
        line-height: 1.35;
        transition: background 0.12s ease, color 0.12s ease;
    }
    .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner .tdc-ai-overview-sources li a:hover {
        background: rgba(0, 76, 151, 0.06);
        color: var(--tdc-color-deep);
        text-decoration: none;
    }
}

/* Viewport-media fallback for engines without container queries. */
@supports not (container-type: inline-size) {
    @media (min-width: 1000px) {
        .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner {
            display: grid;
            grid-template-columns: minmax(0, 1fr) clamp(190px, 26%, 300px);
            column-gap: 22px;
            grid-template-areas:
                "header sources"
                "body   sources"
                "toggle sources"
                "footer sources";
        }
        .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner > .tdc-ai-overview-header { grid-area: header; }
        .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner > .tdc-ai-overview-body { grid-area: body; }
        .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner > .tdc-ai-overview-toggle { grid-area: toggle; }
        .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner > .tdc-ai-overview-footer { grid-area: footer; }
        .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner > .tdc-ai-overview-sources {
            grid-area: sources;
            margin-top: 0;
            padding-top: 0;
            padding-left: 20px;
            border-top: 0;
            border-left: 1px solid var(--tdc-color-border);
        }
        .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner .tdc-ai-overview-sources-toggle {
            cursor: default !important;
            pointer-events: none;
            margin-bottom: 8px;
        }
        .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner .tdc-ai-overview-sources-toggle svg {
            display: none !important;
        }
        .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner .tdc-ai-overview-sources-list {
            display: block !important;
            margin-top: 0;
        }
        .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner .tdc-ai-overview-sources li {
            margin-bottom: 2px;
        }
        .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner .tdc-ai-overview-sources li a {
            display: flex;
            padding: 6px 8px;
            margin-left: -8px;
            border-radius: var(--tdc-radius-input);
            line-height: 1.35;
            transition: background 0.12s ease, color 0.12s ease;
        }
        .tdc-ai-overview.tdc-has-sources .tdc-ai-overview-inner .tdc-ai-overview-sources li a:hover {
            background: rgba(0, 76, 151, 0.06);
            color: var(--tdc-color-deep);
            text-decoration: none;
        }
    }
}

/* CTA-mode (Phase 1 fallback) — when no streaming answer is available
   (iframe fallback path), the card renders as a simple "Ask AI about ..." CTA. */
.tdc-ai-overview.tdc-cta-mode .tdc-ai-overview-body {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: auto;
}

.tdc-ai-overview.tdc-cta-mode .tdc-ai-overview-body strong {
    color: var(--tdc-color-deep);
}

/* =========================================================================
   6. Federated autocomplete dropdown (Phase 3 — placeholder structure)
   ========================================================================= */

.tdc-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    background: var(--tdc-color-bg);
    border: 1px solid var(--tdc-color-border);
    border-radius: var(--tdc-radius-input);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    max-height: min(60vh, 480px);
    overflow-y: auto;
    z-index: 1001;
    display: none;
    font-family: var(--tdc-font);
}

.tdc-suggest.tdc-visible {
    display: block;
}

.tdc-suggest-section-title {
    padding: 10px 14px 4px 14px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--tdc-color-text-muted);
}

.tdc-suggest-item {
    display: block;
    padding: 8px 14px;
    color: var(--tdc-color-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.1s ease, border-color 0.1s ease;
}

.tdc-suggest-item:hover,
.tdc-suggest-item.tdc-active {
    background: var(--tdc-color-bg-soft);
    border-left-color: var(--tdc-color-primary);
    text-decoration: none;
}

.tdc-suggest-item-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--tdc-color-deep);
}

.tdc-suggest-item-meta {
    font-size: 0.75rem;
    color: var(--tdc-color-text-muted);
    margin-top: 2px;
}

.tdc-suggest-item mark {
    background: rgba(255, 108, 14, 0.18);
    color: inherit;
    padding: 0 2px;
}

/* Make the search bar wrapper a positioning context for the dropdown */
.nav-search-wrapper.tdc-enlarged {
    position: relative;
}

/* =========================================================================
   7. Home hero search (Phase 4 — placeholder structure)
   Activated only on html.home-topic.
   ========================================================================= */

html.home-topic .tdc-hero-search {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: min(100%, 760px);
    margin: 0 auto 24px auto;
    padding: 0 3%;
    box-sizing: border-box;
}

html.home-topic .tdc-hero-search-form {
    display: flex;
    align-items: center;
    width: 100%;
    height: 56px;
    background: var(--tdc-color-bg);
    border: 1px solid var(--tdc-color-border-strong);
    border-radius: var(--tdc-radius-input);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    overflow: hidden;
}

html.home-topic .tdc-hero-search-form:focus-within {
    border-color: var(--tdc-color-primary);
    box-shadow: 0 0 0 4px rgba(0, 76, 151, 0.16), 0 6px 18px rgba(0, 0, 0, 0.08);
}

html.home-topic .tdc-hero-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 100%;
    color: var(--tdc-color-text-muted);
    flex: 0 0 auto;
}

html.home-topic .tdc-hero-search-icon svg {
    width: 20px;
    height: 20px;
}

html.home-topic .tdc-hero-search-input {
    flex: 1 1 auto;
    height: 100%;
    border: 0;
    background: transparent;
    font-family: var(--tdc-font);
    font-size: 1rem;
    color: var(--tdc-color-text);
    outline: none;
}

html.home-topic .tdc-hero-search-input::placeholder {
    color: var(--tdc-color-text-muted);
}

html.home-topic .tdc-hero-search-form .tdc-search-divider {
    height: 28px;
}

html.home-topic .tdc-hero-search-form .tdc-ask-ai-btn {
    height: 40px;
    padding: 0 18px;
    margin: 0 8px;
    font-size: 0.95rem;
}

@media (max-width: 600px) {
    html.home-topic .tdc-hero-search-form {
        height: 48px;
    }

    html.home-topic .tdc-hero-search-form .tdc-ask-ai-btn {
        height: 34px;
        padding: 0 12px;
        font-size: 0.85rem;
    }

    html.home-topic .tdc-hero-search-icon {
        width: 44px;
    }
}

/* =========================================================================
   8. Utility / accessibility
   ========================================================================= */

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

/* Note: a `@media (prefers-reduced-motion: reduce)` block was previously
   here to disable transitions for accessibility, but the Flare CSS parser
   does not yet recognise that media feature and errors out on the colon.
   The transitions in this stylesheet are all short (0.12-0.22s) and safe
   to leave running for users with motion sensitivity. */

/* =========================================================================
   9. Inline feedback card (replaces the floating "Was this page helpful?"
   button so it doesn't clash with the chat launcher in the bottom-right).
   The original anchor stays in the DOM (the Atlassian Jira collector binds
   its click handler to it on load) — we just hide it visually and forward
   clicks from this card.
   ========================================================================= */

#feedback-button {
    display: none !important;
}

.tdc-feedback {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 32px 0 0 0;
    padding: 16px 20px;
    background: var(--tdc-color-bg);
    border: 1px solid var(--tdc-color-border);
    border-radius: var(--tdc-radius-card);
    font-family: var(--tdc-font);
    flex-wrap: wrap;
}

.tdc-feedback-prompt {
    flex: 1 1 200px;
    color: var(--tdc-color-deep);
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}

.tdc-feedback-actions {
    display: inline-flex;
    gap: 8px;
    flex: 0 0 auto;
}

.tdc-feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--tdc-color-border-strong);
    border-radius: var(--tdc-radius-pill);
    background: transparent;
    color: var(--tdc-color-deep);
    font-family: var(--tdc-font);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}

.tdc-feedback-btn:hover {
    border-color: var(--tdc-color-primary);
    color: var(--tdc-color-primary);
    background: rgba(0, 76, 151, 0.04);
    transform: translateY(-1px);
}

.tdc-feedback-btn:focus-visible {
    outline: 2px solid var(--tdc-color-accent);
    outline-offset: 2px;
}

.tdc-feedback-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

@media (max-width: 600px) {
    /* Keep the prompt + button on one row (they fit at typical phone widths);
       the base flex-wrap lets the button drop below — left-aligned under the
       prompt — only when it genuinely can't fit. No forced column, which left
       the button floating awkwardly to the right. */
    .tdc-feedback {
        gap: 12px;
    }
}


/* =========================================================================
   10. Plan: Hero search placement + feedback CTA polish
   - Hide title-bar search when the hero search is active.
   - Relax the hero section's hardcoded 243px height.
   - Anchor the hero search to the hero copy block.
   - Promote the feedback button to a primary CTA.
   - Clamp the AI Overview body with a Show more / Show less toggle.
   - Override the skin's en-us 3px black focus border on the search bar.
   ========================================================================= */

/* --- Hero placement / nav search hide ------------------------------------ */

/* Hide the title-bar search on home pages where our hero search owns the
   search experience. Scoped to .tdc-hero-active so non-hero homepages keep
   their nav search. */
html.tdc-hero-active .nav-search-wrapper,
html.tdc-hero-active .nav-search {
    display: none !important;
}

/* Hide the floating launcher pill on home pages. Home pages always have a
   prominent search affordance (the hero search, or the title-bar nav
   search if no hero is rendered), so the bottom-right launcher would be a
   redundant second "Ask an expert" CTA. On topic pages the launcher
   continues to appear after first interaction as designed. */
html.home-topic .tdc-launcher {
    display: none !important;
}

/* Allow the hero section to grow to fit the search bar. The 243px in
   HomeTiles.css becomes a floor instead of a fixed cap. */
html.tdc-hero-active .thc-hero-section {
    height: auto;
    min-height: 280px;       /* was 243; needs more headroom for the search bar */
    padding-bottom: 28px;    /* explicit bottom space below the search bar so
                                it doesn't clip into the separator bar below */
}

/* Anchor the hero search to the left edge of the hero copy block so it lines
   up with the heading and body paragraph. Without these explicit overrides
   the bar inherits `align-items: center` and `margin: 0 auto` from the
   standalone-mode .tdc-hero-search rule and ends up centered. */
html.home-topic .thc-hero-copy .tdc-hero-search {
    align-items: flex-start;
    align-self: flex-start;
    margin: 18px 0 0 0;
    padding: 0;
    width: 100%;
    max-width: 560px;
}

/* --- Feedback CTA -------------------------------------------------------- */

/* "Send feedback" uses an understated outlined pill — neutral contour with
   navy text at rest — that turns brand-blue on hover. This keeps the pill
   shape + label prominent without a solid blue fill that would compete with
   the solid-blue "Ask an expert" button. */
.tdc-feedback-cta {
    border: 1px solid var(--tdc-color-border-strong) !important;
    background: transparent;
    color: var(--tdc-color-deep);
}

.tdc-feedback-cta:hover {
    background: rgba(0, 76, 151, 0.04);
    border-color: var(--tdc-color-primary) !important;
    color: var(--tdc-color-primary);
    transform: translateY(-1px);
}

/* --- AI Overview clamp + Show more / Show less --------------------------- */

/* Default collapsed state. ~360px shows about 12-14 lines of answer before
   the search results below get pushed off-screen. The body is positioned
   relative so the fade gradient can be absolutely placed over its bottom. */
.tdc-ai-overview-body {
    max-height: 360px;
    overflow: hidden;
    position: relative;
    transition: max-height 0.18s ease;
}

.tdc-ai-overview.tdc-expanded .tdc-ai-overview-body {
    max-height: none;
}

/* Fade-out gradient over the last ~80px of the clamped body. Only shown
   when overflow is present (.tdc-clamped) and we're not expanded. */
.tdc-ai-overview.tdc-clamped:not(.tdc-expanded) .tdc-ai-overview-body::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80px;
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.92) 70%,
        #FFFFFF 100%);
    pointer-events: none;
}

/* Show more / Show less toggle. Sits between the body and the sources/footer.
   Defensive styling: many docs themes (and the user-agent default) style
   <button> with padding/background/box-shadow/border. We need to defeat all
   of those so the toggle reads as a clean inline text-link with a small
   chevron, not a chunky button card. */
.tdc-ai-overview .tdc-ai-overview-toggle {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0 0;
    padding: 4px 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: var(--tdc-color-primary) !important;
    font-family: var(--tdc-font);
    font-size: 0.85rem !important;
    font-weight: 600;
    line-height: 1.2 !important;
    cursor: pointer;
    transition: color 0.12s ease;
    white-space: nowrap;
}

.tdc-ai-overview.tdc-clamped .tdc-ai-overview-toggle,
.tdc-ai-overview.tdc-expanded .tdc-ai-overview-toggle {
    display: inline-flex !important;
}

.tdc-ai-overview .tdc-ai-overview-toggle:hover {
    color: var(--tdc-color-deep) !important;
    background: transparent !important;
    text-decoration: underline;
}

.tdc-ai-overview .tdc-ai-overview-toggle:focus-visible {
    outline: 2px solid var(--tdc-color-accent);
    outline-offset: 2px;
}

/* Cap the chevron at 12px with !important on both width/height AND
   max-width/max-height so any global `svg { max-width: 100% }` rule from
   responsive Flare/skin stylesheets can't blow it up. */
.tdc-ai-overview .tdc-ai-overview-toggle svg {
    width: 12px !important;
    height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
    flex: 0 0 auto !important;
    transition: transform 0.18s ease;
}

.tdc-ai-overview.tdc-expanded .tdc-ai-overview-toggle svg {
    transform: rotate(180deg);
}

/* --- Search bar focus border fix ----------------------------------------- */

/* Override the skin's en-us "Search Bar" overrides
   (BorderTop/Bottom/Left/Right: solid 3px #000000 in
   SideNavigationTemplate.flskn) plus any browser default focus outline.
   We keep a clean 1px border that turns brand-blue on focus with a subtle
   3px outer glow ring. */
.nav-search-wrapper.tdc-enlarged .search-bar,
.nav-search-wrapper.tdc-enlarged .search-bar.search-bar-focus,
.nav-search-wrapper.tdc-enlarged .search-bar:hover,
.nav-search-wrapper.tdc-enlarged .search-bar:focus,
.nav-search-wrapper.tdc-enlarged .search-bar:focus-within {
    border-top:    1px solid var(--tdc-color-border-strong) !important;
    border-right:  1px solid var(--tdc-color-border-strong) !important;
    border-bottom: 1px solid var(--tdc-color-border-strong) !important;
    border-left:   1px solid var(--tdc-color-border-strong) !important;
    border-radius: var(--tdc-radius-input) !important;
    box-shadow: none;
}

.nav-search-wrapper.tdc-enlarged .search-bar.search-bar-focus,
.nav-search-wrapper.tdc-enlarged .search-bar:focus-within {
    border-color: var(--tdc-color-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 76, 151, 0.15);
}

/* Kill the input-level outline / border that browsers apply on focus, and
   any inherited skin border. The visible focus ring is on the wrapper.
   Use the long-form `background-color: transparent` (NOT the `background`
   shorthand) so we don't wipe out the magnifying glass icon that the skin
   sets via `background-image: url('search.png')`. */
.nav-search-wrapper.tdc-enlarged .search-field,
.nav-search-wrapper.tdc-enlarged .search-field:focus,
.nav-search-wrapper.tdc-enlarged .search-field:active,
.nav-search-wrapper.tdc-enlarged .search-field:hover {
    border: 0 !important;
    outline: none !important;
    background-color: transparent;
    box-shadow: none !important;
}


/* =========================================================================
   11. Zero-state welcome inside the chat panel
   Shown on first chat open (or any time the transcript is empty). Avoids
   needing a server-side bot greeting that would burn a generative-message
   credit per conversation. Hidden by JS as soon as any conversation
   activity hits the WebChat store or the user types in the send-box.
   ========================================================================= */

.tdc-zero-state {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 64px;            /* leave room for WebChat's send-box */
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
    background: var(--tdc-color-bg-soft);
    text-align: center;
    transition: opacity 0.18s ease;
    overflow-y: auto;
}

/* Use opacity + pointer-events rather than display:none so the WebChat
   send-box keeps its layout slot beneath us once the user starts typing. */
.tdc-zero-state.tdc-hidden {
    opacity: 0;
    pointer-events: none;
}

.tdc-zero-state-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

/* The AI.svg badge carries its own gradient shape/colors, so no circle
   wrapper — just size it (rendered as <img>, or inline <svg> fallback).
   Defensive resets (!important) defeat skin/global `img` rules — borders,
   padding, max-width — that otherwise trim or shrink the badge. */
.tdc-zero-state-icon svg,
.tdc-zero-state-icon img {
    width: 40px !important;
    height: 40px !important;
    max-width: none !important;
    min-width: 0;
    margin: 0;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    display: block;
    object-fit: contain;
    box-sizing: content-box;
}

.tdc-zero-state-title {
    font-family: var(--tdc-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--tdc-color-deep);
    margin: 0;
    line-height: 1.3;
}

.tdc-zero-state-subtitle {
    font-family: var(--tdc-font);
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--tdc-color-text-muted);
    margin: 0;
    max-width: 280px;
}

.tdc-zero-state-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    width: 100%;
    max-width: 320px;
}

.tdc-zero-state-chip {
    -webkit-appearance: none;
    appearance: none;
    border: 1px solid var(--tdc-color-border-strong);
    border-radius: var(--tdc-radius-pill);
    background: var(--tdc-color-bg);
    padding: 8px 14px;
    font-family: var(--tdc-font);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--tdc-color-deep);
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s ease, color 0.12s ease, transform 0.12s ease, background 0.12s ease;
    white-space: normal;
    line-height: 1.3;
}

.tdc-zero-state-chip:hover {
    border-color: var(--tdc-color-primary);
    color: var(--tdc-color-primary);
    background: rgba(0, 76, 151, 0.04);
    transform: translateY(-1px);
}

.tdc-zero-state-chip:focus-visible {
    outline: 2px solid var(--tdc-color-accent);
    outline-offset: 2px;
}