/* ==========================================================================
   Xero AI · layout.css
   App frame: sidebar, top bar, chat area, welcome screen and the composer.
   ========================================================================== */

.app { display: flex; width: 100%; height: var(--app-h, 100dvh); margin-top: var(--app-y, 0); } /* --app-h / --app-y follow the visible area while the keyboard is open */

/* ---- Sidebar ---- */
.sidebar {
  position: relative;
  flex: 0 0 var(--sidebar-w);
  width: var(--sidebar-w);
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 4px 16px 16px; /* the logo and everything under it sit 4px higher */
  overflow: hidden;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-edge);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  transition: transform .25s ease, border-color .3s ease, margin-left .26s ease;
  container-type: inline-size; /* lets the contents switch to icons only when the panel gets narrow */
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 5px 20px 0; /* logo centre sits on the same vertical line as the + of New chat and the profile picture */
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -.7px;
  color: inherit;
  text-decoration: none;
}
.brand span { white-space: nowrap; } /* "Xero AI" never breaks onto a second line */
.logo, .mini-logo { display: grid; place-items: center; background: #FFFFFF; }
.logo { flex: 0 0 auto; width: 37px; height: 37px; border-radius: 12px; } /* never squeezed, so it stays put while the panel is dragged narrow */
.logo svg { width: 29px; height: 29px; }

.sidebar-scroll {
  position: relative;
  overscroll-behavior: contain; /* pulling the list never pulls the whole page */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: -16px; /* pushes the scroll bar out to the panel's right edge */
  padding-right: calc(16px - var(--sbw, 0px)); /* the scroll bar's own width comes out of this */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%);
}
/* Pull the chat list down to reload it (phones and tablets): a round badge slides out from under the logo and name. */
.ptr { position: absolute; z-index: 6; left: 0; right: 0; top: var(--ptr-top, 60px); height: 110px; overflow: hidden; pointer-events: none; }
.ptr-badge {
  position: absolute; left: 50%; top: 0; width: 40px; height: 40px; margin-left: -20px;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--glass-strong); color: var(--text);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14), 0 0 0 1px var(--glass-edge);
  transform: translateY(var(--ptr-y, -46px));
  opacity: 0;
  transition: transform .22s ease, opacity .18s ease;
}
.ptr.is-dragging .ptr-badge { transition: none; }
.ptr.is-visible .ptr-badge { opacity: 1; }
.ptr-badge svg { width: 22px; height: 22px; opacity: .3; transition: opacity .18s ease; } /* pale until the pull is long enough ... */
.ptr.is-ready .ptr-badge svg, .ptr.is-refreshing .ptr-badge svg { opacity: 1; } /* ... then solid black */
.ptr-arrow { transform-origin: 12px 12px; transform: rotate(var(--ptr-rot, 0deg)); }
.ptr-arc { stroke-dasharray: calc(var(--ptr-p, 0) * 100) 100; } /* grows backwards from the arrow head */
.ptr-head { transform-box: view-box; transform-origin: 20px 12px; transform: scale(min(1, calc(var(--ptr-p, 0) * 1.6))); } /* the head starts from nothing, grows as you pull and is full size before the end */
/* While the list reloads: a plain spinning arc, no arrow head. */
.ptr.is-refreshing .ptr-head { opacity: 0; }
.ptr.is-refreshing .ptr-arc { animation: ptr-dash 1.3s ease-in-out infinite; }
.ptr.is-refreshing .ptr-arrow { animation: ptr-spin .9s linear infinite; }
@keyframes ptr-spin { from { transform: rotate(310deg); } to { transform: rotate(670deg); } }
@keyframes ptr-dash { 0%, 100% { stroke-dasharray: 10 100; } 50% { stroke-dasharray: 62 100; } }
.section-label {
  margin: 20px 10px 6px;
  color: var(--muted);
  font-size: var(--ui-size);
  font-weight: 600;
  letter-spacing: .3px;
}

/* Pale black behind "New chat" and the open chat (a faint white in dark mode) */
.sidebar { --row-bg: rgba(0, 0, 0, .05); }
html[data-theme="dark"] .sidebar { --row-bg: rgba(255, 255, 255, .06); }

