:root {
  --neutral-50: 0 0% 97%;
  --neutral-100: 0 0% 95%;
  --neutral-200: 0 0% 87%;
  --neutral-300: 0 0% 62%;
  --neutral-400: 0 0% 52%;
  --neutral-500: 0 0% 39%;
  --neutral-600: 0 0% 28%;
  --neutral-700: 0 0% 21%;
  --neutral-800: 0 0% 16%;
  --neutral-900: 0 0% 13%;
  --neutral-950: 0 0% 8%;
  --neutral-1000: 0 0% 2%;
  --black: 0 0% 2%;
  --white: 0 0% 99%;
  --sidebar-w: 240px;
  --sidebar-cw: 56px;
  --accent: #6C3CE1;
}

html.light {
  color-scheme: light;
  --surface-base: #5f25cd17;
  --surface-l1: hsl(var(--neutral-50));
  --surface-l2: hsl(var(--neutral-100));
  --fg-primary: hsl(var(--neutral-1000));
  --fg-secondary: hsl(var(--neutral-500));
  --fg-tertiary: hsl(var(--neutral-400));
  --fg-invert: hsl(var(--white));
  --border-l1: hsl(var(--black) / 6%);
  --border-l2: hsl(var(--black) / 10%);
  --border-l3: hsl(var(--black) / 15%);
  --hover: hsl(var(--black) / 4%);
  --active: hsl(var(--black) / 7%);
  --input-bg: #fff;
  --input-border: hsl(var(--neutral-200) / 60%);
  --input-focus: hsl(var(--neutral-400) / 40%);
  --popover-bg: #fff;
  --scrollbar: hsl(var(--black) / 10%);
}

html.dark {
  color-scheme: dark;
  --surface-base: #0d0d0d;
  --surface-l1: #141415;
  --surface-l2: #1c1d1f;
  --fg-primary: hsl(var(--white));
  --fg-secondary: hsl(var(--neutral-300));
  --fg-tertiary: hsl(var(--neutral-400));
  --fg-invert: hsl(var(--neutral-1000));
  --border-l1: hsl(var(--white) / 7%);
  --border-l2: hsl(var(--white) / 10%);
  --border-l3: hsl(var(--white) / 16%);
  --hover: hsl(var(--white) / 6%);
  --active: hsl(var(--white) / 10%);
  --input-bg: #171718;
  --input-border: hsl(var(--white) / 8%);
  --input-focus: hsl(var(--white) / 14%);
  --popover-bg: #2a2b2e;
  --scrollbar: hsl(var(--white) / 10%);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden;  }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--surface-base);
  color: var(--fg-primary);
  transition: background 0.3s, color 0.3s;
  -webkit-font-smoothing: antialiased;
    position: relative;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; color: inherit; }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 6px; }

/* Canvas */
#starsCanvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

/* Layout */
.app-wrapper { display: flex; height: 100vh; width: 100%; position: relative; z-index: 1; }

.blur {
   mask-image: linear-gradient(to top, rgba(255, 255, 255, 0), rgb(255, 255, 255));
   opacity: 0.06;
   transform: none;
   height: 350px;
   display: flex;
   top: -3rem;
   left: -600px;
   right: -600px;
   position: absolute;
   transition: 0.1s;
}
.grow {
    flex-grow: 1;
}
.gradient-one {
    background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(10, 10, 10, 0));
    background: conic-gradient(from 90deg at 35% -1%, rgb(255, 255, 255) 7.2deg, rgb(255, 255, 255) 14.4deg, rgba(10, 10, 10, 0) 36deg, rgba(10, 10, 10, 0) 342deg, rgb(255, 255, 255) 360deg);
}
.gradient-two {
    background: linear-gradient(to bottom, rgb(255, 255, 255), rgba(10, 10, 10, 0));
    background: conic-gradient(from -90deg at 65% -1%, rgb(255, 255, 255) 0deg, rgba(10, 10, 10, 0) 18deg, rgba(10, 10, 10, 0) 324deg, rgb(255, 255, 255) 345.6deg, rgb(255, 255, 255) 352.8deg);
}

html.light .blur {
    opacity: 1;
}

/* ====== SIDEBAR ====== */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--surface-base);
  border-right: 1px solid var(--border-l1);
  transition: width 0.25s cubic-bezier(.4,0,.2,1), min-width 0.25s cubic-bezier(.4,0,.2,1);
  z-index: 40;
}
.sidebar.collapsed {
  width: var(--sidebar-cw);
  min-width: var(--sidebar-cw);
}

.light .sidebar {
    background: #fff;
}
/* Hide text in collapsed */
.sidebar.collapsed .sidebar-label,
.sidebar.collapsed .sidebar-history,
.sidebar.collapsed .sidebar-collapse-btn {
  opacity: 0;
  pointer-events: none;
  width: 0;
  overflow: hidden;
  white-space: nowrap;
}
.sidebar.collapsed .sidebar-item { gap: 0px; }
.sidebar.collapsed .sidebar-bottom { border-top: none; }

