/* Executive polish layer for the main chat UI.
   Conservative visual overrides only: no API or behavior changes. */

:root {
  --primary: #315fd6;
  --primary-light: #4f7ee8;
  --primary-dark: #244da8;
  --primary-glow: rgba(49, 95, 214, 0.055);

  --surface: #fffefd;
  --surface-2: #f6f6f3;
  --surface-3: #eceef2;

  --text: #151c2b;
  --text-2: #536071;
  --text-3: #7f8897;

  --border: rgba(45, 55, 72, 0.085);
  --border-2: rgba(45, 55, 72, 0.12);

  --sidebar-bg: #fafafa;
  --topbar-bg: rgba(250, 250, 249, 0.92);
  --chat-bg: #f2f3f5;
  --bot-bubble: transparent;
  --user-bubble: #fffefd;
  --code-bg: #111827;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.032);
  --shadow-md: 0 8px 22px rgba(15, 23, 42, 0.045);
  --shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.072);

  --radius: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --avatar-user: #315fd6;
  --avatar-bot: #0f172a;
}

html.dark {
  --primary: #60a5fa;
  --primary-light: #93c5fd;
  --primary-dark: #3b82f6;
  --primary-glow: rgba(96, 165, 250, 0.08);

  --surface: #151a23;
  --surface-2: #10151e;
  --surface-3: #1b2230;

  --text: #eef2f7;
  --text-2: #a5adbb;
  --text-3: #747e8f;

  --border: rgba(226, 232, 240, 0.09);
  --border-2: rgba(226, 232, 240, 0.14);

  --sidebar-bg: #0f131b;
  --topbar-bg: rgba(15, 19, 27, 0.91);
  --chat-bg: #0c1119;
  --bot-bubble: transparent;
  --user-bubble: #151b26;
  --code-bg: #070b12;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.22);
  --shadow-md: 0 10px 30px rgba(0, 0, 0, 0.24);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.30);

  --avatar-user: #3b82f6;
  --avatar-bot: #263246;
}

body,
button,
input,
textarea,
select {
  letter-spacing: 0;
}

body,
#chat-container {
  background: var(--chat-bg);
}

#sidebar {
  width: 272px;
  flex-basis: 272px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--border);
  box-shadow: none;
}

html:not(.dark) #topbar,
html:not(.dark) #quota-panel,
html:not(.dark) #mobile-strip {
  border-color: rgba(45, 55, 72, 0.075) !important;
}

.glass-sidebar,
#topbar {
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#sidebar .p-5 {
  padding: 14px;
}

#sidebar .p-5 > div:first-child {
  margin-bottom: 18px !important;
}

#sidebar .relative.group > .absolute {
  display: none !important;
}

#sidebar .relative.group > .relative {
  padding: 8px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

#sidebar .relative.group svg {
  width: 17px !important;
  height: 17px !important;
}

#sidebar .text-\[10px\] {
  letter-spacing: 0 !important;
}

.sidebar-section {
  margin-bottom: 16px;
}

.sidebar-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.sidebar-section-heading {
  color: var(--text-3);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.sidebar-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 0 8px;
  border: 1px solid rgba(49, 95, 214, 0.10);
  border-radius: 8px;
  background: rgba(49, 95, 214, 0.040);
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  transition: background 0.16s ease, border-color 0.16s ease;
}

.sidebar-create-btn:hover {
  border-color: rgba(49, 95, 214, 0.18);
  background: rgba(49, 95, 214, 0.065);
}

.sidebar-general-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 9px;
  border-color: var(--border);
  border-radius: 12px;
  background: rgba(255, 254, 253, 0.56);
}

html.dark .sidebar-general-card {
  background: rgba(21, 26, 35, 0.35);
}

.sidebar-general-card:hover {
  border-color: rgba(49, 95, 214, 0.13);
  background: rgba(49, 95, 214, 0.034);
}

.sidebar-item-icon,
.project-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--text-3);
}

