/* KRITERA AI System — Design System */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&family=Red+Hat+Display:wght@600;700;800&display=swap');

/* =====================================================
   ROOT TOKENS — Neutral (cool) grayscale palette
   ===================================================== */
:root {
    --neutral-bg-1: #F0F0F0;
    --neutral-bg-2: #EAEAEA;
    --neutral-bg-card: #F5F5F5;
    --neutral-bg-hover: #E4E4E4;
    --neutral-bg-elevated: #EAEAEA;

    --text-primary: #1C1C1C;
    --text-secondary: #737373;

    --stroke-card: #CECECE;
    --stroke-control: #E4E4E4;

    --brand-primary: #0078D4;
    --brand-secondary: #106EBE;
    --brand-tertiary: #EFF6FC;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    --shadow-card: 0px 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-hover: 0px 8px 16px rgba(0, 0, 0, 0.10);

    /* Plate palette */
    --plate-blue-bg: #E0F4FF;
    --plate-blue-text: #005A9E;
    --plate-orange-bg: #FFF4CE;
    --plate-orange-text: #E35B28;
    --plate-pink-bg: #FDE7E9;
    --plate-pink-text: #BE3D58;
    --plate-green-bg: #E6F7E9;
    --plate-green-text: #1A4432;
    --plate-purple-bg: #F3E5F5;
    --plate-purple-text: #5C2E91;
    --plate-red-bg: #FCE8E6;
    --plate-red-text: #C5221F;
    --plate-cyan-bg: #E0F7F5;
    --plate-cyan-text: #00665E;
    --plate-indigo-bg: #E8EAF6;
    --plate-indigo-text: #3F51B5;
    --plate-teal-bg: #E0F2F1;
    --plate-teal-text: #009688;
    --plate-lime-bg: #F9FBE7;
    --plate-lime-text: #827717;
    --plate-amber-bg: #FFF8E1;
    --plate-amber-text: #FF6F00;
    --plate-brown-bg: #EFEBE9;
    --plate-brown-text: #5D4037;

    /* Legacy map for JS */
    --aiuc-primary: #759AC8;
    --aiuc-gradient: linear-gradient(135deg, #759AC8 0%, #3AB583 100%);
}

/* =====================================================
   DARK MODE TOKENS
   ===================================================== */
.aiuc-dark,
[data-theme="dark"] {
    --neutral-bg-1: #252525;
    --neutral-bg-2: #2E2E2E;
    --neutral-bg-card: #1A1A1A;
    --neutral-bg-hover: #383838;
    --neutral-bg-elevated: #2E2E2E;

    --text-primary: #EDEDED;
    --text-secondary: #ADADAD;

    --stroke-card: #383838;
    --stroke-control: #383838;

    --brand-primary: #3EA6D4;
    --brand-secondary: #2E90BF;
    --brand-tertiary: #1A3A50;
}

/* =====================================================
   BASE RESET
   ===================================================== */
.aiuc-wrap,
.aiuc-wrap * {
    box-sizing: border-box;
    font-family: "Inter", sans-serif;
}

/* Tabler Icon base */
.aiuc-wrap .tabler-icon {
    width: 20px;
    height: 20px;
    stroke-width: 1.5;
    stroke: currentColor;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* =====================================================
   MAIN WRAPPER — full screen shell
   ===================================================== */
body.admin-bar .aiuc-wrap {
    top: 32px;
}

.aiuc-wrap {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: var(--neutral-bg-card);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

.aiuc-app-shell {
    width: calc(100% - 32px);
    max-width: calc(100% - 32px);
    height: calc(100% - 32px);
    max-height: calc(100% - 32px);
    margin: 16px;
    display: grid;
    grid-template-columns: 260px 1fr;
    border: 1px solid var(--stroke-control);
    border-radius: 20px;
    background:
        radial-gradient(circle at 50% 30%, rgba(0, 120, 212, 0.04) 0%, transparent 60%),
        radial-gradient(circle at 20% 70%, rgba(58, 181, 131, 0.03) 0%, transparent 50%),
        var(--neutral-bg-card);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    position: relative;
}


/* =====================================================
   1. SIDEBAR
   ===================================================== */
.aiuc-sidebar {
    background-color: var(--neutral-bg-1);
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;
    padding: 36px 8px 24px 12px;
    gap: 16px;
    overflow-y: auto;
    overflow-x: visible;
    scrollbar-width: thin;
    scrollbar-color: var(--stroke-control) var(--neutral-bg-1);
}

.aiuc-sidebar::-webkit-scrollbar {
    width: 6px;
}

.aiuc-sidebar::-webkit-scrollbar-track {
    background: var(--neutral-bg-1);
}

.aiuc-sidebar::-webkit-scrollbar-thumb {
    background: var(--stroke-control);
    border-radius: 4px;
}

.aiuc-sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Nav list */
.aiuc-nav-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0;
    margin: 0;
}

.aiuc-nav-header {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    opacity: 0.75;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-left: 8px;
    margin-bottom: 6px;
    margin-top: 8px;
}

/* History search box — neutral pill (matches category tag radius)
   High specificity + !important to defeat theme/WP input[type="search"] resets. */
.aiuc-wrap .aiuc-history-search {
    position: relative !important;
    margin: 0 4px 10px !important;
    display: flex !important;
    align-items: center !important;
    height: 34px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.aiuc-wrap .aiuc-history-search-icon {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--text-secondary) !important;
    opacity: 0.75 !important;
    pointer-events: none !important;
    z-index: 2 !important;
    width: 14px !important;
    height: 14px !important;
}

.aiuc-wrap input[type="search"].aiuc-history-search-input,
.aiuc-wrap .aiuc-history-search-input {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    box-sizing: border-box !important;
    padding: 0 32px 0 34px !important;
    margin: 0 !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--text-primary) !important;
    background: var(--neutral-bg-card) !important;
    border: 1px solid var(--stroke-control) !important;
    border-radius: 9999px !important;
    outline: none !important;
    box-shadow: none !important;
    text-indent: 0 !important;
    text-shadow: none !important;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.aiuc-wrap .aiuc-history-search-input::placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.85 !important;
}

.aiuc-wrap .aiuc-history-search-input::-webkit-input-placeholder {
    color: var(--text-secondary) !important;
    opacity: 0.85 !important;
}

.aiuc-wrap .aiuc-history-search-input:hover {
    border-color: #BDBDBD !important;
}

.aiuc-wrap .aiuc-history-search-input:focus,
.aiuc-wrap .aiuc-history-search-input:focus-visible {
    border-color: var(--brand-primary) !important;
    background: var(--neutral-bg-card) !important;
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.12) !important;
}

.aiuc-wrap .aiuc-history-search-input::-webkit-search-cancel-button,
.aiuc-wrap .aiuc-history-search-input::-webkit-search-decoration,
.aiuc-wrap .aiuc-history-search-input::-webkit-search-results-button,
.aiuc-wrap .aiuc-history-search-input::-webkit-search-results-decoration {
    -webkit-appearance: none !important;
    appearance: none !important;
    display: none !important;
}

[data-theme="dark"] .aiuc-wrap input[type="search"].aiuc-history-search-input,
[data-theme="dark"] .aiuc-wrap .aiuc-history-search-input,
.aiuc-dark .aiuc-wrap input[type="search"].aiuc-history-search-input,
.aiuc-dark .aiuc-wrap .aiuc-history-search-input {
    background: var(--neutral-bg-2) !important;
    border-color: var(--stroke-control) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .aiuc-wrap .aiuc-history-search-input:hover,
.aiuc-dark .aiuc-wrap .aiuc-history-search-input:hover {
    border-color: #4A4A4A !important;
}

[data-theme="dark"] .aiuc-wrap .aiuc-history-search-input:focus,
[data-theme="dark"] .aiuc-wrap .aiuc-history-search-input:focus-visible,
.aiuc-dark .aiuc-wrap .aiuc-history-search-input:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(62, 166, 212, 0.20) !important;
}

.aiuc-wrap .aiuc-history-search-clear {
    position: absolute !important;
    right: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 9999px !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    opacity: 0.75 !important;
    padding: 0 !important;
    transition: background 0.12s ease, opacity 0.12s ease !important;
    z-index: 2 !important;
    box-shadow: none !important;
}

.aiuc-wrap .aiuc-history-search-clear:hover {
    background: var(--neutral-bg-hover) !important;
    opacity: 1 !important;
}

.aiuc-wrap .aiuc-history-no-result {
    padding: 12px 8px !important;
    font-size: 12px !important;
    color: var(--text-secondary) !important;
    text-align: center !important;
    font-style: italic !important;
}

/* Nav items */
.aiuc-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    transition: background 0.1s;
    position: relative;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    overflow: visible;
}

a.aiuc-nav-item,
a.aiuc-nav-item:visited,
a.aiuc-nav-item:hover,
a.aiuc-nav-item:active {
    color: var(--text-primary);
    text-decoration: none;
}
.aiuc-nav-menu > .aiuc-nav-item,
.aiuc-nav-menu > .aiuc-settings-wrapper > .aiuc-nav-item,
.aiuc-nav-menu > a.aiuc-nav-item {
    padding-top: 3px;
    padding-bottom: 3px;
}
.aiuc-nav-item:hover {
    background-color: var(--neutral-bg-hover);
}

.aiuc-nav-item.active {
    background-color: var(--neutral-bg-hover);
}

.aiuc-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 4px;
    background-color: var(--brand-primary);
}

.aiuc-nav-item .tabler-icon {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

.aiuc-nav-item span:not(.tabler-icon) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.aiuc-support-reply-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    border-radius: 999px;
    background: #22C55E;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

.aiuc-support-reply-indicator[hidden] {
    display: none !important;
}

#aiucUserPanelBtn .aiuc-support-reply-indicator {
    order: 3;
    margin-left: auto;
}

/* History items – lighter weight */
.aiuc-history-item .aiuc-nav-item {
    font-weight: 400;
}

.aiuc-history-item .aiuc-nav-item>span:not(.aiuc-history-item-actions):not(.tabler-icon) {
    -webkit-mask-image: linear-gradient(to right, black 80%, transparent 95%);
    mask-image: linear-gradient(to right, black 80%, transparent 95%);
    color: var(--text-secondary);
}

.aiuc-history-item:hover .aiuc-nav-item>span:not(.aiuc-history-item-actions):not(.tabler-icon),
.aiuc-history-item.active .aiuc-nav-item>span:not(.aiuc-history-item-actions):not(.tabler-icon) {
    -webkit-mask-image: linear-gradient(to right, black 65%, transparent 85%);
    mask-image: linear-gradient(to right, black 65%, transparent 85%);
}

/* History action buttons */
.aiuc-history-item-actions {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    flex-shrink: 0 !important;
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    opacity: 0 !important;
    transition: opacity 0.2s ease !important;
    pointer-events: none !important;
    background: linear-gradient(to right, transparent 0%, var(--neutral-bg-1) 20%, var(--neutral-bg-1) 100%) !important;
    padding-left: 24px !important;
    padding-right: 6px !important;
}

.aiuc-history-item:hover .aiuc-history-item-actions,
.aiuc-history-item.active .aiuc-history-item-actions {
    opacity: 1 !important;
    pointer-events: auto !important;
    background: linear-gradient(to right, transparent 0%, var(--neutral-bg-hover) 20%, var(--neutral-bg-hover) 100%) !important;
}

.aiuc-history-action-btn {
    width: 20px;
    height: 20px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.1s ease;
}

.aiuc-history-action-btn:hover {
    background-color: var(--neutral-bg-hover);
    color: var(--text-primary);
}

.aiuc-history-action-btn .tabler-icon {
    width: 14px;
    height: 14px;
}

.aiuc-history-action-btn.edit:hover {
    color: var(--brand-primary);
}

.aiuc-history-action-btn.save:hover {
    color: #107C10;
}

.aiuc-history-action-btn.delete:hover {
    color: #C5221F;
}

/* History list */
.aiuc-history-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.aiuc-history-item {
    padding: 0;
    margin: 0;
    position: relative;
}

/* Archived item styling */
.aiuc-history-item.archived .aiuc-nav-item>span:not(.aiuc-history-item-actions):not(.tabler-icon) {
    color: #759AC8 !important;
    font-weight: 500;
}

.aiuc-dark .aiuc-history-item.archived .aiuc-nav-item>span:not(.aiuc-history-item-actions):not(.tabler-icon),
[data-theme="dark"] .aiuc-history-item.archived .aiuc-nav-item>span:not(.aiuc-history-item-actions):not(.tabler-icon) {
    color: #759AC8 !important;
}

.aiuc-history-item.archived .aiuc-nav-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 4px;
    background-color: #759AC8;
    opacity: 0.5;
}

.aiuc-dark .aiuc-history-item.archived .aiuc-nav-item::before,
[data-theme="dark"] .aiuc-history-item.archived .aiuc-nav-item::before {
    background-color: #759AC8;
}

/* More button */
.aiuc-history-more {
    display: block;
    margin: 8px auto 4px;
    height: 30px;
    padding: 0 16px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 9999px;
    border: 1px solid var(--stroke-control);
    background: var(--neutral-bg-card);
    color: var(--text-primary);
    cursor: pointer;
    width: auto;
    min-width: 120px;
    font-family: "Inter", sans-serif;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.aiuc-history-more:hover {
    background: var(--neutral-bg-hover);
    border-color: #BDBDBD;
}

/* Settings dropdown wrapper */
.aiuc-settings-wrapper {
    position: relative;
    width: 100%;
}

.aiuc-settings-dropdown {
    position: fixed !important;
    background: var(--neutral-bg-card);
    border: 1px solid var(--stroke-control);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 10000 !important;
    min-width: 200px;
    pointer-events: none;
}

.aiuc-settings-dropdown.show {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-100%) !important;
    pointer-events: auto !important;
}

.aiuc-settings-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: none;
    background: none;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 13px;
    font-family: "Inter", sans-serif;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: background 0.1s;
}

.aiuc-settings-item:hover {
    background-color: var(--neutral-bg-hover);
}

.aiuc-settings-item .tabler-icon {
    width: 18px;
    height: 18px;
}

/* Dark mode toggle pill */
.aiuc-dark-mode-toggle-wrapper {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aiuc-dark-mode-toggle {
    width: 64px;
    height: 32px;
    min-width: 64px;
    min-height: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #E4E4E4;
    border: 1px solid #CECECE;
    border-radius: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    overflow: visible;
}

.aiuc-dark-mode-toggle:hover {
    border-color: #A8A8A8;
}

.aiuc-dark-mode-toggle.active {
    background: #1C1C1C;
    border-color: #2A2A2A;
}

.aiuc-toggle-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 0;
    pointer-events: none;
    user-select: none;
}

.aiuc-toggle-icon .tabler-icon {
    width: 18px !important;
    height: 18px !important;
}

.aiuc-toggle-moon .tabler-icon {
    color: #6F6F6F;
}

.aiuc-toggle-sun .tabler-icon {
    color: #161616;
}

.aiuc-toggle-slider {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2px;
    width: 28px;
    height: 28px;
    background: #F5F5F5;
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.aiuc-toggle-slider-icon {
    width: 18px !important;
    height: 18px !important;
    color: #161616;
    pointer-events: none;
    user-select: none;
}

/* Light mode → slider right */
.aiuc-dark-mode-toggle:not(.active) .aiuc-toggle-slider {
    left: calc(100% - 30px);
    background: #F5F5F5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.aiuc-dark-mode-toggle:not(.active) .aiuc-toggle-slider-icon {
    color: #F5A623;
}

/* sun: amber in light mode */

.aiuc-dark-mode-toggle:not(.active) .aiuc-toggle-moon .tabler-icon {
    color: #C8C8C8;
}

/* moon: dim in light mode */

.aiuc-dark-mode-toggle:not(.active) .aiuc-toggle-sun .tabler-icon {
    color: #F5A623;
}

/* sun: amber in light mode */

/* Dark mode → slider left */
.aiuc-dark-mode-toggle.active .aiuc-toggle-slider {
    left: 2px;
    background: #14120C;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.aiuc-dark-mode-toggle.active .aiuc-toggle-slider-icon {
    color: #C8C8FF;
}

/* moon: pale violet in dark mode */

.aiuc-dark-mode-toggle.active .aiuc-toggle-moon .tabler-icon {
    color: #C8C8FF;
}

/* moon: pale violet in dark mode */

.aiuc-dark-mode-toggle.active .aiuc-toggle-sun .tabler-icon {
    color: rgba(255, 255, 255, 0.3);
}

/* sun: dim in dark mode */

/* =====================================================
   2. MAIN CONTENT
   ===================================================== */
.aiuc-main-content {
    background-color: var(--neutral-bg-card);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 2;
    border-radius: 0 20px 20px 0;
}

/* =====================================================
   3. HEADER
   ===================================================== */
.aiuc-header-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 40px;
    border-bottom: 1px solid var(--stroke-card);
    flex-shrink: 0;
    position: relative;
    z-index: 1000;
    background: var(--neutral-bg-card);
}

.aiuc-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aiuc-custom-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
    border-radius: 8px;
    display: block !important;
}

.aiuc-header-left h1 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.aiuc-header-left p {
    color: var(--text-secondary);
    font-size: 11px;
    margin: 0;
    line-height: 1.4;
}

.aiuc-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aiuc-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Buttons */
.aiuc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: "Inter", sans-serif;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.aiuc-btn .tabler-icon {
    flex-shrink: 0;
}

.aiuc-btn-primary {
    background: #759AC8;
    color: white;
    border: none;
    height: 36px;
}

.aiuc-btn-primary:hover {
    background: #759AC8;
    box-shadow: 0 4px 12px rgba(117, 154, 200, 0.4);
    transform: translateY(-1px);
}

.aiuc-btn-subtle {
    background-color: var(--neutral-bg-card);
    border-color: var(--stroke-control);
    color: var(--text-primary);
}

.aiuc-btn-subtle:hover {
    background-color: var(--neutral-bg-hover);
}

.aiuc-save-btn.saved {
    background-color: var(--brand-tertiary);
    color: var(--brand-primary);
    border-color: var(--stroke-control);
}

/* PDF Dropdown */
.aiuc-dropdown-wrapper {
    position: relative;
}

.aiuc-dropdown-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--neutral-bg-card);
    border: 1px solid var(--stroke-control);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    min-width: 190px;
    display: none;
    overflow: hidden;
}

.aiuc-dropdown-menu.open {
    display: block;
}

.aiuc-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    background: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 400;
    font-family: "Inter", sans-serif;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.aiuc-dropdown-item:hover {
    background-color: var(--neutral-bg-hover);
}

.aiuc-dropdown-item .tabler-icon {
    width: 16px;
    height: 16px;
    color: var(--text-secondary);
}

/* Avatar */
.aiuc-account-area {
    position: relative;
    padding-left: 16px;
    border-left: 1px solid var(--stroke-card);
    display: flex;
    align-items: center;
    z-index: 10001;
}

.aiuc-avatar-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer;
    overflow: visible !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
    position: relative;
    padding: 0;
}

.aiuc-avatar-btn::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 50%;
    background: #759AC8;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s;
}

.aiuc-avatar-btn.logged-in::before {
    opacity: 1;
}

.aiuc-avatar-btn.guest::before {
    opacity: 0.3;
}

.aiuc-avatar-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--neutral-bg-card);
    z-index: 0;
}

.aiuc-avatar-btn>* {
    position: relative;
    z-index: 1;
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    border-radius: 50%;
    overflow: hidden;
    margin: 2px;
    background-color: var(--neutral-bg-hover);
}

.aiuc-avatar-btn:hover {
    transform: scale(1.05);
}

.aiuc-avatar-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

.aiuc-default-avatar {
    width: 20px;
    height: 20px;
    display: block;
    color: var(--text-primary);
    opacity: 0.85;
}

/* Account dropdown */
.aiuc-account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--neutral-bg-card);
    border: 1px solid var(--stroke-control);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    min-width: 240px;
    z-index: 10001 !important;
    overflow: hidden;
}

.aiuc-account-dropdown-header {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--stroke-card);
    background: var(--neutral-bg-1);
}

.aiuc-account-dropdown-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-bg-2);
}

.aiuc-account-dropdown-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aiuc-account-dropdown-email {
    font-size: 12px;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aiuc-account-dropdown-menu {
    padding: 4px;
}

.aiuc-account-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    color: var(--text-primary);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
    font-size: 12px;
}

.aiuc-account-dropdown-item:hover {
    background-color: var(--neutral-bg-hover);
}

.aiuc-account-dropdown-item .tabler-icon {
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
}

/* Mobile menu toggle */




/* =====================================================
   4. CHAT BODY
   ===================================================== */
.aiuc-chat-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 40px 24px;
    background: transparent;
    scrollbar-width: thin;
    scrollbar-color: var(--stroke-control) var(--neutral-bg-card);
}




.aiuc-chat-body::-webkit-scrollbar {
    width: 6px;
}

.aiuc-chat-body::-webkit-scrollbar-thumb {
    background: var(--stroke-control);
    border-radius: 4px;
}

/* Welcome / landing state */
.aiuc-welcome {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    opacity: 1;
    transition: opacity 0.3s;
}

.aiuc-welcome-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px 0 48px;
}

/* Landing Page Header Typography */
.aiuc-landing-header {
    text-align: center;
    margin-bottom: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.aiuc-landing-title-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
}

.aiuc-landing-title-bold {
    font-family: "Inter", sans-serif;
    font-weight: 700;
    font-size: 44px;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.aiuc-landing-title-serif {
    font-family: "Instrument Serif", serif;
    font-style: italic;
    font-weight: 400;
    font-size: 52px;
    color: var(--text-primary);
    margin-top: -6px;
    /* Pull it slightly up closer to the bold text */
}

.aiuc-landing-description {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 13px;
    color: var(--text-secondary);
    max-width: 750px;
    line-height: 1.6;
}

/* Category Tag Cloud */
.aiuc-categories-cloud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Reduced equidistant gap */
    max-width: 800px;
    margin: 8px auto 0 auto;
    /* Tightened vertical spacing */
}

.aiuc-category-tag {
    background: var(--neutral-bg-1);
    border: none;
    border-radius: 9999px;
    /* full pill shape */
    height: 28px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: default;
    /* As user disabled click before */
    transition: all 0.2s;
    user-select: none;
}

.aiuc-category-tag:hover {
    background-color: var(--neutral-bg-1);
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .aiuc-category-tag,
.aiuc-dark .aiuc-category-tag {
    background: #1A1A1A;
    border-color: var(--stroke-control);
}

[data-theme="dark"] .aiuc-category-tag:hover {
    background: var(--neutral-bg-2);
    border-color: #3A3A3A !important;
}

/* Card grid (categories backup) */
.aiuc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 8px;
}

.aiuc-card {
    background: var(--neutral-bg-card);
    border: 1px solid var(--stroke-control);
    border-radius: var(--radius-md);
    padding: 6px 10px;
    min-height: 44px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s;
}

.aiuc-card:hover {
    background-color: var(--neutral-bg-1);
    border-color: rgba(0, 0, 0, 0.08);
}

.aiuc-plate {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.aiuc-plate .tabler-icon {
    width: 16px;
    height: 16px;
}

.aiuc-plate.blue {
    background: var(--plate-blue-bg);
    color: var(--plate-blue-text);
}

.aiuc-plate.orange {
    background: var(--plate-orange-bg);
    color: var(--plate-orange-text);
}

.aiuc-plate.pink {
    background: var(--plate-pink-bg);
    color: var(--plate-pink-text);
}

.aiuc-plate.green {
    background: var(--plate-green-bg);
    color: var(--plate-green-text);
}

.aiuc-plate.purple {
    background: var(--plate-purple-bg);
    color: var(--plate-purple-text);
}

.aiuc-plate.red {
    background: var(--plate-red-bg);
    color: var(--plate-red-text);
}

.aiuc-plate.cyan {
    background: var(--plate-cyan-bg);
    color: var(--plate-cyan-text);
}

.aiuc-plate.indigo {
    background: var(--plate-indigo-bg);
    color: var(--plate-indigo-text);
}

.aiuc-plate.teal {
    background: var(--plate-teal-bg);
    color: var(--plate-teal-text);
}

.aiuc-plate.lime {
    background: var(--plate-lime-bg);
    color: var(--plate-lime-text);
}

.aiuc-plate.amber {
    background: var(--plate-amber-bg);
    color: var(--plate-amber-text);
}

.aiuc-plate.brown {
    background: var(--plate-brown-bg);
    color: var(--plate-brown-text);
}

.aiuc-card-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}

