/* Deep Research V3 content. The existing mobile form and shared sidebar stay in place. */
#research-app[data-research-page="deep"] .dr-desktop-only { display: none; }

@media (min-width: 921px) {
    html body #research-app[data-research-page="deep"] {
        --dr-ink: #19343e;
        --dr-muted: #405b63;
        --dr-blue: #176ada;
        --dr-line: #e4eaf0;
        --dr-surface: #fff;
        --dr-soft: #f7fbff;
        --dr-hover: #fbfdff;
        --dr-chip-line: #dce8f4;
    }

    html body #research-app[data-research-page="deep"] .creation-main[data-fuuvo-app-scroll="1"] {
        position: relative;
        z-index: 1;
        isolation: auto !important;
        width: min(1240px, calc(100% - 96px)) !important;
        max-width: 1240px !important;
        min-height: calc(100dvh - 72px) !important;
        margin: 0 auto !important;
        padding: 28px 0 32px !important;
        background: transparent !important;
        color: var(--dr-ink);
    }

    html body #research-app[data-research-page="deep"] .dr-desktop-only { display: block; }

    html body #research-app[data-research-page="deep"] :is(.dr-legacy-heading, .dr-legacy-control),
    html body #research-app[data-research-page="deep"] .dr-settings > :is(h2, .research-setting-block),
    html body #research-app[data-research-page="deep"] .research-bottom-note { display: none !important; }

    html body #research-app[data-research-page="deep"] .dr-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.7;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    html body #research-app[data-research-page="deep"] .dr-heading {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 24px;
        margin: 0 0 29px;
    }

    html body #research-app[data-research-page="deep"] .dr-eyebrow {
        display: flex;
        align-items: center;
        gap: 7px;
        margin-bottom: 10px;
        color: #375f68;
        font-size: 10px;
        font-weight: 650;
        letter-spacing: .15em;
    }

    html body #research-app[data-research-page="deep"] .dr-eyebrow > span {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #168fa4;
    }

    html body #research-app[data-research-page="deep"] .dr-heading h1 {
        margin: 0;
        color: var(--dr-ink) !important;
        font-size: 39px !important;
        font-weight: 650;
        line-height: 1.15 !important;
        letter-spacing: -1.6px;
    }

    html body #research-app[data-research-page="deep"] .dr-heading h1 > span { color: #168be0; }

    html body #research-app[data-research-page="deep"] .dr-heading p {
        margin: 11px 0 0;
        color: var(--dr-muted) !important;
        font-size: 14px;
        line-height: 1.5;
    }

    html body #research-app[data-research-page="deep"] .dr-history {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        flex-shrink: 0;
        padding: 10px 0 6px;
        color: #385a6a !important;
        font-size: 12px;
        font-weight: 600;
        text-decoration: none;
    }

    html body #research-app[data-research-page="deep"] .dr-history .dr-icon { width: 17px; height: 17px; }
    html body #research-app[data-research-page="deep"] .dr-history .dr-icon:last-child { width: 15px; margin-left: 11px; }
    html body #research-app[data-research-page="deep"] .dr-history:hover { color: var(--dr-blue) !important; }

    html body #research-app[data-research-page="deep"] .research-work-grid.dr-workbench {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        border: 1px solid #e0e7ee;
        border-radius: 23px;
        background: var(--dr-surface);
        box-shadow: 0 18px 60px -34px #254c7142;
    }

    html body #research-app[data-research-page="deep"] #deep-research-form.research-panel {
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0;
        background: var(--dr-surface) !important;
        box-shadow: none;
    }

    html body #research-app[data-research-page="deep"] .dr-settings.research-panel {
        display: contents;
        margin: 0;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }

    html body #research-app[data-research-page="deep"] .dr-brief { padding: 24px 29px 18px; }

    html body #research-app[data-research-page="deep"] .dr-section-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
    }

    html body #research-app[data-research-page="deep"] .dr-section-head h2 {
        margin: 0;
        color: var(--dr-ink) !important;
        font-size: 18px;
        font-weight: 650;
        line-height: 1.5;
        letter-spacing: -.3px;
    }

    html body #research-app[data-research-page="deep"] .dr-text-button {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 7px 0 7px 10px;
        border: 0;
        background: transparent !important;
        color: #3c6374 !important;
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
        cursor: pointer;
    }

    html body #research-app[data-research-page="deep"] .dr-text-button .dr-icon { width: 16px; height: 16px; }
    html body #research-app[data-research-page="deep"] .dr-text-button:hover { color: var(--dr-blue) !important; }

    html body #research-app[data-research-page="deep"] .dr-input-wrap { position: relative; margin-top: 16px; }

    html body #research-app[data-research-page="deep"] #deep-question.research-field {
        display: block;
        width: 100%;
        height: 96px;
        min-height: 96px;
        max-height: 250px;
        padding: 4px 36px 24px 0 !important;
        resize: vertical;
        border: 0 !important;
        border-radius: 0 !important;
        outline: none;
        background: var(--dr-surface) !important;
        background-image: none !important;
        box-shadow: none !important;
        color: var(--dr-ink) !important;
        -webkit-text-fill-color: var(--dr-ink) !important;
        font-size: 20px !important;
        font-weight: 400;
        line-height: 1.55;
        letter-spacing: -.3px;
    }

    html body #research-app[data-research-page="deep"] #deep-question::placeholder {
        color: #526870 !important;
        -webkit-text-fill-color: #526870 !important;
        opacity: 1;
    }

    html body #research-app[data-research-page="deep"] .dr-input-wrap:focus-within::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -1px;
        left: 0;
        height: 2px;
        border-radius: 2px;
        background: #3b87e6;
        pointer-events: none;
    }

    html body #research-app[data-research-page="deep"] .dr-count {
        right: 0;
        bottom: 2px;
        padding-left: 6px;
        background: var(--dr-surface);
        color: #526870;
        font-size: 11px;
        pointer-events: none;
    }

    html body #research-app[data-research-page="deep"] .dr-clear {
        position: absolute;
        top: 2px;
        right: 0;
        display: grid;
        place-items: center;
        width: 26px;
        height: 26px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #f2f5f8;
        color: #5b6c78;
        cursor: pointer;
    }

    html body #research-app[data-research-page="deep"] .dr-clear[hidden] { display: none !important; }
    html body #research-app[data-research-page="deep"] .dr-clear .dr-icon { width: 14px; height: 14px; }

    html body #research-app[data-research-page="deep"] .dr-attachment-toolbar {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 20px;
        margin-top: 17px;
    }

    html body #research-app[data-research-page="deep"] .dr-attach {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 12px;
        border: 1px solid #e0e7ee;
        border-radius: 9px;
        background: var(--dr-surface);
        color: var(--dr-muted);
        font-size: 13px;
        font-weight: 550;
        white-space: nowrap;
        cursor: pointer;
    }

    html body #research-app[data-research-page="deep"] .dr-attach .dr-icon { width: 16px; height: 16px; }
    html body #research-app[data-research-page="deep"] .dr-attach:hover { border-color: #b6d2ec; background: var(--dr-soft); }

    html body #research-app[data-research-page="deep"] .research-reference-upload { margin-top: 11px; }
    html body #research-app[data-research-page="deep"] .research-reference-dropzone { display: none; }

    html body #research-app[data-research-page="deep"] .research-reference-file-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
    }

    html body #research-app[data-research-page="deep"] .research-reference-file {
        min-height: 0;
        max-width: 100%;
        padding: 6px 8px 6px 11px;
        border: 1px solid var(--dr-chip-line);
        border-radius: 8px;
        background: var(--dr-soft);
        color: var(--dr-muted);
        font-size: 12px;
    }

    html body #research-app[data-research-page="deep"] .research-reference-file-icon { display: none; }
    html body #research-app[data-research-page="deep"] .research-reference-file-copy { flex: initial; }
    html body #research-app[data-research-page="deep"] .research-reference-file-copy :is(strong, small) {
        display: inline;
        margin: 0;
        color: var(--dr-muted);
        font-size: 12px;
        font-weight: 400;
        white-space: normal;
        overflow-wrap: anywhere;
    }
    html body #research-app[data-research-page="deep"] .research-reference-file-copy small::before { content: " · "; }
    html body #research-app[data-research-page="deep"] .research-reference-file-remove {
        width: 24px;
        height: 24px;
        min-width: 24px;
        flex-basis: 24px;
        font-size: 16px;
    }

    html body #research-app[data-research-page="deep"] .dr-output {
        padding: 20px 29px 23px;
        border-top: 1px solid var(--dr-line);
    }

    html body #research-app[data-research-page="deep"] .dr-output > h3 {
        margin: 0 0 12px;
        color: var(--dr-ink) !important;
        font-size: 14px;
        font-weight: 650;
    }

    html body #research-app[data-research-page="deep"] .dr-formats.research-variant-row {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr 1.55fr;
        gap: 10px;
    }

    html body #research-app[data-research-page="deep"] .dr-format.research-variant {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-width: 0;
        min-height: 56px;
        padding: 10px;
        border: 1px solid #e0e7ee;
        border-radius: 10px;
        background: var(--dr-surface) !important;
        box-shadow: none !important;
        color: #526870 !important;
        font-size: 13px;
        font-weight: 550;
        line-height: 1.4;
        text-align: center;
        cursor: pointer;
    }

    html body #research-app[data-research-page="deep"] .dr-format :is(img, .dr-icon) {
        width: 17px;
        height: 17px;
        flex: 0 0 17px;
        object-fit: contain;
    }

    html body #research-app[data-research-page="deep"] .dr-format:hover { border-color: #a8c7ea; }
    html body #research-app[data-research-page="deep"] .dr-format.active { border-color: transparent; }

    html body #research-app[data-research-page="deep"] .dr-format.active::before {
        content: "";
        position: absolute;
        inset: -1px;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(115deg, #0066ff 0%, #ff3038 25%, #ffcb05 50%, #00a83c 75%, #0066ff 100%);
        background-size: 260% 260%;
        background-position: 0% 50%;
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        pointer-events: none;
        animation: fuuvo-deep-selection-colour 5s ease-in-out infinite;
        animation-play-state: var(--fuuvo-colour-play-state, running);
    }

    html body #research-app[data-research-page="deep"] .dr-workbench-footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        padding: 17px 29px;
        border-top: 1px solid var(--dr-line);
        background: var(--dr-surface);
    }

    html body #research-app[data-research-page="deep"] .dr-error {
        margin: 0;
        padding: 12px 29px;
        border-top: 1px solid #f1d4d0;
        background: #fff3f1;
        color: #a63429;
        font-size: 13px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    html body #research-app[data-research-page="deep"] .dr-error[hidden] { display: none !important; }

    html body #research-app[data-research-page="deep"] .dr-trust {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #526870;
        font-size: 12px;
    }

    html body #research-app[data-research-page="deep"] .dr-trust .dr-icon { width: 15px; height: 15px; color: #437b8f; }
    html body #research-app[data-research-page="deep"] .dr-start-group { display: flex; align-items: center; gap: 18px; }
    html body #research-app[data-research-page="deep"] .dr-keyboard { color: #526870; font-size: 11px; }

    html body #research-app[data-research-page="deep"] #start-deep-research.dr-start {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 25px;
        width: auto;
        min-width: 190px;
        min-height: 46px;
        margin: 0;
        padding: 11px 19px;
        border: 0;
        border-radius: 10px;
        background: linear-gradient(115deg, #116be0, #246cda) !important;
        box-shadow: 0 5px 12px #176ada1f;
        color: #fff !important;
        -webkit-text-fill-color: #fff !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.5;
    }

    html body #research-app[data-research-page="deep"] #start-deep-research.dr-start:hover { background: #125fc6 !important; }
    html body #research-app[data-research-page="deep"] #start-deep-research.dr-start .dr-icon { width: 17px; height: 17px; }
    html body #research-app[data-research-page="deep"] #start-deep-research.dr-start:disabled { opacity: .65; cursor: wait; }

    html body #research-app[data-research-page="deep"] .dr-under {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
        margin-top: 14px;
        color: #526870;
        font-size: 12px;
    }

    html body #research-app[data-research-page="deep"] .dr-under > span { padding-top: 3px; text-align: right; }
    html body #research-app[data-research-page="deep"] .dr-how summary {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 3px 0;
        list-style: none;
        cursor: pointer;
    }
    html body #research-app[data-research-page="deep"] .dr-how summary::-webkit-details-marker { display: none; }
    html body #research-app[data-research-page="deep"] .dr-how summary .dr-icon { width: 13px; height: 13px; }
    html body #research-app[data-research-page="deep"] .dr-how[open] summary .dr-icon { transform: rotate(180deg); }
    html body #research-app[data-research-page="deep"] .dr-how ol {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
        max-width: 640px;
        margin: 12px 0 0;
        padding-left: 17px;
        font-size: 11px;
    }

    html body #research-app[data-research-page="deep"] .dr-inspiration { margin: 29px 0 30px; }
    html body #research-app[data-research-page="deep"] .dr-inspiration-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 13px; }
    html body #research-app[data-research-page="deep"] .dr-inspiration-head h2 { margin: 0; color: var(--dr-ink) !important; font-size: 13px; font-weight: 600; }
    html body #research-app[data-research-page="deep"] .dr-inspiration-head > span { color: #526870; font-size: 12px; }
    html body #research-app[data-research-page="deep"] .dr-examples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

    html body #research-app[data-research-page="deep"] .dr-example-card {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        padding: 16px;
        border: 1px solid var(--dr-line);
        border-radius: 13px;
        background: var(--dr-surface);
        color: var(--dr-ink);
        text-align: left;
        cursor: pointer;
    }

    html body #research-app[data-research-page="deep"] .dr-example-card:hover { background: var(--dr-hover); border-color: #b9d3ef; }
    html body #research-app[data-research-page="deep"] .dr-example-icon {
        display: grid;
        place-items: center;
        width: 39px;
        height: 39px;
        flex: 0 0 39px;
        border-radius: 11px;
        background: #e5f8f0;
        color: #247a64;
    }
    html body #research-app[data-research-page="deep"] .dr-example-card[data-deep-example="compare"] .dr-example-icon { background: #edf3ff; color: #4871b9; }
    html body #research-app[data-research-page="deep"] .dr-example-card[data-deep-example="trend"] .dr-example-icon { background: #f6edff; color: #855db5; }
    html body #research-app[data-research-page="deep"] .dr-example-icon .dr-icon { width: 18px; height: 18px; }
    html body #research-app[data-research-page="deep"] .dr-example-card strong { display: block; margin-bottom: 3px; font-size: 13px; font-weight: 600; line-height: 1.5; }
    html body #research-app[data-research-page="deep"] .dr-example-card small { display: block; color: #526870; font-size: 12px; line-height: 1.5; }
    html body #research-app[data-research-page="deep"] .dr-example-arrow { width: 15px; height: 15px; margin-left: auto; color: #5c7785; }

    html body #research-app[data-research-page="deep"] .fuuvo-ai-disclaimer {
        margin-top: 0 !important;
        padding: 20px 0 24px !important;
        border-top: 1px solid #edf0f3;
        background: transparent !important;
        color: #526870 !important;
        font-size: 11px !important;
    }

    html body #research-app[data-research-page="deep"] :is(button, a, summary):focus-visible {
        outline: 3px solid #3b87e6;
        outline-offset: 4px;
    }

    html body[data-ui-theme="dark"] #research-app[data-research-page="deep"] {
        --dr-ink: #e4f0f2;
        --dr-muted: #bdcfd6;
        --dr-blue: #8fc7ff;
        --dr-line: #354550;
        --dr-surface: #1b2833;
        --dr-soft: #223746;
        --dr-hover: #233341;
        --dr-chip-line: #40596a;
    }

    html body[data-ui-theme="dark"] #research-app[data-research-page="deep"] .dr-workbench { border-color: var(--dr-line); }
    html body[data-ui-theme="dark"] #research-app[data-research-page="deep"] .dr-error {
        border-color: #6e3e40;
        background: #3c282e;
        color: #ffc4bc;
    }
    html body[data-ui-theme="dark"] #research-app[data-research-page="deep"] :is(.dr-eyebrow, .dr-history, .dr-text-button, .dr-trust, .dr-keyboard, .dr-count, .dr-under, .dr-inspiration-head > span, .dr-example-card small, .fuuvo-ai-disclaimer) {
        color: var(--dr-muted) !important;
    }
    html body[data-ui-theme="dark"] #research-app[data-research-page="deep"] #deep-question::placeholder {
        color: #a9c0cc !important;
        -webkit-text-fill-color: #a9c0cc !important;
    }
    html body[data-ui-theme="dark"] #research-app[data-research-page="deep"] .dr-clear { background: #2b3d4b; color: #c5d9e3; }
    html body[data-ui-theme="dark"] #research-app[data-research-page="deep"] .dr-attach { border-color: var(--dr-line); }
    html body[data-ui-theme="dark"] #research-app[data-research-page="deep"] .dr-format.research-variant { color: var(--dr-muted) !important; border-color: var(--dr-line); }
    html body[data-ui-theme="dark"] #research-app[data-research-page="deep"] .dr-format.active { border-color: transparent; }
    html body[data-ui-theme="dark"] #research-app[data-research-page="deep"] .dr-example-icon { background: #214e44; color: #9ae2c7; }
    html body[data-ui-theme="dark"] #research-app[data-research-page="deep"] .dr-example-card[data-deep-example="compare"] .dr-example-icon { background: #293f5b; color: #acd0ff; }
    html body[data-ui-theme="dark"] #research-app[data-research-page="deep"] .dr-example-card[data-deep-example="trend"] .dr-example-icon { background: #47365e; color: #d8bcff; }

    @media (min-width: 1700px) {
        html body #research-app[data-research-page="deep"] .creation-main[data-fuuvo-app-scroll="1"] { padding-top: 42px !important; }
        html body #research-app[data-research-page="deep"] .dr-heading { margin-bottom: 35px; }
        html body #research-app[data-research-page="deep"] .dr-heading h1 { font-size: 43px !important; }
        html body #research-app[data-research-page="deep"] .dr-brief { padding-top: 29px; }
        html body #research-app[data-research-page="deep"] .dr-output { padding-top: 25px; padding-bottom: 25px; }
    }

    @media (max-width: 1150px) {
        html body #research-app[data-research-page="deep"] .creation-main[data-fuuvo-app-scroll="1"] { width: calc(100% - 56px) !important; }
        html body #research-app[data-research-page="deep"] .dr-formats.research-variant-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        html body #research-app[data-research-page="deep"] .dr-format.research-variant { flex-direction: column; gap: 4px; min-height: 72px; padding: 8px 5px; font-size: 12px; }
        html body #research-app[data-research-page="deep"] .dr-example-card { gap: 9px; padding: 13px; }
        html body #research-app[data-research-page="deep"] .dr-example-card small { font-size: 11px; }
        html body #research-app[data-research-page="deep"] :is(.dr-example-arrow, .dr-keyboard) { display: none; }
    }

    @media (prefers-reduced-motion: reduce) {
        html body #research-app[data-research-page="deep"] .dr-format.active::before { animation: none !important; }
    }
}

@keyframes fuuvo-deep-selection-colour {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}