.sidebar-header {
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  flex-shrink: 0;
  justify-content: space-between;
}

.sidebar-logo {
  display: flex;
  align-items: center;
  padding: 2px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: opacity 0.1s;
}
.sidebar-logo:hover { opacity: 0.8; }
.sidebar-logo-img { border-radius: 6px; }

.sidebar-collapse-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  color: var(--fg-tertiary);
  transition: all 0.15s;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover { background: var(--hover); color: var(--fg-primary); }

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  flex-shrink: 0;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-secondary);
  transition: all 0.12s;
  cursor: pointer;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}
.sidebar-item:hover { background: var(--hover); color: var(--fg-primary); }
.sidebar-item.active { background: var(--active); color: var(--fg-primary); }

.sidebar-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.sidebar-label {
  transition: opacity 0.2s;
}

.sidebar-history {
  flex: 1;
  overflow-y: auto;
  padding: 6px 10px;
  transition: opacity 0.2s;
}

.sidebar-history-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-tertiary);
  padding: 10px 10px 6px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sidebar-history-item {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-tertiary);
  transition: all 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-history-item:hover { background: var(--hover); color: var(--fg-primary); }
.sidebar-history-item.active { color: var(--fg-primary); }

.sidebar-bottom {
  padding: 10px 8px;
  border-top: 1px solid var(--border-l1);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

.sidebar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s;
}
.sidebar-user:hover { background: var(--hover); }

.sidebar-user-avatar {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-user-avatar img { border-radius: 6px; }

/* ====== MAIN ====== */
.main-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100vh;
  position: relative;
}

/* Top nav */
.top-nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  flex-shrink: 0;
  z-index: 25;
  background: linear-gradient(to bottom, #ffffff1a 0%, #ffffff08 20%, transparent 100%);
  pointer-events: none;
}
.top-nav > * {
  pointer-events: auto;
}
.top-nav-left { display: flex; align-items: center; gap: 4px; }
.top-nav-center { flex: 1; }
.top-nav-right { display: flex; align-items: center; gap: 4px; }

.sidebar-open-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  color: var(--fg-secondary);
  transition: all 0.15s;
}
.sidebar-open-btn:hover { background: var(--hover); color: var(--fg-primary); }

/* Only show open btn when sidebar is collapsed */
.sidebar:not(.collapsed) ~ .main-area .sidebar-open-btn { opacity: 0; pointer-events: none; }

.nav-text-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-primary);
  transition: background 0.15s;
}
.nav-text-btn:hover { background: var(--hover); }

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  color: var(--fg-secondary);
  transition: all 0.15s;
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--hover); color: var(--fg-primary); }

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
html.light .theme-toggle .icon-sun { display: block; }
html.light .theme-toggle .icon-moon { display: none; }


.logo-abai-text {
    margin-top: 5px;
    margin-left: 15px;
  -webkit-user-select: none; /* Safari, Chrome */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE/Edge */
  user-select: none;         /* стандарт */
  -webkit-touch-callout: none; /* отключить контекстное меню на iOS при долгом тапе */
  -webkit-user-drag: none;     /* отключить перетаскивание в WebKit */
  user-drag: none;
}

html.light .logo-abai-text {
    filter: invert(1);
}

.logo-abai-icon:hover .eye, .logo-abai-icon.wink .eye {
    opacity: 0;
}
.logo-abai-icon.happy:hover .eye {
    opacity: 1;
}
.logo-abai-icon.wink .wink {
    opacity: 1!important;
}
.logo-abai-icon:hover .wink {
    opacity: 1!important;
}

.logo-abai-icon.happy .happy {
    opacity: 0!important;
}
.logo-abai-icon.happy .hidden {
    opacity: 1!important;
}

/* ====== CHAT CONTENT ====== */
.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 0 16px 20px;
  padding-top: 48px;
}

.chat-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  width: 100%;
  max-width: 900px;
}

.center-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.center-logo img { max-height: 56px; width: auto; }

/* Model selector */
.model-selector {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}

.model-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-l2);
  background: var(--input-bg);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: all 0.15s;
}
.model-btn:hover {
  background: var(--hover);
  color: var(--fg-primary);
  border-color: var(--border-l3);
}
.model-btn.active {
    color: var(--fg-primary);
    border-color: #5d25cd;
    box-shadow: 0px 0px 55px #5d25cd47;
}
.light .model-btn.active {
    background: #fff;
}

.model-btn-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.model-btn-icon img { width: 20px; height: 20px; border-radius: 6px; }

.model-btn-info { display: flex; flex-direction: column; line-height: 1.2;
    align-items: flex-start; }