/* Centered input bar (welcome state) */
.aiuc-input-wrapper-centered {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 760px;
    margin: 10px auto 2px;
}

.aiuc-input-wrapper-centered .aiuc-input-bar {
    width: 100%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10), 0 10px 30px rgba(66, 94, 204, 0.15);
    transform: scale(1.02);
    transition: all 0.3s;
}

.aiuc-input-wrapper-centered .aiuc-input-bar:hover {
    transform: scale(1.03);
}

.aiuc-input-wrapper-centered .aiuc-input-bar:focus-within {
    transform: scale(1.04);
}

/* Announcements grid */
.aiuc-announcements {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    width: 100%;
    max-width: 776px;
    margin: 8px auto 0;
}

.aiuc-card-announcement {
    background: var(--neutral-bg-card);
    border: 1px solid var(--stroke-card);
    border-radius: 14px;
    padding: 14px 16px 18px;
    min-height: 88px;
    display: flex;
    align-items: flex-start;
    position: relative;
    cursor: default !important;
}

.aiuc-card-announcement:hover {
    background: var(--neutral-bg-card) !important;
    border-color: var(--stroke-control) !important;
    transform: none !important;
}

.aiuc-card-announcement::after {
    content: "\2197";
    position: absolute;
    right: 12px;
    bottom: 10px;
    font-size: 16px;
    line-height: 1;
    color: var(--stroke-card);
    opacity: 0.9;
}

.aiuc-card-text {
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-secondary);
    margin: 0;
    padding-right: 20px;
}

/* =====================================================
   5. DUAL RESPONSE CHAT TURNS
   ===================================================== */
.aiuc-chat-turns-container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.aiuc-global-headers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 0;
    padding-bottom: 10px;
}

.aiuc-global-header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aiuc-global-header h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.aiuc-panel-icon-perplexity {
    color: var(--brand-primary);
}

.aiuc-panel-icon-rag {
    color: #3AB583;
}

.aiuc-panel-icon .tabler-icon {
    width: 16px;
    height: 16px;
}

#aiuc-chat-turns {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 24px;
}

.aiuc-turn-group {
    /* Premium enter animation lives in the "PREMIUM TRANSITIONS" block at
       the end of the file and only triggers on `.aiuc-turn-fresh` (set by
       JS for the just-submitted turn). Older turns and content-update
       re-renders do NOT re-trigger the animation, eliminating flicker. */
}

@keyframes aiuc-fade-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.aiuc-turn-user {
    text-align: right;
    margin-bottom: 20px;
}

.aiuc-user-bubble {
    display: inline-block;
    max-width: 75%;
    padding: 8px 18px;
    background: #F5F5F5;
    color: var(--text-primary);
    border-radius: 20px 20px 4px 20px;
    border: 2px solid #387FEA;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

.aiuc-turn-responses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    /* Each column sizes to its own content height — no equalization.
       Default `align-items: stretch` would make the shorter column grow
       to match the taller one, leaving an awkward empty zone. */
    align-items: start;
}

.aiuc-response-col {
    background: var(--neutral-bg-card);
    border: 1px solid var(--stroke-control);
    border-radius: 16px;
    padding: 20px 24px;
    box-shadow: var(--shadow-card);
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-primary);
    overflow: visible;
}

/* Web Research column */
.aiuc-response-col.aiuc-col-perp {
    background: #F5F5F5;
    border-color: #EAEAEA;
}

[data-theme="dark"] .aiuc-response-col.aiuc-col-perp {
    background: #1C1C1C;
    border-color: #2A2A2A;
}

/* RAG column */
.aiuc-response-col.aiuc-col-rag {
    background: #EAEAEA;
    border-color: #CECECE;
}

[data-theme="dark"] .aiuc-response-col.aiuc-col-rag {
    background: #2A2A2A;
    border-color: #2A2A2A;
}

.aiuc-response-body p {
    margin: 0 0 10px;
}

/* Markdown Headers */
.aiuc-response-body h1,
.aiuc-response-body h2,
.aiuc-response-body h3,
.aiuc-response-body h4,
.aiuc-response-body h5,
.aiuc-response-body h6 {
    color: var(--text-primary);
    font-weight: 600;
    margin: 16px 0 8px 0;
    line-height: 1.3;
}

.aiuc-response-body h1 {
    font-size: 1.4em;
}

/* =====================================================
   RESPONSE TOOLBAR (Feedback & Actions)
   ===================================================== */
.aiuc-response-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
}

.aiuc-toolbar-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.aiuc-toolbar-btn:hover {
    background: var(--neutral-bg-hover);
    color: var(--text-primary);
}

.aiuc-toolbar-btn.active {
    color: var(--brand-primary);
    background: transparent;
}

[data-theme="dark"] .aiuc-toolbar-btn.active {
    background: transparent;
    color: var(--brand-primary);
}

.aiuc-toolbar-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.5;
}

/* ── Summary Button & Block ── */
.aiuc-summary-btn-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 16px;
    margin-bottom: 8px;
}

.aiuc-summary-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 22px;
    border: 2px solid #387FEA;
    border-radius: 10px;
    background: var(--neutral-bg-card);
    color: #387FEA;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}

.aiuc-summary-btn:hover {
    background: #387FEA;
    color: #fff;
    box-shadow: 0 2px 8px rgba(56, 127, 234, 0.25);
}

.aiuc-summary-btn .tabler-icon {
    width: 16px;
    height: 16px;
}

.aiuc-summary-block {
    margin-top: 16px;
    margin-bottom: 8px;
    padding: 18px 22px;
    border-radius: 12px;
    background: var(--neutral-bg-1);
    border-left: 4px solid #387FEA;
}

.aiuc-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.aiuc-dark .aiuc-summary-header,
[data-theme="dark"] .aiuc-summary-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.aiuc-summary-header .tabler-icon {
    width: 14px;
    height: 14px;
    color: #387FEA;
    flex-shrink: 0;
}

.aiuc-summary-header h3 {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #387FEA;
    font-family: "Inter", sans-serif;
}

.aiuc-summary-body {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-primary);
}

.aiuc-summary-body p {
    margin: 0 0 10px;
}

.aiuc-summary-body p:last-child {
    margin-bottom: 0;
}

.aiuc-summary-body strong {
    color: var(--text-primary);
    font-weight: 600;
}

.aiuc-summary-body h1,
.aiuc-summary-body h2,
.aiuc-summary-body h3,
.aiuc-summary-body h4,
.aiuc-summary-body h5,
.aiuc-summary-body h6 {
    color: var(--text-primary);
    font-weight: 600;
    margin: 16px 0 8px 0;
    line-height: 1.3;
}

.aiuc-summary-body h1 { font-size: 1.4em; }
.aiuc-summary-body h2 { font-size: 1.3em; margin-top: 24px; }
.aiuc-summary-body h3 { font-size: 1.2em; margin-top: 20px; }
.aiuc-summary-body h4 { font-size: 1.1em; margin-top: 16px; }
.aiuc-summary-body h5 { font-size: 1em; }
.aiuc-summary-body h6 { font-size: 0.9em; text-transform: uppercase; color: var(--text-secondary); }

.aiuc-summary-body ul,
.aiuc-summary-body ol {
    margin: 0 0 10px;
    padding-left: 22px;
}

.aiuc-summary-body li {
    margin: 2px 0;
    line-height: 1.65;
}

.aiuc-summary-body a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 500;
}

.aiuc-summary-body a:hover {
    text-decoration: underline;
}

.aiuc-summary-block.aiuc-summary-error {
    border-left-color: #E53E3E;
}

.aiuc-summary-block.aiuc-summary-error .aiuc-summary-header .tabler-icon,
.aiuc-summary-block.aiuc-summary-error .aiuc-summary-header h3 {
    color: #E53E3E;
}

.aiuc-summary-block.aiuc-summary-loading {
    border-left-color: #387FEA;
}

.aiuc-summary-block.aiuc-summary-loading .aiuc-summary-header h3 {
    color: #387FEA;
    font-weight: 500;
}

.aiuc-summary-block.aiuc-summary-loading .aiuc-spinner {
    color: #387FEA;
    animation: aiuc-spin 0.8s linear infinite;
}

/* Dark mode overrides */
.aiuc-dark .aiuc-summary-btn,
[data-theme="dark"] .aiuc-summary-btn {
    background: var(--neutral-bg-card);
    border-color: #387FEA;
    color: #387FEA;
}

.aiuc-dark .aiuc-summary-btn:hover,
[data-theme="dark"] .aiuc-summary-btn:hover {
    background: #387FEA;
    color: #fff;
}

.aiuc-dark .aiuc-summary-block,
[data-theme="dark"] .aiuc-summary-block {
    background: var(--neutral-bg-2);
}

.aiuc-response-body h2 {
    font-size: 1.3em;
    margin-top: 24px;
}

.aiuc-response-body h3 {
    font-size: 1.2em;
    margin-top: 20px;
}

.aiuc-response-body h4 {
    font-size: 1.1em;
    margin-top: 16px;
}

.aiuc-response-body h5 {
    font-size: 1em;
}

.aiuc-response-body h6 {
    font-size: 0.9em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Markdown Tables */
.aiuc-table-wrapper {
    width: 100%;
    overflow-x: auto;
    margin: 16px 0;
    border-radius: 6px;
    border: 1px solid var(--stroke-card);
}

.aiuc-markdown-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9px !important;
    text-align: left;
}

.aiuc-markdown-table th,
.aiuc-markdown-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--stroke-card);
    border-right: 1px solid var(--stroke-card);
}

.aiuc-markdown-table th *,
.aiuc-markdown-table td * {
    font-size: 9px !important;
}

.aiuc-markdown-table th:last-child,
.aiuc-markdown-table td:last-child {
    border-right: none;
}

.aiuc-markdown-table th {
    background-color: var(--neutral-bg-2);
    font-weight: 600;
    color: var(--text-primary);
}

.aiuc-markdown-table tr:last-child td {
    border-bottom: none;
}

.aiuc-markdown-table tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.02);
}

.aiuc-dark .aiuc-markdown-table tr:nth-child(even) td,
[data-theme="dark"] .aiuc-markdown-table tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.02);
}

.aiuc-response-body p:last-child {
    margin-bottom: 0;
}

.aiuc-response-body strong {
    color: var(--text-primary);
    font-weight: 600;
}

.aiuc-response-body ul,
.aiuc-response-body ol {
    margin: 0 0 10px;
    padding-left: 22px;
}

.aiuc-response-body li {
    margin: 2px 0;
    line-height: 1.65;
}

.aiuc-response-body a {
    color: var(--brand-primary);
    text-decoration: none;
    font-weight: 500;
}

.aiuc-response-body a:hover {
    text-decoration: underline;
}

.aiuc-loading-text {
    opacity: 0.8;
    font-size: 8px;
    font-style: normal;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 6px;
    animation: aiucPulseLoading 1.5s infinite;
}

.aiuc-loading-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.aiuc-loading-dot-perp {
    background-color: #1A9CB4;
}

.aiuc-loading-dot-rag {
    background-color: #3AB583;
}

@keyframes aiucPulseLoading {
    0% {
        opacity: 0.5;
    }

    50% {
        opacity: 0.9;
    }

    100% {
        opacity: 0.5;
    }
}

.aiuc-skeleton-loader {
    --aiuc-skeleton-base: rgba(31, 41, 55, 0.09);
    --aiuc-skeleton-highlight: transparent;
    min-height: 150px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.aiuc-skeleton-loader-perp {
    --aiuc-skeleton-base: rgba(26, 156, 180, 0.12);
    --aiuc-skeleton-highlight: transparent;
}

.aiuc-skeleton-loader-rag {
    --aiuc-skeleton-base: rgba(58, 181, 131, 0.13);
    --aiuc-skeleton-highlight: transparent;
}

.aiuc-wrap .aiuc-response-body .aiuc-skeleton-loader .aiuc-loading-text {
    min-height: auto;
    align-items: center;
    padding-top: 0;
}

.aiuc-skeleton-stack {
    width: 100%;
    display: grid;
    gap: 10px;
    padding-top: 2px;
}

.aiuc-skeleton-line {
    display: block;
    height: 10px;
    border-radius: 999px;
    background-image: linear-gradient(90deg, var(--aiuc-skeleton-base) 0%, var(--aiuc-skeleton-highlight) 42%, var(--aiuc-skeleton-base) 84%);
    background-size: 220% 100%;
    animation: aiucSkeletonShimmer 1.35s ease-in-out infinite;
}

.aiuc-skeleton-line-title {
    width: 46%;
    height: 12px;
}

.aiuc-skeleton-line-wide {
    width: 92%;
}

.aiuc-skeleton-line-medium {
    width: 78%;
}

.aiuc-skeleton-line-short {
    width: 58%;
}

.aiuc-skeleton-row {
    display: flex;
    gap: 8px;
    padding-top: 4px;
}

.aiuc-skeleton-line-chip {
    width: 92px;
    height: 22px;
}

.aiuc-response-error {
    color: #B42318;
    font-size: 12px;
    line-height: 1.55;
}

[data-theme="dark"] .aiuc-skeleton-loader,
.aiuc-dark .aiuc-skeleton-loader {
    --aiuc-skeleton-base: rgba(255, 255, 255, 0.08);
    --aiuc-skeleton-highlight: transparent;
}

[data-theme="dark"] .aiuc-response-error,
.aiuc-dark .aiuc-response-error {
    color: #FCA5A5;
}

@keyframes aiucSkeletonShimmer {
    0% {
        background-position: 120% 0;
    }

    100% {
        background-position: -120% 0;
    }
}

.aiuc-citations {
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px dashed var(--stroke-card);
}

.aiuc-citations-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.aiuc-citation-item {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.aiuc-citation-item a {
    color: var(--brand-secondary);
    text-decoration: none;
}

.aiuc-citation-item a:hover {
    text-decoration: underline;
}

.aiuc-rag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

/* Web yanıt metni içindeki inline rakam citation chip'leri — yedekten birebir geri yüklendi.
   Bu blok, "[1]" "[2]" gibi inline chip'lerin temel boyut/yazı stilini verir.
   Aşağıdaki blokları (3066, 3205) override etmez — onlar inline chip için ek özellikleri tutar. */
.aiuc-citation-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
    line-height: 1.2;
    font-family: "Inter", sans-serif;
    white-space: nowrap;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.aiuc-dark .aiuc-citation-chip,
[data-theme="dark"] .aiuc-citation-chip {
    filter: brightness(0.9) contrast(1.1);
}

/* İlgili Mevzuat chip'leri — chat tasarım dili (kategori-tag pill) ile bire bir tutarlı.
   Yüksek specificity + !important ile tema/WP ve aşağıdaki .aiuc-citation-chip override'larından korunur. */
.aiuc-wrap .aiuc-rag-citation-chip,
.aiuc-rag-chips .aiuc-rag-citation-chip,
span.aiuc-rag-citation-chip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    height: 28px !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 9999px !important;
    font-family: 'DM Sans', 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: nowrap !important;
    vertical-align: baseline !important;
    color: var(--text-primary) !important;
    background: var(--neutral-bg-1) !important;
    border: 1px solid var(--stroke-control) !important;
    box-shadow: none !important;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease !important;
    cursor: default !important;
}

.aiuc-wrap .aiuc-rag-citation-chip::before,
.aiuc-rag-chips .aiuc-rag-citation-chip::before {
    content: '' !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
    background-color: currentColor !important;
    opacity: 0.65 !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0'/><path d='M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0'/><path d='M3 6l0 13'/><path d='M12 6l0 13'/><path d='M21 6l0 13'/></svg>") center / contain no-repeat !important;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0'/><path d='M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0'/><path d='M3 6l0 13'/><path d='M12 6l0 13'/><path d='M21 6l0 13'/></svg>") center / contain no-repeat !important;
}

.aiuc-wrap .aiuc-rag-citation-chip:hover,
.aiuc-rag-chips .aiuc-rag-citation-chip:hover {
    background: var(--neutral-bg-hover) !important;
    border-color: #BDBDBD !important;
    transform: translateY(-1px) !important;
}

[data-theme="dark"] .aiuc-wrap .aiuc-rag-citation-chip,
[data-theme="dark"] .aiuc-rag-chips .aiuc-rag-citation-chip,
.aiuc-dark .aiuc-rag-citation-chip {
    background: var(--neutral-bg-2) !important;
    border-color: var(--stroke-control) !important;
    color: var(--text-primary) !important;
    filter: none !important;
}

[data-theme="dark"] .aiuc-wrap .aiuc-rag-citation-chip:hover,
[data-theme="dark"] .aiuc-rag-chips .aiuc-rag-citation-chip:hover,
.aiuc-dark .aiuc-rag-citation-chip:hover {
    background: var(--neutral-bg-hover) !important;
    border-color: #4A4A4A !important;
}

/* Perplexity Inline Chips & Popups */
.aiuc-perp-chip-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin: 0 4px;
}

.aiuc-perp-chip {
    display: inline-flex;
    align-items: center;
    padding: 0 4px;
    background: #EAEAEA;
    border: none;
    border-radius: 8px;
    font-size: 8.5px;
    font-weight: 500;
    color: var(--text-primary) !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: all 0.2s;
    line-height: 14px;
    vertical-align: super;
}

.aiuc-perp-chip:hover {
    background: #E4E4E4;
}

.aiuc-perp-popup {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0);
    margin-bottom: 6px;
    width: 270px;
    background: var(--neutral-bg-1);
    border: 1px solid var(--stroke-control);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 99990;
    text-align: left;
    white-space: normal;
}

/* Invisible bridge to prevent hover loss */
.aiuc-perp-popup::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 0;
    width: 100%;
    height: 15px;
}

.aiuc-perp-chip-wrapper:hover .aiuc-perp-popup,
.aiuc-perp-chip-wrapper:focus-within .aiuc-perp-popup,
.aiuc-perp-popup:hover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-2px);
    pointer-events: auto;
}

/* Nav & Pagination Support */
.aiuc-perp-popup-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.aiuc-perp-popup-nav button {
    background: var(--neutral-bg-2);
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.2s;
    padding: 0;
}

.aiuc-perp-popup-nav button:hover {
    background: var(--neutral-bg-hover);
    color: var(--text-primary);
}

.aiuc-perp-popup-page {
    font-size: 8.5px;
    color: var(--text-secondary);
    font-family: "Inter", sans-serif;
}

.aiuc-perp-popup-domain {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8.5px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    font-family: "Inter", sans-serif;
}

.aiuc-perp-popup-domain svg {
    color: #E35B28;
}

.aiuc-perp-popup-title {
    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
}

.aiuc-perp-popup-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.aiuc-perp-popup-title a:hover {
    text-decoration: underline;
}

.aiuc-perp-popup-snippet {
    font-size: 8.5px;
    line-height: 1.5;
    color: var(--text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aiuc-alert {
    background: var(--neutral-bg-1);
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
}

.aiuc-confidence {
    margin-top: 12px;
    font-size: 11px;
    color: var(--text-secondary);
    font-style: italic;
}

.aiuc-confidence.low {
    color: #C5221F;
}

/* Loading */
.aiuc-loading-row {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    color: #A3A098;
    font-size: 13px;
    gap: 8px;
    align-items: center;
}

#aiuc-main-loading-text {
    font-weight: 500;
}

.aiuc-spinner {
    animation: aiuc-spin 1s linear infinite;
    color: #A3A098;
}

@keyframes aiuc-spin {
    100% {
        transform: rotate(360deg);
    }
}

/* =====================================================
   6. INPUT BAR
   ===================================================== */
.aiuc-input-area {
    padding: 16px 40px 24px;
    max-width: 900px;
    margin: 0 auto;
    width: 100%;
    flex-shrink: 0;
}

.aiuc-input-bar {
    display: flex;
    align-items: center;
    background: var(--neutral-bg-card);
    border: 1px solid var(--stroke-control);
    border-radius: 9999px;
    padding: 6px 8px 6px 20px;
    box-shadow: 0 4px 16px rgba(66, 94, 204, 0.1);
    transition: all 0.2s;
}

.aiuc-input-bar:focus-within {
    border-color: var(--brand-primary);
    box-shadow: 0 6px 20px rgba(66, 94, 204, 0.2);
}

.aiuc-input-bar::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 9999px;
    background: #425ECC;
    z-index: -1;
    opacity: 1;
    transition: opacity 0.2s;
}

.aiuc-input-bar {
    position: relative;
}



.aiuc-search-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: "Inter", sans-serif;
    color: var(--text-primary);
    outline: none;
    padding: 8px 12px 8px 0;
}

.aiuc-search-input::placeholder {
    color: var(--text-secondary);
}

/* old textarea compat */
.aiuc-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: "Inter", sans-serif;
    color: var(--text-primary);
    resize: none;
    outline: none;
    padding: 8px 12px 8px 0;
    max-height: 120px;
}

.aiuc-input::placeholder {
    color: var(--text-secondary);
}

.aiuc-input-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.aiuc-icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s;
}

.aiuc-icon-btn:hover {
    background: var(--neutral-bg-hover);
    color: var(--text-primary);
}

.aiuc-icon-btn .tabler-icon {
    width: 20px;
    height: 20px;
}

/* old compat — mirrors .aiuc-icon-btn */
.aiuc-action-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.15s;
}