.history-item {
  position: relative;
  margin: 1px 0;
  padding: 0 4px;
  border-radius: 8px;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  transition: background .12s ease;
}
.history-item:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.history-item.is-current { background: var(--row-bg); }
.history-title {
  display: block;
  width: 100%;
  padding: 8px 9px;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: var(--ui-size);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: inherit;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* Three-dot options button: appears on hover; always visible on touch screens. */
.history-more {
  position: absolute;
  top: 50%;
  right: 0; /* computers: the dots sit where the "..." of a long title ends */
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity .12s ease, background .12s ease, color .12s ease;
}
.history-more svg { width: 16px; height: 16px; }
.history-more:hover { background: color-mix(in srgb, var(--text) 8%, transparent); color: var(--text); }
.history-item:hover .history-more, .history-more:focus-visible { opacity: 1; pointer-events: auto; }
.history-item:hover .history-title { padding-right: 30px; } /* a small gap before the dots button */
.history-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-text-in { position: relative; left: 0; } /* inline (not inline-block / transform) so the "..." still shows for a long title; leaving the chat: back to the start instantly, no slide */
/* While hovered: no "...", the end of a long title slides into view. */
.history-item:hover .history-text { text-overflow: clip; }
.history-item:hover .history-text-in { left: var(--title-shift, 0px); transition: left var(--title-time, .6s) cubic-bezier(.3, .3, .35, 1) var(--title-delay, .35s); } /* steady at first, easing to a stop when the last word is fully visible */
@media (hover: none) {
  .history-more { right: -3px; opacity: 1; pointer-events: auto; } /* phones and tablets: out to the right edge of the "+ New chat" box */
  .history-title { padding-right: 22px; } /* the "..." of a long title sits a little further right */
}
.history-empty {
  margin: 2px 4px;
  padding: 10px 11px;
  border-radius: 11px;
  color: var(--muted);
  font-size: var(--ui-size);
  line-height: 1.5;
}

.sidebar-footer { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding-top: 0; align-self: flex-start; max-width: 100%; border-radius: 14px; transition: background .12s ease, box-shadow .12s ease; }
/* Hovering the picture or the name lights up the whole row with a pale background (no size change). The row is only as wide as the name; the shadow adds 2px of room around it without moving anything. */
.sidebar-footer:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 70%, transparent); }
.profile-btn {
  margin-left: -1.5px; /* centre on the same vertical line as the logo and the + of New chat */
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: var(--glass-strong);
  box-shadow: var(--shadow), var(--glass-hi);
  transition: transform .2s ease;
}
.profile-btn .avatar { width: 35px; height: 35px; }
.sidebar-user { flex: 0 1 auto; min-width: 0; padding-right: 12px; cursor: pointer; -webkit-user-select: none; user-select: none; }
/* Until the server says who is signed in (<html data-auth="pending">), the profile area is a light placeholder instead of "Guest" and "Log In". */
html[data-auth="pending"] #loginBtn { visibility: hidden; }
html[data-auth="pending"] #sidebarAvatar { color: transparent; background: color-mix(in srgb, var(--text) 5%, transparent); }
html[data-auth="pending"] #sidebarAvatar::after, html[data-auth="pending"] #sidebarName::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent);
  transform: translateX(-100%); animation: sk-sweep 1.8s ease-in-out infinite;
}
html[data-auth="pending"] #sidebarAvatar, html[data-auth="pending"] #sidebarName { position: relative; overflow: hidden; }
html[data-auth="pending"] #sidebarName { width: 96px; height: 14px; border-radius: 7px; color: transparent; line-height: 14px; background: color-mix(in srgb, var(--text) 3.5%, transparent); }
.sidebar-user strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--ui-size); font-weight: 600; }

.avatar {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--ui-size);
  font-weight: 700;
  letter-spacing: .5px;
}
.avatar-img { width: 100%; height: 100%; display: block; object-fit: cover; }

.new-chat {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  overflow: hidden;
  padding: 8px 9px; /* same height as a chat row; text starts at the same left edge as the Pinned / Recent headings */
  border: 0;
  border-radius: 8px;
  background: var(--row-bg);
  font-size: var(--ui-size);
  line-height: 1.4;
  font-weight: 600;
  white-space: nowrap; /* "New chat" never breaks onto a second line */
}
.new-chat > span { color: var(--accent); font-size: 1.1875rem; line-height: 1; }
/* Light sweep across the button on hover (the button itself does not move or change border). */
.new-chat::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, #fff 45%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s ease;
  pointer-events: none;
}
.new-chat:hover::before { transform: translateX(120%); }