.model-btn-name { font-size: 12px; font-weight: 600; }
.model-btn-version { font-size: 10px; color: var(--fg-tertiary); }

/* ====== CHAT INPUT (centered, in chat-center) ====== */
.chat-input-area {
  width: 100%;
  max-width: 900px;
}

.chat-input-box {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: 6px;
  padding: 6px 8px 6px 18px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  transition: border-color 0.12s, box-shadow 0.12s;
  flex-wrap: wrap;
}
.chat-input-box:focus-within {
  border-color: #5d25cd;
  box-shadow: 0 0 20px 10px rgb(87 35 190 / 10%);
}

.chat-input-editor {
  flex: 1;
  min-height: 24px;
  max-height: 160px;
  padding: 10px 0;
  font-size: 16px;
  line-height: 1.5;
  outline: none;
  overflow-y: auto;
  color: var(--fg-primary);
  word-break: break-word;
}
.chat-input-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--fg-tertiary);
  pointer-events: none;
}

.chat-input-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-bottom: 4px;
}

.chat-input-attach,
.chat-input-voice {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  color: var(--fg-tertiary);
  transition: all 0.15s;
}
.chat-input-attach:hover,
.chat-input-voice:hover {
  background: var(--hover);
  color: var(--fg-primary);
}

.chat-input-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  transition: all 0.15s;
}
.chat-input-send:disabled { opacity: 0.25; cursor: default; }
.chat-input-send:not(:disabled):hover { opacity: 0.85; }

/* ====== MESSAGES ====== */
.messages-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 900px;
  padding: 20px 16px;
}

.message { display: flex; gap: 8px; width: 100%; }

/* User message: avatar on right, with background/border/padding */
.message.user-message {
  flex-direction: row-reverse;
}
.message.user-message .message-content {    
  padding: 9px 12px;
  background: var(--surface-l2);
  border: 1px solid var(--border-l2);
  max-width: 80%;
  border-radius: 6px;
}

.message-content p {
    white-space: pre-wrap;
    line-height: 2;
}

.message-avatar {
  width: 28px;
  min-width: 28px;
  border-radius: 6px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  align-self: flex-start;
  height: 100%;
}
.message-avatar.user { color: #fff; }
.message-avatar.user > img { background: var(--border-l2); border-radius: 6px; }
.message-avatar.assistant { color: var(--fg-primary); }

.message-content {
  min-width: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-primary);
}

/* Model name label in AI messages */
.model-label {
  font-size: 11px;
  color: var(--fg-tertiary);
  margin-bottom: 2px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--surface-l2);
  border-radius: 6px;
}
.model-label .route-arrow {
  color: var(--fg-tertiary);
  opacity: 0.5;
  font-size: 10px;
  letter-spacing: -1px;
}
.model-label .routed-model {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--fg-secondary);
}
.model-label .routed-model img {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}

/* ====== USER MESSAGE WRAPPER & ACTIONS ====== */
.user-message-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.user-msg-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s;
  margin-top: 4px;
  margin-right: 36px;
}

.user-message-wrapper:hover .user-msg-actions {
  opacity: 1;
}

/* Avatar sticky buttons (duplicated inside message-avatar) */
.avatar-sticky-actions {
  display: flex;
  opacity: 0;
  visibility: hidden;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  position: sticky;
  top: 10px;
  z-index: 5;
  transition: 0.12s;
}
.avatar-sticky-actions.visible {
  opacity: 1;
  visibility: visible;
}