.sidebar-item-main,
.project-row-main {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.sidebar-item-title,
.project-row-title {
  overflow: hidden;
  color: var(--text);
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-item-meta,
.project-row-meta {
  color: var(--text-3);
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.1;
}

#global-chat-item[class*="bg-primary-500"] {
  background: rgba(49, 95, 214, 0.050) !important;
  border-color: rgba(49, 95, 214, 0.14) !important;
}

#global-chat-item[class*="bg-primary-500"] .sidebar-item-icon {
  border-color: rgba(49, 95, 214, 0.16);
  background: rgba(49, 95, 214, 0.070);
  color: var(--primary);
}

#chat-list {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

#chat-list > [data-chat-id] {
  position: relative;
  min-height: 34px !important;
  padding: 7px 8px 7px 11px !important;
  border-radius: 9px !important;
}

#chat-list > [data-chat-id]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 2px;
  border-radius: 999px;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.16s ease;
}

#chat-list > [data-chat-id] > i {
  opacity: 0.72;
}

#chat-list > [data-chat-id][data-current-chat],
#chat-list > [data-chat-id].is-current-chat {
  background: rgba(49, 95, 214, 0.040) !important;
  border-color: rgba(49, 95, 214, 0.11) !important;
}

#chat-list > [data-chat-id][data-current-chat]::before,
#chat-list > [data-chat-id].is-current-chat::before {
  opacity: 1;
}

#chat-list > [data-chat-id][data-current-chat] span,
#chat-list > [data-chat-id].is-current-chat span {
  color: var(--text) !important;
  font-weight: 600 !important;
}

html.dark #chat-list > [data-chat-id][data-current-chat],
html.dark #chat-list > [data-chat-id].is-current-chat {
  background: rgba(96, 165, 250, 0.070) !important;
  border-color: rgba(96, 165, 250, 0.12) !important;
}

.sidebar-conversation-section {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  padding-top: 2px;
}

.sidebar-conversation-heading {
  padding: 0 14px 8px;
}

.sidebar-history-actions {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border);
}

#project-list > [data-project-id] {
  min-height: 36px;
  border-radius: 9px !important;
  padding: 7px 8px !important;
  gap: 8px !important;
}

#project-list > [data-project-id]:hover,
#chat-list > [data-chat-id]:hover {
  background: rgba(49, 95, 214, 0.030) !important;
  border-color: rgba(49, 95, 214, 0.075) !important;
}

#project-list > [data-project-id][class*="bg-primary-500"] {
  background: rgba(49, 95, 214, 0.048) !important;
  border-color: rgba(49, 95, 214, 0.13) !important;
  color: var(--text) !important;
}

#chat-list > [data-chat-id] span {
  font-size: 12.5px !important;
  font-weight: 500 !important;
}

#project-list > [data-project-id] svg,
#chat-list > [data-chat-id] svg {
  width: 14px !important;
  height: 14px !important;
}

#project-list [data-action="delete-project"],
#chat-list [data-action="export-chat"],
#chat-list [data-action="delete-chat"] {
  padding: 4px !important;
  border-radius: 7px !important;
}

.project-row {
  position: relative;
  min-height: 50px !important;
  padding: 9px 8px 9px 10px !important;
  border-radius: 12px !important;
}

.project-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.16s ease;
}

.project-row[class*="bg-primary-500"]::before {
  opacity: 1;
}

.project-row[class*="bg-primary-500"] .project-row-icon {
  border-color: rgba(49, 95, 214, 0.16);
  background: rgba(49, 95, 214, 0.070);
  color: var(--primary);
}

.project-row-icon svg {
  width: 15px !important;
  height: 15px !important;
}

.project-row-action {
  margin-left: 2px;
}

#project-form {
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: rgba(255, 254, 253, 0.58);
}

html.dark #project-form {
  background: rgba(21, 26, 35, 0.38);
}

#project-form input,
#project-form textarea {
  border-radius: 9px !important;
  padding: 8px 10px !important;
  font-size: 12.5px !important;
}

#project-save-btn,
#project-cancel-btn {
  min-height: 34px;
  border-radius: 9px !important;
  font-size: 12.5px !important;
}

#new-chat-btn {
  min-height: 38px;
  border-radius: 10px !important;
  background: var(--primary) !important;
  box-shadow: 0 8px 18px rgba(49, 95, 214, 0.105);
}