/* Loading placeholder for the chat list (same row height as a chat row): very light grey with a soft glow sweeping across. */
.history-skeleton { display: flex; align-items: center; padding: 11px 9px; }
.history-skeleton span {
  position: relative; display: block; overflow: hidden; height: 14px; width: 70%; border-radius: 7px;
  background: color-mix(in srgb, var(--text) 3.5%, transparent);
}
.history-skeleton span::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--text) 6%, transparent), transparent);
  transform: translateX(-100%); animation: sk-sweep 1.8s ease-in-out infinite;
}
.history-skeleton:nth-child(2) span { width: 56%; }
.history-skeleton:nth-child(3) span { width: 82%; }
.history-skeleton:nth-child(4) span { width: 48%; }
.history-skeleton:nth-child(5) span { width: 74%; }
.history-skeleton:nth-child(6) span { width: 62%; }
.history-skeleton:nth-child(7) span { width: 78%; }
@keyframes sk-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .history-skeleton span::after { animation: none; } }

.sidebar-resizer {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 100%;
  z-index: 5;
  cursor: col-resize;
  touch-action: none;
}
.sidebar-resizer:focus-visible { outline: none; }
/* The wide grab area stays invisible; only the sidebar's own 1px edge lights up, like the message box border. */
.sidebar:has(.sidebar-resizer:hover), .sidebar:has(.sidebar-resizer:focus-visible), body.is-resizing .sidebar {
  border-right-color: color-mix(in srgb, var(--accent) 45%, var(--glass-edge));
}
body.is-resizing { cursor: col-resize; -webkit-user-select: none; user-select: none; }
body.is-resizing .sidebar { transition: none; }
.sidebar-backdrop { display: none; }