.user-msg-action-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-l2);
  border-radius: 6px;
  background: var(--surface-l1);
  color: var(--fg-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.user-msg-action-btn:hover {
  background: var(--surface-l2);
  color: var(--fg-primary);
}
.user-msg-action-btn:active {
  transform: scale(0.95);
}
.user-msg-action-btn.accent-btn {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.user-msg-action-btn.accent-btn:hover {
  opacity: 0.9;
}

/* Tooltip */
.user-msg-action-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
  background: var(--surface-l2);
  border: 1px solid var(--border-l1);
  border-radius: 4px;
  color: var(--fg-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.user-msg-action-btn:hover::after {
  opacity: 1;
}

/* ====== MESSAGE EDIT AREA ====== */
.message-edit-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 80%;
  width: 100%;
}
.message-edit-textarea {
  width: 100%;
  min-height: 60px;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-primary);
  background: var(--surface-l2);
  border: 1px solid var(--accent);
  border-radius: 6px;
  resize: none;
  outline: none;
  white-space: pre-wrap;
  overflow: hidden;
}
.message-edit-btns {
  display: flex;
  gap: 8px;
  align-items: center;
}
.message-edit-btns .message-edit-attach {
  margin-right: auto;
}
.message-edit-btns .message-edit-cancel {
  margin-left: auto;
}
.message-edit-cancel,
.message-edit-save {
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-l2);
  transition: background 0.15s;
}
.message-edit-cancel {
  background: transparent;
  color: var(--fg-secondary);
}
.message-edit-cancel:hover {
  background: var(--surface-l2);
}
.message-edit-save {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.message-edit-save:hover {
  opacity: 0.9;
}

/* ====== BOTTOM INPUT WRAPPER (chat mode) ====== */
.input-wrapper-bottom {
  flex-shrink: 0;
}
.input-wrapper-bottom .chat-input-area {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px 12px;
}

/* ====== AUTOCOMPLETE DROPDOWN ====== */
.chat-input-box {
  position: relative;
  flex-wrap: wrap;
}
.autocomplete-dropdown {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;
  background: var(--surface-l1);
  border: 1px solid var(--border-l2);
  border-radius: 8px;
  padding: 4px 0;
  max-height: none;
  overflow-y: auto;
  z-index: 60;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.autocomplete-dropdown.visible {
  display: block;
}
.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 12px;
  font-size: 14px;
  color: var(--fg-primary);
  cursor: pointer;
  transition: background 0.1s;
}
.autocomplete-item:hover,
.autocomplete-item.active {
  background: var(--hover);
}
.autocomplete-item-icon {
  color: var(--fg-tertiary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.autocomplete-item-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.autocomplete-item-text b {
  font-weight: 600;
}

/* ====== SEARCH POPUP ====== */
.search-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0,0,0,0.6);
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
.search-overlay.open {
  display: flex;
}
.search-popup {
  width: 90vw;
  max-width: 860px;
  height: 70vh;
  max-height: 600px;
  background: var(--surface-l1);
  border: 1px solid var(--border-l2);
  border-radius: 12px;
  display: flex;
  overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,0.4);
}
.search-popup-left {
  width: 50%;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border-l1);
  overflow: hidden;
}
.search-popup-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-l1);
  flex-shrink: 0;
  color: var(--fg-tertiary);
}
.search-popup-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: 16px;
  color: var(--fg-primary);
}
.search-popup-input::placeholder {
  color: var(--fg-tertiary);
}
.search-popup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 4px;
  flex-shrink: 0;
}
.search-popup-actions-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.search-popup-actions-show {
  font-size: 11px;
  color: var(--fg-tertiary);
  cursor: pointer;
}
.search-popup-actions-show:hover {
  color: var(--fg-primary);
}
.search-popup-new-chat {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 13px;
  color: var(--fg-primary);
  cursor: pointer;
  transition: background 0.1s;
  background: var(--hover);
  margin: 4px 8px;
  border-radius: 8px;
  flex-shrink: 0;
}
.search-popup-new-chat:hover {
  background: var(--active);
}
.search-popup-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 8px 8px;
}
.search-popup-group-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg-tertiary);
  padding: 12px 8px 4px;
  text-transform: capitalize;
}
.search-popup-chat-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.search-popup-chat-item:hover {
  background: var(--hover);
}
.search-popup-chat-item.selected {
  background: var(--active);
}
.search-popup-chat-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--fg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-popup-chat-info {
  flex: 1;
  min-width: 0;
}
.search-popup-chat-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-popup-chat-time {
  font-size: 11px;
  color: var(--fg-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Right panel */
.search-popup-right {
  width: 50%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.search-popup-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 14px;
  color: var(--fg-tertiary);
}
.search-popup-detail {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.search-popup-detail-title {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--fg-primary);
}
.search-popup-ai-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.search-popup-ai-stat {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-l2);
  border: 1px solid var(--border-l1);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-secondary);
}
.search-popup-ai-stat img,
.search-popup-ai-stat svg {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}
.search-popup-counters {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.search-popup-counter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-tertiary);
}
.search-popup-counter svg {
  width: 15px;
  height: 15px;
}
.search-popup-divider {
  height: 1px;
  background: var(--border-l1);
}
.search-popup-content-block {
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-secondary);
}
.search-popup-content-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-tertiary);
  margin-bottom: 6px;
}

/* ====== CTRL HINTS ====== */
.ctrl-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 10px 0 0;
}
.ctrl-hint-block {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  user-select: none;
}
.ctrl-hint-text {
  font-size: 11px;
  color: var(--fg-tertiary);
  user-select: none;
}
.ctrl-hint-text b {
  color: var(--fg-secondary);
  font-weight: 600;
}
.ctrl-hint-icon {
  color: var(--fg-tertiary);
  flex-shrink: 0;
}
.ctrl-hint-bottom {
  padding: 6px 16px 8px;
  max-width: 900px;
  margin: 0 auto;
}

/* ====== AI MESSAGE WRAPPER & ACTIONS ====== */
.ai-message-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ai-msg-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  margin-left: 36px;
}
.ai-msg-actions-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  margin-left: 36px;
  width: 93%;
}
.ai-msg-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--fg-tertiary);
}
.ai-msg-meta-item {
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
  cursor: default;
}
.ai-msg-meta-item svg { opacity: 0.6; }

