:root {
  --outer-bg: #f2f0f0;
  --sidebar-bg: #f2f0f0;
  --chat-bg: #fdf9f9;
  --chat-border: #bebbbb;
  --text: #000000;
  --muted: #454748;
  --light-text: #bcbaba;
  --user-bubble: #f2f0f0;
  --assistant-bubble: #e7e7e7;
  --accent: #272d37;
  --hover-dark: #0E1B2B;
  --avatar-size: 30px;
  --avatar-edge-gap: 20px;
 --stage-pad: clamp(15px, 7vw, 120px);
}

.sidebar {
  padding: 14px 12px 0px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  color: #1b1f23;
  color: var(--side-pill-text) !important;
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  transition: background .3s, transform .2s;
  transform: translateY(-2px) scale(1.02);
  background: var(--outer-bg);
  min-height: 100vh;
}

.sidebar ::-webkit-scrollbar{ width: 10px; }

.sidebar ::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.15);
  border-radius: 12px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.sidebar ::-webkit-scrollbar-thumb:hover{background: rgba(0,0,0,.28); }

.sidebar .dropdown-menu {z-index: 1100; }

.chat-row {
  position: relative;
  display: block; 
  margin: 6px 8px;
}



/* ========================================================== */



.logout-row .btn.hero:visited {
  color: var(--text);
}

.logout-row .btn.hero:focus {
  color: var(--text);
}

.logout-row .btn.hero:hover {
  color: var(--text);
}

.logout-row .btn.hero {
  color: var(--text);
  text-decoration: none;
  min-width: 220px;
  text-align: center;
  padding: 18px 32px;
  border-radius: 25px;
}

.btn.hero {
  position: relative;
  overflow: hidden;
  --ripple-size: 220px;
}

.btn.hero .ripple {
  position: absolute;
  left: var(--ripple-x);
  top: var(--ripple-y);
  width: var(--ripple-size);
  height: var(--ripple-size);
  transform: translate(-50%, -50%) scale(0);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at center, var(--accent) 10%, rgba(34,211,238,0) 70%);
  opacity: .55;
  animation: ripple-expand .6s ease-out forwards;
  filter: blur(.3px);
}

.btn.hero:hover {
  transform: translateY(-4px) scale(1.03);
}

.btn.hero:active {
  transform: translateY(-1px) scale(0.995);
}

.btn.hero.appear {
  animation: hero-in .5s cubic-bezier(.2,.7,.2,1) both;
}

a {
  color: #9EC5FF;
}

a:hover {
  filter: brightness(1.12);
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 0px;
  background: #bbbbbd00;
  border: 1px solid #a44a4a00;
}

#themePalette .btn {
  color: #000;
  border-radius: 14px;
}

#currentThemeLabel {
  color: #000;
  border-radius: 14px;
}

#themePalette .dropdown-menu {
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
}

#themePalette .dropdown-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #000;
  border-radius: 10px;
}

#themePalette .dropdown-item:hover {
  background: #f2f2f4;
}

#themePalette .dropdown-item.active {
  background: #f2f2f4;
}

#themePalette .sw {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1px solid rgba(0,0,0,.15);
}

.chat-utils .input-group-text {
  background: var(--chat-bg);
  color: #444;
  border-color: rgba(0,0,0,.12);
}

.search-input.form-control {
  background: #eae5e5;
  color: #222;
  border-color: rgba(0,0,0,.12);
  border-radius: 15px;
}

.search-input.form-control::placeholder {
  color: #7a7f86;
  border-radius: 15px;

}

.topbar h1 {
  font-size: 1.1rem;
  margin: 0;
}

#greeting {
  font-size: 1.1rem;
  margin: 0;
}

#starter {
  background: rgba(255,255,255,.02);
  border: 1px solid var(--chat-border);
  border-radius: 18px;
  padding: 20px;
}

#starter h1 {
  font-size: 1.4rem;
  margin-bottom: 2px;
}

#starter div {
  color: var(--muted);
}

.composer-wrap {
  position: sticky;
  bottom: 0;
  margin: 0 clamp(10px, 8vw, 120px) clamp(10px, 4vh, 20px) clamp(10px, 12vw, 180px);
  padding: 0;
  background: transparent;
  border-top: none;
}

.composer {
  max-width: none;
  margin: 0;
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: 14px 14px 14px 14px;
  border-radius: 20px;
  background: var(--chat-bg);
  border: 1px solid var(--chat-border);
}

.composer textarea {
  flex: 1;
  resize: none;
  border: 0;
  outline: none;
  color: var(--text);
  background: transparent;
  max-height: 140px;
  margin-right: 50px;
}

.composer textarea::placeholder {
  color: var(--muted);
}

.btn-send {
  color: var(--muted);

  padding: .55rem .75rem;
  transition: .15s ease;
}

.btn-send:hover {
  background: #ffffff29;
  transform: translateY(-1px);
}

#sessionsAccordion .accordion-item {
  background: transparent;
  border: 0;
  margin: 0 0 0px 0;
}

.accordion-header {
  position: relative;
  overflow: visible;
}

.emailModal .modal-title {
  color: #000 !important;
}

.emailModal .btn-close {
  filter: none !important;
}