/* ---- Main column ---- */
.main { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none; display: flex; align-items: center; justify-content: space-between; padding: 10px 24px 10px 16px; } /* right gap = the gap left of the Xero AI logo; the bar floats, so messages reach the top edge of the window */
.topbar > * { pointer-events: auto; }
body.signed-in .topbar-auth { display: none; }
body.signed-in .topbar { position: absolute; top: 0; left: 0; z-index: 3; pointer-events: none; }
body.signed-in .topbar > * { pointer-events: auto; }
.menu-btn {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
}
.menu-btn svg { width: 24px; height: 24px; }
.menu-btn:active { transform: scale(.96); }
.topbar-auth { display: flex; gap: 8px; margin-left: auto; }
.auth-short { display: none; } /* phones and tablets show just "Log In" */
.auth-btn {
  padding: 7px 11px; /* a little smaller than before so it looks the same size as the other boxes */
  border: 0;
  border-radius: 8px; /* same corners as the "+ New chat" box */
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
/* Same light sweep as "+ New chat": it runs across when you hover, and runs back when you click. */
.auth-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, color-mix(in srgb, #fff 45%, transparent) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.auth-btn:hover::before { transform: translateX(120%); transition: transform .7s ease; }
.auth-btn:active::before { transform: translateX(-120%); transition: transform .7s ease; }
.auth-btn.is-secondary { border: 1px solid color-mix(in srgb, var(--text) 10%, transparent); background: var(--glass-strong); color: var(--text); }
.auth-btn.is-secondary:hover { background: var(--soft); }
/* Desktop only: "Log In / Sign Up" has no border and the same soft green tint as "+ New chat", with the same light sweep on hover. */
@media (min-width: 701px) and (hover: hover) and (pointer: fine) {
  .topbar-auth { position: relative; top: 1.5px; } /* centres the button on the same line as the Xero AI logo */
  .topbar-auth .auth-btn:not(.is-secondary) { border: 0; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); }
}

/* ---- Chat area ---- */
.chat {
  flex: 1;
  overflow-y: auto;
  padding: 25px 20px;
  scrollbar-gutter: stable both-edges; /* keeps messages centred above the message box */
}
/* just after sending: only the last line of the answer above is shown, the rest above it is hidden until the reader scrolls */
.chat.pin-clip { -webkit-mask-image: linear-gradient(to bottom, transparent var(--pin-clip, 0px), #000 calc(var(--pin-clip, 0px) + 3px)); mask-image: linear-gradient(to bottom, transparent var(--pin-clip, 0px), #000 calc(var(--pin-clip, 0px) + 3px)); }
.messages { width: 100%; max-width: 760px; margin: 0 auto; }
body:not(.signed-in) .chat { padding-top: 56px; } /* the first message starts below the floating Log In button */

/* Empty chat: heading and message box are centred together. */
.main:has(#welcome) { justify-content: center; }
.main:has(#welcome) > .chat { flex: 0 0 auto; overflow: visible; padding: 0 20px; -webkit-mask-image: none; mask-image: none; scrollbar-gutter: auto; }
.main:has(#welcome) > .topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; }
.welcome { max-width: 700px; margin: 0 auto 34px; text-align: center; transform: translateY(-175px); animation: appear .7s ease both; }
.welcome h1 { margin: 0; font-size: clamp(1.6875rem, 4vw, 2.5625rem); font-weight: 550; line-height: 1.2; letter-spacing: -1.7px; }
.welcome h1 span { color: var(--accent); }

/* ---- Composer ---- */
.composer-area { position: relative; z-index: 2; flex-shrink: 0; padding: 0 20px 14px; } /* no gap above: messages run right down to the box border */

.composer {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 7px; /* top and bottom gap between the box edge and the buttons */
  border: 1px solid rgba(0, 0, 0, .05); /* resting edge: a barely visible pale black (the focused box below keeps its green edge) */
  border-radius: 28px;
  background: var(--composer-bg);
  /* Three faint layers, equal on all four sides: a very thin ring, a small soft spread, a longer very soft spread. */
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .05), 0 0 8px rgba(0, 0, 0, .05), 0 0 28px rgba(0, 0, 0, .035);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  transition: border-color .3s ease;
}
.composer.drag-over {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--glass-edge));
}

.composer-row { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px 40px; column-gap: 10px; align-items: center; }
#prompt {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  min-height: 40px;
  max-height: 180px;
  margin: 0;
  padding: 7.6px 2px;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font-size: 1rem;
  line-height: 1.55;
}
#prompt::placeholder { color: var(--muted); }

/* Long message: text on the full width, buttons on their own row underneath. */
.composer.is-multiline .composer-row { grid-template-columns: auto minmax(0, 1fr) auto auto; row-gap: 6px; align-items: center; }
.composer.is-multiline #prompt { grid-column: 1 / -1; padding: 8px 4px 0; }
.composer.is-multiline .upload-btn { grid-row: 2; }
.composer.is-multiline .effort-picker { grid-row: 2; }
.composer.is-multiline .send-btn { grid-row: 2; margin-left: 8px; }

.round-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transition: background .2s ease, color .2s ease, transform .15s cubic-bezier(.3, .7, .4, 1), scale .15s cubic-bezier(.3, .7, .4, 1);
  touch-action: manipulation;
}
.round-btn.is-pressed:not(:disabled) { scale: .86; }
.round-btn svg { width: 18px; height: 18px; }

.upload-btn { grid-column: 1; grid-row: 1; margin-left: 4px; background: var(--accent); }
.upload-btn:hover { background: var(--accent-hover); }
.upload-btn:disabled, .upload-btn:disabled:hover { background: var(--accent); opacity: .4; cursor: not-allowed; } /* no uploads once the free messages are used up */
/* "+" drawn with two bars, so it stays centred when the button scales. */
.upload-btn span { position: relative; width: 100%; height: 100%; transition: rotate .2s cubic-bezier(.3, .7, .4, 1); }
.upload-btn span::before, .upload-btn span::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px; /* a whole pixel, so the flat bar is as crisp as the upright one */
  border-radius: 2px;
  background: var(--on-accent);
  transform: translate(-50%, -50%);
}
.upload-btn span::after { transform: translate(-50%, -50%) rotate(90deg); }
.upload-btn.is-pressed span { rotate: 45deg; }

.effort-picker { position: relative; grid-column: 3; grid-row: 1; display: grid; place-items: center; }
.effort-btn { border: 2px solid var(--accent); background: transparent; color: var(--accent); }
.effort-btn svg { width: 20px; height: 20px; }
.effort-btn:hover, .effort-btn[aria-expanded="true"] { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.effort-btn:disabled { opacity: .5; }

.effort-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 10px);
  z-index: 50;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--glass-edge);
  border-radius: 16px;
  background: var(--popup-bg);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  box-shadow: 0 0 16px rgba(16, 24, 19, .14); /* same size on all four sides */
  animation: pop .16s ease both;
}
.attach-menu { left: 0; right: auto; min-width: 190px; } /* opens above the + button */
.effort-opt {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  text-align: left;
}
.effort-opt:hover, .effort-opt:focus-visible { background: var(--soft); outline: none; }
.effort-opt > svg:first-child { width: 20px; height: 20px; color: var(--accent); }
.effort-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; }
.effort-text strong { font-size: 0.875rem; font-weight: 600; }
.effort-text small { color: var(--muted); font-size: 0.75rem; }
.effort-check { width: 16px; height: 16px; color: var(--accent); opacity: 0; }
.effort-opt[aria-checked="true"] .effort-check { opacity: 1; }

