/* AI İmar Birleşik Asistan — Design System */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600;700&display=swap');

/* =====================================================
   ROOT TOKENS — Carbon-inspired Warm Neutral Palette
   ===================================================== */
:root {
    --neutral-bg-1: #F2F1ED;
    --neutral-bg-2: #EBEAE5;
    --neutral-bg-card: #F7F7F4;
    --neutral-bg-hover: #E6E5E0;
    --neutral-bg-elevated: #EBEAE5;

    --text-primary: #26241F;
    --text-secondary: #777670;

    --stroke-card: #D5D2CD;
    --stroke-control: #E6E5E0;

    --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: #26241F;
    /* App background - dark brown/grey */
    --neutral-bg-2: #2F2C27;
    /* Cards and Inputs - slightly lighter */
    --neutral-bg-card: #1B1914;
    --neutral-bg-hover: #3A3630;
    --neutral-bg-elevated: #2F2C27;

    --text-primary: #EDEDEA;
    /* Off-white text */
    --text-secondary: #B8B4AC;

    --stroke-card: #3A3630;
    /* Input borders */
    --stroke-control: #3A3630;

    --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;
}

/* 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;
}

/* 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 {
    margin-top: 8px;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid var(--stroke-control);
    background: var(--neutral-bg-card);
    color: var(--text-primary);
    cursor: pointer;
    width: 100%;
    font-family: "Inter", sans-serif;
}

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

/* 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: #E6E5E0;
    border: 1px solid #D5D2CD;
    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: #26241F;
    border-color: #2B2924;
}

.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: #F7F7F4;
    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: #F7F7F4;
    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: 600px;
    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: #1B1914;
    border-color: var(--stroke-control);
}

[data-theme="dark"] .aiuc-category-tag:hover {
    background: var(--neutral-bg-2);
    border-color: #3A3730 !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 {
    animation: aiuc-fade-in 0.3s ease forwards;
}

@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: #F7F7F4;
    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;
}

.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);
}

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

[data-theme="dark"] .aiuc-response-col.aiuc-col-perp {
    background: #26241F;
    border-color: #2B2924;
}

/* RAG column: warm parchment */
.aiuc-response-col.aiuc-col-rag {
    background: #EBEAE5;
    border-color: #D5D2CD;
}

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

.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-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: 8px;
    margin-top: 8px;
}

.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);
    /* Hafif çerçeve */
}

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

/* 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: #EBEAE5;
    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: #E6E5E0;
}

.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: 100;
    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: #3A3730 !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: #26241F;
    border-color: #2B2924;
}

/* =====================================================
   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: #FFF9F0;
    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: #E6E5E0 !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: #E6E5E0 !important;
}

[data-theme="dark"] .aiuc-dark-mode-toggle {
    background: #26241F !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: #F7F7F4 !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: #26241F !important;
    /* Dark text on white background */
}

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

.aiuc-search-input::placeholder,
.aiuc-input::placeholder {
    color: #777670 !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: #777670 !important;
    width: 38px !important;
    height: 38px !important;
}

.aiuc-input-actions .aiuc-icon-btn:hover {
    background: #F2F1ED !important;
    color: #26241F !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: #777670 !important;
    transition: all 0.2s !important;
}

.aiuc-btn-icon:hover {
    background: #F2F1ED !important;
    color: #26241F !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;
    width: 100%;
    margin-top: 8px;
    padding: 8px 0;
    font-size: 12px;
    color: var(--text-secondary);
    background: transparent;
    border: 1px solid var(--stroke-card);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}

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

/* 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: #EBEAE5;
    color: #26241F;
    border: none;
    font-weight: 500;
}

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

/* 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 #D5D2CD;
    color: #26241F;
}

.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: #777670;
    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: #777670;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

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

/* 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 #E6E5E0;
}

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

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

/* ── DARK MODE ── */
[data-theme="dark"] .aiuc-perp-chip {
    background: #26241F;
    color: #E8E6E0;
    border-color: #3A3730;
}

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

[data-theme="dark"] .aiuc-perp-popup {
    background: #1B1914;
    border-color: #2B2924;
    color: #E8E6E0;
    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: #2B2924;
}

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

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

/* =====================================================
   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: #2F2C27;
    border-color: #3A3630;
    color: #C8C3BA;
}

[data-theme="dark"] .aiuc-mode-chip:hover {
    background: #3A3630;
    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: #B8B4AC !important;
}

[data-theme="dark"] .aiuc-input-actions .aiuc-icon-btn:hover {
    background: #3A3630 !important;
    color: #EDEDEA !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-bold {
        font-size: 34px !important;
    }
    .aiuc-landing-title-serif {
        font-size: 40px !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-bold {
        font-size: 26px !important;
    }
    .aiuc-landing-title-serif {
        font-size: 30px !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: 8px 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-landing-title-bold {
        font-size: 22px !important;
    }
    .aiuc-landing-title-serif {
        font-size: 25px !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, #e5e5e0);
}
.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, #d4d4cf);
    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, #e5e5e0);
}
.aiuc-support-cancel {
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 500;
    border: 1.5px solid var(--neutral-border, #d4d4cf);
    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, #23211d);
    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, #3a3830);
}
[data-theme="dark"] .aiuc-support-modal-footer,
.aiuc-dark .aiuc-support-modal-footer {
    border-top-color: var(--neutral-border, #3a3830);
}
[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, #1a1914);
    border-color: var(--neutral-border, #3a3830);
    color: var(--text-primary, #e8e6df);
}
[data-theme="dark"] .aiuc-support-cancel,
.aiuc-dark .aiuc-support-cancel {
    border-color: var(--neutral-border, #3a3830);
    color: var(--text-secondary, #a0a090);
}
[data-theme="dark"] .aiuc-support-cancel:hover,
.aiuc-dark .aiuc-support-cancel:hover {
    background: var(--neutral-bg-main, #1a1914);
}