#new-chat-btn > .absolute {
  display: none !important;
}

#new-chat-btn:hover {
  box-shadow: 0 10px 22px rgba(49, 95, 214, 0.13);
}

#clear-history {
  min-height: 34px;
  border-radius: 9px !important;
  padding: 0 10px !important;
  background: transparent !important;
  font-size: 12.5px !important;
  opacity: 0.78;
}

#clear-history:hover {
  background: rgba(239, 68, 68, 0.055) !important;
  border-color: rgba(239, 68, 68, 0.16) !important;
  color: #ef4444 !important;
  opacity: 1;
}

#topbar {
  min-height: 54px;
  height: 54px;
  padding-left: 18px !important;
  padding-right: 18px !important;
  background: var(--topbar-bg) !important;
}

#current-project-name {
  color: var(--text-3) !important;
}

#current-chat-title {
  color: var(--text) !important;
  font-weight: 650;
  font-size: 13.5px !important;
}

.select-pill,
.strip-pill {
  min-height: 32px;
  border-radius: 9px;
  background: rgba(255, 254, 253, 0.72);
  box-shadow: none;
}

.select-pill select,
.strip-pill select {
  font-size: 12.5px !important;
  font-weight: 600 !important;
}

html.dark .select-pill,
html.dark .strip-pill {
  background: rgba(21, 26, 35, 0.64);
}

.select-pill:hover,
.strip-pill:focus-within {
  border-color: var(--border-2);
  box-shadow: none;
}

#topbar a[href="about.html"] span,
#project-settings-btn span {
  display: none !important;
}

#topbar a[href="about.html"],
#project-settings-btn {
  width: 32px;
  height: 32px;
  justify-content: center;
  padding: 0 !important;
}

#quota-panel {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  background: rgba(250, 250, 249, 0.56) !important;
}

#quota-panel .w-7 {
  width: 28px !important;
  height: 28px !important;
  border-radius: 9px !important;
}

#quota-text,
#quota-models-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#quota-text {
  max-width: min(34vw, 560px);
  font-size: 10.5px !important;
}

#quota-models-text {
  max-width: min(40vw, 680px);
  opacity: 0.58 !important;
  font-size: 9.5px !important;
}

html.dark #quota-panel {
  background: rgba(16, 21, 30, 0.58) !important;
}

#budget-badge,
#admin-link {
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 650 !important;
}

#chat-box {
  padding: 24px clamp(14px, 3vw, 34px) 18px !important;
}

#chat-box .fade-in {
  width: 100%;
  max-width: 920px;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 18px !important;
  gap: 10px !important;
}

#chat-box .fade-in .bubble-wrapper {
  max-width: min(100%, 730px) !important;
}

#chat-box .fade-in > div:not(.bubble-wrapper) {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: var(--surface-3) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
}

#chat-box .fade-in.flex-row-reverse > div:not(.bubble-wrapper) {
  background: var(--primary) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

#chat-box .fade-in > div:not(.bubble-wrapper) svg {
  width: 16px !important;
  height: 16px !important;
}

.msg-bubble {
  border-radius: 14px !important;
  padding: 13px 15px !important;
  max-width: 100%;
}

.msg-bubble.msg-bot,
html.dark .msg-bubble.msg-bot {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
}

.msg-bubble.msg-user,
html.dark .msg-bubble.msg-user {
  background: var(--user-bubble) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
}

.prose {
  font-size: 14.7px !important;
  line-height: 1.68 !important;
}

.prose p,
.prose ul,
.prose ol {
  margin-top: 0.55rem !important;
  margin-bottom: 0.55rem !important;
}

.prose pre {
  border-radius: 12px !important;
  box-shadow: none !important;
}

.code-wrap {
  border-radius: 12px !important;
}

#empty-state .absolute.-inset-4 {
  opacity: 0 !important;
}

#empty-state {
  color: var(--text);
}

#empty-state > .relative.mb-5 {
  margin-bottom: 14px !important;
}

#empty-state > .relative.mb-5 > .relative {
  padding: 10px !important;
  border-radius: 12px !important;
  background: rgba(255, 254, 253, 0.62) !important;
  box-shadow: none !important;
}

