/* =============================================================================
   Responses – unified, conflict‑free styles (light + dark)
   Replace your current responses.css with THIS file.
   ========================================================================== */

/* Optional font (safe to keep or remove) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');

/* ---------- Design tokens ---------- */
/* All variables consolidated into custom.css to avoid conflicts */

/* All variables consolidated into custom.css to avoid conflicts */

/* ---------- Layout ---------- */
.resp-accordion{
    margin: 16px 0;
    font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.resp-item{
    /*--tone: var(--tone-2xx); !* default (overridden per status below) *!*/
    --tint: var(--resp-surface-2);

    border: 1px solid #e4e8f1;
    border-radius: 8px;
    /*margin: 12px 0;*/
    background: transparent;
    /* border: 1px solid; */
    overflow: hidden;
    margin-bottom: 10px;
}

.resp-item:last-child{ margin-bottom: 0; }

/* status → tone mapping */
/* .resp-item[data-code^="1"]{ --tone: var(--tone-1xx); --tint: var(--tint-1xx); }
.resp-item[data-code^="2"]{ --tone: var(--tone-2xx); --tint: var(--tint-2xx); }
.resp-item[data-code^="3"]{ --tone: var(--tone-3xx); --tint: var(--tint-3xx); }
.resp-item[data-code^="4"]{ --tone: var(--tone-4xx); --tint: var(--tint-4xx); }
.resp-item[data-code^="5"]{ --tone: var(--tone-5xx); --tint: var(--tint-5xx); } */

/* header - works with both button and summary */
.resp-head,
summary.resp-head {
    width:100%;
    padding:12px 16px;
    background: var(--resp-surface-2);
    border: 0;
    text-align:left;
    cursor:pointer;
    font: 600 14px/1.2 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    display:flex; align-items:center; gap:8px;
    position:relative;
    transition: background-color .15s ease;
    font-size: 16px !important;
    list-style: none; /* Remove default marker */
}

/* Remove default details marker */
summary.resp-head::-webkit-details-marker {
    display: none;
}
summary.resp-head::marker {
    display: none;
}

.resp-head:hover,
summary.resp-head:hover { 
    background: rgba(148,163,184,.12); 
}
.resp-head:focus,
summary.resp-head:focus { 
    outline:2px solid var(--tone); outline-offset:2px; 
}

/* slim color rail */
.resp-head::before{
    content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:999px;
    background: var(--tone);
}

/* body - works with both old and new structure */
.resp-body { 
    display:none; 
    padding:16px; 
    background:var(--resp-surface);
}

/* Show body when item is open (old structure), details is open, or checkbox is checked */
.resp-item[data-open="true"] .resp-body,
details.resp-item[open] .resp-body,
#resp-200:checked + .resp-item[data-code="200"] .resp-body,
#resp-400:checked + .resp-item[data-code="400"] .resp-body,
#resp-401:checked + .resp-item[data-code="401"] .resp-body {
    display: block;
    border: 1px solid;
    border-color: #f1f5fb;
    border-color: color-mix(in srgb, #e4e8f1 30%, #ffffff 70%);
    box-shadow:
            0 0 0 1px rgba(148,163,184,.06),
            0 0 0 2px rgba(148,163,184,.05);
}

/* Active card: extra-light neutral border + very soft halo */
.resp-item[data-open="true"],
details.resp-item[open],
#resp-200:checked + .resp-item[data-code="200"],
#resp-400:checked + .resp-item[data-code="400"],
#resp-401:checked + .resp-item[data-code="401"] {
    /* fallback first, then color-mix for modern browsers */
    border-color: #f1f5fb;
    border-color: color-mix(in srgb, #e4e8f1 30%, #ffffff 70%);
    box-shadow:
            0 0 0 1px rgba(148,163,184,.06),
            0 0 0 2px rgba(148,163,184,.05);
    border-radius: 8px;
}

/* Reset styles when no radio is checked */
.resp-item {
    transition: all 0.2s ease;
}

.resp-item[data-open="true"] .resp-head,
details.resp-item[open] summary.resp-head,
#resp-200:checked + .resp-item[data-code="200"] label.resp-head,
#resp-400:checked + .resp-item[data-code="400"] label.resp-head,
#resp-401:checked + .resp-item[data-code="401"] label.resp-head { 
    background: var(--tint); 
}