.send-btn { position: relative; grid-column: 4; grid-row: 1; justify-self: end; margin-right: 4px; background: var(--accent); color: var(--on-accent); will-change: scale; } /* always on its own layer: otherwise the arrow jumps about 1px sideways when the press animation ends */
.send-btn:hover { background: var(--accent-hover); }
.send-btn:disabled, .send-btn:disabled:hover { background: var(--accent); opacity: .4; cursor: not-allowed; } /* pale and unpressable once the free messages are used up */
.send-btn svg { width: 27px; height: 27px; stroke-width: 1.78; transition: opacity .2s ease, transform .3s cubic-bezier(.3, .7, .4, 1); }
/* While the AI answers, the arrow turns into a rounded square (stop). */
.send-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: currentColor;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.3);
  transition: opacity .2s ease, transform .3s cubic-bezier(.3, .7, .4, 1);
  pointer-events: none;
}
.send-btn.is-stop svg { opacity: 0; transform: scale(.4); }
.send-btn.is-stop::after { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.edit-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--glass-edge));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 0.8125rem;
  line-height: 1.4;
}
.edit-banner svg { width: 17px; height: 17px; color: var(--accent); }
.edit-banner span { flex: 1; }
.edit-banner-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 1.25rem;
  line-height: 1;
}
.edit-banner-close:hover { background: var(--soft); color: var(--text); }