.msg.assistant .meta {
  position: absolute !important;
  right: 16px !important;
  bottom: 8px !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  color: #6B829C !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

.msg.user .meta {
  position: absolute !important;
  right: 14px !important;
  bottom: 8px !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  letter-spacing: .02em !important;
  color: #6B829C !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}



.msg.user + .msg.assistant {
  margin-top: 5px !important;
}

.msg.assistant + .msg.user {
  margin-top: 5px !important;
}

/* .chat-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 36px;
  padding: 6px 12px;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 1px 4px rgba(0,0,0,.05);
  cursor: pointer;
} */

.chat-pill:focus {
  outline: 0;
  box-shadow: none;
}

.chat-pill .chat-title {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #111;
  font-weight: 499;
  font-size: 15px;
}

.has-dots {
  padding-right: 44px !important;
}

.three-dots-wrap {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.three-dots {
  background: transparent;
  border: none;
  color: #666;
  font-size: 18px;
  padding: 0 4px;
  line-height: 1;
  border-radius: 6px;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.three-dots:hover {
  background: #eef0f2;
}

#sessionsAccordion {
  display: block;
  width: 100%;
  max-height: calc(100vh - 340px);
  overflow-y: auto;
  padding-right: 2px;
  overflow: visible;
}

#sessionsAccordion .chat-row {
  position: relative;
  margin: 2px 0;
  overflow: visible;
}

#sessionsAccordion .dropdown-menu {
  position: absolute !important;
  right: 0;
  top: calc(100% + 8px);
  transform: translateX(-8px);
  min-width: 160px;
  padding: 6px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: 6000 !important;
}

#sessionsAccordion .dropdown-menu::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,.08);
  border-top: 1px solid rgba(0,0,0,.08);
  transform: rotate(45deg);
  z-index: 6001;
}

#sessionsAccordion .dropdown-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 8px 10px;
  font-size: 14px;
  color: #222;
  border-radius: 8px;
}

#sessionsAccordion .dropdown-item:hover {
  background: #f5f6f8;
}

#sessionsAccordion .dropdown-item.text-danger {
  color: #d33;
}

#sessionsAccordion .dropdown-item.text-danger:hover {
  background: #fff1f1;
}

#sessionsAccordion .accordion-button {
  justify-content: flex-start !important;
  text-align: left !important;
}

#sessionsAccordion .chat-title {
  flex: 1 1 auto !important;
  text-align: left !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.element {
  line-height: 4.25;
}


/* .msg .content code {
  background: rgba(11,22,35,.08) !important;
  width: 400px !important;
  border: 1px solid rgba(11,22,35,.12) !important;
  padding: .05rem .35rem !important;
  border-radius: 60px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color: #0B1623 !important;
} */

.app {
  display: grid !important;
  grid-template-columns: 300px 1fr !important;
  grid-template-rows: 100vh;
  overflow: hidden !important;
  height: 100vh !important;
  background-color: var(--chat-bg);
}

.app > * {
  min-height: 0 !important;
  min-width: 0 !important;
}