/* Credits tooltip */
.credits-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  background: var(--surface-l2);
  border: 1px solid var(--border-l2);
  border-radius: 10px;
  padding: 10px 14px;
  min-width: 200px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
  z-index: 100;
  pointer-events: none;
}
.ai-msg-meta-item:hover .credits-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.credits-tooltip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--fg-secondary);
  white-space: nowrap;
}
.credits-tooltip-row + .credits-tooltip-row { margin-top: 6px; }
.credits-tooltip-row .credits-val {
  font-weight: 600;
  color: var(--fg-primary);
}
.credits-tooltip-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  background: #5D25CD;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  border: none;
  margin-left: 4px;
  transition: background 0.15s;
}
.credits-tooltip-plus:hover { background: #7b3ff2; }
.credits-tooltip-link {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--border-l2);
  font-size: 11px;
  color: #5D25CD;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.credits-tooltip-link:hover { opacity: 0.7; }

/* Routed model indicator after loader */
.ai-routed-model {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  color: var(--fg-tertiary);
  margin-left: 8px;
  opacity: 0;
  animation: fadeSlideIn 0.3s ease-out forwards;
}
.ai-routed-model .route-arrow-sm {
  opacity: 0.4;
  font-size: 10px;
}
.ai-routed-model img {
  width: 14px;
  height: 14px;
  border-radius: 3px;
}
.ai-routed-model span {
  font-weight: 600;
  color: var(--fg-secondary);
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Word appear animation */
.ai-formatted .word-appear {
  display: inline;
  opacity: 0;
  animation: wordIn 0.18s ease-out forwards;
}
@keyframes wordIn {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: translateX(0); }
}
.ai-msg-time-speed {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-tertiary);
  margin-left: 8px;
}
.ai-msg-time-speed .speed-label {
  color: var(--fg-tertiary);
  opacity: 0.8;
}

.ai-msg-action-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--fg-tertiary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ai-msg-action-btn:hover {
  background: var(--hover);
  color: var(--fg-primary);
}
.ai-msg-action-btn:active {
  transform: scale(0.95);
}

/* Tooltip for AI buttons */
.ai-msg-action-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
  background: var(--surface-l2);
  border: 1px solid var(--border-l1);
  border-radius: 4px;
  color: var(--fg-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.ai-msg-action-btn:hover::after {
  opacity: 1;
}

/* Regenerate button with background */
.ai-regenerate-wrap {
  position: relative;
}
.ai-msg-regenerate-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--surface-l2);
  border: 1px solid var(--border-l2);
  color: var(--fg-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.ai-msg-regenerate-btn:hover {
  background: var(--active);
  color: var(--fg-primary);
}

/* Regenerate dropdown */
.ai-regenerate-dropdown {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  background: var(--surface-l1);
  border: 1px solid var(--border-l2);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  z-index: 50;
}
.ai-regenerate-dropdown.visible {
  display: block;
}
.ai-regenerate-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-primary);
  cursor: pointer;
  transition: background 0.1s;
}
.ai-regenerate-item:hover {
  background: var(--hover);
}
.ai-regenerate-item img {
  border-radius: 4px;
}

/* ====== SIDEBAR USER MENU ====== */
.sidebar-user {
  position: relative;
}
.sidebar-user-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  background: var(--surface-l1);
  border: 1px solid var(--border-l2);
  border-radius: 8px;
  padding: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 60;
}
.sidebar-user-menu.visible {
  display: block;
}
.sidebar-user-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  color: var(--fg-primary);
  cursor: pointer;
  transition: background 0.1s;
  white-space: nowrap;
}
.sidebar-user-menu-item:hover {
  background: var(--hover);
}
.sidebar-user-menu-item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--fg-tertiary);
}
.sidebar-user-menu-divider {
  height: 1px;
  background: var(--border-l1);
  margin: 4px 0;
}
.sidebar-user-menu-item.danger {
  color: #ef4444;
}
.sidebar-user-menu-item.danger svg {
  color: #ef4444;
}

/* ====== SIDEBAR CHAT HISTORY (like screenshot) ====== */
.sidebar-history-dropdown-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 10px 6px;
  cursor: pointer;
  user-select: none;
}
.sidebar-history-dropdown-header span {
  font-size: 14px;
  font-weight: 600;
  color: var(--fg-primary);
}
.sidebar-history-dropdown-header svg {
  width: 14px;
  height: 14px;
  color: var(--fg-tertiary);
  transition: transform 0.2s;
}
.sidebar-history-dropdown-header.open svg {
  transform: rotate(180deg);
}
.sidebar-history-section {
    display: flex;
    align-items: center;
    padding: 12px 10px 4px;
}
.sidebar-history-section:after {
    content: "";
    display: inline-block;
    height: 1px;
    background: var(--border-l1);
    width: 100%;
}
.sidebar-history-section-title {
    font-size: 9px;
    font-weight: 300;
    color: var(--fg-primary);
    padding-right: 10px;
    text-transform: uppercase;;
}
.sidebar-history-show-all {
  display: block;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--fg-tertiary);
  cursor: pointer;
  transition: color 0.12s;
}
.sidebar-history-show-all:hover {
  color: var(--fg-primary);
}