.aiuc-research-btn,
.aiuc-btn-send {
    height: 36px;
    min-height: 36px;
    padding: 0 18px;
    background: #425ECC;
    color: white;
    border: none;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.aiuc-research-btn:hover,
.aiuc-btn-send:hover {
    background: #6284B3;
    box-shadow: 0 4px 12px rgba(66, 94, 204, 0.4);
    transform: translateY(-1px);
}

.aiuc-research-btn:disabled,
.aiuc-btn-send:disabled {
    opacity: 1;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.aiuc-footer-text {
    text-align: center;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 10px;
    line-height: 1.5;
}

/* =====================================================
   7. DARK MODE OVERRIDES (data-theme)
   ===================================================== */
[data-theme="dark"] .aiuc-app-shell {
    background:
        radial-gradient(circle at 50% 30%, rgba(0, 120, 212, 0.06) 0%, transparent 60%),
        var(--neutral-bg-1);
}

[data-theme="dark"] .aiuc-sidebar {
    background-color: var(--neutral-bg-card);
}

[data-theme="dark"] .aiuc-main-content,
[data-theme="dark"] .aiuc-header-section {
    background-color: var(--neutral-bg-1);
}

[data-theme="dark"] .aiuc-response-col {
    background: var(--neutral-bg-1);
}

[data-theme="dark"] .aiuc-global-header h3 {
    color: var(--text-primary);
}

[data-theme="dark"] .aiuc-user-bubble {
    background: var(--neutral-bg-1);
    border-color: #387FEA;
}

[data-theme="dark"] .aiuc-input-bar {
    background: var(--neutral-bg-1);
    border-color: var(--stroke-control);
}

[data-theme="dark"] .aiuc-card {
    background: var(--neutral-bg-1);
}

[data-theme="dark"] .aiuc-card:hover {
    background: var(--neutral-bg-2);
    border-color: #3A3A3A !important;
}

[data-theme="dark"] .aiuc-account-dropdown {
    background: var(--neutral-bg-1);
}

[data-theme="dark"] .aiuc-settings-dropdown {
    background: var(--neutral-bg-1);
}

[data-theme="dark"] .aiuc-dropdown-menu {
    background: var(--neutral-bg-1);
}

[data-theme="dark"] .aiuc-dark-mode-toggle {
    background: #1C1C1C;
    border-color: #2A2A2A;
}

/* =====================================================
   8. ADMIN PREVIEW OVERRIDES
   ===================================================== */
.aiuc-mode-admin_preview.aiuc-wrap {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 700px !important;
    z-index: 10 !important;
    border: 1px solid var(--stroke-control) !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
}

.aiuc-mode-admin_preview .aiuc-app-shell {
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 0;
}

.aiuc-mode-admin_preview .aiuc-sidebar,
.aiuc-mode-admin_preview .aiuc-header-brand,
.aiuc-mode-admin_preview .aiuc-header-actions,
.aiuc-mode-admin_preview .aiuc-welcome,
.aiuc-mode-admin_preview .aiuc-grid,
.aiuc-mode-admin_preview .aiuc-announcements {
    display: none !important;
}

.aiuc-mode-admin_preview .aiuc-main-content {
    border-left: none !important;
}

.aiuc-mode-admin_preview .aiuc-app-shell {
    grid-template-columns: 1fr !important;
}

/* =====================================================
   9. RESPONSIVE
   ===================================================== */
@media (max-width: 900px) {
    .aiuc-app-shell {
        grid-template-columns: 1fr;
    }

    /* Sidebar: old ruleset — overridden by the comprehensive mobile section below */

    .aiuc-turn-responses {
        grid-template-columns: 1fr;
    }

    .aiuc-global-headers {
        grid-template-columns: 1fr;
    }

    .aiuc-announcements {
        grid-template-columns: 1fr;
    }

    .aiuc-header-section {
        padding: 16px 20px;
    }

    .aiuc-chat-body {
        padding: 16px 20px 0;
    }

    .aiuc-input-area {
        padding: 12px 20px 20px;
    }
}

@media (max-width: 600px) {
    .aiuc-app-shell {
        width: calc(100vw - 24px);
        height: calc(100vh - 24px);
        margin: 12px;
        border-radius: 16px;
    }

    .aiuc-header-left h1 {
        font-size: 18px;
    }

    .aiuc-header-left p {
        display: none;
    }

    .aiuc-btn-text {
        display: none;
    }
}

/* === DARK MODE TOGGLE ICON FIX === */
/* Layout: [moon-slot | slider | sun-slot] */
/* LIGHT mode (not .active): slider RIGHT over sun-slot — show SUN (amber) on slider */
.aiuc-dark-mode-toggle:not(.active) .aiuc-toggle-slider {
    left: calc(100% - 30px);
    background: #F6F6F6;
    box-shadow: 0 2px 4px rgba(245, 166, 35, 0.25);
}

.aiuc-dark-mode-toggle:not(.active) .aiuc-toggle-slider-icon {
    color: #F5A623;
}

/* sun: amber */
.aiuc-dark-mode-toggle:not(.active) .aiuc-toggle-moon .tabler-icon {
    color: #BBBBBB;
}

/* moon: dim */
.aiuc-dark-mode-toggle:not(.active) .aiuc-toggle-sun .tabler-icon {
    color: transparent;
}

/* hidden under slider */

/* DARK mode (.active): slider LEFT over moon-slot — show MOON on slider */
.aiuc-dark-mode-toggle.active .aiuc-toggle-slider {
    left: 2px;
    background: #14120C;
    box-shadow: 0 2px 6px rgba(100, 100, 255, 0.3);
}

.aiuc-dark-mode-toggle.active .aiuc-toggle-slider-icon {
    color: #B0B0FF;
}

/* moon: metallic violet */
.aiuc-dark-mode-toggle.active .aiuc-toggle-moon .tabler-icon {
    color: transparent;
}

/* hidden under slider */
.aiuc-dark-mode-toggle.active .aiuc-toggle-sun .tabler-icon {
    color: rgba(255, 255, 255, 0.25);
}

/* sun: very dim */
/* === INPUT BAR — Gradient border like CURSOR-65.0 reference === */
.aiuc-input-bar {
    position: relative;
}

.aiuc-input-bar::before {
    content: '';
    position: absolute;
    top: -2px;
    right: -2px;
    bottom: -2px;
    left: -2px;
    border-radius: 999px;
    background: #425ECC;
    z-index: -1;
    opacity: 1;
    transition: opacity 0.3s ease;
    pointer-events: none;
}





/* FIX 6: Column header bars INSIDE response columns */
.aiuc-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 0 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

[data-theme="dark"] .aiuc-col-header {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

.aiuc-col-header h3 {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    font-family: "Inter", sans-serif;
}

.aiuc-col-header .tabler-icon {
    width: 14px;
    height: 14px;
}

.aiuc-col-header-perp {
    color: #759AC8;
}

.aiuc-col-header-rag {
    color: #3AB583;
}

/* FIX 7: Hide the old external global-headers */
.aiuc-global-headers {
    display: none !important;
}

/* FIX 8: Sidebar user profile (top) */
.aiuc-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 14px;
    border-bottom: 1px solid var(--stroke-card);
    margin-bottom: 4px;
    flex-shrink: 0;
}

.aiuc-sidebar-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--neutral-bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.aiuc-sidebar-user-avatar img,
.aiuc-sidebar-user-avatar .aiuc-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

.aiuc-sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.aiuc-sidebar-user-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aiuc-sidebar-user-role {
    font-size: 10px;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==== BATCH UI REFINEMENT FIXES ==== */

/* 1. Header Alignments & Heights */
.aiuc-sidebar {
    padding-top: 0 !important;
}

.aiuc-sidebar-user {
    height: 60px;
    padding: 0 10px;
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--stroke-card);
    box-sizing: border-box;

}

.aiuc-header-section {
    min-height: 60px;
    height: auto;
    padding: 10px 40px !important;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--stroke-card);
    box-sizing: border-box;
}

.aiuc-header-brand h1 {
    font-size: 14px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.aiuc-header-brand p {
    font-size: 11px !important;
    margin: 0 !important;
}

.aiuc-header-right {
    margin-top: 0 !important;
}

.aiuc-main-content {
    padding-top: 0 !important;
}

/* 2. Target Category Colors based on Data-Cat or nth-child */









/* 3. Sidebar Spacing Between Destek and History */
.aiuc-sidebar .aiuc-nav-list:first-of-type {
    margin-bottom: 4px !important;
    /* was 20px */
}

/* 4. History Item Action Hover Background Removal */
.aiuc-history-item-actions {
    background: var(--neutral-bg-1) !important;
    box-shadow: -4px 0 8px var(--neutral-bg-1) !important;
}

.aiuc-history-item:hover .aiuc-history-item-actions,
.aiuc-history-item.active .aiuc-history-item-actions {
    background: var(--neutral-bg-1) !important;
    box-shadow: -4px 0 8px var(--neutral-bg-1) !important;
}

/* Ensure the mask fades the text out properly instead */
.aiuc-history-item:hover .aiuc-nav-item>span:not(.aiuc-nav-icon-wrapper):not(.aiuc-history-item-actions),
.aiuc-history-item.active .aiuc-nav-item>span:not(.aiuc-nav-icon-wrapper):not(.aiuc-history-item-actions) {
    -webkit-mask-image: linear-gradient(to right, black 65%, transparent 85%) !important;
    mask-image: linear-gradient(to right, black 65%, transparent 85%) !important;
}

/* 5. Reduce History Item Vertical Spacing */
.aiuc-history-item .aiuc-nav-item {
    padding: 0px 8px !important;
    min-height: 26px !important;
    /* Smaller vertical padding */
    gap: 6px !important;
}

.aiuc-history-item {
    margin: 0 !important;
}

/* 6. True Light/Night Toggle Pill Restyling */
/* Reset the base pill to match images exactly */
.aiuc-dark-mode-toggle {
    position: relative !important;
    width: 60px !important;
    height: 30px !important;
    border-radius: 15px !important;
    border: 1px solid var(--stroke-control) !important;
    padding: 0 !important;
    background: #E4E4E4 !important;
    /* Default light track */
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    overflow: hidden;
}

/* Ensure track colors */
[data-theme="light"] .aiuc-dark-mode-toggle {
    background: #E4E4E4 !important;
}

[data-theme="dark"] .aiuc-dark-mode-toggle {
    background: #1C1C1C !important;
}

/* Fix the positions of the fixed icons inside the track */
.aiuc-toggle-icon {
    position: absolute !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
    /* Must be ABOVE the sliding circle */
    pointer-events: none !important;
}

.aiuc-toggle-moon {
    left: 4px !important;
}

.aiuc-toggle-sun {
    right: 4px !important;
}

.aiuc-toggle-icon svg {
    width: 16px !important;
    height: 16px !important;
    color: inherit;
}

/* Icon Colors Based on Theme (From images: Slider is behind, icons change color) */
/* Light Mode: Slider on RIGHT. Moon is LEFT (Grey). Sun is RIGHT (Black against White Slider). */
[data-theme="light"] .aiuc-toggle-moon {
    color: #A0A09C !important;
}

[data-theme="light"] .aiuc-toggle-sun {
    color: #14120C !important;
}

/* Dark Mode: Slider on LEFT. Moon is LEFT (White against Dark Slider). Sun is RIGHT (Grey). */
[data-theme="dark"] .aiuc-toggle-moon {
    color: #FFFFFF !important;
}

[data-theme="dark"] .aiuc-toggle-sun {
    color: #A0A09C !important;
}

/* The sliding circle that sits BEHIND the icons */
.aiuc-toggle-slider {
    position: absolute !important;
    top: 2px !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 50% !important;
    z-index: 1 !important;
    /* BELOW the icons */
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Hide the default injected icon inside slider (we don't need it, we use the fixed ones) */
.aiuc-toggle-slider-icon {
    display: none !important;
}

/* Slider position */
/* Light Mode (not active): Slider is on the RIGHT */
[data-theme="light"] .aiuc-dark-mode-toggle:not(.active) .aiuc-toggle-slider {
    left: calc(100% - 28px) !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Dark Mode (active): Slider is on the LEFT */
[data-theme="dark"] .aiuc-dark-mode-toggle.active .aiuc-toggle-slider {
    left: 2px !important;
    background: #14120C !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5) !important;
}

.aiuc-card:nth-child(6n+1) .aiuc-plate {
    background: var(--plate-blue-bg) !important;
    color: var(--plate-blue-text) !important;
}

.aiuc-card:nth-child(6n+2) .aiuc-plate {
    background: var(--plate-green-bg) !important;
    color: var(--plate-green-text) !important;
}

.aiuc-card:nth-child(6n+3) .aiuc-plate {
    background: var(--plate-purple-bg) !important;
    color: var(--plate-purple-text) !important;
}

.aiuc-card:nth-child(6n+4) .aiuc-plate {
    background: var(--plate-amber-bg) !important;
    color: var(--plate-amber-text) !important;
}

.aiuc-card:nth-child(6n+5) .aiuc-plate {
    background: var(--plate-pink-bg) !important;
    color: var(--plate-pink-text) !important;
}

.aiuc-card:nth-child(6n+6) .aiuc-plate {
    background: var(--plate-cyan-bg) !important;
    color: var(--plate-cyan-text) !important;
}

/* Dark Mode Plate Overrides (Match Claude design - dark bg with whiteish pastel text) */
[data-theme="dark"] .aiuc-card:nth-child(6n+1) .aiuc-plate,
[data-theme="dark"] .aiuc-card:nth-child(6n+2) .aiuc-plate,
[data-theme="dark"] .aiuc-card:nth-child(6n+3) .aiuc-plate,
[data-theme="dark"] .aiuc-card:nth-child(6n+4) .aiuc-plate,
[data-theme="dark"] .aiuc-card:nth-child(6n+5) .aiuc-plate,
[data-theme="dark"] .aiuc-card:nth-child(6n+6) .aiuc-plate {
    background: transparent !important;
}

[data-theme="dark"] .aiuc-card:nth-child(6n+1) .aiuc-plate {
    color: #8FD4F2 !important;
}

[data-theme="dark"] .aiuc-card:nth-child(6n+2) .aiuc-plate {
    color: #A5D6B7 !important;
}

[data-theme="dark"] .aiuc-card:nth-child(6n+3) .aiuc-plate {
    color: #CE93D8 !important;
}

[data-theme="dark"] .aiuc-card:nth-child(6n+4) .aiuc-plate {
    color: #FFCC80 !important;
}

[data-theme="dark"] .aiuc-card:nth-child(6n+5) .aiuc-plate {
    color: #F48FB1 !important;
}

[data-theme="dark"] .aiuc-card:nth-child(6n+6) .aiuc-plate {
    color: #80CBC4 !important;
}

/* ==== EXACT PILL INPUT BAR FIXES ==== */
/* Remove short lines above header */
.aiuc-header-brand {
    border-top: none !important;
    margin-top: 0 !important;
}

.aiuc-header-left {
    border-top: none !important;
}

/* Wrapper should padding bottom nicely */
.aiuc-input-area {
    padding: 16px 40px 32px;
}

/* The actual bar container */
.aiuc-input-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: #F5F5F5 !important;
    border-radius: 26px !important;
    padding: 8px 12px 8px 24px !important;
    box-shadow: 0 4px 16px rgba(66, 94, 204, 0.08) !important;
    border: none !important;
    transition: all 0.2s;
    /* This creates the gradient border perfectly without outline pixelation */
    background-clip: padding-box !important;
}

/* The true gradient border that sits exactly behind it, protruding by 2px */
.aiuc-input-bar::before {
    content: '';
    position: absolute;
    inset: -2px;
    /* 2px border width */
    border-radius: 26px;
    background: #425ECC !important;
    z-index: -1;
    opacity: 1 !important;
    /* Always visible based on image */
}

/* Adjust text area color inside input */
.aiuc-search-input,
.aiuc-input {
    color: #1C1C1C !important;
    /* Dark text on white background */
}

[data-theme="dark"] .aiuc-search-input,
[data-theme="dark"] .aiuc-input {
    color: #F4F4F4 !important;
}

.aiuc-search-input::placeholder,
.aiuc-input::placeholder {
    color: #737373 !important;
}

[data-theme="dark"] .aiuc-search-input::placeholder,
[data-theme="dark"] .aiuc-input::placeholder {
    color: #A0A09C !important;
}

/* Araştır Button Matches Design */
.aiuc-btn-send,
.aiuc-research-btn {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 20px !important;
    background: #387FEA !important;
    color: #ffffff !important;
    border-radius: 9999px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px;
    box-shadow: none !important;
    margin-left: 6px !important;
}

/* Icon Buttons (Mic & Attach) */
.aiuc-input-actions .aiuc-icon-btn {
    color: #737373 !important;
    width: 38px !important;
    height: 38px !important;
}

.aiuc-input-actions .aiuc-icon-btn:hover {
    background: #F0F0F0 !important;
    color: #1C1C1C !important;
}

/* ==== CITATION CHIP STYLING ==== */
.aiuc-citation-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
    color: #425ECC;
    background-color: rgba(117, 154, 200, 0.1);
    border-radius: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    vertical-align: super;
    margin: 0 2px;
    cursor: default;
    transition: background-color 0.2s;
}

.aiuc-citation-chip:hover {
    background-color: rgba(117, 154, 200, 0.2);
}

.aiuc-col-rag .aiuc-citation-chip {
    color: #2F8A5D;
    background-color: rgba(47, 138, 93, 0.1);
}

.aiuc-col-rag .aiuc-citation-chip:hover {
    background-color: rgba(47, 138, 93, 0.2);
}

/* ==== INPUT BAR TEXTBOX MATCH ==== */
.aiuc-input {
    flex: 1;
    border: none !important;
    background: transparent !important;
    font-size: 15px !important;
    line-height: normal !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    height: 38px !important;
}

.aiuc-input:focus {
    box-shadow: none !important;
    outline: none !important;
}

.aiuc-btn-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #737373 !important;
    transition: all 0.2s !important;
}

.aiuc-btn-icon:hover {
    background: #F0F0F0 !important;
    color: #1C1C1C !important;
}

/* ==== FINAL ALIGNMENT & CLEANUP FIXES ==== */
/* 1. Restore the vertical divider for the sidebar */
.aiuc-sidebar {
    border-right: 1px solid var(--stroke-card) !important;
}

/* 2. Remove the stray hamburger / menu toggle mark above the title */


/* 3. Ensure both the sidebar user profile and main header have the exact same height */
.aiuc-sidebar-user {
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 16px !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--stroke-card) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

.aiuc-header-section {
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 40px !important;
    border-bottom: 1px solid var(--stroke-card) !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

/* Make sure inner brand aligns properly inside the 72px height */
.aiuc-header-brand {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}

/* Site icon (WordPress site simgesi veya özel logo) */
.aiuc-header-site-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

.aiuc-header-site-icon-placeholder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--aiuc-header-icon-bg, rgba(66, 94, 204, 0.12)) !important;
    color: var(--aiuc-header-icon-fg, #425ecc) !important;
}

[data-theme="dark"] .aiuc-header-site-icon-placeholder {
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Force-hide any global theme ::before/after elements injecting dashes into the title */
.aiuc-header-brand h1::before,
.aiuc-header-brand h1::after {
    display: none !important;
    content: none !important;
}

/* FINAL UI TWEAKS (Phase 4) */

/* 1. Make in-text citation chips slightly smaller */
.aiuc-citation-chip {
    font-size: 10px !important;
    min-width: 14px !important;
    height: 14px !important;
    padding: 0 3px !important;
}

/* 2. Remove horizontal padding from sidebar user profile border */
/* .aiuc-sidebar has padding 36px 8px 24px 12px; */
.aiuc-sidebar-user {
    /* Stretch borders to edge */
    margin-left: -12px !important;
    margin-right: -8px !important;
    padding-left: 12px !important;
    padding-right: 8px !important;
}

.aiuc-sidebar-user-link {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
    border-radius: 8px;
    transition: opacity 0.15s ease;
}
.aiuc-sidebar-user-link:hover {
    opacity: 0.75;
}

/* 3. Style the "Daha Fazla" button matching the sidebar */
.aiuc-history-more {
    display: block !important;
    width: auto !important;
    min-width: 120px;
    margin: 8px auto 4px !important;
    height: 30px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-primary) !important;
    background: var(--neutral-bg-card) !important;
    border: 1px solid var(--stroke-control) !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    line-height: 1 !important;
}

.aiuc-history-more:hover {
    background: var(--neutral-bg-hover) !important;
    border-color: #BDBDBD !important;
    color: var(--text-primary) !important;
}

/* FINAL UI TWEAKS - SIDEBAR SPACING */

/* 1. Reduce the gap between 'Destek' and 'Geçmiş Sohbetler' */
.aiuc-nav-header {
    margin-top: 4px !important;
    padding-top: 0 !important;
}

/* Also reduce gap in the sidebar flex container if it's contributing */
.aiuc-sidebar {
    gap: 8px !important;
    /* Was 16px */
}

/* FINAL UI TWEAKS - EXACT INPUT BAR REPLICATION (Phase 6) */
.aiuc-input-bar {
    pointer-events: auto;
    width: 100%;
    max-width: 800px;
    background: var(--neutral-bg-card);
    border: 2px solid #387FEA !important;
    border-radius: 26px !important;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 6px 14px 6px 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.2s;
    position: relative;
    isolation: isolate;
    margin: 0 auto;
}

.aiuc-input-bar::before {
    content: none !important;
}

.aiuc-input-bar::after {
    content: none !important;
}

.aiuc-input-bar:focus-within {
    box-shadow: 0 4px 12px rgba(66, 94, 204, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08), 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

.aiuc-input-bar:focus-within::before {
    content: none !important;
}

.aiuc-input-bar:focus-within::after {
    content: none !important;
}

.aiuc-search-input {
    flex: 1;
    min-width: 0;
    border: none !important;
    background: transparent !important;
    font-size: 15px !important;
    color: var(--text-primary);
    height: 100%;
    font-family: "Inter", sans-serif;
    box-shadow: none !important;
    padding: 0 !important;
}

.aiuc-search-input:focus {
    outline: none !important;
    box-shadow: none !important;
}

.aiuc-input-actions {
    display: flex !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    align-items: center !important;
}

.aiuc-icon-btn {
    width: 40px !important;
    height: 40px !important;
    border-radius: var(--radius-sm) !important;
    border: none !important;
    background: transparent !important;
    color: var(--text-secondary) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.1s !important;
    padding: 0 !important;
}

.aiuc-icon-btn:hover {
    background-color: var(--neutral-bg-1) !important;
    color: var(--text-primary) !important;
}

.aiuc-research-btn {
    background: #387FEA !important;
    color: white !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    font-family: "Inter", sans-serif !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 8px rgba(56, 127, 234, 0.3) !important;
    letter-spacing: 0.3px !important;
    flex-shrink: 0 !important;
    min-width: fit-content !important;
}

.aiuc-research-btn:hover {
    background: #387FEA !important;
    transform: scale(1.03) !important;
    box-shadow: 0 4px 12px rgba(56, 127, 234, 0.4) !important;
}

.aiuc-research-btn:active {
    transform: scale(0.98) !important;
    box-shadow: 0 2px 6px rgba(66, 94, 204, 0.3) !important;
}

/* FINAL POLISH - PHASE 6 */
/* 1. Fix dark mode toggle slider vertical offset */
.aiuc-toggle-slider {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* 2. Fix the history action icons being under the text when hovered */
.aiuc-history-item-actions {
    background: var(--neutral-bg-1) !important;
    box-shadow: -4px 0 8px var(--neutral-bg-1) !important;
    z-index: 100 !important;
}

.aiuc-history-item:hover .aiuc-history-item-actions,
.aiuc-history-item.active .aiuc-history-item-actions {
    background: var(--neutral-bg-1) !important;
    box-shadow: -4px 0 8px var(--neutral-bg-1) !important;
}

[data-theme="dark"] .aiuc-history-item:hover .aiuc-history-item-actions,
[data-theme="dark"] .aiuc-history-item.active .aiuc-history-item-actions {
    background: var(--neutral-bg-elevated) !important;
    box-shadow: -4px 0 8px var(--neutral-bg-elevated) !important;
}

/* 3. Style the Perplexity source links (half size, non-bold, #759AC8 color) */
.aiuc-citations a {
    font-size: 11px !important;
    font-weight: normal !important;
    color: #759AC8 !important;
    text-decoration: none !important;
}

.aiuc-citations a:hover {
    text-decoration: underline !important;
}

/* =====================================================
   HEADER ACTION BUTTON COLORS & SIZES
   ===================================================== */

/* Ensure buttons align horizontally and are smaller */
.aiuc-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.aiuc-header-actions .aiuc-dropdown-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.aiuc-header-actions .aiuc-btn {
    height: 28px !important;
    min-height: 28px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    border-radius: 9999px !important;
    font-weight: 400 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

/* +Yeni Button */
#aiuc-new-chat {
    background: #387FEA !important;
    color: rgba(255, 255, 255, 0.85) !important;
    border: none !important;
}

/* Raporu Paylaş Button */
.aiuc-pdf-dropdown-toggle {
    background: var(--neutral-bg-card) !important;
    color: #387FEA !important;
    border: 2px solid #387FEA !important;
}

/* Kaydet Button */
#aiucSaveConversationBtn {
    background: var(--neutral-bg-card) !important;
    color: #387FEA !important;
    border: 2px solid #387FEA !important;
}

/* Hover effects for custom colored buttons */
#aiuc-new-chat:hover {
    filter: brightness(0.9);
}
.aiuc-pdf-dropdown-toggle:hover,
#aiucSaveConversationBtn:hover {
    background: #387FEA !important;
    color: #fff !important;
}

/* 4. Table markdown styling */
.aiuc-markdown-table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-size: 12px;
    border: 1px solid var(--stroke-card);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    background-color: var(--neutral-bg-card);
}

.aiuc-markdown-table th {
    background-color: var(--neutral-bg-1);
    font-weight: 600;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 2px solid var(--stroke-control);
}

.aiuc-markdown-table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--stroke-control);
}

.aiuc-markdown-table tr:last-child td {
    border-bottom: none;
}

/* =====================================================
   LANDING PAGE ENTRANCE ANIMATIONS
   ===================================================== */