/* code block styling - simple approach using CSS variables */
.resp-body pre {
    margin:0;
    padding:14px;
    border-radius: 10px;
    border:1px solid var(--resp-line);
    box-shadow: inset 2px 0 0 var(--tone);
    overflow-x:auto;
    background: var(--resp-code-bg);
    position: relative;
}

.resp-accordion .resp-body pre {
    background: var(--resp-code-bg);
    border-color: var(--resp-line);
}

/* Revert: Remove light background styling for regular JSON code blocks */
/* Only keep light background for response accordion sections */

/* Code text: darker, roomier for readability */
/* Code text: darker, roomier for readability — scoped to Responses only */
.resp-accordion .resp-item .resp-body pre > code{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
    font-size: 13.5px;
    line-height: 1.6;
    color: #0f172a !important; /* slate-900 - dark text for light background */
    -webkit-font-smoothing: antialiased;
    tab-size: 2;
}

/* Dark mode syntax highlighting for response code blocks */
@media (prefers-color-scheme: dark) {
    .resp-accordion .resp-item .resp-body pre > code {
        color: #e5e7eb !important; /* Light gray for dark background */
    }
    
    /* Enhanced syntax highlighting colors for dark background */
    .resp-accordion .resp-item .resp-body pre > code .token.property {
        color: #60a5fa !important; /* Light blue for properties */
    }
    
    .resp-accordion .resp-item .resp-body pre > code .token.string {
        color: #34d399 !important; /* Light green for strings */
    }
    
    .resp-accordion .resp-item .resp-body pre > code .token.number {
        color: #fbbf24 !important; /* Light yellow for numbers */
    }
    
    .resp-accordion .resp-item .resp-body pre > code .token.boolean,
    .resp-accordion .resp-item .resp-body pre > code .token.null {
        color: #a78bfa !important; /* Light purple for boolean/null */
    }
    
    .resp-accordion .resp-item .resp-body pre > code .token.punctuation {
        color: #9ca3af !important; /* Light gray for punctuation */
    }
    
    .resp-accordion .resp-item .resp-body pre > code .token.operator {
        color: #9ca3af !important; /* Light gray for operators */
    }
}