/* ====== SCROLL ARROW BUTTONS ====== */
.scroll-arrow-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border-l2);
  background: var(--active);
  color: var(--fg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  box-shadow: 0 0 0 rgba(0,0,0,0);
}
.scroll-arrow-btn:hover {
  background: var(--surface-l2);
  color: var(--fg-secondary);
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}
.scroll-arrow-up {
  top: 10px;
}
.scroll-arrow-down {
  bottom: 10px;
}

/* ====== FILE ATTACHMENTS PREVIEW ====== */
.file-attachments-area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
  width: 100%;
  order: -1;
}

.file-attachment-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  background: var(--surface-l2);
  border: 1px solid var(--border-l2);
  border-radius: 6px;
  max-width: 220px;
  min-width: 0;
  transition: border-color 0.15s;
  animation: fileAttachFadeIn 0.25s ease;
}
@keyframes fileAttachFadeIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

.file-attachment-item:hover {
  border-color: var(--border-l3);
}

.file-attachment-preview {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--hover);
}
.file-attachment-preview img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
}
.file-attachment-preview .file-icon-svg {
  width: 22px;
  height: 22px;
  color: var(--fg-tertiary);
}

.file-attachment-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.file-attachment-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}
.file-attachment-meta {
  font-size: 10px;
  color: var(--fg-tertiary);
  white-space: nowrap;
}

/* Delete button on hover */
.file-attachment-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-l2);
  border: 1px solid var(--border-l2);
  color: var(--fg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  z-index: 2;
}
.file-attachment-item:hover .file-attachment-delete {
  opacity: 1;
}
.file-attachment-delete:hover {
  background: #ef4444;
  border-color: #ef4444;
  color: #fff;
}
.file-attachment-delete svg {
  width: 10px;
  height: 10px;
}

/* Loading progress bar */
.file-attachment-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  background: var(--border-l1);
}
.file-attachment-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 0 0 8px 8px;
  transition: width 0.15s ease;
}

/* Hide file input */
.hidden-file-input {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* ====== MESSAGE FILES (displayed in sent messages) ====== */
.message-files {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}
.message-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface-l2);
  border: 1px solid var(--border-l2);
  border-radius: 10px;
  padding: 6px 10px;
  max-width: 220px;
  position: relative;
  transition: border-color 0.15s;
}
.message-file-item:hover {
  border-color: var(--border-l3);
}
.message-file-item .file-attachment-preview {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hover);
}
.message-file-item .file-attachment-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.message-file-item .file-attachment-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.message-file-item .file-attachment-name {
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-primary);
}
.message-file-item .file-attachment-meta {
  font-size: 10px;
  color: var(--fg-tertiary);
}

/* Delete button on file items — visible only in edit mode */
.message-file-delete {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface-l2);
  border: 1px solid var(--border-l2);
  color: var(--fg-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  padding: 0;
}
.message-file-delete svg {
  width: 10px;
  height: 10px;
  color: var(--fg-tertiary);
}
.light .message-file-delete svg {
   color: #858585;
}

.message-file-delete:hover {
  background: #ef4444;
  border: 1px solid #ef4444;
  color: #fff;
}
.message-file-delete:hover svg {
  color: #fff;  
}
/* Show delete buttons only inside edit area */
.message-edit-area .message-file-delete {
  opacity: 1;
  pointer-events: auto;
}

/* Loading progress bar for message-file-item */
.message-file-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 0 0 10px 10px;
  overflow: hidden;
  background: var(--border-l1);
}
.message-file-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 0 0 10px 10px;
  transition: width 0.15s ease;
}

/* ====== EDIT ATTACH BUTTON ====== */
.message-edit-attach {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: none;
  border: none;
  color: var(--fg-tertiary);
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  position: relative;
}
.message-edit-attach:hover {
  background: var(--hover);
  color: var(--fg-primary);
}

/* Tooltip for message-edit-attach */
.message-edit-attach::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-tertiary, #333);
  color: var(--fg-primary);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
}
.message-edit-attach:hover::after {
  opacity: 1;
}