.main {
  display: grid !important;
  flex-direction: column;
  grid-template-rows: auto 1fr auto !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

*/


.main > *:not(.chat-scroll) {
  overflow: visible !important;
}

.chat-scroll {
  flex: 1;
  overflow: visible !important;
  margin: 0px 0px 0 10px;
  background: var(--chat-bg);
  border-top: none;
  scrollbar-color: #2d3b4b transparent;
  scrollbar-width: thin;
  position: relative;
  overflow-y: auto !important;
  overflow-x: visible !important;
  scroll-behavior: smooth;
  padding-bottom: 21px !important;
  grid-row: 0;
  min-height: 0 !important;
  max-height: unset !important;
  -webkit-overflow-scrolling: touch;
  padding-left: calc(var(--stage-pad) + var(--avatar-size) + var(--avatar-edge-gap)) !important;
  padding-right: calc(var(--stage-pad) + var(--avatar-size) + var(--avatar-edge-gap)) !important;
}

.response-box {
  display: flex;
  flex-direction: column;
  gap: 8px !important;
  overflow: visible !important;
}

.msg {
  position: relative !important;
  border-radius: 22px !important;
  line-height: 2.00 !important;
  word-wrap: break-word;
  overflow: visible !important;
  color: #0B1623 !important;
  word-break: break-word !important;
  font-size: clamp(14px, 1.8vw, 16px) !important;
  padding: clamp(12px, 2.5vw, 18px) clamp(12px, 3vw, 18px) clamp(28px, 4vw, 36px) !important;
  /* max-width: min(680px, 96vw) !important; don’t overflow on narrow screens */
  border-radius: 22px;
  margin: .5rem 0;
}

/* === Remove avatars from chat bubbles === */
/* .msg.assistant::before,
.msg.user::after {
  display: none !important;
  content: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
} */


.msg.assistant::before {
  content: "";
  position: absolute;
  /* left: calc(-1 * var(--avatar-size) - var(--avatar-edge-gap)); */
  left: -20px;
  top: 30px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  background-image: var(--assistant-avatar);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 29px;

  z-index: 5 !important;
}
 
.composer{ 
  position: relative;               
  min-height: 68px;                  
  padding-right: 128px;             
}
.msg.user.first-of-session .content {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: .25rem;
}

/* pin the tools to the right, vertically centered */
.composer .composer-tools{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);       /* center vertically */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* make both buttons large, round, and easy to click */
.composer .btn-send,
.composer .btn-mic{
  width: 45px;
  height: 45px;
  border-radius: 999px;
  padding: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* mic button look */
.composer .btn-mic{
  background: #f2f2f2;
  border: 1px solid 444444;
}
.composer .btn-mic i{ font-size: 1.rem; }
.composer .btn-mic:hover{ background:#444444; color: #ffffff; border:  1px solid #f2f2f2 ;}
.composer .btn-mic.recording{ background:#ffebeb; border-color:#ff9b9b; }

/* send button look */
.composer .btn-send{
  /* background: #444444; */
    background: #f2f2f2;
  color: #444444;
  border: none;
  font-size: 1rem;                /* bigger “➤” */
  line-height: 1;
}
.composer .btn-send:hover{ background:#444444; color: #ffffff; border:  1px solid #f2f2f2 ;}

/* responsive tweak */
@media (max-width: 768px){
  .composer{ min-height: 62px; padding-right: 116px; }
  .composer .btn-send, .composer .btn-mic{ width: 44px; height: 44px; }
}
  /* Chips inside composer - top left */
#activeDocChips {
  position: absolute;
  left: 12px;          /* align to left padding */
  top: 4px;            /* push a bit down from top */
  transform: none;     /* remove the vertical centering */
  display: flex;
  flex-wrap: wrap;     
  gap: 6px;
  max-width: 65%;     
  overflow-x: auto;
  white-space: normal; 
}
.composer {
  padding: 20px;  
}
/* .btn-mic{
  border: 1px solid rgba(0,0,0,.08);
  background: #f2f2f2;
  border-radius: 999px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.btn-mic i { font-size: 1rem; color: #2b2b2b; }
.btn-mic:hover { background:#e9e9e9; }
.btn-mic.recording{
  background:#ffebeb; border-color:#ff9b9b;
  animation: micPulse 1s ease-in-out infinite;
}
.btn-mic.recording i{ color:#c51616; } */
@keyframes micPulse{
  0%{ box-shadow:0 0 0 0 rgba(197,22,22,.35);}
  70%{ box-shadow:0 0 0 10px rgba(197,22,22,0);}
  100%{ box-shadow:0 0 0 0 rgba(197,22,22,0);}
}


.msg.user::after {
  content: "";
  position: absolute;
  right: calc(-1 * var(--avatar-size) - var(--avatar-edge-gap));
  top: 2px;
  width: var(--avatar-size);
  height: var(--avatar-size);
  background-image: var(--user-avatar);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* border-radius: 50%; */ 
  /* border: 2px solid #fff; */
  /* box-shadow: 0 2px 8px rgba(0,0,0,.25); */
    filter: brightness(0) saturate(100%) invert(0);

  z-index: 5 !important;
} 

/* .msg.assistant::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 16px;
  width: 12px;
  height: 12px;
  background: #DDF4E1;
  border-left: 1px solid #BEE9C9;
  border-bottom: 1px solid #BEE9C9;
  transform: rotate(45deg);
  border-bottom-left-radius: 2px;
} */

.chat-scroll:empty {
  position: relative;
}

.chat-scroll:empty::before {
  content: "Good to See You!";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: min(14vh, 120px);
  text-align: center;
  color: #000000;
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.1;
  pointer-events: none;
}

.chat-scroll:empty::after {
  content: "I'm here to assist you, just ask me anything.";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(min(14vh, 120px) + clamp(32px, 5vw, 52px) + 8px);
  text-align: center;
  color: #181818;
  font-size: clamp(14px, 1.6vw, 18px);
  pointer-events: none;
}

.chat-scroll:not(:has(.msg))::before {
  content: "Good to See You!";
  position: absolute;
  left: 50%;
  top: 14vh;
  transform: translateX(-50%);
  text-align: center;
  font-weight: 800;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.1;
  color: #000000;
  pointer-events: none;
}

.chat-scroll:not(:has(.msg))::after {
  content: "I'm here to assist you, just ask me anything.";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(14vh + clamp(32px, 5vw, 52px) + 8px);
  text-align: center;
  font-size: clamp(14px, 1.6vw, 18px);
  color: #181818;
  letter-spacing: .01em;
  pointer-events: none;
}

.chat-scroll:not(:has(.msg)) {
  background: linear-gradient(to bottom, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--chat-bg);
}


.signup-card {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
}

.signup-header {
  background: linear-gradient(135deg, #0ea5e9, #22c55e);
  color: #fff;
  padding: 1rem 1.25rem;
}

.signup-badge {
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  color: #fff;
}

.input-group-text {
  background: #f8f9fa;
  border-right: 0;
  border-radius: 12px 0 0 12px;
}

.form-control {
  border-left: 0;
  border-radius: 0 12px 12px 0;
}

.input-group .btn {
  border-radius: 0 12px 12px 0;
}

.input-group:has(.btn) .form-control {
  border-radius: 0;
}

.form-control:focus {
  box-shadow: 0 0 0 .2rem rgba(34,197,94,.15);
  border-color: #22c55e;
}

.btn:focus {
  box-shadow: 0 0 0 .2rem rgba(34,197,94,.15);
  border-color: #22c55e;
}

.input-group-text:focus {
  box-shadow: 0 0 0 .2rem rgba(34,197,94,.15);
  border-color: #22c55e;
}

.progress {
  background-color: #eef2f7;
  border-radius: 999px;
}

.progress-bar {
  border-radius: 999px;
  transition: width .25s ease;
}

.form-label {
  color: #000 !important;
  font-weight: 600;
}

body.dark .signup-card {
  background: rgba(20,24,28,0.9);
}

body.dark .input-group-text {
  background: #1f242b;
  color: #cbd5e1;
  border-color: #2a2f36;
}

body.dark .form-control {
  background: #101417;
  color: #e8eaed;
  border-color: #2a2f36;
}

body.dark .form-control::placeholder {
  color: #6b7280;
}

body.dark .progress {
  background: #1f242b;
}

.chat-scroll::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--chat-bg-image, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

.chat-scroll > * {
  position: relative;
  z-index: 1;
}

html {
  height: 100%;
  background: var(--outer-bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

body {
  height: 100%;
  background: var(--outer-bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

input {
  font-family: inherit !important;
}

textarea {
  font-family: inherit !important;
}

button {
  font-family: inherit !important;
}

select {
  font-family: inherit !important;
}

.spinner-local {
  position: sticky;
  bottom: 10px;
  background: var(--chat-bg);
  padding: 4px 6px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: .5rem 0;
  color: var(--muted);
}

.spinner-local .bars {
  display: flex;
  gap: 2px;
}

.spinner-local .bar {
  width: 4px;
  height: 12px;
  background: var(--accent);
  animation: wave 1.2s infinite ease-in-out;
  border-radius: 2px;
}

.spinner-local .bar:nth-child(2) {
  animation-delay: .1s;
}

.spinner-local .bar:nth-child(3) {
  animation-delay: .2s;
}

.spinner-local .bar:nth-child(4) {
  animation-delay: .3s;
}

.spinner-local .bar:nth-child(5) {
  animation-delay: .4s;
}

.msg .meta {
  position: absolute !important;
  right: 16px !important;
  bottom: 10px !important;
  margin: 0 !important;
  font-size: 11.5px !important;
  letter-spacing: .02em !important;
  color: #6B829C !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  display: none !important;
}

.msg.assistant.is-short {
  max-width: 1000px !important;
  margin-right: 50px !important; 
}

/* Let long assistant messages breathe */
.msg.assistant.is-long {
  width: auto !important;
  max-width: min(2000px, 92%) !important;  /* allow up to 1000px or 92% of container */
  margin-right: clamp(20px, 6vw, 60px) !important; /* gutter on right */
  box-sizing: border-box;
}

.msg.assistant.is-long .actions {
  right: 12px;
}

.msg.user {
  align-self: flex-end !important;
  background: var(--user-bubble) !important;
  color: #000000 !important;
  min-width: 300px !important;
  max-width: 800px !important;
  padding: 14px 16px 16px !important;
  margin-right: 10px !important;
  line-height: 1.0 !important;
  font-size: 15.6px !important;
  word-break: break-word !important;
  text-align: left !important;
  position: relative !important;
}

.msg.assistant {
  align-self: flex-start !important;
  /* background: var(--assistant-bubble) !important; */
  background-color: none;
  color: #000000 !important;
  /* border: 0.1px solid !important; */
  margin-left: 10px;
  position: relative !important;
  padding: 18px 18px 18px 18px !important;
  line-height: 1.45 !important;
}
.msg.user .content{
  line-height: 1.50 !important;
  color: inherit !important;
  white-space: normal;
  /* padding: 4px 0; */
  margin: .2rem 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.msg.assistant .content p {
  margin: 0.45rem 0 !important;
}

.msg.assistant .content h1 {
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin: 1rem 0 0.3rem !important;
  text-decoration: none !important;
  border: 0 !important;
  font-size: 1.15rem !important;
}

.msg.assistant .content h2 {
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin: 1rem 0 0.3rem !important;
  text-decoration: none !important;
  border: 0 !important;
  font-size: 1.12rem !important;
}

.msg.assistant .content h3 {
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin: 1rem 0 0.3rem !important;
  text-decoration: none !important;
  border: 0 !important;
  font-size: 1.08rem !important;
}

.msg.assistant .content h4 {
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin: 1rem 0 0.3rem !important;
  text-decoration: none !important;
  border: 0 !important;
  font-size: 1.04rem !important;
}

.msg.assistant .content ul {
  list-style: disc !important;
  padding-left: 1.25rem !important;
  margin: 0.35rem 0 !important;
}

.msg.assistant .content ol {
  list-style: decimal !important;
  padding-left: 1.45rem !important;
  margin: 0.35rem 0 !important;
}

.msg.assistant .content li {
  margin: 0.2rem 0 !important;
  line-height: 1.4 !important;
}

.msg.assistant .content li::marker {
  color: var(--accent, #303f3c);
  font-weight: 700;
}
.msg.assistant .content ol::marker {
  color: var(--accent, #1d2121);
  font-weight: 700;
}
.msg.assistant .content ul::marker {
  color: var(--accent, #394a47);
  font-weight: 700;
}

.msg.assistant .content a {
  color: var(--link, #211a7e) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
}

/* .msg.assistant .content code {
  background: rgba(255,255,255,0.07) !important;
	width: 400px;
  border: 1px solid var(--border, #1e2a3d) !important;
  padding: 0.08rem 0.35rem !important;
  border-radius: 6px !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
  font-size: 0.95em !important;
} */

.msg.assistant .content blockquote {
  margin: 0.6rem 0 !important;
  padding: 0.6rem 0.9rem !important;
  border-left: 3px solid var(--accent, #09090a) !important;
  background: rgba(16,163,127,0.08) !important;
  border-radius: 6px !important;
}

.msg.assistant .content hr {
  border: 0;
  border-top: 1px solid var(--border, #1e2a3d) !important;
  margin: 0.8rem 0 !important;
  opacity: 0.7;
}

.msg.assistant .content table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 0.8rem 0 !important;
  font-size: 0.95rem !important;
}

.msg.assistant .content th {
  padding: 0.5rem 0.7rem !important;
  border: 1px solid var(--border, #1e2a3d) !important;
  vertical-align: top !important;
  text-align: left !important;
}

.msg.assistant .content td {
  padding: 0.5rem 0.7rem !important;
  border: 1px solid var(--border, #1e2a3d) !important;
  vertical-align: top !important;
  text-align: left !important;
}

.msg.assistant .content thead th {
  background: color-mix(in srgb, var(--text, #302f2f) 6%, transparent) !important;
  font-weight: 600 !important;
}

.msg.assistant .content img {
  max-width: 60% !important;
  height: auto !important;
  border-radius: 8px !important;
  display: block;
  margin: 0.4rem 0;
}

.msg.assistant .content video {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  display: block;
  margin: 0.4rem 0;
}

.msg.assistant .content {
  line-height: 1.5 !important;
  color: inherit !important;
  white-space: normal;
  padding: 4px 4px 4px 4px;
  margin: .5rem 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  font-size: 1rem !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
}

.msg.assistant .actions {
  margin-top: 15px;
  margin-left: 0;
  display: flex;
  gap: 6px;
}

.msg.assistant .dalle-image-container {
  margin: 15px 0 !important; /* Ensure margin is applied consistently, may need !important due to other chat styles */
}

.msg.assistant .dalle-caption {
  /* Apply the styles that were previously inline */
  font-style: italic !important;
  font-size: 0.9em !important;
  color: #555 !important;
  margin-top: 5px !important;
  padding: 0 !important; /* Remove any padding inherited from a generic .msg content style */
  line-height: 1.4 !important; 
}

@media (max-width: 1100px) {
.msg{ max-width:82%; }
}

@media (max-width: 992px) {
.app{ grid-template-columns:100%; }
  .sidebar{ position:sticky; top:0; z-index:3; }
  .msg{ max-width:94%; }
}

@media (max-width: 1100px) {
.msg{ max-width: 82% !important; }
}

@media (max-width: 992px) {
.msg{ max-width: 94% !important; }
}

@media (min-width: 992px) {
#signupModal .modal-dialog{ max-width:720px; }
}

@media (max-width:576px) {
.msg.assistant{ margin-bottom:26px !important; }
}

@media (max-width: 480px){
  .msg.assistant.is-long{ margin-right: 16px !important; }
}

@keyframes hero-in {
from { transform: translateY(8px) scale(.98); opacity: 0; filter: blur(1px); }
  to   { transform: translateY(0)  scale(1);    opacity: 1; filter: none; }
}

@keyframes ripple-expand {
to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

@keyframes wave {
0%,40%,100%{transform:scaleY(.4)}20%{transform:scaleY(1)}
}


/* ===== Thread list container (vertical scroll only) ===== */
#sessionsAccordion{
  overflow-x: hidden;
  /* allow vertical scroll inside sidebar */
}


/* ===== Thread pill: full width, white like search ===== */
/* .chat-pill{
  display: flex; 
  align-items: center;
  justify-content: space-between;
  gap: 15px;

  width: 100%;                /* all same width */
  /* max-width: 100%;            /* prevent overflow */
  /* padding: 10px 12px;
  border-radius: 16px;

  background: None;
  border: 1px solid var(--search-border);
  color: var(--pill-text);

  text-align: left;
  font-weight: 200;
  outline: none;

  box-shadow: 0 1px 0 rgba(255,255,255,.65) inset, 0 1px 1.5px rgba(0,0,0,.06);
  transition: background .15s ease, border-color .2s ease, box-shadow .2s ease, transform .1s ease;
} */ 

/* title truncation so no horizontal scroll */
.chat-pill .chat-title{
  flex: 1 1 auto;
  min-width: 0;               /* enable ellipsis */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* the inline dots on the right */
.chat-pill .pill-dots{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 28px; 
  height: 28px;
  border-radius: 20px;

  background: var(--search-bg);
  color: #666;
  font-weight: 700; 
  font-size: 16px; 
  line-height: 1;
}

.chat-pill:hover{
  background: #e4e2e2;
  border-radius: 15px;
  height: 35px;
}

.chat-pill:hover .pill-dots{
  border-color: #d8d8d8;
  color: #333;
}

/* Selected chat state */
.chat-pill.active-session{
  /* background: #eaf4ff;  */
  background-color: #D9D9D9; 
  border-radius: 15px;
   /* soft blue wash for active item */
}


.chat-scroll::before ::-webkit-scrollbar{ width: 10px; }
.chat-scroll::before ::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.15);
  border-radius: 12px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.chat-scroll::before ::-webkit-scrollbar-thumb:hover{
  background: rgba(0,0,0,.28);
}


/* Pill must be the positioning context */
.chat-pill{
  position: relative;                 /* <— important */
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; max-width: 100%;
  padding: 10px 10px; border-radius: 0px;
  background: none; border-bottom: none ; border-top: none; border-left: none; border-right: none;
  color: #2a2a2e; font-weight: 300;
  height: 35px;
}


/* dots */
.pill-dots{
  flex: 0 0 auto;
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* HIDDEN menu by default + absolute so it doesn't take space */
.pill-menu{
  position: absolute;                 /* <— critical */
  right: 8px; top: 42px;              /* below the dots */
  display: none;                      /* <— hide by default */
  z-index: 9999;
  min-width: 120px; 
  /* padding: 6px; */
  background: #e6edf3 ;
  color: #0f1524;
  border: 1px solid #e6edf3; border-radius: 10px;
  font-size: 12px;
  /* box-shadow: 0 8px 18px rgba(0,0,0,.25); */
}
.pill-menu.open{ display: block; ; z-index: 9999;}    /* only show when toggled */
.pill-menu.open:hover{z-index: 9999;}

.pill-menu-item{
  display: block; width: 100%; text-align: left;
  border: 0; color: #000000;
  z-index: 9999;
  padding: 8px 10px; border-radius: 8px; font-weight: 400; cursor: pointer;
  z-index: 9999;
}
.pill-menu-item:hover{ background: #437ff7; }
.pill-menu-item.danger:hover{ background: #da2f2f; }

/* === Actions under the assistant bubble, no borders, mono icons === */


/* place the actions OUTSIDE the bubble, just below it */
.msg.assistant .actions{
  position: absolute !important;
  left: 16px !important;            /* align with bubble’s left edge */
  margin: 0 !important;
  background: transparent !important;
  display: flex !important;
  gap: 10px !important;
}

/* make buttons icon-only: black/white, no borders/boxes */
.msg.assistant .actions .btn:not(.active){
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 4px !important;
  line-height: 1 !important;
  color: #080808 !important;           /* white icon on dark chat bg */
  opacity: .85;
}
.msg.assistant .actions .btn:hover{
  transform: translateY(-1px);
  opacity: 1;
}

/* slightly larger icons and force monochrome */
.msg.assistant .actions .btn i{
  font-size: 18px !important;
  filter: grayscale(1) contrast(1.2);
}

/* neutralize earlier position/margins so our placement wins */
.msg.assistant .actions{ margin-top: 0 !important; margin-left: 0 !important; }
.msg.assistant.is-long .actions{ right: auto !important; }

.spinner-local {margin-left: 10px;}


/* === Mobile-first overrides (append at end of chat.css) === */

/* sensible defaults that we can shrink on small screens */


/* Global text sizing that adapts by viewport */
html { font-size: clamp(14px, 1.9vw, 16px); }     /* scales down on phones */
body { line-height: 1.5; }


/* Remove hard min/max width on user bubble for small screens */
@media (max-width: 576px) {
  .msg.user {
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 12px !important;
  }
}

/* Tighten gutters + reduce avatar size on smaller screens */
@media (max-width: 768px) {
  :root {
    --avatar-size: 36px;
    --avatar-edge-gap: 8px;
    --stage-pad: 8px;
  }
  .chat-scroll {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .msg.assistant { margin-left: 12px !important; }
}

/* Ultra-small phones: simplify even more */
@media (max-width: 480px) {
  html { font-size: 14px; } /* cap down further */
  .topbar { padding: 12px 14px !important; }
  .composer {
    gap: .5rem;
    padding: 10px;
  }
  .composer textarea { height: 40px; }
  /* Avatars get tiny, or hide if you prefer */
  :root { --avatar-size: 28px; }
  /* If you want to hide avatars entirely on tiny screens, uncomment:
  .msg.assistant::before, .msg.user::after { display: none !important; }
  */
}

/* Sidebar shouldn’t crush content on tablets/phones */
@media (max-width: 992px) {
  .app { grid-template-columns: 100% !important; }
  .sidebar { margin: 0 !important; }
}

/* Prevent fixed empty gutters when there are no messages */
.chat-scroll:empty,
.chat-scroll:not(:has(.msg)) {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Make timestamps/actions spacing consistent if shown later */
.msg .actions { gap: 6px; }

/* === Remove avatars from chat bubbles === */
/* .msg.assistant::before,
.msg.user::after {
  display: none !important;
  content: none !important;
  background: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
} */
/* Hide scrollbar arrows in WebKit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

.msg.user{
  background: #f1efef;              /* match your current look */
  border-radius: 20px;
  box-shadow: 0 4px 4px rgba(0,0,0,0.15),
              0 2px 4px rgba(0,0,0,0.25) !important; /* stronger + forced */
}
.msg.assistant {
  background: none;      
  border: none;        /* match your current look */
  /* box-shadow: 0 2px 4px rgba(0,0,0,0.25) !important; stronger + forced */
}
/* .chat-utils{
  display: flex; 
  align-items: center; 
  background: #eae5e5; 
  border-radius: 20px; 
  padding: 6px 10px; box-shadow: 0  0 2px px rgba(0,0,0,0.1); 
  transition: box-shadow 0.2s ease;height: 45px;     /* wider than before, adjust as needed */
  /* width: 95%;
} */ 
.chat-utils{
  display: flex; 
  align-items: center; 
    background: #eae5e5; 
  border-radius: 15px; 
  padding: 6px 10px; box-shadow: 0  0 2px px rgba(0,0,0,0.1); 
  /* transition: box-shadow 0.2s ease;height: 45px;     wider than before, adjust as needed */
  width: 95%;
  height: 40px;
  margin-bottom: 10px;
}

.brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.brand-logo-left {
  height: 45px;
  margin-left: -15px;
  margin-top: 10px;
}
.brand-logo-right {
  height: 45px;
  margin-left: 100px;
  margin-top: 10px;
}

.nav-icon {
  width: 18px;
}

.divider {
  border: 0;
  height: 1px;
  background: #151515;
  margin: 0px 0 0 0;
}

.side-nav {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.side-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: 5px 10px;
  color: #111;
  text-decoration: none;
  background: None;
  font-size: 14px;
  height: 35px;

}
.side-link:hover{
  background: #e4e2e2;
  border-radius: 15px;
  height: 35px;
}

.disabled-link {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}
.side-section {
  padding: 0px 10px;
  font-size: .8rem;
  color: #3b3f44;
}
.side-bottom-bar {
  margin-top: auto;
  padding-bottom: 10px;
}

/* ===== Chat Search ===== */
.chat-history {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.search-icon {
  height: 18px;
  margin-right: 8px;
  opacity: 0.7;
}
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: #333;
  border-radius: 15px;
  background-color: #eae5e5;
}
.btn-clear {
  border: none;
  border-radius: 15px;
  padding: 5px 8px 5px 8px;
  font-size: 13px;
  cursor: pointer;
  background: transparent;
  transition: background 0.2s ease;
}
.btn-clear:hover { background: #d4d4d4; }

/* ===== Main Area ===== */
.topbar {
  margin: 0px 0px 0 10px;
  padding: 18px 24px;
  background: var(--chat-bg);
  border-bottom: none;

}
#greeting {
  font-size: 1.1rem;
  margin: 0;
}


.response-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ===== Composer ===== */
.btn-send {
  padding: .55rem .75rem;
  color: var(--muted);
  transition: .15s ease;
}
.btn-send:hover {
  background: #ffffff29;
  transform: translateY(-1px);
}

/* ===== Messages ===== */
.msg.user {
  align-self: flex-end;
  background: var(--user-bubble);
}
.msg.assistant {
  align-self: flex-start;
}
.msg .content { line-height: 1.5; }

/* ===== Chat pills (sessions) ===== */
.chat-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  height: 35px;
  width: 100%;
  background: none;
  border: none;
  color: #2a2a2e;
}
.chat-pill.active-session { background: #D9D9D9; border-radius: 15px; }
.chat-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pill-dots { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; }

/* ===== Responsive ===== */
@media (max-width: 992px) {
  .app { grid-template-columns: 100%; }
  .sidebar { position: sticky; top: 0; z-index: 3; }
}
@media (max-width: 576px) {
  .msg.user { max-width: 100%; }
}
.ask-spinner-container {
  position: sticky;
  bottom: 0;
  background: #fff;   /* match chat background */
  padding: 6px 10px;
  z-index: 5;
}
/* Only the global ask spinner at the very bottom should be sticky */
#ask-spinner-container { position: sticky; bottom: 0; }

/* Inline regen spinner must not be sticky */
.spinner-inline { position: static !important; }   /* or .spinner-local when used for regen */

/* Make all local spinners non-sticky (so they don't follow on scroll) */
.spinner-local {
  position: static;     /* was: sticky */
  bottom: auto;         /* was: 10px */
}

/* Ensure the container at the bottom is not sticky either */
#ask-spinner-container,
.ask-spinner-container {
  position: static;     /* was: sticky */
  bottom: auto;
}

/* Consistent button box */
.msg.assistant .actions .btn {
  background: transparent !important;
  border: 1px solid transparent !important; /* reserve space so no shifting */
  box-shadow: none !important;
  padding: 4px !important;
  line-height: 1 !important;
  color: #444 !important;
  opacity: 0.75;
  transition: opacity 0.2s, transform 0.15s;
}

/* Icons only, no box fill */
.msg.assistant .actions .btn i {
  font-size: 18px !important;
  color: #444 !important;
  filter: none !important;
  transition: color 0.2s, opacity 0.2s;
}

.composer{ 
  position: relative;                /* anchor for absolute tools */
  min-height: 68px;                  /* taller bar for large buttons */
  padding-right: 128px;              /* reserve space for the tools on the right */
}
.msg.user.first-of-session .content {
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1.35;
  margin-bottom: .25rem;
}

/* pin the tools to the right, vertically centered */
.composer .composer-tools{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);       /* center vertically */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* make both buttons large, round, and easy to click */
.composer .btn-send,
.composer .btn-mic{
  width: 45px;
  height: 45px;
  border-radius: 999px;
  padding: 1px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* mic button look */
.composer .btn-mic{
  background: #f2f2f2;
  border: 1px solid 444444;
}
.composer .btn-mic i{ font-size: 1.rem; }
.composer .btn-mic:hover{ background:#444444; color: #ffffff; border:  1px solid #f2f2f2 ;}
.composer .btn-mic.recording{ background:#ffebeb; border-color:#ff9b9b; }

/* send button look */
.composer .btn-send{
  /* background: #444444; */
    background: #f2f2f2;
  color: #444444;
  border: none;
  font-size: 1rem;                /* bigger “➤” */
  line-height: 1;
}
.composer .btn-send:hover{ background:#444444; color: #ffffff; border:  1px solid #f2f2f2 ;}

/* responsive tweak */
@media (max-width: 768px){
  .composer{ min-height: 62px; padding-right: 116px; }
  .composer .btn-send, .composer .btn-mic{ width: 44px; height: 44px; }
}
  /* Chips inside composer - top left */
#activeDocChips {
  position: absolute;
  left: 12px;          
  top: 4px;           
  transform: none;     
  display: flex;
  flex-wrap: wrap;     
  gap: 6px;
  max-width: 65%;     
  overflow-x: auto;
  white-space: normal; 
}
.composer {
  padding: 20px;  
}
.btn-mic{
  border: 1px solid rgba(0,0,0,.08);
  background: #f2f2f2;
  border-radius: 999px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.btn-mic i { font-size: 1rem; color: #2b2b2b; }
.btn-mic:hover { background:#e9e9e9; }
.btn-mic.recording{
  background:#ffebeb; border-color:#ff9b9b;
  animation: micPulse 1s ease-in-out infinite;
}
.btn-mic.recording i{ color:#c51616; }
@keyframes micPulse{
  0%{ box-shadow:0 0 0 0 rgba(197,22,22,.35);}
  70%{ box-shadow:0 0 0 10px rgba(197,22,22,0);}
  100%{ box-shadow:0 0 0 0 rgba(197,22,22,0);}
}
/* ===== Append this block to the END of your old CSS ===== */

/* small fixes / removals */
.sidebar{ transform:none; }
a:hover{ filter:none; }
.btn-send:hover{ transform:none; }

/* chat layout tweaks */
.chat-row{ margin:60px 800px; }
.app{ grid-template-columns:270px 1fr !important; }
.chat-scroll{
  padding-bottom:40px !important;
  grid-row:2;
}

/* composer & input bar */
.composer-wrap{ justify-content:center; }
.composer{
  max-width:60vw;
  align-self:center;
  padding:20px;
  border-radius:30px;
  justify-content:center;
}
@media (max-width:768px){
  .composer{ min-height:62px; padding-right:116px; }
  .composer .btn-send,
  .composer .btn-mic{ width:44px; height:44px; }
}

/* chips inside composer (top-left) */
#activeDocChips{
  position:absolute;
  left:12px;
  top:4px;
  transform:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-width:65%;
  overflow-x:auto;
  white-space:normal;
}

/* message/meta + body size */
.msg.assistant .meta{ color:#6B829C !important; }
.msg.user .meta{ letter-spacing:.02em !important; }
.msg.assistant .body{ font-size:14px; }

/* avatars and empty state title */
.avatar{ width:40px; }
.chat-scroll:empty::before{
  left:40%;
  transform:none;
}

/* branding */
.brand-logo-left{ margin-left:-10px; margin-top:5px; }
.brand-logo-right{ margin-left:90px; margin-top:5px; }

/* buttons/links */
.btn-clear{ border-radius:10px; padding:10px; }
.side-link:hover{ border-radius:20px; height:35px; }

/* mic pulse animation */
@keyframes micPulse{
  0%{ box-shadow:0 0 0 0 rgba(197,22,22,.35);}
  70%{ box-shadow:0 0 0 10px rgba(197,22,22,0);}
  100%{ box-shadow:0 0 0 0 rgba(197,22,22,0);}
}

/* Hover tints */
.msg.assistant .actions .btn.btn-outline-success:hover i { color: #198754 !important; opacity: 1; }
.msg.assistant .actions .btn.btn-outline-danger:hover i { color: #dc3545 !important; opacity: 1; }
.msg.assistant .actions .btn.btn-outline-secondary:hover i { color: #0d6efd !important; opacity: 1; }

/* Active (clicked/toggled) states */
.msg.assistant .actions .btn.btn-outline-success.active i { color: #198754 !important; opacity: 1; }
.msg.assistant .actions .btn.btn-outline-danger.active i { color: #dc3545 !important; opacity: 1; }
.msg.assistant .actions .btn.btn-outline-secondary.active i { color: #0d6efd !important; opacity: 1; }

/* Container + toolbar for copyable code blocks */
.code-block-container {
  position: relative;
  margin: 10px 0;
  border-radius: 10px;
  background: var(--outer-bg);
  border: none;
  overflow: hidden;
}

/* toolbar */
.code-toolbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
  background: var(--outer-bg);
  border-bottom: 1px solid rgba(11,22,35,.12);
  font-size: 12px;
}

.code-lang {
  opacity: .8;
  text-transform: capitalize;
}

/* button */
.code-copy-btn {
  border: 1px solid rgba(0,0,0,.18);
  background: #f5f5f5;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
}
.code-copy-btn:hover { background: #e9e9e9; }

/* make room for toolbar and avoid double-styling with your existing pre rules */
.msg.assistant .content pre.code-pre {
  margin-top: 10px !important;
  background: var(--outer-bg) !important;
  padding: 44px 14px 12px 14px !important; /* top padding for toolbar */
  max-width: 100% !important;              /* preserve your chat width cap */
  border: none;
  font-family: "Söhne Mono", "Söhne", "Helvetica Neue", "Arial", monospace !important;
  font-size: 14px !important;
  line-height: 1.6 !important;             /* matches ChatGPT’s code line spacing */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #202123;
  background-color: #f7f7f8 !important;    /* subtle contrast for code area */
  border-radius: 8px;
}


.msg.assistant .content pre {
  border: none;
}

.user-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: -15px;
}

.user-actions .edit-btn {
  background: none;
  border: none;
  color: #666;
  font-size: 14px;
  cursor: pointer;
}

.user-actions .edit-btn:hover {
  color: #000;
}

/* ================================
   ChatGPT-like Upload Chips
=================================== */

/* Chips row above composer */
#activeDocChips {
  position: relative;   /* remove absolute */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

/* Clean chip look */
.upload-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--outer-bg);
  border: 1px solid var(--outer-bg);
  border-radius: 20px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 2;
  color: #111;
}

/* Spinner */
.upload-chip .chip-loader {
  width: 14px;
  height: 14px;
  border: 2px solid #ccc;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

/* Hide loader on success */
.upload-chip .chip-loader[style*="display: none"] {
  display: none !important;
}

/* Error icon */
.upload-chip .chip-status {
  font-size: 14px;
  color: #d00;
}

/* Remove button */
.upload-chip .chip-remove {
  cursor: pointer;
  font-size: 14px;
  color: #888;
  background: transparent;
  border: none;
}
.upload-chip .chip-remove:hover {
  color: #000;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.attached-docs {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.attached-doc {
  background: transparent;
  color: #1a73e8;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
}