html.dark #empty-state > .relative.mb-5 > .relative {
  background: rgba(21, 26, 35, 0.64) !important;
}

#empty-state > .relative.mb-5 > .relative svg {
  width: 25px !important;
  height: 25px !important;
}

#empty-state h2 {
  margin-bottom: 7px !important;
  font-size: 21px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

#empty-state p {
  max-width: 330px !important;
  margin-bottom: 17px !important;
  color: var(--text-3) !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
}

.suggest-grid {
  max-width: 470px !important;
  gap: 8px !important;
}

.suggest-card {
  min-height: 52px;
  border-radius: 10px !important;
  padding: 10px 11px !important;
  box-shadow: none !important;
}

html:not(.dark) .suggest-card {
  border-color: rgba(45, 55, 72, 0.075) !important;
  background: rgba(255, 254, 253, 0.72) !important;
}

.suggest-card:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
}

html:not(.dark) .suggest-card:hover {
  background: rgba(255, 254, 253, 0.90) !important;
}

.suggest-icon {
  width: 17px !important;
  height: 17px !important;
  opacity: 0.72;
}

.suggest-title {
  font-size: 12.7px !important;
  font-weight: 650 !important;
}

.suggest-desc {
  font-size: 11.2px !important;
  line-height: 1.25 !important;
}

.message-file-card,
.message-file-content-main,
.file-chip-container {
  border-radius: 12px !important;
  box-shadow: none !important;
}

.message-image-wrapper {
  border-radius: 12px !important;
}

#chat-box + div {
  background: linear-gradient(to top, var(--chat-bg) 78%, rgba(242, 243, 245, 0)) !important;
  border-top: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 14px !important;
}

html.dark #chat-box + div {
  background: linear-gradient(to top, var(--chat-bg) 78%, rgba(12, 17, 25, 0)) !important;
}

#chat-box + div > .max-w-4xl {
  max-width: 820px;
}

#composer {
  padding: 5px 7px !important;
  border: 1px solid var(--border) !important;
  border-radius: 15px !important;
  background: rgba(255, 254, 253, 0.88) !important;
  box-shadow: 0 9px 24px rgba(15, 23, 42, 0.052);
}

html.dark #composer {
  background: rgba(21, 26, 35, 0.94) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

#composer:focus-within {
  border-color: rgba(49, 95, 214, 0.18);
  box-shadow: 0 0 0 2px var(--primary-glow), 0 9px 24px rgba(15, 23, 42, 0.052);
}

#user-in {
  min-height: 34px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  color: var(--text) !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}

#user-in::placeholder {
  color: var(--text-3) !important;
  opacity: 0.78;
}

#composer + p {
  display: none !important;
}

#attach-btn,
#voice-btn,
#search-toggle-btn,
#user-settings-btn,
#logout-btn,
#rename-chat-btn,
#project-settings-btn {
  border-radius: 10px !important;
}

#composer #attach-btn,
#composer #voice-btn,
#composer #search-toggle-btn {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#attach-btn:hover,
#voice-btn:hover,
#search-toggle-btn:hover,
#user-settings-btn:hover,
#rename-chat-btn:hover,
#project-settings-btn:hover {
  background: rgba(49, 95, 214, 0.045) !important;
}

#send-btn {
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  background: var(--primary) !important;
  box-shadow: 0 8px 18px rgba(49, 95, 214, 0.12);
}

#send-btn:hover {
  box-shadow: 0 9px 20px rgba(49, 95, 214, 0.15);
}

.chat-scroll-toggle {
  width: 40px;
  height: 40px;
  right: 22px;
  bottom: 82px;
  box-shadow: var(--shadow-md);
}

#file-preview,
#quote-preview {
  border-radius: 14px !important;
  box-shadow: var(--shadow-md) !important;
}

html:not(.dark) #file-preview,
html:not(.dark) #quote-preview,
html:not(.dark) .rename-dialog,
html:not(.dark) #project-settings-modal > div,
html:not(.dark) #user-settings-modal > div {
  background: rgba(255, 254, 253, 0.94) !important;
}

#project-settings-modal > div,
#user-settings-modal > div {
  border-radius: 18px !important;
  box-shadow: var(--shadow-lg) !important;
}