/* Keyframes */
@keyframes aiuc-fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aiuc-fade-down {
    from {
        opacity: 0;
        transform: translateY(-18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aiuc-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes aiuc-slide-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes aiuc-stagger-appear {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(8px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Title — Fade Up */
#aiuc-landing .aiuc-landing-title-bold,
#aiuc-landing .aiuc-landing-title-serif {
    animation: aiuc-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#aiuc-landing .aiuc-landing-title-bold {
    animation-delay: 0.05s;
}

#aiuc-landing .aiuc-landing-title-serif {
    animation-delay: 0.12s;
}

/* Description — Fade Down */
#aiuc-landing .aiuc-landing-description {
    animation: aiuc-fade-down 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.22s both;
}

/* Category Tags — Staggered Appear */
#aiuc-landing .aiuc-category-tag {
    animation: aiuc-stagger-appear 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#aiuc-landing .aiuc-category-tag:nth-child(1) {
    animation-delay: 0.30s;
}

#aiuc-landing .aiuc-category-tag:nth-child(2) {
    animation-delay: 0.35s;
}

#aiuc-landing .aiuc-category-tag:nth-child(3) {
    animation-delay: 0.40s;
}

#aiuc-landing .aiuc-category-tag:nth-child(4) {
    animation-delay: 0.45s;
}

#aiuc-landing .aiuc-category-tag:nth-child(5) {
    animation-delay: 0.50s;
}

#aiuc-landing .aiuc-category-tag:nth-child(6) {
    animation-delay: 0.55s;
}

#aiuc-landing .aiuc-category-tag:nth-child(7) {
    animation-delay: 0.60s;
}

#aiuc-landing .aiuc-category-tag:nth-child(8) {
    animation-delay: 0.65s;
}

#aiuc-landing .aiuc-category-tag:nth-child(9) {
    animation-delay: 0.70s;
}

#aiuc-landing .aiuc-category-tag:nth-child(10) {
    animation-delay: 0.74s;
}

#aiuc-landing .aiuc-category-tag:nth-child(n+11) {
    animation-delay: 0.78s;
}

/* Input Bar — Fade In */
#aiuc-landing #aiucInputWrapperCentered {
    animation: aiuc-fade-in 0.55s ease-out 0.55s both;
}

/* Announcement Cards — Slide In Up */
#aiuc-landing .aiuc-card-announcement:nth-child(1) {
    animation: aiuc-slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.65s both;
}

#aiuc-landing .aiuc-card-announcement:nth-child(2) {
    animation: aiuc-slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.75s both;
}

#aiuc-landing .aiuc-card-announcement:nth-child(3) {
    animation: aiuc-slide-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

    #aiuc-landing .aiuc-landing-title-bold,
    #aiuc-landing .aiuc-landing-title-serif,
    #aiuc-landing .aiuc-landing-description,
    #aiuc-landing .aiuc-category-tag,
    #aiuc-landing #aiucInputWrapperCentered,
    #aiuc-landing .aiuc-card-announcement {
        animation: none;
    }
}

/* Sidebar — Slide In from Left */
@keyframes aiuc-slide-from-left {
    from {
        opacity: 0;
        transform: translateX(-100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.aiuc-sidebar {
    animation: aiuc-slide-from-left 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
    .aiuc-sidebar {
        animation: none;
    }
}

/* =====================================================
   PERPLEXITY CITATION CHIPS — Light / Dark Mode
   ===================================================== */

/* Wrapper: inline positioning context */
.aiuc-perp-chip-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
}

/* Chip pill */
.aiuc-perp-chip {
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    /* Light mode */
    background: #EAEAEA;
    color: #1C1C1C;
    border: none;
    font-weight: 500;
}

.aiuc-perp-chip:hover {
    background: #E4E4E4;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    color: #1C1C1C;
}

/* Popup card */
.aiuc-perp-popup {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    z-index: 99999;
    min-width: 240px;
    max-width: 300px;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 12px;
    line-height: 1.5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    display: none;

    /* Light mode */
    background: #FFFFFF;
    border: 1px solid #CECECE;
    color: #1C1C1C;
}

.aiuc-perp-chip-wrapper:hover .aiuc-perp-popup,
.aiuc-perp-chip-wrapper:focus-within .aiuc-perp-popup {
    display: block;
}

.aiuc-perp-popup-domain {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: #737373;
    display: flex;
    align-items: center;
    gap: 4px;
}

.aiuc-perp-popup-title a {
    font-weight: 600;
    font-size: 12px;
    color: #0078D4;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aiuc-perp-popup-title a:hover {
    text-decoration: underline;
}

.aiuc-perp-popup-snippet {
    margin-top: 4px;
    font-size: 11px;
    color: #737373;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aiuc-perp-popup-page {
    font-size: 10px;
    color: #737373;
}

/* Popup nav buttons */
.aiuc-perp-popup-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #E4E4E4;
}

.aiuc-perp-popup-nav button {
    background: none;
    border: 1px solid #CECECE;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    cursor: pointer;
    color: #1C1C1C;
    transition: background 0.12s;
}

.aiuc-perp-popup-nav button:hover {
    background: #F0F0F0;
}

/* ── DARK MODE ── */
[data-theme="dark"] .aiuc-perp-chip {
    background: #1C1C1C;
    color: #E8E8E8;
    border-color: #3A3A3A;
}

[data-theme="dark"] .aiuc-perp-chip:hover {
    background: #2A2A2A;
    color: #E8E8E8;
}

[data-theme="dark"] .aiuc-perp-popup {
    background: #1A1A1A;
    border-color: #2A2A2A;
    color: #E8E8E8;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .aiuc-perp-popup-domain {
    color: #A8A5A0;
}

[data-theme="dark"] .aiuc-perp-popup-title a {
    color: #5BB5FF;
}

[data-theme="dark"] .aiuc-perp-popup-snippet {
    color: #A8A5A0;
}

[data-theme="dark"] .aiuc-perp-popup-page {
    color: #A8A5A0;
}

[data-theme="dark"] .aiuc-perp-popup-nav {
    border-bottom-color: #2A2A2A;
}

[data-theme="dark"] .aiuc-perp-popup-nav button {
    border-color: #3A3A3A;
    color: #E8E8E8;
}

[data-theme="dark"] .aiuc-perp-popup-nav button:hover {
    background: #1C1C1C;
}

/* =====================================================
   RESEARCH MODE CHIPS
   ===================================================== */
.aiuc-mode-chips {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-top: 4px;
    flex-wrap: wrap;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    width: 100%;
    order: 3;
}

#aiucModeChipsCentered {
    max-width: none;
    margin: 0;
    position: static;
    z-index: auto;
}

#aiucModeChipsBottom {
    max-width: none;
    margin: 0;
    position: static;
    z-index: auto;
}

/* Keep bottom input and chips visually grouped */
#aiuc-input-area {
    padding-bottom: 14px;
}

/* Chips are now rendered inside input bar */
#aiucInputBarBottom,
.aiuc-input-wrapper-centered .aiuc-input-bar {
    flex-wrap: wrap;
    row-gap: 2px;
    height: auto !important;
    min-height: 56px;
    padding-bottom: 8px !important;
}

#aiucInputBarBottom .aiuc-search-input,
.aiuc-input-wrapper-centered .aiuc-input-bar .aiuc-search-input {
    order: 1;
}

#aiucInputBarBottom .aiuc-input-actions,
.aiuc-input-wrapper-centered .aiuc-input-bar .aiuc-input-actions {
    order: 2;
    margin-left: auto;
    align-self: flex-end !important;
    margin-bottom: 0 !important;
    position: relative !important;
    top: 26px !important;
    transform: none !important;
}

#aiucInputBarBottom .aiuc-mode-chips,
.aiuc-input-wrapper-centered .aiuc-input-bar .aiuc-mode-chips {
    margin-top: 2px !important;
    margin-left: -10px !important;
    padding-left: 0 !important;
}

.aiuc-mode-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 8px;
    border-radius: 9999px;
    border: 1.5px solid transparent;
    background: var(--neutral-bg-1);
    color: var(--text-secondary);
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 300;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.aiuc-mode-chip .tabler-icon {
    width: 11px;
    height: 11px;
}

.aiuc-mode-chip:hover {
    background: var(--neutral-bg-hover);
    color: var(--text-primary);
}

.aiuc-mode-chip[data-mode="web"].active {
    background: rgba(26, 156, 180, 0.12);
    border-color: #1A9CB4;
    color: #1A9CB4;
}

.aiuc-mode-chip[data-mode="rag"].active {
    background: rgba(58, 181, 131, 0.12);
    border-color: #3AB583;
    color: #3AB583;
}

[data-theme="dark"] .aiuc-mode-chip {
    background: #2E2E2E;
    border-color: #383838;
    color: #C8C3BA;
}

[data-theme="dark"] .aiuc-mode-chip:hover {
    background: #383838;
    color: var(--text-primary);
}

[data-theme="dark"] .aiuc-mode-chip[data-mode="web"].active {
    background: rgba(26, 156, 180, 0.26);
    border-color: #1A9CB4;
    color: #57C5D8;
}

[data-theme="dark"] .aiuc-mode-chip[data-mode="rag"].active {
    background: rgba(58, 181, 131, 0.26);
    border-color: #3AB583;
    color: #67D09C;
}

/* Dark mode: keep input/chips truly dark-themed */
[data-theme="dark"] .aiuc-input-bar {
    background: var(--neutral-bg-1) !important;
    border-color: #5B73DA !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28), 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

[data-theme="dark"] .aiuc-input-actions .aiuc-icon-btn {
    color: #ADADAD !important;
}

[data-theme="dark"] .aiuc-input-actions .aiuc-icon-btn:hover {
    background: #383838 !important;
    color: #EDEDED !important;
}

[data-theme="dark"] .aiuc-search-input::placeholder,
[data-theme="dark"] .aiuc-input::placeholder {
    color: #AFAAA2 !important;
}

/* Single selected mode should render full-width */
.aiuc-turn-responses.aiuc-single-mode {
    grid-template-columns: 1fr;
}

/* =====================================================
   MOBİL UYUMLULUK — Kapsamlı Düzeltmeler
   Breakpoints: 900px (tablet), 600px (mobil), 420px (küçük)
   ===================================================== */

/* ── Admin bar mobile fix ── */
@media (max-width: 782px) {
    body.admin-bar .aiuc-wrap {
        top: 46px;
    }
}

/* ── Hamburger butonu ── */
#aiucMenuToggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: var(--radius-md);
    flex-shrink: 0;
    transition: background 0.15s;
    margin-right: 8px;
}

#aiucMenuToggle:hover {
    background: var(--neutral-bg-hover);
}

#aiucMenuToggle .tabler-icon {
    width: 22px;
    height: 22px;
}

/* Sidebar backdrop overlay (mobil) */
#aiucSidebarOverlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 199;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

#aiucSidebarOverlay.visible {
    display: block;
}

/* ── TABLET (≤900px) ── */
@media (max-width: 900px) {
    /* Hamburger görünür */
    #aiucMenuToggle {
        display: inline-flex;
    }

    /* Sidebar: visibility+transform tekniği (display:none çakışmasını önler) */
    .aiuc-sidebar {
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateX(-100%) !important;
        position: fixed !important;
        display: flex !important;   /* flex yapısını koru, sadece görünürlüğü gizle */
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 270px !important;
        z-index: 200 !important;
        border-radius: 0 !important;
        border-right: 1px solid var(--stroke-card) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.18) !important;
        transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                    visibility 0.28s,
                    opacity 0.28s !important;
        animation: none !important;
        opacity: 0 !important;
    }

    .aiuc-sidebar.open {
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
        opacity: 1 !important;
    }

    /* Tam ekran — kenar boşluğu yok */
    .aiuc-wrap {
        inset: 0 !important;
    }

    .aiuc-app-shell {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 12px !important;
        grid-template-columns: 1fr !important;
    }

    .aiuc-main-content {
        border-radius: 20px !important;
    }

    /* Yanıt sütunları dikey */
    .aiuc-turn-responses {
        grid-template-columns: 1fr !important;
    }

    .aiuc-global-headers {
        grid-template-columns: 1fr !important;
    }

    /* Duyuru kartları: tek sütun */
    .aiuc-announcements {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Header */
    .aiuc-header-section {
        padding: 0 16px !important;
        height: 60px !important;
        min-height: 60px !important;
    }

    .aiuc-header-brand p {
        display: none !important;
    }

    /* Chat body */
    .aiuc-chat-body {
        padding: 16px 16px 0 !important;
    }

    /* Input alanı */
    .aiuc-input-area {
        padding: 10px 16px 20px !important;
    }

    /* Landing başlıkları küçül */
    .aiuc-landing-title-row {
        line-height: 1.12 !important;
    }

    .aiuc-landing-title-bold {
        font-size: 34px !important;
    }
    .aiuc-landing-title-serif {
        font-size: 40px !important;
        margin-top: 4px !important;
    }

    /* Kategori etiketleri: daha küçük */
    .aiuc-category-tag {
        height: 24px !important;
        font-size: 11px !important;
        padding: 0 10px !important;
    }

    /* Input butonları: ikon boyutu küçült */
    .aiuc-icon-btn {
        width: 32px !important;
        height: 32px !important;
    }
    .aiuc-research-btn {
        padding: 0 14px !important;
        font-size: 13px !important;
    }
}