/* Tooltip for chat-input-attach */
.chat-input-attach {
  position: relative;
}
.chat-input-attach::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-tertiary, #333);
  color: var(--fg-primary);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 10;
}
.chat-input-attach:hover::after {
  opacity: 1;
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0; top: 0;
    transform: translateX(-100%);
    z-index: 50;
  }
  .sidebar:not(.collapsed) { transform: translateX(0); }
  .sidebar.collapsed { transform: translateX(-100%); }
  .sidebar-open-btn { opacity: 1 !important; pointer-events: auto !important; }
  .model-btn { padding: 7px 10px; gap: 6px; }
  .nav-text-btn span { display: none; }
}


/* ===== Fullscreen Image Viewer ===== */
.message-file-item .file-attachment-preview img { cursor: zoom-in; }
.message-file-item .file-attachment-preview { position: relative; }
.message-file-item .file-attachment-preview::after {
  content: '';
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35) url("data:image/svg+xml,%3Csvg xmlns='https://uxwing.com/wp-content/themes/uxwing/download/user-interface/search-magnifying-glass-white-icon.png' width='16' height='16' fill='white' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") center/16px no-repeat;
  border-radius: 6px;
  opacity: 0; transition: opacity .12s;
  pointer-events: none;
}
.message-file-item:hover .file-attachment-preview::after { opacity: 1; }

.img-viewer-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .12s;
  cursor: zoom-out;
  touch-action: none;
}
html.light .img-viewer-overlay { background: rgba(255,255,255,.6); }
.img-viewer-overlay.active { opacity: 1; }
.img-viewer-overlay img {
  max-width: 92vw; max-height: 92vh;
  object-fit: contain; border-radius: 8px;
  cursor: default;
  transition: transform .12s;
  user-select: none; -webkit-user-select: none;
  will-change: transform;
}
.img-viewer-close {
  display: none; position: absolute; top: 12px; right: 12px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,.5); border: none; color: #fff;
  font-size: 20px; cursor: pointer;
  align-items: center; justify-content: center;
}
@media (max-width: 768px) {
  .img-viewer-close { display: flex; }
}



/* ====== AI LOADING ANIMATION (Pixel Squares) ====== */
.ai-loader {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 8px 0;
}
.ai-loader .sq {
  width: 5px;
  height: 5px;
  background: #5D25CD;
  border-radius: 0;
  opacity: 0.25;
  animation: sq-pulse 1s ease-in-out infinite;
}
.ai-loader .sq:nth-child(1) { animation-delay: 0s; }
.ai-loader .sq:nth-child(2) { animation-delay: 0.08s; }
.ai-loader .sq:nth-child(3) { animation-delay: 0.16s; }
.ai-loader .sq:nth-child(4) { animation-delay: 0.24s; }
.ai-loader .sq:nth-child(5) { animation-delay: 0.32s; }
.ai-loader .sq:nth-child(6) { animation-delay: 0.40s; }
.ai-loader .sq:nth-child(7) { animation-delay: 0.48s; }
.ai-loader .sq:nth-child(8) { animation-delay: 0.56s; }
.ai-loader .sq:nth-child(9) { animation-delay: 0.64s; }
@keyframes sq-pulse {
  0%, 100% { opacity: 0.2; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ====== SEARCH INTERNET INDICATOR ====== */
.ai-search-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--fg-tertiary);
  padding: 4px 0 8px;
}
.ai-search-indicator svg {
  animation: spin-search 1s linear infinite;
  color: #5D25CD;
}
@keyframes spin-search {
  to { transform: rotate(360deg); }
}
.ai-search-indicator .search-count {
  font-weight: 600;
  color: var(--fg-secondary);
  font-variant-numeric: tabular-nums;
}

/* ====== AI FORMATTED TEXT ====== */
.ai-formatted { font-size: 16px; line-height: 2; color: var(--fg-primary); }
.ai-formatted h1 { font-size: 26px; font-weight: 700; margin: 32px 0 20px; line-height: 1.25; color: var(--fg-primary); }
.ai-formatted h2 { font-size: 22px; font-weight: 650; margin: 28px 0 18px; line-height: 1.3; color: var(--fg-primary); }
.ai-formatted h3 { font-size: 18px; font-weight: 600; margin: 24px 0 16px; line-height: 1.35; color: var(--fg-primary); }
.ai-formatted h1:first-child, .ai-formatted h2:first-child, .ai-formatted h3:first-child { margin-top: 10px; }
.ai-formatted p { margin: 8px 0; line-height: 2; color: var(--fg-primary); white-space: pre-wrap; }
.ai-formatted strong, .ai-formatted b { font-weight: 600; color: var(--fg-primary); }
.ai-formatted ul, .ai-formatted ol { margin: 15px 0 20px; padding-inline-start: 28px; }
.ai-formatted ol { list-style: decimal; }
.ai-formatted ol > li::marker { color: var(--fg-tertiary); font-weight: 500; }
.ai-formatted li { margin: 6px 0; line-height: 2; padding-left: 6px; }
.ai-formatted li ul, .ai-formatted li ol { margin: 4px 0; }
.ai-formatted hr { border: none; border-top: 1px solid var(--border-l2); margin: 20px 0; }