.rename-modal {
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(12px);
}

.rename-dialog {
  width: min(440px, 100%);
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-lg);
}

.rename-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
  font-weight: 650;
  line-height: 1.2;
}

.rename-header p {
  margin: 6px 0 0;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.5;
}

.rename-field {
  display: block;
  margin-top: 20px;
}

.rename-field span {
  display: block;
  margin-bottom: 8px;
  color: var(--text-3);
  font-size: 12px;
  font-weight: 600;
}

.rename-field input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--border);
  border-radius: 12px;
  outline: none;
  background: var(--surface-2);
  color: var(--text);
  font-size: 14px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

.rename-field input:focus {
  border-color: rgba(49, 95, 214, 0.24);
  box-shadow: 0 0 0 3px var(--primary-glow);
}

.rename-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
}

.rename-btn {
  min-height: 38px;
  padding: 0 15px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 650;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.rename-btn:hover {
  transform: translateY(-1px);
}

.rename-btn-secondary {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
}

.rename-btn-secondary:hover {
  background: var(--surface-2);
  color: var(--text);
}

.rename-btn-primary {
  border: 1px solid transparent;
  background: var(--primary);
  color: #ffffff;
  box-shadow: 0 10px 20px rgba(49, 95, 214, 0.13);
}

.rename-btn-primary:hover {
  background: var(--primary-dark);
}

.rename-btn:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  transform: none;
}

@media (max-width: 767px) {
  #sidebar {
    width: min(272px, 84vw);
    flex-basis: min(272px, 84vw);
  }

  #topbar {
    height: 56px !important;
    min-height: 56px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  #topbar .flex.items-center.gap-3.min-w-0.flex-1 {
    gap: 10px !important;
  }

  #topbar .flex.items-center.gap-2.md\:gap-2\.5 {
    gap: 8px !important;
    max-width: none !important;
    overflow: visible !important;
  }

  #mobile-strip {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px !important;
    padding: 10px 12px !important;
    overflow: hidden !important;
  }

  #mobile-strip > .shrink-0.h-4.w-px {
    display: none !important;
  }

  #mobile-strip > a[href="about.html"] {
    display: none !important;
  }

  .strip-pill {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 10px !important;
    border-radius: 12px;
    gap: 7px;
  }

  .strip-pill select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    font-size: 13px !important;
    text-overflow: ellipsis;
  }

  #chat-box {
    padding: 16px 14px 10px !important;
  }

  #chat-box .fade-in {
    margin-bottom: 14px !important;
    gap: 9px !important;
  }

  #chat-box .fade-in .bubble-wrapper {
    align-items: flex-start !important;
    max-width: 82% !important;
  }

  #chat-box .fade-in.flex-row-reverse .bubble-wrapper {
    align-items: flex-end !important;
    max-width: 76% !important;
  }

  .msg-bubble {
    width: auto !important;
    max-width: 100% !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: manual !important;
    white-space: normal !important;
  }

  .msg-bubble.msg-user {
    min-width: 76px !important;
    width: fit-content !important;
    max-width: min(100%, 68vw) !important;
  }

  .msg-bubble.msg-user p,
  .msg-bubble.msg-user .prose p {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
  }

  .msg-rtl {
    text-align: right !important;
    direction: rtl !important;
  }

  .thinking-indicator {
    max-width: calc(100vw - 110px);
    gap: 6px !important;
    overflow: hidden !important;
  }

  .thinking-text {
    min-width: 0;
    overflow: hidden !important;
    font-size: 12.5px !important;
    text-overflow: ellipsis;
  }

  .msg-bubble.msg-bot,
  html.dark .msg-bubble.msg-bot {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #chat-box + div {
    padding-bottom: 10px !important;
  }

  #composer {
    padding: 5px 7px !important;
    border-radius: 16px !important;
  }

  #composer #attach-btn,
  #composer #voice-btn,
  #composer #search-toggle-btn,
  #send-btn {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  #user-in {
    font-size: 14px !important;
  }

  .suggest-grid {
    grid-template-columns: 1fr !important;
    max-width: 320px !important;
  }
}