/* ── MOBİL (≤600px) ── */
@media (max-width: 600px) {
    /* Tam ekran, kenarı tamamen kaldır */
    .aiuc-wrap {
        inset: 0 !important;
    }

    .aiuc-app-shell {
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;   /* tam kenara yapan ekranlarda radius kalsın ister misin? 0 = tam edge-to-edge */
    }

    /* Header */
    .aiuc-header-section {
        padding: 0 12px !important;
        height: 56px !important;
        min-height: 56px !important;
    }

    .aiuc-header-brand h1 {
        font-size: 13px !important;
    }

    /* Buton yazıları gizli */
    .aiuc-btn-text {
        display: none !important;
    }

    /* Küçük action butonları */
    .aiuc-header-actions .aiuc-btn {
        height: 28px !important;
        min-height: 28px !important;
        padding: 0 10px !important;
        font-size: 11px !important;
    }

    /* Landing başlıklar */
    .aiuc-landing-title-row {
        line-height: 1.14 !important;
    }

    .aiuc-landing-title-bold {
        font-size: 26px !important;
    }
    .aiuc-landing-title-serif {
        font-size: 30px !important;
        margin-top: 4px !important;
    }

    .aiuc-landing-description {
        font-size: 12px !important;
        padding: 0 8px !important;
    }

    /* Kategori etiketler: mobilde çok daha küçük */
    .aiuc-categories-cloud {
        gap: 4px !important;
        margin-top: 2px !important;
    }
    .aiuc-category-tag {
        height: 20px !important;
        font-size: 10px !important;
        padding: 0 8px !important;
    }

    /* Input bar */
    .aiuc-input-bar {
        height: 50px !important;
        min-height: 50px !important;
        padding: 6px 10px 6px 16px !important;
        border-radius: 20px !important;
    }

    .aiuc-input-area {
        padding: 8px 12px 16px !important;
    }

    .aiuc-search-input,
    .aiuc-input {
        font-size: 14px !important;
    }

    .aiuc-research-btn {
        padding: 0 12px !important;
        font-size: 12px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    /* Input ikon butonları: daha küçük */
    .aiuc-icon-btn {
        width: 30px !important;
        height: 30px !important;
    }
    .aiuc-icon-btn .tabler-icon {
        width: 17px !important;
        height: 17px !important;
    }

    /* Mode chips */
    .aiuc-mode-chip {
        font-size: 9px !important;
        height: 22px !important;
        padding: 0 7px !important;
    }

    /* Input actions hizalama */
    #aiucInputBarBottom .aiuc-input-actions,
    .aiuc-input-wrapper-centered .aiuc-input-bar .aiuc-input-actions {
        top: 20px !important;
    }

    /* Chat body */
    .aiuc-chat-body {
        padding: 12px 12px 0 !important;
    }

    /* Kullanıcı balonu: genişlet */
    .aiuc-user-bubble {
        max-width: 90% !important;
    }

    /* Yanıt sütunu: küçük padding */
    .aiuc-response-col {
        padding: 14px 16px !important;
    }

    /* Duyuru kartları */
    .aiuc-card-announcement {
        min-height: 60px !important;
        padding: 10px 12px 14px !important;
    }

    /* Welcome content */
    .aiuc-welcome-content {
        gap: 16px !important;
        padding: 48px 0 32px !important;
    }

    /* Sidebar 600px'de biraz daha dar — transform tekniğiyle uyumlu */
    .aiuc-sidebar {
        width: 240px !important;
    }

    /* PDF dropdown: sola yasla */
    .aiuc-dropdown-menu {
        right: auto !important;
        left: 0 !important;
        min-width: 170px !important;
    }

    /* Account dropdown */
    .aiuc-account-dropdown {
        right: -8px !important;
        min-width: 200px !important;
    }

    .aiuc-account-area {
        padding-left: 8px !important;
        border-left: none !important;
    }
}

/* ── KÜÇÜK MOBİL (≤420px) ── */
@media (max-width: 420px) {
    .aiuc-welcome-content {
        padding-top: 40px !important;
    }

    .aiuc-landing-title-bold {
        font-size: 22px !important;
    }
    .aiuc-landing-title-serif {
        font-size: 25px !important;
        margin-top: 3px !important;
    }

    .aiuc-header-brand h1 {
        font-size: 12px !important;
    }

    .aiuc-header-site-icon,
    .aiuc-header-site-icon-placeholder {
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        margin-right: 8px !important;
    }

    .aiuc-research-btn {
        padding: 6px 10px !important;
        font-size: 12px !important;
    }

    /* Mode chip: sadece ikon */
    .aiuc-mode-chip span {
        display: none !important;
    }

    .aiuc-mode-chip {
        padding: 0 8px !important;
        min-width: 28px !important;
    }
}

/* ── Dokunmatik cihazlar: hover yerine touch ── */
@media (hover: none) and (pointer: coarse) {
    /* Citation popup: hover kaldır, JS ile click toggle */
    .aiuc-perp-chip-wrapper:hover .aiuc-perp-popup,
    .aiuc-perp-chip-wrapper:focus-within .aiuc-perp-popup {
        display: none;
    }

    .aiuc-perp-chip-wrapper.touch-open .aiuc-perp-popup {
        display: block !important;
    }

    /* History item actions: dokunmada her zaman görünür */
    .aiuc-history-item-actions {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* ── Hızlı Destek Modal ── */
.aiuc-support-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}
.aiuc-support-modal {
    width: 92%;
    max-width: 420px;
    background: var(--neutral-bg-card, #fff);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    animation: aiuc-support-modal-in 0.2s ease;
}
@keyframes aiuc-support-modal-in {
    from { opacity: 0; transform: translateY(16px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.aiuc-support-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--neutral-border, #E4E4E4);
}
.aiuc-support-modal-header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #1a1a18);
}
.aiuc-support-modal-header button {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--text-secondary, #6b6b60);
    padding: 0 2px;
}
.aiuc-support-modal-body {
    padding: 18px 20px;
}
.aiuc-support-field {
    margin-bottom: 14px;
}
.aiuc-support-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #6b6b60);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.aiuc-support-field input,
.aiuc-support-field textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    border: 1.5px solid var(--neutral-border, #D0D0D0);
    border-radius: 8px;
    background: var(--neutral-bg-main, #f5f5f0);
    color: var(--text-primary, #1a1a18);
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s;
    box-sizing: border-box;
}
.aiuc-support-field input:focus,
.aiuc-support-field textarea:focus {
    outline: none;
    border-color: #387FEA;
}
.aiuc-support-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--neutral-border, #E4E4E4);
}
.aiuc-support-cancel {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    border: 1.5px solid var(--neutral-border, #D0D0D0);
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #6b6b60);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.aiuc-support-cancel:hover {
    background: var(--neutral-bg-main, #f5f5f0);
}
.aiuc-support-submit {
    padding: 8px 22px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: #387FEA;
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.aiuc-support-submit:hover {
    background: #2d6cd4;
    box-shadow: 0 2px 8px rgba(56, 127, 234, 0.25);
}
.aiuc-support-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
#aiucSupportStatus {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
}

/* Dark mode */
[data-theme="dark"] .aiuc-support-modal,
.aiuc-dark .aiuc-support-modal {
    background: var(--neutral-bg-card, #242424);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
[data-theme="dark"] .aiuc-support-modal-header,
.aiuc-dark .aiuc-support-modal-header {
    border-bottom-color: var(--neutral-border, #383838);
}
[data-theme="dark"] .aiuc-support-modal-footer,
.aiuc-dark .aiuc-support-modal-footer {
    border-top-color: var(--neutral-border, #383838);
}
[data-theme="dark"] .aiuc-support-field input,
[data-theme="dark"] .aiuc-support-field textarea,
.aiuc-dark .aiuc-support-field input,
.aiuc-dark .aiuc-support-field textarea {
    background: var(--neutral-bg-main, #1A1A1A);
    border-color: var(--neutral-border, #383838);
    color: var(--text-primary, #e8e6df);
}
[data-theme="dark"] .aiuc-support-cancel,
.aiuc-dark .aiuc-support-cancel {
    border-color: var(--neutral-border, #383838);
    color: var(--text-secondary, #a0a090);
}
[data-theme="dark"] .aiuc-support-cancel:hover,
.aiuc-dark .aiuc-support-cancel:hover {
    background: var(--neutral-bg-main, #1A1A1A);
}

/* =====================================================
   KULLANICI PANELİ — Modal Overlay
   ===================================================== */

/* ── Overlay ── */
.aiuc-userpanel-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    animation: aiuc-up-overlay-in 0.25s ease;
}

@keyframes aiuc-up-overlay-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Modal Container ── */
.aiuc-userpanel-modal {
    width: 94%;
    max-width: 860px;
    height: 620px;
    max-height: 90vh;
    background: var(--neutral-bg-card, #fff);
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25), 0 8px 32px rgba(0, 0, 0, 0.08);
    display: grid;
    grid-template-columns: 200px 1fr;
    overflow: hidden;
    animation: aiuc-up-modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid var(--stroke-control, #E4E4E4);
}

@keyframes aiuc-up-modal-in {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Panel Sidebar ── */
.aiuc-userpanel-sidebar {
    background: var(--neutral-bg-1, #F0F0F0);
    display: flex;
    flex-direction: column;
    padding: 20px 10px 16px;
    border-right: 1px solid var(--stroke-control, #E4E4E4);
    overflow-y: auto;
}

.aiuc-userpanel-sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 6px 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--stroke-control, #E4E4E4);
}

.aiuc-userpanel-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--brand-primary, #0078D4);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.aiuc-userpanel-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.aiuc-userpanel-sidebar-user-info {
    flex: 1;
    min-width: 0;
}

.aiuc-userpanel-sidebar-user-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1C1C1C);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.aiuc-userpanel-sidebar-user-sub {
    font-size: 10px;
    color: var(--text-secondary, #737373);
    font-weight: 500;
}

/* ── Nav Items ── */
.aiuc-userpanel-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.aiuc-userpanel-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--text-primary, #1C1C1C);
    font-size: 13px;
    font-weight: 500;
    font-family: "Inter", sans-serif;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    text-align: left;
    width: 100%;
}

.aiuc-userpanel-nav-item:hover {
    background: var(--neutral-bg-hover, #E4E4E4);
}

.aiuc-userpanel-nav-item.active {
    background: var(--neutral-bg-hover, #E4E4E4);
    font-weight: 600;
}

.aiuc-userpanel-nav-item .aiuc-support-reply-indicator {
    order: 3;
    margin-left: auto;
}

.aiuc-userpanel-nav-item svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-secondary, #737373);
    fill: none !important;
    stroke: currentColor;
    stroke-width: 1.5;
}

.aiuc-userpanel-nav-item.active svg {
    color: var(--text-primary, #1C1C1C);
}

.aiuc-userpanel-nav-bottom {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--stroke-control, #E4E4E4);
}

.aiuc-userpanel-logout {
    color: #DC2626 !important;
}

.aiuc-userpanel-logout svg {
    color: #DC2626 !important;
}

.aiuc-userpanel-logout:hover {
    background: rgba(220, 38, 38, 0.08) !important;
}

/* ── Content Panel ── */
.aiuc-userpanel-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.aiuc-userpanel-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid var(--stroke-control, #E4E4E4);
    flex-shrink: 0;
}

.aiuc-userpanel-content-title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--text-primary, #1C1C1C);
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* Temalardan sızabilecek her türlü border/pseudo-element/çizgiyi gizle */
.aiuc-userpanel-content-title::before,
.aiuc-userpanel-content-title::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: none !important;
}

.aiuc-userpanel-close {
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    color: var(--text-secondary, #737373);
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
}

.aiuc-userpanel-close:hover {
    background: var(--neutral-bg-hover, #E4E4E4);
    color: var(--text-primary, #1C1C1C);
}

.aiuc-userpanel-content-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* ── Page Switching ── */
.aiuc-userpanel-page {
    display: none;
}

.aiuc-userpanel-page.active {
    display: block;
    animation: aiuc-up-page-in 0.2s ease;
}

@keyframes aiuc-up-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Profile Page ── */
.aiuc-up-profile-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--neutral-bg-1, #F0F0F0);
    border-radius: 12px;
    border: 1px solid var(--stroke-control, #E4E4E4);
    margin-bottom: 20px;
}

.aiuc-up-profile-avatar {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--brand-primary, #0078D4);
}

.aiuc-up-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.aiuc-up-profile-info {
    flex: 1;
    min-width: 0;
}

.aiuc-up-profile-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #1C1C1C);
    margin-bottom: 2px;
}

.aiuc-up-profile-email {
    font-size: 13px;
    color: var(--text-secondary, #737373);
}

.aiuc-up-profile-actions {
    display: flex;
    gap: 6px;
}

.aiuc-up-btn-icon {
    width: 34px;
    height: 34px;
    border: 1px solid var(--stroke-control, #E4E4E4);
    background: var(--neutral-bg-card, #fff);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #737373);
    transition: all 0.12s;
}

.aiuc-up-btn-icon:hover {
    background: var(--neutral-bg-hover, #E4E4E4);
    color: var(--text-primary, #1C1C1C);
    border-color: var(--text-secondary, #737373);
}

/* ── Subscription Badge Row ── */
.aiuc-up-subscription-badge-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--neutral-bg-1, #F0F0F0);
    border-radius: 10px;
    border: 1px solid var(--stroke-control, #E4E4E4);
}

.aiuc-up-sub-label {
    font-size: 13px;
    color: var(--text-secondary, #737373);
    font-weight: 500;
}

.aiuc-up-sub-badge {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--brand-tertiary, #EFF6FC);
    color: var(--brand-primary, #0078D4);
    border: 1px solid rgba(0, 120, 212, 0.15);
}

.aiuc-up-sub-upgrade {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 8px;
    border: none;
    background: var(--text-primary, #1C1C1C);
    color: var(--neutral-bg-card, #fff);
    cursor: pointer;
    transition: all 0.15s;
    font-family: "Inter", sans-serif;
}

.aiuc-up-sub-upgrade:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ── Subscription Page ── */
.aiuc-up-current-sub {
    padding: 18px;
    background: var(--neutral-bg-1, #F0F0F0);
    border-radius: 12px;
    border: 1px solid var(--stroke-control, #E4E4E4);
    margin-bottom: 16px;
}

.aiuc-up-current-sub-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #737373);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.aiuc-up-current-sub-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #1C1C1C);
}

.aiuc-up-current-sub-meta {
    font-size: 12px;
    color: var(--text-secondary, #737373);
    margin-top: 4px;
}

.aiuc-up-sub-divider {
    height: 1px;
    background: var(--stroke-control, #E4E4E4);
    margin: 16px 0;
}

.aiuc-up-other-levels-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #1C1C1C);
    margin-bottom: 12px;
}

.aiuc-up-other-levels {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aiuc-up-level-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: var(--neutral-bg-1, #F0F0F0);
    border-radius: 10px;
    border: 1px solid var(--stroke-control, #E4E4E4);
    transition: border-color 0.12s;
}

.aiuc-up-level-card:hover {
    border-color: var(--brand-primary, #0078D4);
}

.aiuc-up-level-card.current {
    border-color: var(--brand-primary, #0078D4);
    background: var(--brand-tertiary, #EFF6FC);
}

.aiuc-up-level-info {
    flex: 1;
}

.aiuc-up-level-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1C1C1C);
}

.aiuc-up-level-price {
    font-size: 12px;
    color: var(--text-secondary, #737373);
    margin-top: 2px;
}

.aiuc-up-level-btn {
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: 1px solid var(--stroke-control, #E4E4E4);
    background: var(--neutral-bg-card, #fff);
    color: var(--text-primary, #1C1C1C);
    cursor: pointer;
    font-family: "Inter", sans-serif;
    transition: all 0.12s;
}

.aiuc-up-level-btn:hover {
    background: var(--neutral-bg-hover, #E4E4E4);
}

.aiuc-up-level-btn.current-btn {
    background: var(--brand-primary, #0078D4);
    color: #fff;
    border-color: var(--brand-primary, #0078D4);
    cursor: default;
}

.aiuc-up-levels-empty {
    font-size: 13px;
    color: var(--text-secondary, #737373);
    padding: 16px 0;
    text-align: center;
}

/* ── Form Components ── */
.aiuc-up-form-group {
    margin-bottom: 16px;
}

.aiuc-up-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #737373);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.aiuc-up-form-group input,
.aiuc-up-form-group textarea {
    width: 100%;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.5;
    border: 1.5px solid var(--stroke-control, #D0D0D0);
    border-radius: 8px;
    background: var(--neutral-bg-1, #F0F0F0);
    color: var(--text-primary, #1C1C1C);
    font-family: "Inter", sans-serif;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.aiuc-up-form-group input:focus,
.aiuc-up-form-group textarea:focus {
    outline: none;
    border-color: var(--brand-primary, #0078D4);
    box-shadow: 0 0 0 3px rgba(0, 120, 212, 0.1);
}

.aiuc-up-form-row {
    display: flex;
    gap: 12px;
}

.aiuc-up-form-half {
    flex: 1;
}

.aiuc-up-form-status {
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 8px;
}

/* ── Buttons ── */
.aiuc-up-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: var(--brand-primary, #0078D4);
    color: #fff;
    cursor: pointer;
    font-family: "Inter", sans-serif;
    transition: all 0.15s;
}

.aiuc-up-btn-primary:hover {
    opacity: 0.9;
    box-shadow: 0 4px 12px rgba(0, 120, 212, 0.25);
    transform: translateY(-1px);
}

.aiuc-up-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.aiuc-up-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    border: 1.5px solid var(--stroke-control, #D0D0D0);
    border-radius: 8px;
    background: var(--neutral-bg-card, #fff);
    color: var(--text-primary, #1C1C1C);
    cursor: pointer;
    font-family: "Inter", sans-serif;
    transition: all 0.12s;
}

.aiuc-up-btn-secondary:hover {
    background: var(--neutral-bg-hover, #E4E4E4);
    border-color: var(--text-secondary, #737373);
}

/* ── Settings ── */
.aiuc-up-settings-section {
    margin-bottom: 20px;
}

.aiuc-up-settings-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #1C1C1C);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--stroke-control, #E4E4E4);
}

.aiuc-up-avatar-upload-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

.aiuc-up-avatar-preview {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--neutral-bg-hover, #E4E4E4);
    border: 2px solid var(--stroke-control, #E4E4E4);
}

.aiuc-up-avatar-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Help Page ── */
.aiuc-up-help-intro {
    font-size: 13px;
    color: var(--text-secondary, #737373);
    line-height: 1.6;
    margin-bottom: 20px;
}

/* ── Dark mode overrides ── */
/* Support ticket history */
.aiuc-up-tickets-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.aiuc-up-ticket-card {
    border: 1px solid var(--stroke-control, #E4E4E4);
    border-radius: 10px;
    background: var(--neutral-bg-card, #fff);
    padding: 14px 16px;
}

.aiuc-up-ticket-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.aiuc-up-ticket-title {
    color: var(--text-primary, #1C1C1C);
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
}

.aiuc-up-ticket-status {
    flex: 0 0 auto;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
}

.aiuc-up-ticket-status.open {
    background: #DBEAFE;
    color: #1D4ED8;
}

.aiuc-up-ticket-status.answered {
    background: #DCFCE7;
    color: #15803D;
}

.aiuc-up-ticket-status.closed {
    background: #E5E7EB;
    color: #374151;
}

.aiuc-up-ticket-date {
    margin-top: 4px;
    color: var(--text-secondary, #737373);
    font-size: 11px;
}

.aiuc-up-ticket-message,
.aiuc-up-ticket-reply-text {
    margin-top: 10px;
    color: var(--text-primary, #1C1C1C);
    font-size: 12.5px;
    line-height: 1.6;
    white-space: pre-wrap;
}

.aiuc-up-ticket-reply {
    margin-top: 12px;
    border-radius: 8px;
    padding: 12px;
    border: 1px solid var(--stroke-control, #E4E4E4);
    background: var(--neutral-bg-1, #F0F0F0);
}

.aiuc-up-ticket-reply.has-reply {
    border-color: #BBF7D0;
    background: #ECFDF5;
}

.aiuc-up-ticket-reply.no-reply {
    color: var(--text-secondary, #737373);
}

.aiuc-up-ticket-reply-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--text-primary, #1C1C1C);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.aiuc-up-ticket-reply-label span {
    color: var(--text-secondary, #737373);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

[data-theme="dark"] .aiuc-userpanel-modal,
.aiuc-dark .aiuc-userpanel-modal {
    background: var(--neutral-bg-card, #1A1A1A);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 8px 32px rgba(0, 0, 0, 0.3);
    border-color: var(--stroke-control, #383838);
}

[data-theme="dark"] .aiuc-userpanel-sidebar,
.aiuc-dark .aiuc-userpanel-sidebar {
    background: var(--neutral-bg-1, #252525);
    border-right-color: var(--stroke-control, #383838);
}

[data-theme="dark"] .aiuc-up-profile-card,
.aiuc-dark .aiuc-up-profile-card,
[data-theme="dark"] .aiuc-up-current-sub,
.aiuc-dark .aiuc-up-current-sub,
[data-theme="dark"] .aiuc-up-level-card,
.aiuc-dark .aiuc-up-level-card,
[data-theme="dark"] .aiuc-up-ticket-card,
.aiuc-dark .aiuc-up-ticket-card,
[data-theme="dark"] .aiuc-up-ticket-reply,
.aiuc-dark .aiuc-up-ticket-reply,
[data-theme="dark"] .aiuc-up-subscription-badge-row,
.aiuc-dark .aiuc-up-subscription-badge-row {
    background: var(--neutral-bg-1, #252525);
    border-color: var(--stroke-control, #383838);
}

[data-theme="dark"] .aiuc-up-ticket-reply.has-reply,
.aiuc-dark .aiuc-up-ticket-reply.has-reply {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(74, 222, 128, 0.28);
}

[data-theme="dark"] .aiuc-up-form-group input,
[data-theme="dark"] .aiuc-up-form-group textarea,
.aiuc-dark .aiuc-up-form-group input,
.aiuc-dark .aiuc-up-form-group textarea {
    background: var(--neutral-bg-1, #252525);
    border-color: var(--stroke-control, #383838);
    color: var(--text-primary, #EDEDED);
}

[data-theme="dark"] .aiuc-up-btn-icon,
.aiuc-dark .aiuc-up-btn-icon {
    background: var(--neutral-bg-1, #252525);
    border-color: var(--stroke-control, #383838);
}

[data-theme="dark"] .aiuc-up-btn-secondary,
.aiuc-dark .aiuc-up-btn-secondary {
    background: var(--neutral-bg-1, #252525);
    border-color: var(--stroke-control, #383838);
    color: var(--text-primary, #EDEDED);
}

[data-theme="dark"] .aiuc-up-level-btn,
.aiuc-dark .aiuc-up-level-btn {
    background: var(--neutral-bg-card, #1A1A1A);
    border-color: var(--stroke-control, #383838);
    color: var(--text-primary, #EDEDED);
}

[data-theme="dark"] .aiuc-up-sub-upgrade,
.aiuc-dark .aiuc-up-sub-upgrade {
    background: #EDEDED;
    color: #1A1A1A;
}

/* ── Responsive — User Panel (Tablet ≤900px) ── */
@media (max-width: 900px) {
    .aiuc-userpanel-modal {
        width: 96%;
        max-width: 96%;
        height: auto;
        max-height: 88vh;
    }

    .aiuc-userpanel-sidebar {
        padding: 14px 8px;
    }

    .aiuc-userpanel-nav-item {
        padding: 7px 8px;
        font-size: 12px;
    }

    .aiuc-userpanel-content-body {
        padding: 18px;
    }
}

/* ── Responsive — User Panel (Mobile ≤600px) ── */
@media (max-width: 600px) {
    .aiuc-userpanel-modal {
        grid-template-columns: 1fr;
        max-height: 90vh;
        width: 95%;
        height: auto;
    }

    .aiuc-userpanel-sidebar {
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 10px 8px;
        border-right: none;
        border-bottom: 1px solid var(--stroke-control, #E4E4E4);
        gap: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .aiuc-userpanel-sidebar::-webkit-scrollbar {
        display: none;
    }

    .aiuc-userpanel-sidebar-user {
        display: none;
    }

    .aiuc-userpanel-nav {
        flex-direction: row;
        gap: 4px;
    }

    .aiuc-userpanel-nav-item {
        padding: 6px 10px;
        font-size: 12px;
        white-space: nowrap;
    }

    .aiuc-userpanel-nav-item span {
        display: none;
    }

    .aiuc-userpanel-nav-bottom {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        padding-left: 4px;
        border-left: 1px solid var(--stroke-control, #E4E4E4);
    }

    .aiuc-userpanel-content-header {
        padding: 12px 16px;
    }

    .aiuc-userpanel-content-title {
        font-size: 15px;
    }

    .aiuc-userpanel-content-body {
        padding: 16px;
    }

    .aiuc-up-form-row {
        flex-direction: column;
    }

    .aiuc-up-profile-card {
        flex-direction: column;
        text-align: center;
        gap: 12px;
        padding: 16px;
    }

    .aiuc-up-profile-actions {
        justify-content: center;
    }

    .aiuc-up-subscription-badge-row {
        flex-direction: column;
        text-align: center;
        gap: 8px;
        padding: 12px;
    }

    .aiuc-up-sub-upgrade {
        margin-left: 0;
        width: 100%;
    }

    .aiuc-up-level-card {
        flex-direction: column;
        gap: 10px;
        text-align: center;
        padding: 12px;
    }

    .aiuc-up-level-btn {
        width: 100%;
    }

    .aiuc-up-avatar-upload-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}

/* =====================================================
   KAPSAMLI MOBİL UYUMLULUK İYİLEŞTİRMELERİ
   — Safe Area, Landscape, Touch, Fine-tuning
   ===================================================== */

/* ── Safe Area Insets (iPhone notch / Dynamic Island) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .aiuc-wrap {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    @media (max-width: 900px) {
        .aiuc-input-area {
            padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* ── Admin bar fix for mobile WP admin bar ── */
@media (max-width: 600px) {
    body.admin-bar .aiuc-wrap {
        top: 0 !important;
    }
}

/* ── Landscape orientation on mobile ── */
@media (max-height: 500px) and (orientation: landscape) {
    .aiuc-app-shell {
        border-radius: 0 !important;
    }

    .aiuc-header-section {
        height: 48px !important;
        min-height: 48px !important;
    }

    .aiuc-landing-header {
        gap: 8px !important;
    }

    .aiuc-landing-title-bold {
        font-size: 22px !important;
    }

    .aiuc-landing-title-serif {
        font-size: 26px !important;
    }

    .aiuc-landing-description {
        display: none !important;
    }

    .aiuc-welcome-content {
        gap: 8px !important;
        padding: 4px 0 16px !important;
    }

    .aiuc-announcements {
        display: none !important;
    }

    .aiuc-input-area {
        padding: 6px 12px 10px !important;
    }

    .aiuc-input-bar {
        height: 44px !important;
        min-height: 44px !important;
    }

    /* User panel in landscape */
    .aiuc-userpanel-modal {
        max-height: 95vh;
        height: 95vh;
    }
}

/* ── Centered input: prevent scale overflow on mobile ── */
@media (max-width: 900px) {
    .aiuc-input-wrapper-centered .aiuc-input-bar {
        transform: none !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
    }

    .aiuc-input-wrapper-centered .aiuc-input-bar:hover {
        transform: none !important;
    }

    .aiuc-input-wrapper-centered .aiuc-input-bar:focus-within {
        transform: none !important;
    }
}

/* ── Category cards grid: smaller mobile ── */
@media (max-width: 600px) {
    .aiuc-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    .aiuc-card {
        min-height: 38px !important;
    }
}

/* ── Header buttons: tablet fine-tuning (600-900px) ── */
@media (min-width: 601px) and (max-width: 900px) {
    .aiuc-header-actions .aiuc-btn .aiuc-btn-text {
        display: none !important;
    }

    .aiuc-header-actions .aiuc-btn {
        padding: 0 10px !important;
    }

    .aiuc-header-actions {
        gap: 6px !important;
    }
}

/* ── Account dropdown: prevent viewport overflow ── */
@media (max-width: 600px) {
    .aiuc-account-dropdown {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        min-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18) !important;
        z-index: 100002 !important;
        max-height: 60vh;
        overflow-y: auto;
    }

    .aiuc-account-dropdown-header {
        padding: 20px 16px;
    }
}

/* ── Response columns: very small screens ── */
@media (max-width: 420px) {
    .aiuc-response-col {
        padding: 10px 12px !important;
        border-radius: 10px !important;
    }

    .aiuc-user-bubble {
        max-width: 95% !important;
        padding: 6px 14px !important;
        font-size: 12px !important;
    }

    .aiuc-chat-body {
        padding: 8px 8px 0 !important;
    }

    .aiuc-input-area {
        padding: 6px 8px 14px !important;
    }

    .aiuc-footer-text {
        font-size: 9px !important;
        padding: 0 4px;
    }

    /* Header squeeze */
    .aiuc-header-section {
        padding: 0 8px !important;
        gap: 4px !important;
    }

    .aiuc-header-actions {
        gap: 4px !important;
    }

    .aiuc-header-actions .aiuc-btn {
        height: 26px !important;
        min-height: 26px !important;
        padding: 0 8px !important;
        font-size: 10px !important;
    }

    /* Avatar button */
    .aiuc-avatar-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .aiuc-account-area {
        padding-left: 4px !important;
    }

    /* Input bar squeeze */
    .aiuc-input-bar {
        padding: 4px 6px 4px 12px !important;
        border-radius: 16px !important;
    }

    .aiuc-icon-btn {
        width: 26px !important;
        height: 26px !important;
    }

    .aiuc-icon-btn .tabler-icon {
        width: 15px !important;
        height: 15px !important;
    }

    .aiuc-research-btn {
        padding: 0 10px !important;
        font-size: 11px !important;
        height: 30px !important;
        min-height: 30px !important;
    }
}

/* ── Touch target sizing: ensure minimum 44px for interactive elements ── */
@media (hover: none) and (pointer: coarse) {
    .aiuc-nav-item {
        min-height: 40px !important;
    }

    .aiuc-history-action-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px;
        min-height: 28px;
    }

    .aiuc-toolbar-btn {
        width: 36px !important;
        height: 36px !important;
    }

    .aiuc-mode-chip {
        min-height: 28px !important;
        padding: 0 10px !important;
    }

    .aiuc-category-tag {
        min-height: 32px !important;
    }

    .aiuc-dropdown-item {
        min-height: 44px !important;
    }

    .aiuc-settings-item {
        min-height: 44px !important;
    }

    .aiuc-userpanel-nav-item {
        min-height: 40px !important;
    }

    .aiuc-userpanel-close {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ── Sidebar overlay: ensure proper stacking with user panel ── */
#aiucSidebarOverlay {
    z-index: 199;
}

#aiucSidebarOverlay.visible + .aiuc-userpanel-overlay,
.aiuc-userpanel-overlay {
    z-index: 100001;
}

/* ── Tablet user bubble width ── */
@media (min-width: 601px) and (max-width: 900px) {
    .aiuc-user-bubble {
        max-width: 85% !important;
    }
}

/* ── Fix dark mode toggle overflow in very narrow sidebar ── */
@media (max-width: 600px) {
    .aiuc-sidebar .aiuc-dark-mode-toggle-wrapper {
        padding: 0 8px;
    }
}

/* ── Perplexity popup: prevent overflow on mobile ── */
@media (max-width: 600px) {
    .aiuc-perp-popup {
        position: fixed !important;
        bottom: auto !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: calc(100vw - 32px) !important;
        max-width: 320px !important;
        z-index: 100003 !important;
        margin-bottom: 0 !important;
    }

    .aiuc-perp-chip-wrapper.touch-open .aiuc-perp-popup {
        display: block !important;
    }
}

/* ── Table responsiveness ── */
@media (max-width: 600px) {
    .aiuc-table-wrapper {
        margin: 10px -4px;
        border-radius: 4px;
    }

    .aiuc-markdown-table th,
    .aiuc-markdown-table td {
        padding: 6px 8px !important;
        font-size: 10px !important;
    }

    .aiuc-markdown-table th *,
    .aiuc-markdown-table td * {
        font-size: 10px !important;
    }
}

/* ── Summary block mobile fixes ── */
@media (max-width: 600px) {
    .aiuc-summary-block {
        padding: 14px 16px;
        margin-top: 12px;
    }

    .aiuc-summary-btn {
        font-size: 12px;
        padding: 6px 16px;
    }
}

/* ── Support modal mobile fix ── */
@media (max-width: 420px) {
    .aiuc-support-modal {
        width: 96% !important;
    }

    .aiuc-support-modal-header {
        padding: 12px 14px;
    }

    .aiuc-support-modal-body {
        padding: 14px;
    }

    .aiuc-support-modal-footer {
        padding: 10px 14px;
    }
}

/* ── Print: hide mobile-only elements ── */
@media print {
    #aiucMenuToggle,
    #aiucSidebarOverlay,
    .aiuc-mode-chips,
    .aiuc-dark-mode-toggle-wrapper,
    .aiuc-sidebar,
    .aiuc-support-overlay,
    .aiuc-userpanel-overlay {
        display: none !important;
    }
}

/* ── Smooth scrolling on mobile chat body ── */
@media (max-width: 900px) {
    .aiuc-chat-body {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

    .aiuc-sidebar {
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Fix input bar mode chips overlap on mobile ── */
@media (max-width: 600px) {
    #aiucInputBarBottom .aiuc-input-actions,
    .aiuc-input-wrapper-centered .aiuc-input-bar .aiuc-input-actions {
        top: auto !important;
        position: static !important;
        align-self: center !important;
    }

    #aiucInputBarBottom,
    .aiuc-input-wrapper-centered .aiuc-input-bar {
        min-height: 48px !important;
        padding-bottom: 6px !important;
    }

    .aiuc-mode-chips {
        margin-top: 0 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
        width: calc(100% + 16px) !important;
        margin-right: -8px !important;
    }
}

/* ── iPad / tablet specific (768-1024px) ── */
@media (min-width: 768px) and (max-width: 1024px) {
    .aiuc-app-shell {
        margin: 8px !important;
        border-radius: 16px !important;
    }

    .aiuc-categories-cloud {
        max-width: 90%;
    }

    .aiuc-announcements {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   Onboarding Tour Modal — KRITERA design system
   ════════════════════════════════════════════════════════════════════════ */
.aiuc-onboarding-overlay {
    position: fixed;
    inset: 0;
    background: rgba(28, 28, 28, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: aiuc-onb-fade-in 0.25s ease-out;
}

[data-theme="dark"] .aiuc-onboarding-overlay {
    background: rgba(0, 0, 0, 0.65);
}

@keyframes aiuc-onb-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes aiuc-onb-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.aiuc-onboarding-modal {
    width: 100%;
    max-width: 520px;
    background: var(--neutral-bg-card);
    border-radius: 20px;
    border: 1px solid var(--stroke-card);
    overflow: hidden;
    position: relative;
    animation: aiuc-onb-slide-up 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-primary);
}

.aiuc-onboarding-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    border-radius: 9999px;
    color: var(--text-secondary);
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s ease, color 0.15s ease;
}

.aiuc-onboarding-close:hover {
    background: var(--neutral-bg-hover);
    color: var(--text-primary);
}

.aiuc-onboarding-progress,
.aiuc-onboarding-progress-bar {
    display: none !important;
}

.aiuc-onboarding-body {
    padding: 36px 36px 28px;
    min-height: 280px;
    position: relative;
}

.aiuc-onboarding-step {
    display: none;
    animation: aiuc-onb-slide-up 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.aiuc-onboarding-step.active {
    display: block;
}

/* Üst icon ve ayırıcı kaldırıldı — gizli tutuyoruz, yapı için DOM'da kalabilir */
.aiuc-onboarding-icon,
.aiuc-onboarding-icon-success {
    display: none !important;
}

.aiuc-onboarding-step h2 {
    margin: 0 0 14px !important;
    padding: 0 !important;
    font-family: 'Instrument Serif', 'Inter', serif !important;
    font-weight: 400 !important;
    font-style: italic !important;
    font-size: 28px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.01em !important;
    color: var(--text-primary) !important;
    border: 0 !important;
    border-top: 0 !important;
    background: none !important;
    text-align: left !important;
    text-transform: none !important;
}

/* Tema veya WP'nin h2::before kicker / underline pseudo öğelerini nötralize et */
.aiuc-onboarding-step h2::before,
.aiuc-onboarding-step h2::after {
    content: none !important;
    display: none !important;
    background: none !important;
    border: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Marka adı için Red Hat Display bold (KRITERA AI gibi) */
.aiuc-onb-brand {
    font-family: 'Red Hat Display', 'Inter', sans-serif;
    font-weight: 800;
    font-style: normal;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

/* Inline outline icons (örn. thumb-up / thumb-down) — fill kesinlikle yok */
.aiuc-onb-inline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 0 2px;
    color: var(--text-primary);
    vertical-align: -3px;
}

.aiuc-onb-inline-icon svg,
.aiuc-onboarding-step .aiuc-onb-inline-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.5 !important;
}

.aiuc-onb-inline-icon svg path,
.aiuc-onboarding-step .aiuc-onb-inline-icon svg path {
    fill: none !important;
    stroke: currentColor !important;
}

/* İlk path (Tabler reset) saydam kalmalı */
.aiuc-onb-inline-icon svg path[stroke="none"],
.aiuc-onboarding-step .aiuc-onb-inline-icon svg path[stroke="none"] {
    stroke: none !important;
    fill: none !important;
}

.aiuc-onboarding-step p {
    margin: 0 0 12px;
    font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--text-secondary);
}

.aiuc-onboarding-step strong {
    color: var(--text-primary);
    font-weight: 600;
}

.aiuc-onboarding-hint {
    margin-top: 18px !important;
    padding: 12px 14px 12px 14px;
    background: var(--neutral-bg-1);
    border: 1px solid var(--stroke-control);
    border-radius: 12px;
    font-family: 'DM Sans', 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
}

.aiuc-onboarding-list {
    list-style: none;
    padding: 0;
    margin: 10px 0 0;
}

.aiuc-onboarding-list li {
    position: relative;
    padding: 9px 0 9px 22px;
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
}

.aiuc-onboarding-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 16px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--brand-primary);
    opacity: 0.85;
}

.aiuc-onboarding-list li strong {
    color: var(--text-primary);
}

/* Modes preview cards */
.aiuc-onboarding-modes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 16px 0 8px;
}

.aiuc-onboarding-mode-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    background: var(--neutral-bg-1);
    border: 1px solid var(--stroke-control);
    border-radius: 14px;
    transition: border-color 0.15s ease;
}

.aiuc-onboarding-mode-card:hover {
    border-color: #BDBDBD;
}

[data-theme="dark"] .aiuc-onboarding-mode-card:hover {
    border-color: #4A4A4A;
}

/* Onboarding mode chips — gerçek .aiuc-mode-chip ile bire bir aynı stil */
.aiuc-onboarding-mode-chip {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    height: 24px;
    padding: 0 8px;
    border-radius: 9999px;
    border: 1.5px solid transparent;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 300;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
}

.aiuc-onboarding-mode-web {
    background: rgba(26, 156, 180, 0.12);
    border-color: #1A9CB4;
    color: #1A9CB4;
}

.aiuc-onboarding-mode-rag {
    background: rgba(58, 181, 131, 0.12);
    border-color: #3AB583;
    color: #3AB583;
}

[data-theme="dark"] .aiuc-onboarding-mode-web {
    background: rgba(26, 156, 180, 0.26);
    border-color: #1A9CB4;
    color: #57C5D8;
}

[data-theme="dark"] .aiuc-onboarding-mode-rag {
    background: rgba(58, 181, 131, 0.26);
    border-color: #3AB583;
    color: #67D09C;
}

.aiuc-onboarding-mode-desc {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Footer */
.aiuc-onboarding-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 24px 20px;
    border-top: 1px solid var(--stroke-control);
}

.aiuc-onboarding-skip {
    background: transparent;
    border: 0;
    padding: 7px 12px;
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 9999px;
    transition: background 0.15s ease, color 0.15s ease;
}

.aiuc-onboarding-skip:hover {
    background: var(--neutral-bg-hover);
    color: var(--text-primary);
}

.aiuc-onboarding-dots {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.aiuc-onboarding-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--stroke-control);
    transition: width 0.25s ease, background 0.25s ease;
}

.aiuc-onboarding-dot.completed {
    background: var(--brand-primary);
    opacity: 0.45;
}

.aiuc-onboarding-dot.active {
    background: var(--brand-primary);
    width: 18px;
    border-radius: 9999px;
}

.aiuc-onboarding-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.aiuc-onboarding-prev,
.aiuc-onboarding-next {
    height: 34px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
    line-height: 1;
}

.aiuc-onboarding-prev {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--stroke-control);
}

.aiuc-onboarding-prev:hover:not(:disabled) {
    background: var(--neutral-bg-hover);
    border-color: #BDBDBD;
}

.aiuc-onboarding-prev:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

[data-theme="dark"] .aiuc-onboarding-prev:hover:not(:disabled) {
    border-color: #4A4A4A;
}

.aiuc-onboarding-next {
    background: #387FEA !important;
    color: #ffffff !important;
    border-color: #387FEA !important;
}

.aiuc-onboarding-next:hover {
    background: #387FEA !important;
    border-color: #387FEA !important;
    box-shadow: 0 4px 12px rgba(56, 127, 234, 0.4);
    transform: translateY(-1px);
}

.aiuc-onboarding-next:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(56, 127, 234, 0.3);
}

[data-theme="dark"] .aiuc-onboarding-next {
    background: #387FEA !important;
    color: #ffffff !important;
    border-color: #387FEA !important;
}

[data-theme="dark"] .aiuc-onboarding-next:hover {
    background: #387FEA !important;
    border-color: #387FEA !important;
}

/* Mobil */
@media (max-width: 520px) {
    .aiuc-onboarding-modal {
        max-width: 100%;
        border-radius: 16px;
    }
    .aiuc-onboarding-body {
        padding: 32px 22px 20px;
        min-height: 280px;
    }
    .aiuc-onboarding-footer {
        padding: 12px 18px 18px;
    }
    .aiuc-onboarding-step h2 {
        font-size: 24px;
    }
    .aiuc-onboarding-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 16px;
    }
    .aiuc-onboarding-skip {
        font-size: 11px;
    }
    .aiuc-onboarding-prev,
    .aiuc-onboarding-next {
        height: 32px;
        padding: 0 14px;
        font-size: 12px;
    }
    .aiuc-onboarding-dots {
        display: none;
    }
}

/* =====================================================
   KRITERA PROSE RENDERER — premium B2B SaaS / legal-research-memo
   Scope is .aiuc-prose, anchored under .aiuc-answer-shell.
   Tokens are layered onto :root so they coexist with existing variables.
   ===================================================== */
:root {
    --kritera-bg: #F8FAFC;
    --kritera-surface: #FFFFFF;
    --kritera-surface-soft: #F9FAFB;
    --kritera-surface-sunken: #F3F5F8;
    --kritera-border: #E5E7EB;
    --kritera-border-soft: #EEF0F3;
    --kritera-border-strong: #D5D9E0;
    --kritera-text: #374151;
    --kritera-heading: #1F2937;
    --kritera-muted: #6B7280;
    --kritera-muted-strong: #4B5563;
    --kritera-accent: #387FEA;
    --kritera-accent-soft: #EEF5FF;
    --kritera-accent-strong: #2C66C2;
    --kritera-warning-soft: #FFF7ED;
    --kritera-warning-border: #FED7AA;
    --kritera-warning-text: #9A3412;
    --kritera-info-soft: #EFF6FF;
    --kritera-info-border: #BFDBFE;
    --kritera-info-text: #1E40AF;
    --kritera-legal-soft: #F5F3FF;
    --kritera-legal-border: #DDD6FE;
    --kritera-legal-text: #5B21B6;
    --kritera-radius-lg: 18px;
    --kritera-radius-md: 14px;
    --kritera-radius-sm: 10px;
    --kritera-radius-chip: 999px;
    --kritera-shadow-soft: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.05);
    --kritera-shadow-popover: 0 8px 24px rgba(15, 23, 42, 0.10), 0 2px 6px rgba(15, 23, 42, 0.06);
}

[data-theme="dark"], .aiuc-dark {
    --kritera-bg: #0F1115;
    --kritera-surface: #15181E;
    --kritera-surface-soft: #1A1D24;
    --kritera-surface-sunken: #11141A;
    --kritera-border: #2A2E37;
    --kritera-border-soft: #23262E;
    --kritera-border-strong: #353A45;
    --kritera-text: #D1D5DB;
    --kritera-heading: #F3F4F6;
    --kritera-muted: #9CA3AF;
    --kritera-muted-strong: #B6BCC6;
    --kritera-accent: #5C97F2;
    --kritera-accent-soft: rgba(92, 151, 242, 0.10);
    --kritera-accent-strong: #7DAEF7;
    --kritera-warning-soft: rgba(254, 215, 170, 0.08);
    --kritera-warning-border: #4B3A1F;
    --kritera-warning-text: #FED7AA;
    --kritera-info-soft: rgba(96, 165, 250, 0.08);
    --kritera-info-border: #1E3A5F;
    --kritera-info-text: #93C5FD;
    --kritera-legal-soft: rgba(167, 139, 250, 0.08);
    --kritera-legal-border: #3A2F5C;
    --kritera-legal-text: #C4B5FD;
    --kritera-shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.35);
    --kritera-shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.45);
}

/* ── AnswerShell ───────────────────────────────────────────────────────── */
.aiuc-wrap .aiuc-answer-shell {
    background: var(--kritera-surface);
    border: 1px solid var(--kritera-border);
    border-radius: var(--kritera-radius-lg);
    box-shadow: var(--kritera-shadow-soft);
    padding: 18px 22px 22px;
    overflow: visible;
}

.aiuc-wrap .aiuc-col-perp .aiuc-answer-shell {
    /* Inside the existing perp column, we reduce double-frame visual noise. */
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

/* ── AnswerHeader ──────────────────────────────────────────────────────── */
.aiuc-wrap .aiuc-answer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--kritera-border-soft);
}

.aiuc-wrap .aiuc-col-perp .aiuc-answer-header {
    /* Inside the perp column we already have the colored "WEB Araştırması"
       title from .aiuc-col-header — hide our internal eyebrow to avoid
       duplication while keeping the meta count visible. */
    margin: 0 0 6px;
    padding: 0;
    border-bottom: none;
}

.aiuc-wrap .aiuc-col-perp .aiuc-answer-header__eyebrow {
    display: none;
}

.aiuc-wrap .aiuc-answer-header__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Inter", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    color: var(--kritera-accent);
}

.aiuc-wrap .aiuc-answer-header__eyebrow svg {
    color: var(--kritera-accent);
}

/* The "N kaynak" badge was retired. Hide it on legacy sessions whose
   pre-rendered HTML is still cached with the old markup. */
.aiuc-wrap .aiuc-answer-header__meta {
    display: none !important;
}

/* ── AnswerBody / Prose typography ──────────────────────────────────────
   Boyut hizalaması: Mevzuat (RAG) yanıtının ölçeğiyle birebir eş —
   .aiuc-response-col 12px / 1.6 zincirini takip eder. Heading'ler
   em-relative tutuldu ki parent ölçek değiştiğinde tutarlı kalsın. */
.aiuc-wrap .aiuc-prose {
    color: var(--kritera-text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    line-height: 1.65;
    letter-spacing: 0.005em;
    word-break: normal;
    overflow-wrap: anywhere;
}

.aiuc-wrap .aiuc-prose .aiuc-prose-p {
    margin: 0 0 10px;
    font-size: 12px;
    line-height: 1.65;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-p:last-child {
    margin-bottom: 0;
}

.aiuc-wrap .aiuc-prose .aiuc-prose-h2 {
    margin: 18px 0 6px;
    font-family: "Inter", sans-serif;
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.35;
    color: var(--kritera-heading);
    letter-spacing: -0.01em;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-h2:first-child {
    margin-top: 0;
}

.aiuc-wrap .aiuc-prose .aiuc-prose-h3 {
    margin: 14px 0 5px;
    font-family: "Inter", sans-serif;
    font-size: 1.2em;
    font-weight: 650;
    line-height: 1.4;
    color: var(--kritera-heading);
    letter-spacing: -0.005em;
}

/* H4: alt-başlık — RAG'ın 1.1em ölçeğiyle uyumlu, sade ve kompakt. */
.aiuc-wrap .aiuc-prose .aiuc-prose-h4 {
    margin: 12px 0 4px;
    font-family: "Inter", sans-serif;
    font-size: 1.1em;
    font-weight: 650;
    line-height: 1.4;
    color: var(--kritera-heading);
    letter-spacing: 0;
}

/* H5: paragraph içinde mini başlık — body ile aynı boyut, sadece bold. */
.aiuc-wrap .aiuc-prose .aiuc-prose-h5 {
    margin: 10px 0 4px;
    font-family: "Inter", sans-serif;
    font-size: 1em;
    font-weight: 650;
    line-height: 1.45;
    color: var(--kritera-heading);
}

/* H6: corporate memo eyebrow — muted uppercase kapsayıcı küçük başlık. */
.aiuc-wrap .aiuc-prose .aiuc-prose-h6 {
    margin: 10px 0 3px;
    font-family: "Inter", sans-serif;
    font-size: 0.92em;
    font-weight: 700;
    line-height: 1.4;
    color: var(--kritera-muted-strong);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.aiuc-wrap .aiuc-prose strong {
    font-weight: 650;
    color: var(--kritera-heading);
}

.aiuc-wrap .aiuc-prose em {
    font-style: italic;
    color: var(--kritera-muted-strong);
}

/* ── Lists ────────────────────────────────────────────────────────────── */
.aiuc-wrap .aiuc-prose .aiuc-prose-ul,
.aiuc-wrap .aiuc-prose .aiuc-prose-ol {
    margin: 4px 0 10px;
    padding-left: 22px;
    font-size: 12px;
    line-height: 1.65;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-ul {
    list-style: disc;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-ol {
    list-style: decimal;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-li {
    margin: 4px 0;
    padding-left: 4px;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-li::marker {
    color: var(--kritera-muted);
    font-weight: 600;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-sublist {
    margin: 4px 0 4px;
    padding-left: 20px;
}

/* ── Links ────────────────────────────────────────────────────────────── */
.aiuc-wrap .aiuc-prose .aiuc-prose-link {
    color: var(--kritera-accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
    font-weight: 500;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-link:hover,
.aiuc-wrap .aiuc-prose .aiuc-prose-link:focus-visible {
    color: var(--kritera-accent-strong);
    border-bottom-color: currentColor;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-link--raw {
    word-break: break-all;
    overflow-wrap: anywhere;
}

/* ── Inline code & code blocks ────────────────────────────────────────── */
.aiuc-wrap .aiuc-prose .aiuc-prose-code {
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    font-size: 0.92em;
    padding: 1px 5px;
    background: var(--kritera-surface-sunken);
    border: 1px solid var(--kritera-border-soft);
    border-radius: 5px;
    color: var(--kritera-heading);
}
.aiuc-wrap .aiuc-prose .aiuc-prose-pre {
    margin: 10px 0;
    padding: 12px 14px;
    background: var(--kritera-surface-sunken);
    border: 1px solid var(--kritera-border-soft);
    border-radius: var(--kritera-radius-sm);
    overflow-x: auto;
    font-size: 11px;
    line-height: 1.55;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-codeblock {
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, monospace;
    color: var(--kritera-heading);
    background: transparent;
    padding: 0;
    border: none;
}

/* ── Blockquote ──────────────────────────────────────────────────────── */
.aiuc-wrap .aiuc-prose .aiuc-prose-quote {
    margin: 10px 0;
    padding: 7px 12px;
    border-left: 3px solid var(--kritera-border-strong);
    background: var(--kritera-surface-soft);
    border-radius: 0 var(--kritera-radius-sm) var(--kritera-radius-sm) 0;
    color: var(--kritera-muted-strong);
    font-size: 12px;
    line-height: 1.6;
    font-style: normal;
}

/* ── Horizontal rule ─────────────────────────────────────────────────── */
.aiuc-wrap .aiuc-prose .aiuc-prose-hr {
    margin: 18px 0;
    border: none;
    border-top: 1px solid var(--kritera-border-soft);
}

/* ── Math (lightweight fallback; opt-in KaTeX hook) ───────────────────── */
.aiuc-wrap .aiuc-prose .aiuc-prose-math--inline {
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 0.92em;
    padding: 0 4px;
    color: var(--kritera-heading);
    background: var(--kritera-surface-sunken);
    border-radius: 4px;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-math--block {
    margin: 10px 0;
    padding: 12px 14px;
    text-align: center;
    font-family: "JetBrains Mono", ui-monospace, monospace;
    font-size: 12px;
    color: var(--kritera-heading);
    background: var(--kritera-surface-sunken);
    border: 1px solid var(--kritera-border-soft);
    border-radius: var(--kritera-radius-sm);
}

/* ── Tables ──────────────────────────────────────────────────────────── */
.aiuc-wrap .aiuc-prose .aiuc-prose-table-wrap {
    margin: 12px 0;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0 !important;
    border-radius: 10px;
    background: linear-gradient(180deg, var(--kritera-surface) 0%, var(--kritera-surface-soft) 100%);
    -webkit-overflow-scrolling: touch;
    line-height: 0;
    box-shadow:
        inset 0 0 0 1px var(--kritera-border-soft),
        0 8px 20px rgba(17, 24, 39, 0.045);
}
.aiuc-wrap .aiuc-prose .aiuc-prose-table {
    width: 100%;
    margin: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 10px;
    line-height: 1.5;
    color: var(--kritera-text);
    background: transparent !important;
    overflow: hidden;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-table thead th {
    background: linear-gradient(180deg, var(--kritera-surface-sunken) 0%, var(--kritera-surface-soft) 100%);
    color: var(--kritera-muted-strong);
    font-family: "Inter", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 6px 10px;
    border: 0 !important;
    border-bottom: 1px solid var(--kritera-border-soft) !important;
    text-align: left;
    white-space: nowrap;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-table tbody td {
    background: rgba(255, 255, 255, 0.34);
    padding: 7px 10px;
    border: 0 !important;
    border-bottom: 1px solid var(--kritera-border-soft) !important;
    vertical-align: top;
    font-size: 10px;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-table thead th + th,
.aiuc-wrap .aiuc-prose .aiuc-prose-table tbody td + td {
    border-left: 1px solid var(--kritera-border-soft) !important;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-table tbody tr:nth-child(even) td {
    background: rgba(17, 24, 39, 0.025);
}
.aiuc-wrap .aiuc-prose .aiuc-prose-table tbody tr:last-child td {
    border-bottom: 0 !important;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-table thead th:first-child {
    border-top-left-radius: 10px;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-table thead th:last-child {
    border-top-right-radius: 10px;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-table [data-align="right"] {
    text-align: right;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-table [data-align="center"] {
    text-align: center;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-table tbody tr:hover td {
    background: rgba(56, 127, 234, 0.055);
}

/* Plain markdown tables used outside the Kritera prose renderer, e.g. RAG. */
.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    border-radius: 10px !important;
    overflow: hidden;
    background: linear-gradient(180deg, var(--neutral-bg-card) 0%, var(--neutral-bg-1) 100%) !important;
    box-shadow:
        inset 0 0 0 1px var(--stroke-card),
        0 8px 20px rgba(17, 24, 39, 0.045) !important;
}
.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) th {
    border: 0 !important;
    border-bottom: 1px solid var(--stroke-card) !important;
    background: linear-gradient(180deg, var(--neutral-bg-2) 0%, var(--neutral-bg-card) 100%) !important;
}
.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) td {
    border: 0 !important;
    border-bottom: 1px solid var(--stroke-card) !important;
    background: rgba(255, 255, 255, 0.34);
}
.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) th + th,
.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) td + td {
    border-left: 1px solid var(--stroke-card) !important;
}
.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) tr:nth-child(even) td {
    background: rgba(17, 24, 39, 0.025);
}
.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) tr:last-child td {
    border-bottom: 0 !important;
}
.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) th:first-child {
    border-top-left-radius: 10px;
}
.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) th:last-child {
    border-top-right-radius: 10px;
}
.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}
.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}
.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) tr:hover td {
    background: rgba(56, 127, 234, 0.055);
}

[data-theme="dark"] .aiuc-wrap .aiuc-prose .aiuc-prose-table-wrap,
.aiuc-dark .aiuc-wrap .aiuc-prose .aiuc-prose-table-wrap,
[data-theme="dark"] .aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table),
.aiuc-dark .aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) {
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.08),
        0 10px 24px rgba(0, 0, 0, 0.18) !important;
}
[data-theme="dark"] .aiuc-wrap .aiuc-prose .aiuc-prose-table tbody td,
.aiuc-dark .aiuc-wrap .aiuc-prose .aiuc-prose-table tbody td,
[data-theme="dark"] .aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) td,
.aiuc-dark .aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) td {
    background: rgba(255, 255, 255, 0.025);
}
[data-theme="dark"] .aiuc-wrap .aiuc-prose .aiuc-prose-table tbody tr:nth-child(even) td,
.aiuc-dark .aiuc-wrap .aiuc-prose .aiuc-prose-table tbody tr:nth-child(even) td,
[data-theme="dark"] .aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) tr:nth-child(even) td,
.aiuc-dark .aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.045);
}
[data-theme="dark"] .aiuc-wrap .aiuc-prose .aiuc-prose-table tbody tr:hover td,
.aiuc-dark .aiuc-wrap .aiuc-prose .aiuc-prose-table tbody tr:hover td,
[data-theme="dark"] .aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) tr:hover td,
.aiuc-dark .aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) tr:hover td {
    background: rgba(56, 127, 234, 0.12);
}

/* ── Callouts ────────────────────────────────────────────────────────── */
.aiuc-wrap .aiuc-prose .aiuc-prose-callout {
    margin: 12px 0;
    padding: 10px 14px;
    border: 1px solid var(--kritera-border);
    border-left-width: 3px;
    border-radius: var(--kritera-radius-sm);
    background: var(--kritera-surface-soft);
    font-size: 12px;
    line-height: 1.6;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-callout__title {
    font-weight: 650;
    margin: 0 0 4px;
    color: var(--kritera-heading);
    font-size: 12px;
    letter-spacing: 0.01em;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-callout__body p:last-child {
    margin-bottom: 0;
}
.aiuc-wrap .aiuc-prose .aiuc-prose-callout--info {
    background: var(--kritera-info-soft);
    border-color: var(--kritera-info-border);
    border-left-color: var(--kritera-info-text);
}
.aiuc-wrap .aiuc-prose .aiuc-prose-callout--info .aiuc-prose-callout__title {
    color: var(--kritera-info-text);
}
.aiuc-wrap .aiuc-prose .aiuc-prose-callout--warning {
    background: var(--kritera-warning-soft);
    border-color: var(--kritera-warning-border);
    border-left-color: var(--kritera-warning-text);
}
.aiuc-wrap .aiuc-prose .aiuc-prose-callout--warning .aiuc-prose-callout__title {
    color: var(--kritera-warning-text);
}
.aiuc-wrap .aiuc-prose .aiuc-prose-callout--legal,
.aiuc-wrap .aiuc-prose .aiuc-prose-callout--note {
    background: var(--kritera-legal-soft);
    border-color: var(--kritera-legal-border);
    border-left-color: var(--kritera-legal-text);
}
.aiuc-wrap .aiuc-prose .aiuc-prose-callout--legal .aiuc-prose-callout__title,
.aiuc-wrap .aiuc-prose .aiuc-prose-callout--note .aiuc-prose-callout__title {
    color: var(--kritera-legal-text);
}
.aiuc-wrap .aiuc-prose .aiuc-prose-callout--tip {
    background: var(--kritera-accent-soft);
    border-color: var(--kritera-info-border);
    border-left-color: var(--kritera-accent);
}
.aiuc-wrap .aiuc-prose .aiuc-prose-callout--tip .aiuc-prose-callout__title {
    color: var(--kritera-accent-strong);
}

/* =====================================================
   SOURCE CHIP (inline) — premium pill, accessible, hover/focus popover
   Backward-compatible with .aiuc-perp-chip / .aiuc-perp-chip-wrapper.
   ===================================================== */
.aiuc-wrap .aiuc-source-chip-wrapper,
.aiuc-wrap .aiuc-perp-chip-wrapper {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    margin: 0 1px;
    line-height: 0;
    z-index: 1;
}

/* Chip — ChatGPT-style: baseline-aligned, favicon prefix, physical pill. */
.aiuc-wrap .aiuc-source-chip,
.aiuc-wrap .aiuc-perp-chip {
    display: inline-flex !important;
    align-items: center;
    gap: 0;
    padding: 0 9px !important;
    height: 20px;
    background: var(--kritera-surface-sunken) !important;
    border: 1px solid var(--kritera-border) !important;
    border-radius: var(--kritera-radius-chip) !important;
    font-family: "Inter", sans-serif;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    color: var(--kritera-muted-strong) !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    /* Sit on the text x-height like a word, not as a super-script. */
    vertical-align: middle;
    transform: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.aiuc-wrap .aiuc-source-chip:hover,
.aiuc-wrap .aiuc-perp-chip:hover,
.aiuc-wrap .aiuc-source-chip:focus-visible,
.aiuc-wrap .aiuc-perp-chip:focus-visible {
    background: var(--kritera-accent-soft) !important;
    border-color: var(--kritera-accent) !important;
    color: var(--kritera-accent-strong) !important;
    outline: none;
}
.aiuc-wrap .aiuc-source-chip:focus-visible,
.aiuc-wrap .aiuc-perp-chip:focus-visible {
    box-shadow: 0 0 0 3px var(--kritera-accent-soft);
}

.aiuc-wrap .aiuc-source-chip__icon {
    flex-shrink: 0;
    color: currentColor;
    opacity: 0.7;
}

.aiuc-wrap .aiuc-source-chip__label {
    line-height: 1;
}
.aiuc-wrap .aiuc-source-chip__more {
    margin-left: 2px;
    font-weight: 600;
    color: var(--kritera-muted);
    font-size: 11px;
}

/* RAG citation chips: align with the "Raporu Paylaş" button language.
   Compact outlined pill, body-size text, no heavy tag-like treatment. */
.aiuc-wrap .aiuc-rag-citation-chip,
.aiuc-rag-chips .aiuc-rag-citation-chip,
span.aiuc-rag-citation-chip {
    display: inline-flex !important;
    align-items: center;
    min-height: 28px;
    padding: 5px 12px !important;
    border: 1.5px solid #387FEA !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #387FEA !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    box-shadow: none !important;
    transition: none !important;
}
.aiuc-wrap .aiuc-rag-citation-chip::before,
.aiuc-rag-chips .aiuc-rag-citation-chip::before {
    display: none !important;
}
.aiuc-wrap .aiuc-rag-citation-chip:hover,
.aiuc-rag-chips .aiuc-rag-citation-chip:hover {
    background: transparent !important;
    color: #387FEA !important;
    box-shadow: none !important;
    transform: none !important;
}
[data-theme="dark"] .aiuc-wrap .aiuc-rag-citation-chip,
.aiuc-dark .aiuc-rag-citation-chip {
    background: transparent !important;
    border-color: #387FEA !important;
    color: #74A7FF !important;
}
[data-theme="dark"] .aiuc-wrap .aiuc-rag-citation-chip:hover,
.aiuc-dark .aiuc-rag-citation-chip:hover {
    background: transparent !important;
    color: #74A7FF !important;
    box-shadow: none !important;
    transform: none !important;
}
.aiuc-wrap .aiuc-source-chip:hover .aiuc-source-chip__more,
.aiuc-wrap .aiuc-source-chip:focus-visible .aiuc-source-chip__more {
    color: var(--kritera-accent-strong);
}

/* ── Source Popover ──────────────────────────────────────────────────── */
.aiuc-wrap .aiuc-source-popover,
.aiuc-wrap .aiuc-perp-popup {
    display: block !important;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(2px);
    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 14px 14px 12px;
    background: var(--kritera-surface) !important;
    border: 1px solid var(--kritera-border) !important;
    border-radius: var(--kritera-radius-md) !important;
    box-shadow: var(--kritera-shadow-popover);
    color: var(--kritera-text);
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    z-index: 99990;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

/* Invisible bridge so the cursor can travel chip → popover without flicker */
.aiuc-wrap .aiuc-source-popover::after,
.aiuc-wrap .aiuc-perp-popup::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 10px;
}

/* When popover is active, promote the WRAPPER to a top-level stacking
   context so the popover sits above sibling paragraphs, headings, tables,
   the other response column, and the header chrome. */
.aiuc-wrap .aiuc-source-chip-wrapper:hover,
.aiuc-wrap .aiuc-source-chip-wrapper:focus-within,
.aiuc-wrap .aiuc-source-chip-wrapper.is-open,
.aiuc-wrap .aiuc-perp-chip-wrapper:hover,
.aiuc-wrap .aiuc-perp-chip-wrapper:focus-within,
.aiuc-wrap .aiuc-perp-chip-wrapper.is-open,
.aiuc-wrap .aiuc-perp-chip-wrapper.touch-open {
    z-index: 99990;
}

.aiuc-wrap .aiuc-source-chip-wrapper:hover .aiuc-source-popover,
.aiuc-wrap .aiuc-source-chip-wrapper:focus-within .aiuc-source-popover,
.aiuc-wrap .aiuc-source-chip-wrapper.is-open .aiuc-source-popover,
.aiuc-wrap .aiuc-perp-chip-wrapper:hover .aiuc-perp-popup,
.aiuc-wrap .aiuc-perp-chip-wrapper:focus-within .aiuc-perp-popup,
.aiuc-wrap .aiuc-perp-chip-wrapper.is-open .aiuc-perp-popup,
.aiuc-wrap .aiuc-perp-chip-wrapper.touch-open .aiuc-perp-popup,
.aiuc-wrap .aiuc-source-popover:hover,
.aiuc-wrap .aiuc-perp-popup:hover {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

/* Viewport-aware flips (set by KriteraProse repositionPopover()) */
.aiuc-wrap .aiuc-source-popover.is-flipped-left {
    left: 0;
    transform: translateY(0);
}
.aiuc-wrap .aiuc-source-popover.is-flipped-right {
    left: auto;
    right: 0;
    transform: translateY(0);
}
.aiuc-wrap .aiuc-source-popover.is-below {
    bottom: auto;
    top: calc(100% + 8px);
}
.aiuc-wrap .aiuc-source-popover.is-below::after {
    bottom: auto;
    top: -10px;
}

.aiuc-wrap .aiuc-source-popover__nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 10px;
}
.aiuc-wrap .aiuc-source-popover__item {
    display: block;
}
.aiuc-wrap .aiuc-source-popover__nav-btns {
    display: flex;
    gap: 4px;
}
.aiuc-wrap .aiuc-source-popover__nav-btn {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--kritera-border);
    border-radius: 6px;
    background: var(--kritera-surface);
    color: var(--kritera-muted-strong);
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.aiuc-wrap .aiuc-source-popover__nav-btn:hover,
.aiuc-wrap .aiuc-source-popover__nav-btn:focus-visible {
    background: var(--kritera-accent-soft);
    border-color: var(--kritera-accent);
    color: var(--kritera-accent-strong);
    outline: none;
}
.aiuc-wrap .aiuc-source-popover__page {
    font-family: "Inter", sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--kritera-muted);
    letter-spacing: 0.2px;
}

.aiuc-wrap .aiuc-source-popover__domain {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 500;
    color: var(--kritera-muted);
    margin-bottom: 4px;
}
.aiuc-wrap .aiuc-source-popover__domain-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Backward-compat: legacy popovers shipped a bare <svg> globe in the domain row */
.aiuc-wrap .aiuc-source-popover__domain > svg {
    width: 12px;
    height: 12px;
    color: var(--kritera-accent);
    flex-shrink: 0;
}

/* (favicon wrapper rules removed — chips now use a simple globe SVG) */
.aiuc-wrap .aiuc-source-popover__meta {
    color: var(--kritera-muted);
    font-weight: 400;
}
.aiuc-wrap .aiuc-source-popover__title {
    display: block;
    font-family: "Inter", sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--kritera-heading);
    margin-bottom: 6px;
}
.aiuc-wrap .aiuc-source-popover__title a {
    color: var(--kritera-heading);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease, color 0.15s ease;
}
.aiuc-wrap .aiuc-source-popover__title a:hover,
.aiuc-wrap .aiuc-source-popover__title a:focus-visible {
    color: var(--kritera-accent-strong);
    border-bottom-color: currentColor;
    outline: none;
}
.aiuc-wrap .aiuc-source-popover__snippet {
    font-size: 12px;
    line-height: 1.55;
    color: var(--kritera-muted-strong);
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.aiuc-wrap .aiuc-source-popover__open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: "Inter", sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--kritera-accent);
    text-decoration: none;
    padding: 5px 10px;
    border: 1px solid var(--kritera-accent-soft);
    border-radius: var(--kritera-radius-chip);
    background: var(--kritera-accent-soft);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.aiuc-wrap .aiuc-source-popover__open:hover,
.aiuc-wrap .aiuc-source-popover__open:focus-visible {
    background: var(--kritera-accent);
    color: #FFFFFF;
    border-color: var(--kritera-accent);
    outline: none;
}

@media (hover: none) and (pointer: coarse) {
    .aiuc-wrap .aiuc-source-chip-wrapper:hover .aiuc-source-popover,
    .aiuc-wrap .aiuc-source-chip-wrapper:focus-within .aiuc-source-popover,
    .aiuc-wrap .aiuc-perp-chip-wrapper:hover .aiuc-perp-popup,
    .aiuc-wrap .aiuc-perp-chip-wrapper:focus-within .aiuc-perp-popup {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    .aiuc-wrap .aiuc-source-chip-wrapper.is-open .aiuc-source-popover,
    .aiuc-wrap .aiuc-perp-chip-wrapper.is-open .aiuc-perp-popup,
    .aiuc-wrap .aiuc-perp-chip-wrapper.touch-open .aiuc-perp-popup {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }
}

/* =====================================================
   DESKTOP COLLAPSIBLE SIDEBAR
   ===================================================== */
@media (min-width: 901px) {
    .aiuc-app-shell {
        grid-template-columns: 260px minmax(0, 1fr) !important;
        transition: grid-template-columns 280ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed {
        grid-template-columns: 72px minmax(0, 1fr) !important;
    }

    .aiuc-sidebar {
        transition:
            padding 280ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 180ms ease,
            border-color 180ms ease !important;
    }

    .aiuc-sidebar-collapse-btn {
        position: absolute !important;
        top: 20px !important;
        right: 12px !important;
        z-index: 5 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 32px !important;
        height: 32px !important;
        padding: 0 !important;
        border: 1px solid var(--stroke-control) !important;
        border-radius: 10px !important;
        background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.48)),
            var(--neutral-bg-card) !important;
        color: var(--text-secondary) !important;
        box-shadow: none !important;
        cursor: pointer !important;
        transition:
            transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
            background 160ms ease,
            border-color 160ms ease,
            color 160ms ease !important;
    }

    .aiuc-sidebar-collapse-btn:hover {
        color: var(--text-primary) !important;
        border-color: rgba(66, 94, 204, 0.35) !important;
        background: var(--neutral-bg-card) !important;
        box-shadow: none !important;
    }

    .aiuc-sidebar-collapse-btn:focus-visible {
        outline: 2px solid rgba(66, 94, 204, 0.35) !important;
        outline-offset: 2px !important;
    }

    .aiuc-sidebar-collapse-btn .tabler-icon {
        width: 18px !important;
        height: 18px !important;
        transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1) !important;
    }

    .aiuc-sidebar-user {
        padding-right: 52px !important;
    }

    .aiuc-sidebar-user-link {
        padding-right: 28px !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-sidebar {
        padding: 72px 8px 16px !important;
        gap: 8px !important;
        overflow: visible !important;
        z-index: 20 !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-sidebar-collapse-btn {
        top: 20px !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-sidebar-collapse-btn .tabler-icon {
        transform: rotate(180deg) !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-sidebar-user {
        display: none !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-list {
        align-items: center !important;
        width: 100% !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-menu {
        gap: 4px !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-menu > .aiuc-nav-item,
    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-menu > .aiuc-settings-wrapper > .aiuc-nav-item,
    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-menu > a.aiuc-nav-item {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0 !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 40px !important;
        min-height: 40px !important;
        padding: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        border-radius: 12px !important;
        text-align: center !important;
        position: relative !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-menu > .aiuc-nav-item[data-aiuc-tooltip]::after,
    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-menu > .aiuc-settings-wrapper > .aiuc-nav-item[data-aiuc-tooltip]::after {
        content: attr(data-aiuc-tooltip);
        position: absolute;
        left: calc(100% + 12px);
        top: 50%;
        z-index: 1000;
        min-width: max-content;
        max-width: 220px;
        padding: 7px 10px;
        border: 1px solid var(--stroke-control);
        border-radius: 9px;
        background: var(--neutral-bg-card);
        color: var(--text-primary);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-4px, -50%);
        transition:
            opacity 140ms ease,
            visibility 140ms ease,
            transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-menu > .aiuc-nav-item[data-aiuc-tooltip]:hover::after,
    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-menu > .aiuc-nav-item[data-aiuc-tooltip]:focus-visible::after,
    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-menu > .aiuc-settings-wrapper > .aiuc-nav-item[data-aiuc-tooltip]:hover::after,
    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-menu > .aiuc-settings-wrapper > .aiuc-nav-item[data-aiuc-tooltip]:focus-visible::after {
        opacity: 1;
        visibility: visible;
        transform: translate(0, -50%);
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-item .tabler-icon {
        width: 19px !important;
        height: 19px !important;
        flex: 0 0 auto !important;
        margin: 0 !important;
        position: static !important;
        transform: none !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed #aiucUserPanelBtn .aiuc-support-reply-indicator {
        position: absolute !important;
        top: 8px !important;
        right: 8px !important;
        margin: 0 !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-item > span:not(.aiuc-history-item-actions),
    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-settings-item > span {
        width: 0 !important;
        max-width: 0 !important;
        flex: 0 0 0 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-header,
    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-history-search,
    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-history-list,
    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-history-no-result,
    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-history-more {
        display: none !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-settings-wrapper {
        display: flex !important;
        justify-content: center !important;
        width: 44px !important;
        min-width: 44px !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-settings-dropdown:not(.show) {
        display: none !important;
        pointer-events: none !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-settings-dropdown.show {
        display: block !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-settings-dropdown.aiuc-settings-dropdown-collapsed.show {
        transform: translate(0, -50%) !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-settings-dropdown .aiuc-settings-item {
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        padding: 10px 14px !important;
        text-align: left !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-settings-dropdown .aiuc-settings-item > span {
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        pointer-events: auto !important;
        white-space: nowrap !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-nav-item.active::before {
        left: 4px !important;
        top: 11px !important;
        bottom: 11px !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-dark-mode-toggle-wrapper {
        width: 100% !important;
        margin-top: auto !important;
    }

    .aiuc-app-shell.aiuc-sidebar-collapsed .aiuc-dark-mode-toggle {
        transform: scale(0.88) !important;
        transform-origin: center !important;
    }
}

@media (max-width: 900px) {
    .aiuc-sidebar-collapse-btn {
        display: none !important;
    }
}

[data-theme="dark"] .aiuc-sidebar-collapse-btn,
.aiuc-dark .aiuc-sidebar-collapse-btn {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)),
        var(--neutral-bg-card) !important;
    box-shadow: none !important;
}

[data-theme="dark"] .aiuc-sidebar-collapse-btn:hover,
.aiuc-dark .aiuc-sidebar-collapse-btn:hover {
    border-color: rgba(117, 154, 200, 0.42) !important;
    box-shadow: none !important;
}

/* Hide the legacy popup nav (renderer no longer outputs the old shape) */
.aiuc-wrap .aiuc-perp-popup-nav,
.aiuc-wrap .aiuc-perp-popup-domain,
.aiuc-wrap .aiuc-perp-popup-title,
.aiuc-wrap .aiuc-perp-popup-snippet {
    /* These class names are still emitted by older sessions persisted in DB.
       Keep them visible but rely on the new tokens. */
    color: inherit;
    font-family: "Inter", sans-serif;
}

/* ── Mobile responsive ───────────────────────────────────────────────────
   Mevzuat (RAG) mobilde de 12px sabit → web prose de aynı kalmalı. */
@media (max-width: 768px) {
    .aiuc-wrap .aiuc-answer-shell {
        padding: 14px 14px 16px;
        border-radius: var(--kritera-radius-md);
    }
    .aiuc-wrap .aiuc-prose {
        font-size: 12px;
        line-height: 1.65;
    }
    .aiuc-wrap .aiuc-prose .aiuc-prose-table {
        font-size: 9.5px;
    }
    .aiuc-wrap .aiuc-prose .aiuc-prose-table thead th {
        padding: 5px 8px;
        font-size: 8.5px;
    }
    .aiuc-wrap .aiuc-prose .aiuc-prose-table tbody td {
        padding: 5px 8px;
    }
    .aiuc-wrap .aiuc-source-popover,
    .aiuc-wrap .aiuc-perp-popup {
        width: min(300px, calc(100vw - 32px));
        padding: 12px;
    }
    .aiuc-wrap .aiuc-source-popover__title {
        font-size: 12.5px;
    }
    .aiuc-wrap .aiuc-source-popover__snippet {
        font-size: 11.5px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

/* ── Print: keep the Kritera tokens off in print (existing block already
   forces light tokens for print, see top of file). We just hide popovers. */
@media print {
    .aiuc-wrap .aiuc-source-popover,
    .aiuc-wrap .aiuc-perp-popup {
        display: none !important;
    }
    .aiuc-wrap .aiuc-source-chip,
    .aiuc-wrap .aiuc-perp-chip {
        text-decoration: none !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════
   FONT-FAMILY OVERRIDE — App-Wide Default
   ─────────────────────────────────────────────────────────────────────
   Inter is the default for every element inside `.aiuc-wrap`: sidebar,
   header chrome, main content, chat body, history list, modals, buttons,
   forms, response columns (Web + Mevzuat), prose blocks, citation chips,
   source popovers, etc.

   Two brand-typography zones are explicitly preserved:
   1. "KRITERA.AI" header brand   → Red Hat Display, fallback Inter
      (matches the onboarding `.aiuc-onb-brand` already shipped).
   2. "Yapay Zeka Proje Asistanı" landing hero
      → bold span stays Inter (already), serif span keeps Instrument Serif.

   Mono content (code/pre/kbd/samp) is restored to JetBrains Mono.

   `!important` is intentional: the very early `.aiuc-wrap *` rule near the
   top of this file sets a generic stack on every descendant, so a single
   class-level rule cannot win the cascade. Placing this block at the end
   of the file gives us a single source-of-truth that is trivial to
   revert (delete the block).
   ════════════════════════════════════════════════════════════════════════ */
.aiuc-wrap,
.aiuc-wrap * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
}

/* PRESERVED ZONE 1 — "KRITERA.AI" brand identity (header + onboarding) */
.aiuc-wrap .aiuc-header-brand h1,
.aiuc-wrap .aiuc-header-brand h1 *,
.aiuc-wrap .aiuc-onb-brand,
.aiuc-wrap .aiuc-onb-brand * {
    font-family: 'Red Hat Display', 'Inter', sans-serif !important;
}

/* PRESERVED ZONE 2 — "Yapay Zeka Proje Asistanı" landing hero */
.aiuc-wrap .aiuc-landing-title-bold,
.aiuc-wrap .aiuc-landing-title-bold * {
    font-family: 'Inter', sans-serif !important;
}
.aiuc-wrap .aiuc-landing-title-serif,
.aiuc-wrap .aiuc-landing-title-serif * {
    font-family: 'Instrument Serif', serif !important;
}

/* MONO RESTORE — code, pre, kbd, samp keep JetBrains Mono everywhere. */
.aiuc-wrap code,
.aiuc-wrap pre,
.aiuc-wrap pre *,
.aiuc-wrap kbd,
.aiuc-wrap samp,
.aiuc-wrap .aiuc-prose-code,
.aiuc-wrap .aiuc-prose-pre,
.aiuc-wrap .aiuc-prose-pre * {
    font-family: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Mono", Consolas, monospace !important;
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSE PROSE — Color & Rendering Reset
   ─────────────────────────────────────────────────────────────────────
   The prior synthetic weight bump (sub-pixel text-shadow + subpixel AA)
   has been retired per design feedback. Body text now renders at native
   Inter Regular weight with crisp grayscale antialiasing across both
   platforms.

   COLOR — A dedicated `--kritera-prose-text` token drives the response
   body color so the rest of the app (sidebar, header, popover meta)
   keeps using the broader `--kritera-text` palette. Dark mode falls
   back to the standard text color since #1F1F1F would be unreadable on
   a dark surface.
   ════════════════════════════════════════════════════════════════════════ */
:root {
    --kritera-prose-text: rgb(31, 31, 31);
}

[data-theme="dark"],
.aiuc-dark {
    --kritera-prose-text: #D1D5DB;
}

.aiuc-wrap .aiuc-response-body,
.aiuc-wrap .aiuc-response-body p,
.aiuc-wrap .aiuc-response-body li,
.aiuc-wrap .aiuc-response-body td,
.aiuc-wrap .aiuc-response-body th,
.aiuc-wrap .aiuc-prose,
.aiuc-wrap .aiuc-prose .aiuc-prose-p,
.aiuc-wrap .aiuc-prose .aiuc-prose-li,
.aiuc-wrap .aiuc-prose .aiuc-prose-td,
.aiuc-wrap .aiuc-prose .aiuc-prose-th,
.aiuc-wrap .aiuc-prose .aiuc-prose-blockquote,
.aiuc-wrap .aiuc-prose .aiuc-prose-callout,
.aiuc-wrap .aiuc-answer-shell .aiuc-answer-body,
.aiuc-wrap .aiuc-answer-summary {
    color: var(--kritera-prose-text);
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}


/* ════════════════════════════════════════════════════════════════════════
   PREMIUM TRANSITIONS — Question → Answer Choreography
   ─────────────────────────────────────────────────────────────────────
   Goal: turn the moment a user submits a question into a calm, deliberate
   choreography rather than an abrupt DOM swap. The sequence is:

     ① landing fades out + drifts up   (~280ms)
     ② new turn group rises into view  (~550ms)
     ③ question bubble settles in      (delay 60ms, 500ms)
     ④ first response column emerges   (delay 180ms, 600ms)
     ⑤ second column emerges           (delay 280ms, 600ms)
     ⑥ loading row + skeleton shimmer  (delay 200ms)
     ⑦ summary block / button surface  (delay 380ms)

   Only the just-submitted turn carries `.aiuc-turn-fresh` (set by JS in
   `renderCurrentTurn({ fresh: true })`). All later re-renders triggered
   by fetch results, like/dislike, etc. do NOT re-trigger animations,
   so the UI never flickers.

   `prefers-reduced-motion: reduce` short-circuits everything to
   instant-display, respecting accessibility preferences.
   ════════════════════════════════════════════════════════════════════════ */

.aiuc-wrap {
    --aiuc-ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
    --aiuc-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --aiuc-ease-out-soft: cubic-bezier(0.33, 1, 0.68, 1);
}

/* ① Landing — fades + drifts up when the user submits */
#aiuc-landing,
.aiuc-wrap .aiuc-welcome {
    transition:
        opacity 280ms var(--aiuc-ease-out-quint),
        transform 280ms var(--aiuc-ease-out-quint),
        filter 280ms var(--aiuc-ease-out-quint);
}
#aiuc-landing.aiuc-leaving,
.aiuc-wrap .aiuc-welcome.aiuc-leaving {
    opacity: 0;
    transform: translateY(-12px);
    filter: blur(2px);
    pointer-events: none;
}

@keyframes aiucPanelStageIn {
    0%   { opacity: 0; transform: translateY(14px); filter: blur(3px); }
    70%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
#aiuc-active-panels.aiuc-panel-entering {
    animation: aiucPanelStageIn 540ms var(--aiuc-ease-out-expo) 70ms both;
}

@keyframes aiucInputDockIn {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}
#aiucInputBarBottom.aiuc-input-entering {
    animation: aiucInputDockIn 500ms var(--aiuc-ease-out-quint) 120ms both;
}

/* ② Turn group — only animates when explicitly marked fresh by JS */
@keyframes aiucGroupRise {
    0%   { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}
.aiuc-wrap .aiuc-turn-group.aiuc-turn-fresh {
    animation: aiucGroupRise 560ms var(--aiuc-ease-out-quint) 80ms both;
}

/* ③ User question bubble — drifts in from above with a tiny scale */
@keyframes aiucBubbleArrive {
    0%   { opacity: 0; transform: translateY(-10px) scale(0.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.aiuc-wrap .aiuc-turn-fresh .aiuc-turn-user {
    animation: aiucBubbleArrive 500ms var(--aiuc-ease-out-quint) 60ms both;
}

/* ④⑤ Response columns — staggered emergence (web first, mevzuat second) */
@keyframes aiucColMaterialize {
    0%   { opacity: 0; transform: translateY(20px) scale(0.985); filter: blur(5px); }
    60%  { opacity: 1; filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
.aiuc-wrap .aiuc-turn-fresh .aiuc-response-col {
    animation: aiucColMaterialize 680ms var(--aiuc-ease-out-expo) 220ms both;
    will-change: opacity, transform, filter;
}
.aiuc-wrap .aiuc-turn-fresh .aiuc-response-col + .aiuc-response-col {
    animation-delay: 330ms;
}
/* When only one column is visible, no need for the second-child stagger */
.aiuc-wrap .aiuc-turn-fresh .aiuc-turn-responses.aiuc-single-mode .aiuc-response-col {
    animation-delay: 240ms;
}

/* ⑥ Loading row — calm entrance, no flashing/shimmering background */
@keyframes aiucDotPulse {
    0%, 100% { transform: scale(1); opacity: 0.55; }
    50%      { transform: scale(1.18); opacity: 1; }
}

.aiuc-wrap .aiuc-loading-row {
    position: relative;
    border-radius: 10px;
    background: transparent !important;
}
.aiuc-wrap .aiuc-turn-fresh .aiuc-loading-row,
.aiuc-wrap #aiuc-loading {
    animation: aiucGroupRise 480ms var(--aiuc-ease-out-quint) 200ms both;
}

/* In-column loading dot now breathes instead of pulsing flatly */
.aiuc-wrap .aiuc-loading-dot {
    animation: aiucDotPulse 1.4s var(--aiuc-ease-out-soft) infinite;
}

.aiuc-wrap .aiuc-response-body .aiuc-loading-text {
    min-height: 96px;
    align-items: flex-start;
    padding-top: 2px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.5;
}

@keyframes aiucLoadingExit {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-8px); }
}
.aiuc-wrap .aiuc-loading.aiuc-loading-exit {
    animation: aiucLoadingExit 240ms var(--aiuc-ease-out-quint) both !important;
    pointer-events: none;
}

/* ⑦ Summary section / Özetle button — surfaces last */
.aiuc-wrap .aiuc-turn-fresh .aiuc-summary-block,
.aiuc-wrap .aiuc-turn-fresh .aiuc-summary-btn-wrapper {
    animation: aiucGroupRise 520ms var(--aiuc-ease-out-quint) 380ms both;
}

/* Content reveal — when a column body switches from skeleton to real
   answer on the FRESH turn only. Non-fresh re-renders (fetch result,
   like/dislike, etc.) display immediately without animation.
   IMPORTANT: scoped to `.aiuc-turn-fresh` so that `renderCurrentTurn()`
   DOM rebuilds do NOT cause a blink (fill-mode:both starts at opacity 0). */
@keyframes aiucContentSettle {
    0%   { opacity: 0; transform: translateY(10px); filter: blur(3px); }
    100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.aiuc-wrap .aiuc-turn-fresh .aiuc-response-body .aiuc-prose,
.aiuc-wrap .aiuc-turn-fresh .aiuc-response-body .aiuc-answer-shell {
    animation: aiucContentSettle 360ms var(--aiuc-ease-out-quint) both;
}
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal {
    animation: aiucContentSettle 520ms var(--aiuc-ease-out-expo) both;
}

@keyframes aiucTextLineReveal {
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal .aiuc-answer-header,
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal .aiuc-answer-body > *,
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > h1,
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > h2,
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > h3,
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > p,
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > .aiuc-reveal-line,
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > ul,
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > ol,
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > table,
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > .aiuc-markdown-table {
    animation: aiucTextLineReveal 420ms var(--aiuc-ease-out-quint) both;
}
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal .aiuc-reveal-line {
    display: inline-block;
    max-width: 100%;
    vertical-align: baseline;
    animation-delay: var(--aiuc-line-delay, 40ms);
}
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal .aiuc-answer-body > :nth-child(1),
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > :nth-child(1) { animation-delay: 40ms; }
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal .aiuc-answer-body > :nth-child(2),
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > :nth-child(2) { animation-delay: 75ms; }
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal .aiuc-answer-body > :nth-child(3),
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > :nth-child(3) { animation-delay: 110ms; }
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal .aiuc-answer-body > :nth-child(4),
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > :nth-child(4) { animation-delay: 145ms; }
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal .aiuc-answer-body > :nth-child(5),
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > :nth-child(5) { animation-delay: 180ms; }
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal .aiuc-answer-body > :nth-child(n+6),
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > :nth-child(n+6) { animation-delay: 215ms; }
.aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal .aiuc-reveal-line {
    animation-delay: var(--aiuc-line-delay, 40ms) !important;
}

/* Source chips fade in slightly after the body on fresh turns only. */
@keyframes aiucChipFade {
    0%   { opacity: 0; transform: translateY(2px); }
    100% { opacity: 1; transform: translateY(0); }
}
.aiuc-wrap .aiuc-turn-fresh .aiuc-prose .aiuc-source-chip,
.aiuc-wrap .aiuc-turn-fresh .aiuc-prose .aiuc-perp-chip,
.aiuc-wrap .aiuc-turn-fresh .aiuc-rag-citation-chip {
    animation: aiucChipFade 320ms var(--aiuc-ease-out-quint) 220ms both;
}

/* Reduced-motion accessibility: disable every choreographed animation
   above, but keep the indeterminate shimmer + pulse on loaders so users
   still know something is happening. */
@media (prefers-reduced-motion: reduce) {
    .aiuc-wrap .aiuc-turn-group.aiuc-turn-fresh,
    .aiuc-wrap .aiuc-turn-fresh .aiuc-turn-user,
    .aiuc-wrap .aiuc-turn-fresh .aiuc-response-col,
    .aiuc-wrap .aiuc-turn-fresh .aiuc-response-col + .aiuc-response-col,
    .aiuc-wrap .aiuc-turn-fresh .aiuc-summary-block,
    .aiuc-wrap .aiuc-turn-fresh .aiuc-summary-btn-wrapper,
    .aiuc-wrap .aiuc-turn-fresh .aiuc-response-body .aiuc-prose,
    .aiuc-wrap .aiuc-turn-fresh .aiuc-response-body .aiuc-answer-shell,
    .aiuc-wrap .aiuc-turn-fresh .aiuc-prose .aiuc-source-chip,
    .aiuc-wrap .aiuc-turn-fresh .aiuc-prose .aiuc-perp-chip,
    .aiuc-wrap .aiuc-turn-fresh .aiuc-rag-citation-chip,
    #aiuc-active-panels.aiuc-panel-entering,
    #aiucInputBarBottom.aiuc-input-entering,
    .aiuc-wrap .aiuc-loading.aiuc-loading-exit,
    .aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal,
    .aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal .aiuc-answer-header,
    .aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal .aiuc-answer-body > *,
    .aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal .aiuc-reveal-line,
    .aiuc-wrap .aiuc-response-body.aiuc-response-body-reveal > * {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    #aiuc-landing,
    .aiuc-wrap .aiuc-welcome {
        transition: none !important;
    }
}

/* Response reading scale: increase prose slightly while preserving table typography. */
.aiuc-wrap .aiuc-response-body {
    font-size: 12.8px !important;
    line-height: 1.68 !important;
}

.aiuc-wrap .aiuc-response-body p,
.aiuc-wrap .aiuc-response-body li,
.aiuc-wrap .aiuc-response-body ul,
.aiuc-wrap .aiuc-response-body ol,
.aiuc-wrap .aiuc-response-body .aiuc-reveal-line,
.aiuc-wrap .aiuc-prose,
.aiuc-wrap .aiuc-prose .aiuc-prose-p,
.aiuc-wrap .aiuc-prose .aiuc-prose-ul,
.aiuc-wrap .aiuc-prose .aiuc-prose-ol,
.aiuc-wrap .aiuc-prose .aiuc-prose-li {
    font-size: 12.8px !important;
    line-height: 1.68 !important;
}

.aiuc-wrap .aiuc-response-body .aiuc-markdown-table,
.aiuc-wrap .aiuc-response-body .aiuc-markdown-table * {
    font-size: 9px !important;
    line-height: 1.6 !important;
}

.aiuc-wrap .aiuc-prose .aiuc-prose-table,
.aiuc-wrap .aiuc-prose .aiuc-prose-table * {
    font-size: 9px !important;
    line-height: 1.6 !important;
}

.aiuc-wrap .aiuc-col-rag br.aiuc-rag-paragraph-gap {
    display: block !important;
    content: "" !important;
    margin: 0 !important;
}

.aiuc-wrap #aiuc-landing .aiuc-categories-cloud {
    display: flex !important;
    visibility: visible !important;
    opacity: 1;
}

.aiuc-wrap #aiuc-landing .aiuc-category-tag {
    display: inline-flex !important;
    visibility: visible !important;
}

@media (max-width: 600px) {
    .aiuc-wrap #aiuc-landing .aiuc-categories-cloud {
        display: none !important;
    }
}

/* Layout stability: keep dual research panels equal and clear of the docked input. */
.aiuc-wrap {
    --aiuc-input-clearance: 112px;
}

.aiuc-wrap .aiuc-turn-responses {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100%;
}

.aiuc-wrap .aiuc-turn-responses.aiuc-single-mode {
    grid-template-columns: minmax(0, 1fr) !important;
}

.aiuc-wrap .aiuc-response-col,
.aiuc-wrap .aiuc-response-body,
.aiuc-wrap .aiuc-answer-shell,
.aiuc-wrap .aiuc-answer-body,
.aiuc-wrap .aiuc-prose {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.aiuc-wrap #aiuc-active-panels #aiuc-chat-turns {
    padding-bottom: var(--aiuc-input-clearance) !important;
}

.aiuc-wrap .aiuc-prose .aiuc-prose-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
}

.aiuc-wrap .aiuc-prose .aiuc-prose-table {
    min-width: 100%;
    max-width: none;
}

.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) {
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) th,
.aiuc-wrap .aiuc-response-body > .aiuc-markdown-table:not(.aiuc-prose-table) td,
.aiuc-wrap .aiuc-prose .aiuc-prose-table th,
.aiuc-wrap .aiuc-prose .aiuc-prose-table td {
    overflow-wrap: anywhere;
    word-break: normal;
}

.aiuc-wrap .aiuc-rag-chips {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.aiuc-wrap .aiuc-rag-citation-chip,
.aiuc-rag-chips .aiuc-rag-citation-chip,
span.aiuc-rag-citation-chip {
    flex: 0 1 auto !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 28px !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.35 !important;
    text-align: left !important;
}

.aiuc-wrap .aiuc-source-chip,
.aiuc-wrap .aiuc-perp-chip {
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 7px !important;
    background: transparent !important;
    border: 1px solid #387FEA !important;
    border-radius: 9999px !important;
    color: #387FEA !important;
    font-size: 9.5px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

.aiuc-wrap .aiuc-source-chip:hover,
.aiuc-wrap .aiuc-perp-chip:hover,
.aiuc-wrap .aiuc-source-chip:focus-visible,
.aiuc-wrap .aiuc-perp-chip:focus-visible {
    background: transparent !important;
    border-color: #387FEA !important;
    color: #387FEA !important;
    box-shadow: none !important;
}

.aiuc-wrap .aiuc-source-chip__label {
    font-size: inherit !important;
    font-weight: inherit !important;
}

.aiuc-wrap .aiuc-source-chip__more {
    font-size: inherit !important;
    font-weight: 500 !important;
    color: inherit !important;
}

[data-theme="dark"] .aiuc-wrap .aiuc-source-chip,
[data-theme="dark"] .aiuc-wrap .aiuc-perp-chip,
.aiuc-dark .aiuc-wrap .aiuc-source-chip,
.aiuc-dark .aiuc-wrap .aiuc-perp-chip {
    background: transparent !important;
    border-color: #387FEA !important;
    color: #74A7FF !important;
}

[data-theme="dark"] .aiuc-wrap .aiuc-source-chip:hover,
[data-theme="dark"] .aiuc-wrap .aiuc-perp-chip:hover,
[data-theme="dark"] .aiuc-wrap .aiuc-source-chip:focus-visible,
[data-theme="dark"] .aiuc-wrap .aiuc-perp-chip:focus-visible,
.aiuc-dark .aiuc-wrap .aiuc-source-chip:hover,
.aiuc-dark .aiuc-wrap .aiuc-perp-chip:hover,
.aiuc-dark .aiuc-wrap .aiuc-source-chip:focus-visible,
.aiuc-dark .aiuc-wrap .aiuc-perp-chip:focus-visible {
    background: transparent !important;
    border-color: #387FEA !important;
    color: #74A7FF !important;
}

@media (max-width: 900px) {
    .aiuc-wrap {
        --aiuc-input-clearance: 88px;
    }
}

/* =====================================================
   MOBILE EXPERIENCE REFINEMENT
   Samsung S24 Ultra / Android Chrome focused polish.
   This final layer intentionally overrides older scattered mobile rules.
   ===================================================== */
@media (max-width: 900px) {
    .aiuc-wrap .aiuc-turn-responses,
    .aiuc-wrap .aiuc-turn-responses.aiuc-single-mode {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .aiuc-wrap .aiuc-global-headers {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 600px) {
    .aiuc-wrap {
        height: 100dvh;
        overflow: hidden;
        background: var(--neutral-bg-card);
        --aiuc-input-clearance: 132px;
    }

    .aiuc-app-shell {
        width: 100% !important;
        max-width: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
    }

    .aiuc-main-content {
        min-width: 0 !important;
        border-radius: 0 !important;
    }

    .aiuc-header-section {
        height: 58px !important;
        min-height: 58px !important;
        padding: 0 12px !important;
        gap: 8px !important;
    }

    .aiuc-header-left {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        gap: 8px !important;
    }

    #aiucMenuToggle {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        margin-right: 2px !important;
    }

    .aiuc-header-brand {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        height: auto !important;
        overflow: hidden !important;
    }

    .aiuc-header-brand > div {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .aiuc-header-site-icon,
    .aiuc-header-site-icon-placeholder {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        margin-right: 9px !important;
        border-radius: 7px !important;
    }

    .aiuc-header-brand h1 {
        max-width: 100% !important;
        overflow: hidden !important;
        color: var(--text-primary) !important;
        font-size: 13px !important;
        line-height: 1.16 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .aiuc-header-brand p {
        display: block !important;
        max-width: 100% !important;
        overflow: hidden !important;
        margin-top: 1px !important;
        color: var(--text-primary) !important;
        font-size: 12px !important;
        font-weight: 650 !important;
        line-height: 1.15 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .aiuc-header-right,
    .aiuc-header-actions {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .aiuc-header-actions {
        gap: 6px !important;
    }

    .aiuc-header-actions .aiuc-btn {
        width: 42px !important;
        height: 36px !important;
        min-width: 42px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border-radius: 9999px !important;
    }

    .aiuc-header-actions .aiuc-pdf-dropdown-toggle {
        width: 78px !important;
        min-width: 78px !important;
        gap: 8px !important;
    }

    .aiuc-header-actions .aiuc-btn .tabler-icon {
        width: 19px !important;
        height: 19px !important;
    }

    .aiuc-header-actions .aiuc-pdf-dropdown-toggle .tabler-icon:last-child {
        width: 16px !important;
        height: 16px !important;
    }

    .aiuc-btn-text {
        display: none !important;
    }

    .aiuc-chat-body {
        padding: 14px 12px 0 !important;
    }

    .aiuc-welcome {
        max-width: none !important;
    }

    .aiuc-welcome-content {
        gap: 18px !important;
        padding: 22px 0 24px !important;
    }

    .aiuc-landing-header {
        gap: 10px !important;
    }

    .aiuc-landing-title-row {
        width: 100% !important;
        line-height: 1 !important;
    }

    .aiuc-landing-title-bold {
        font-size: 30px !important;
        letter-spacing: 0 !important;
        line-height: 1.02 !important;
    }

    .aiuc-landing-title-serif {
        margin-top: 0 !important;
        font-size: 34px !important;
        letter-spacing: 0 !important;
        line-height: 0.98 !important;
    }

    .aiuc-landing-description {
        max-width: 360px !important;
        padding: 0 6px !important;
        font-size: 13px !important;
        line-height: 1.62 !important;
    }

    .aiuc-wrap #aiuc-landing .aiuc-categories-cloud {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 -12px !important;
        padding: 0 12px 4px !important;
        gap: 6px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .aiuc-wrap #aiuc-landing .aiuc-categories-cloud::-webkit-scrollbar {
        display: none !important;
    }

    .aiuc-wrap #aiuc-landing .aiuc-category-tag {
        flex: 0 0 auto !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 12px !important;
        border-radius: 9999px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .aiuc-input-wrapper-centered {
        max-width: none !important;
        margin: 0 auto !important;
    }

    #aiucInputBarBottom,
    .aiuc-input-wrapper-centered .aiuc-input-bar {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "input actions"
            "modes modes" !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 10px 12px 10px 16px !important;
        column-gap: 8px !important;
        row-gap: 8px !important;
        border-width: 2px !important;
        border-radius: 20px !important;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
        transform: none !important;
    }

    #aiucInputBarBottom[style*="display:none"],
    #aiucInputBarBottom[style*="display: none"] {
        display: none !important;
    }

    #aiucInputBarBottom .aiuc-search-input,
    .aiuc-input-wrapper-centered .aiuc-input-bar .aiuc-search-input {
        grid-area: input !important;
        width: 100% !important;
        height: 38px !important;
        min-height: 38px !important;
        padding: 0 !important;
        font-size: 15px !important;
        line-height: 38px !important;
    }

    #aiucInputBarBottom .aiuc-input-actions,
    .aiuc-input-wrapper-centered .aiuc-input-bar .aiuc-input-actions {
        grid-area: actions !important;
        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        align-self: center !important;
        justify-self: end !important;
        margin: 0 !important;
        gap: 2px !important;
        transform: none !important;
    }

    .aiuc-icon-btn {
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        border-radius: 10px !important;
    }

    .aiuc-icon-btn .tabler-icon {
        width: 18px !important;
        height: 18px !important;
    }

    .aiuc-research-btn {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 14px !important;
        border-radius: 9999px !important;
        font-size: 13px !important;
        letter-spacing: 0 !important;
    }

    #aiucInputBarBottom .aiuc-mode-chips,
    .aiuc-input-wrapper-centered .aiuc-input-bar .aiuc-mode-chips {
        grid-area: modes !important;
        display: flex !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #aiucInputBarBottom .aiuc-mode-chips[style*="display:none"],
    #aiucInputBarBottom .aiuc-mode-chips[style*="display: none"] {
        display: none !important;
    }

    #aiucInputBarBottom .aiuc-mode-chips::-webkit-scrollbar,
    .aiuc-input-wrapper-centered .aiuc-input-bar .aiuc-mode-chips::-webkit-scrollbar {
        display: none !important;
    }

    .aiuc-mode-chip {
        flex: 0 0 auto !important;
        height: 32px !important;
        min-height: 32px !important;
        padding: 0 11px !important;
        gap: 5px !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        line-height: 1 !important;
    }

    .aiuc-mode-chip .tabler-icon {
        width: 13px !important;
        height: 13px !important;
    }

    #aiuc-input-area {
        max-width: none !important;
        padding: 10px 12px calc(12px + env(safe-area-inset-bottom)) !important;
    }

    .aiuc-announcements {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        gap: 10px !important;
    }

    .aiuc-card-announcement {
        min-height: 56px !important;
        padding: 12px 14px !important;
        border-radius: 8px !important;
        align-items: center !important;
    }

    .aiuc-card-announcement::after {
        content: none !important;
        display: none !important;
    }

    .aiuc-card-text {
        padding-right: 0 !important;
        font-size: 13px !important;
        line-height: 1.45 !important;
    }

    .aiuc-footer-text {
        max-width: 360px !important;
        margin: 10px auto 0 !important;
        padding: 0 6px !important;
        font-size: 10.5px !important;
        line-height: 1.45 !important;
    }

    .aiuc-response-col {
        padding: 14px 14px !important;
    }
}

@media (max-width: 420px) {
    .aiuc-header-section {
        padding: 0 10px !important;
        gap: 6px !important;
    }

    #aiucMenuToggle {
        width: 38px !important;
        min-width: 38px !important;
    }

    .aiuc-header-site-icon,
    .aiuc-header-site-icon-placeholder {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        margin-right: 8px !important;
    }

    .aiuc-header-brand h1 {
        font-size: 12.5px !important;
    }

    .aiuc-header-brand p {
        font-size: 11.5px !important;
    }

    .aiuc-header-actions {
        gap: 5px !important;
    }

    .aiuc-header-actions .aiuc-btn {
        width: 40px !important;
        min-width: 40px !important;
        height: 34px !important;
        min-height: 34px !important;
    }

    .aiuc-header-actions .aiuc-pdf-dropdown-toggle {
        width: 72px !important;
        min-width: 72px !important;
    }

    .aiuc-welcome-content {
        gap: 16px !important;
        padding-top: 18px !important;
    }

    .aiuc-landing-title-bold {
        font-size: 27px !important;
    }

    .aiuc-landing-title-serif {
        font-size: 31px !important;
    }

    .aiuc-landing-description {
        font-size: 12.5px !important;
    }

    #aiucInputBarBottom,
    .aiuc-input-wrapper-centered .aiuc-input-bar {
        padding: 9px 10px 10px 14px !important;
        column-gap: 6px !important;
    }

    .aiuc-icon-btn {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .aiuc-research-btn {
        height: 34px !important;
        min-height: 34px !important;
        padding: 0 12px !important;
        font-size: 12.5px !important;
    }

    .aiuc-mode-chip {
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 10px !important;
        font-size: 10.5px !important;
    }

    .aiuc-mode-chip span {
        display: inline !important;
    }
}