/* Typing cursor — modern block style */
.ai-typing-cursor {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #5D25CD;
  margin-left: 3px;
  vertical-align: middle;
  animation: cursor-glow 1s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(93,37,205,0.5);
}
@keyframes cursor-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.3; transform: scale(0.7); }
}

/* ====== CODE BLOCKS ====== */
.ai-code-block {
  margin: 12px 0;
  border-radius: 8px;
  overflow: hidden;
  background: #0d0d0d;
  border: 1px solid hsl(0 0% 99% / 8%);
  animation: codeBlockIn 0.35s ease-out both;
}
@keyframes codeBlockIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Code block text reveal */
.ai-code-block .ai-code-body pre {
  animation: codeTextReveal 0.6s ease-out both;
  animation-delay: 0.15s;
}
@keyframes codeTextReveal {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}
html.light .ai-code-block {
  background: #f5f5f5;
  border-color: hsl(0 0% 2% / 10%);
}
.ai-code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #1a1a1b;
  border-bottom: 1px solid hsl(0 0% 99% / 6%);
  font-size: 12px;
}
html.light .ai-code-header {
  background: #e8e8e8;
  border-bottom-color: hsl(0 0% 2% / 8%);
}
.ai-code-lang {
  color: var(--fg-tertiary);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ai-code-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.ai-code-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--fg-tertiary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  transition: background 0.15s, color 0.15s;
}
.ai-code-btn:hover {
  background: var(--hover);
  color: var(--fg-primary);
}
/* Tooltip for code buttons */
.ai-code-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 8px;
  font-size: 11px;
  white-space: nowrap;
  background: var(--surface-l2);
  border: 1px solid var(--border-l1);
  border-radius: 4px;
  color: var(--fg-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.ai-code-btn:hover::after {
  opacity: 1;
}
.ai-code-btn .check-icon { display: none; }
.ai-code-btn.copied .copy-icon { display: none; }
.ai-code-btn.copied .check-icon { display: inline; color: #22c55e; }
.ai-code-body {
  padding: 12px 16px;
  overflow-x: auto;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.65;
  tab-size: 2;
}
.ai-code-body pre {
  margin: 0;
  white-space: pre;
}
.ai-code-body code {
  font-family: inherit;
  color: #e4e4e7;
}
html.light .ai-code-body code {
  color: #1a1a1a;
}

/* Collapsed code block */
.ai-code-block.collapsed .ai-code-body {
  display: none;
}
.ai-code-collapsed-info {
  display: none;
  padding: 8px 16px;
  font-size: 12px;
  color: var(--fg-tertiary);
}
.ai-code-block.collapsed .ai-code-collapsed-info {
  display: block;
}

/* Syntax highlighting - dark */
.ai-code-body .kw { color: #c084fc; }        /* keywords: purple */
.ai-code-body .str { color: #86efac; }       /* strings: green */
.ai-code-body .num { color: #fbbf24; }       /* numbers: amber */
.ai-code-body .cm { color: #6b7280; font-style: italic; } /* comments: gray */
.ai-code-body .fn { color: #60a5fa; }        /* functions: blue */
.ai-code-body .cls { color: #f472b6; }       /* classes/types: pink */
.ai-code-body .op { color: #94a3b8; }        /* operators */
.ai-code-body .tag { color: #f87171; }       /* HTML tags: red */
.ai-code-body .attr { color: #c084fc; }      /* attributes: purple */
.ai-code-body .val { color: #86efac; }       /* values: green */
.ai-code-body .dec { color: #fbbf24; }       /* decorators */
.ai-code-body .prop { color: #7dd3fc; }      /* properties: light blue */

html.light .ai-code-body .kw { color: #7c3aed; }
html.light .ai-code-body .str { color: #16a34a; }
html.light .ai-code-body .num { color: #d97706; }
html.light .ai-code-body .cm { color: #9ca3af; }
html.light .ai-code-body .fn { color: #2563eb; }
html.light .ai-code-body .cls { color: #db2777; }
html.light .ai-code-body .op { color: #475569; }
html.light .ai-code-body .tag { color: #dc2626; }
html.light .ai-code-body .attr { color: #7c3aed; }
html.light .ai-code-body .val { color: #16a34a; }
html.light .ai-code-body .dec { color: #d97706; }
html.light .ai-code-body .prop { color: #0891b2; }

/* Inline code */
.ai-formatted code:not(.ai-code-body code) {
  background: var(--surface-l2);
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 13px;
  color: #c084fc;
}
html.light .ai-formatted code:not(.ai-code-body code) {
  color: #7c3aed;
}