/* Shown above the message box when a visitor has used the free messages of the day. */
.guest-notice { margin: 0 auto 8px; max-width: 760px; text-align: center; color: var(--accent); font-size: 0.8125rem; font-weight: 600; }
/* Under the message box (Strong mode only): the Effort picker on the right. The strip grows and shrinks smoothly, so the box glides. */
.composer-foot { max-width: 760px; margin: 0 auto; display: flex; justify-content: flex-end; align-items: center; height: 0; transition: height .28s ease, margin-top .28s ease; }
.composer-foot:has(.think-picker:not([hidden])) { margin-top: 12px; height: 28px; }
.main:has(#welcome) .composer-foot { margin-top: 12px; height: 28px; } /* start screen: always reserved, so the box never jumps there */
body.kb-open .composer-foot { display: none; }
.think-picker { position: relative; margin-right: 10px; animation: think-in .28s ease both; }
@keyframes think-in { from { opacity: 0; } to { opacity: 1; } }
.think-picker[hidden] { display: none; }
.think-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px 4px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 0.75rem; }
.think-btn strong { color: var(--text); font-weight: 600; }
.think-btn svg { width: 12px; height: 12px; }
.think-btn:hover, .think-btn[aria-expanded="true"] { background: color-mix(in srgb, CanvasText 7%, transparent); }
.think-toggle-row { cursor: pointer; margin-bottom: 4px; background: color-mix(in srgb, var(--accent) 11%, var(--surface, #fff)); }
.think-toggle-row:hover, .think-toggle-row:focus-visible { background: color-mix(in srgb, var(--accent) 17%, var(--surface, #fff)); }
.switch { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--accent); transition: background .2s ease; }
.switch i { position: absolute; top: 2px; left: 18px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .2s ease; }
.think-toggle-row[aria-checked="false"] .switch { background: color-mix(in srgb, var(--muted) 45%, transparent); }
.think-toggle-row[aria-checked="false"] .switch i { left: 2px; }
.think-menu.is-thinking-off .effort-opt[data-level] { pointer-events: none; } /* levels cannot be picked while Thinking is off */
.think-menu.is-thinking-off .effort-opt[data-level] strong { opacity: .5; }
.effort-note { margin: 6px 0 2px; padding: 8px 12px 6px; border-top: 1px solid var(--glass-edge); color: var(--muted); font-size: 0.75rem; line-height: 1.4; }
.think-menu { right: 0; bottom: calc(100% + 6px); width: 270px; max-width: calc(100vw - 24px); }
body.kb-open .composer-area { padding-bottom: 8px; }
/* Start screen + keyboard: "How can I help you today?" goes away at once and the message box sits on the keyboard (ui.js glides it there). */
body.kb-open #welcome { display: none; }
body.kb-open .main:has(#welcome) { justify-content: flex-end; }
@media (min-width: 701px) { body.kb-open .composer-area { padding-bottom: 30px; } } /* tablet keyboards draw a see-through toolbar row over the page: a little clearance keeps the box fully visible above it */ /* keyboard open: the message area is a slim strip docked on top of the keyboard, with the same small margin above and below the box */

/* ---- Phones ---- */
@media (max-width: 700px) {
  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 20;
    max-width: 86vw;
    border-radius: 0;
    background: var(--sidebar-bg);
    box-shadow: 8px 20px 30px -12px rgba(31, 60, 40, .15);
    transform: translateX(-100%);
  }
  .sidebar.open { transform: none; }
  .sidebar-resizer { display: none; } /* no resizing on phones */
  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 19;
    background: rgba(0, 0, 0, .25);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  .sidebar-backdrop.visible { opacity: 1; visibility: visible; }

  .menu-btn { display: grid; }
  .chat { padding: 56px 13px 15px; } /* the first message starts below the floating menu / Log In buttons */
  .welcome { transform: translateY(-90px); margin-bottom: 30px; }
  .welcome h1 { letter-spacing: -1px; }
  .composer-area { padding: 0 10px 12px; }
  .composer { padding: 6px; border-radius: 24px; }
  .composer-row { grid-template-columns: 36px minmax(0, 1fr) 36px 36px; column-gap: 8px; }
  .round-btn { width: 36px; height: 36px; }
  .upload-btn span::before, .upload-btn span::after { width: 14px; }
  .send-btn svg { width: 24px; height: 24px; stroke-width: 2; } /* arrow 14px tall and 2px thick, like the "+" here */
  #prompt { min-height: 36px; padding: 5.6px 1px; }
}

/* ---- Tablets: the sidebar can be resized to the middle of the screen, or dragged shut ---- */
@media (min-width: 701px) and (max-width: 1366px) and (pointer: coarse) {
  .sidebar-resizer { width: 16px; } /* wide grab area for a finger */
  .sidebar { transition: transform .25s ease, border-color .3s ease, margin-left .25s ease, visibility 0s; }
  .sidebar { height: calc(var(--stable-vh, 1dvh) * 100); } /* the panel keeps its full height when the keyboard opens, so the profile icon and name stay where they are */
  body.sidebar-collapsed .sidebar { margin-left: calc(-1 * var(--sidebar-w)); visibility: hidden; transition: margin-left .25s ease, visibility 0s .25s; }
  body.sidebar-collapsed .menu-btn { display: grid; }
}

/* ---- Phones and tablets: round menu button on the left and a "Log In" pill on the right, floating over the chat.
   Both have the same height and the same side gap, and the pill's right edge lines up with the right edge of the user's message box. ---- */
@media (max-width: 700px), (min-width: 701px) and (max-width: 1366px) and (pointer: coarse) {
  .topbar {
    --topbar-edge: 20px;
    position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none;
    padding: 10px max(var(--topbar-edge), calc((100% - 760px) / 2)); /* same inset as the messages */
  }
  .topbar > * { pointer-events: auto; }
  .menu-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--glass-strong); box-shadow: 0 0 0 1px var(--glass-edge); }
  .auth-btn { height: 40px; padding: 0 16px; border-radius: 999px; font-size: 0.8125rem; }
  .auth-full { display: none; }
  .auth-short { display: inline; }
}
@media (max-width: 700px) { .topbar { --topbar-edge: 13px; } }

/* ---- Narrow panel (dragged in on a tablet) ----
   Each text disappears just before the panel edge would touch it; the icons never move. */
@container (max-width: 114px) { .brand span { display: none; } }
@container (max-width: 118px) { .sidebar-user { display: none; } }
@container (max-width: 116px) {
  /* Only the + is left: the box keeps following the panel width, but never gets narrower than a square
     (same height as a chat row). The + stays on the same vertical line as the logo and the profile picture. */
  .new-chat {
    --nc: calc(16px + 1.4 * var(--ui-size));
    width: auto;
    min-width: var(--nc);
    height: var(--nc);
    padding: 0 0 0 9px; /* same as the full-width box: the box and the + do not move */
    gap: 0;
    justify-content: flex-start;
    font-size: 0;
  }
  .new-chat > span { font-size: 1.1875rem; }
  /* The chat headings and titles slide left at this same moment to give the cut-off text a little more room. */
  .section-label { margin-left: 4px; margin-right: 4px; }
  .history-item { padding: 0; }
  .history-title { padding-left: 6px; }
}
@container (max-width: 150px) {
  .section-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* long headings and titles are cut with ... */
}