/* Optional: token colors (safe no-ops if your highlighter doesn't emit .token nodes) */
.resp-accordion .resp-item .resp-body pre > code .token.property    { color: #2563eb; }
.resp-accordion .resp-item .resp-body pre > code .token.string      { color: #0d9488; }
.resp-accordion .resp-item .resp-body pre > code .token.number      { color: #b45309; }
.resp-accordion .resp-item .resp-body pre > code .token.boolean,
.resp-accordion .resp-item .resp-body pre > code .token.null        { color: #7c3aed; }
.resp-accordion .resp-item .resp-body pre > code .token.punctuation { color: #94a3b8; }


/* badges - ONLY within response accordions */
.resp-accordion .http-badge{
    display:inline-flex; align-items:center; gap:6px;
    padding:2px 8px; border-radius:6px; font: 600 11px/1 'Poppins', system-ui, sans-serif;
    border:1px solid transparent;
    font-size: 14px !important;
}
.resp-accordion .http-1xx{ color: var(--tone-1xx); border-color: rgba(100,116,139,.25); }
.resp-accordion .http-2xx{ color: var(--tone-2xx); border-color: rgba(22,163,74,.25); }
.resp-accordion .http-3xx{ color: var(--tone-3xx); border-color: rgba(37,99,235,.25); }
.resp-accordion .http-4xx{ color: var(--tone-4xx); border-color: rgba(217,119,6,.25); }
.resp-accordion .http-5xx{ color: var(--tone-5xx); border-color: rgba(220,38,38,.25); }
/*.resp-accordion .http-5xx{ background: var(--tint-5xx); color: var(--tone-5xx); border-color: rgba(220,38,38,.25); }*/

/*!* Accordion visibility – support both item-level and body-level toggles *!*/
/*.resp-item[data-open="true"] .resp-body,*/
/*.resp-body[data-open="true"] {*/
/*    display: block;*/
/*}*/

/* Copy button - works in both response accordions and regular code blocks */
.resp-accordion .resp-body pre,
pre:has(code.language-json),
pre { position: relative; } /* Enable positioning for copy button */

.resp-copy{
    position: absolute; top: 8px; right: 8px;
    padding: 4px 8px; border-radius: 6px;
    font: 600 11px/1 'Poppins', system-ui, sans-serif;
    color: var(--resp-copy-text);
    background: var(--resp-copy-bg);
    border: 1px solid var(--resp-copy-border);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    z-index: 10;
}
.resp-copy:hover { background: var(--resp-copy-hover); }

/* NUCLEAR OPTION - Override everything for copy buttons */
/* Use CSS custom properties that can't be easily overridden */

/* Variables moved to custom.css */

/* Target the exact button structure we found in the generated HTML */
button[type="button"][class="resp-copy"][aria-label="Copy code"][onclick*="copyResponseCode"],
button.resp-copy[aria-label="Copy code"],
button[onclick*="copyResponseCode"],
/* Also target any Retype-generated copy buttons */
pre code.language-json ~ button,
pre code.language-json + button,
pre:has(code.language-json) button,
pre:has(.language-json) button,
pre button,
button[class*="copy"],
button[aria-label*="Copy"],
button[aria-label*="copy"],
*[class*="resp-copy"],
*[onclick*="copy"] {
    background: var(--resp-copy-bg) !important;
    background-color: var(--resp-copy-bg) !important;
    border: 1px solid var(--resp-copy-border) !important;
    border-color: var(--resp-copy-border) !important;
    color: var(--resp-copy-text) !important;
}

/* Hover states */
pre code.language-json ~ button:hover,
pre code.language-json + button:hover,
pre:has(code.language-json) button:hover,
pre:has(.language-json) button:hover,
pre button.resp-copy:hover,
pre .resp-copy:hover,
button[class*="copy"]:hover,
button[aria-label*="Copy"]:hover,
button[onclick*="copy"]:hover,
*[class*="resp-copy"]:hover,
*[onclick*="copyResponseCode"]:hover {
    background: var(--resp-copy-hover) !important;
    background-color: var(--resp-copy-hover) !important;
}

/* Dark mode copy button support using multiple approaches */
[data-theme="dark"] .resp-accordion .resp-body .resp-copy,
[data-theme="dark"] .resp-accordion .resp-body button.resp-copy,
[data-theme="dark"] button[onclick*="copyResponseCode"],
[data-theme="dark"] button.resp-copy[aria-label="Copy code"],
html[data-theme="dark"] .resp-accordion .resp-body .resp-copy,
html[data-theme="dark"] .resp-accordion .resp-body button.resp-copy,
html[data-theme="dark"] button[onclick*="copyResponseCode"],
html[data-theme="dark"] button.resp-copy[aria-label="Copy code"],
html.dark .resp-accordion .resp-body .resp-copy,
html.dark .resp-accordion .resp-body button.resp-copy,
html.dark button[onclick*="copyResponseCode"],
html.dark button.resp-copy[aria-label="Copy code"],
.dark .resp-accordion .resp-body .resp-copy,
.dark .resp-accordion .resp-body button.resp-copy,
.dark button[onclick*="copyResponseCode"],
.dark button.resp-copy[aria-label="Copy code"] {
    background: rgba(55, 65, 81, 0.95) !important;
    background-color: rgba(55, 65, 81, 0.95) !important;
    border: 1px solid #6b7280 !important;
    border-color: #6b7280 !important;
    color: #e5e7eb !important;
}

/* Dark mode hover states */
[data-theme="dark"] .resp-accordion .resp-body .resp-copy:hover,
[data-theme="dark"] .resp-accordion .resp-body button.resp-copy:hover,
[data-theme="dark"] button[onclick*="copyResponseCode"]:hover,
[data-theme="dark"] button.resp-copy[aria-label="Copy code"]:hover,
html[data-theme="dark"] .resp-accordion .resp-body .resp-copy:hover,
html[data-theme="dark"] .resp-accordion .resp-body button.resp-copy:hover,
html[data-theme="dark"] button[onclick*="copyResponseCode"]:hover,
html[data-theme="dark"] button.resp-copy[aria-label="Copy code"]:hover,
html.dark .resp-accordion .resp-body .resp-copy:hover,
html.dark .resp-accordion .resp-body button.resp-copy:hover,
html.dark button[onclick*="copyResponseCode"]:hover,
html.dark button.resp-copy[aria-label="Copy code"]:hover,
.dark .resp-accordion .resp-body .resp-copy:hover,
.dark .resp-accordion .resp-body button.resp-copy:hover,
.dark button[onclick*="copyResponseCode"]:hover,
.dark button.resp-copy[aria-label="Copy code"]:hover {
    background: #4b5563 !important;
    background-color: #4b5563 !important;
}

@media screen and (prefers-color-scheme: dark) {
    .resp-accordion .resp-body .resp-copy,
    .resp-accordion .resp-body button.resp-copy,
    .resp-accordion .resp-item .resp-body .resp-copy,
    .resp-accordion .resp-item .resp-body button.resp-copy,
    button[type="button"][class="resp-copy"][aria-label="Copy code"][onclick*="copyResponseCode"],
    button[onclick*="copyResponseCode"],
    button.resp-copy[aria-label="Copy code"],
    pre button.resp-copy {
        background: rgba(55, 65, 81, 0.95) !important;
        background-color: rgba(55, 65, 81, 0.95) !important;
        border: 1px solid #6b7280 !important;
        border-color: #6b7280 !important;
        color: #e5e7eb !important;
    }
    
    .resp-accordion .resp-body .resp-copy:hover,
    .resp-accordion .resp-body button.resp-copy:hover,
    .resp-accordion .resp-item .resp-body .resp-copy:hover,
    .resp-accordion .resp-item .resp-body button.resp-copy:hover,
    button[type="button"][class="resp-copy"][aria-label="Copy code"][onclick*="copyResponseCode"]:hover,
    button[onclick*="copyResponseCode"]:hover,
    button.resp-copy[aria-label="Copy code"]:hover,
    pre button.resp-copy:hover {
        background: #4b5563 !important;
        background-color: #4b5563 !important;
    }
}

/* “Copied” flash */
.resp-copy::after {
    content: "";
    position: absolute; top: -6px; right: 100%; margin-right: 8px;
    opacity: 0; pointer-events: none;
}
.resp-copy[data-copied="true"]::after {
    content: "Copied!";
    background: rgba(15,23,42,.92); /* neutral dark bubble for light mode */
    color: #fff;
    margin-top: 8px;
    padding: 3px 8px; border-radius: 8px; font-weight: 600;
    font-size: 12px;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    opacity: 1;
    animation: resp-copied-pop 1.2s ease forwards;
}

@keyframes resp-copied-pop {
    0% { transform: translateY(4px) scale(.98); opacity: 0; }
    15% { transform: translateY(0) scale(1); opacity: 1; }
    90% { transform: translateY(-2px) scale(.99); opacity: .95; }
    100% { opacity: 0; }
}

/*@media (prefers-color-scheme: dark){*/
/*    .resp-copy{*/
/*        color: #e5e7eb; background: rgba(17,24,39,.8);*/
/*        border-color: #334155;*/
/*    }*/
/*    .resp-copy[data-copied="true"]::after{*/
/*        background: rgba(148,163,184,.25); color: #e5e7eb;*/
/*    }*/
/*}*/

/* ensure the checkbox controls its sibling item */
.resp-accordion input[type="checkbox"] + .resp-item .resp-body{ display:none; }
.resp-accordion input[type="checkbox"]:checked + .resp-item .resp-body{ display:block; }