@font-face {
  font-family: "Slanter-Sans";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Slanter-Sans-Serif-Book.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Sans";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Slanter-Sans-Serif-Book-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Sans";
  font-style: normal;
  font-weight: 400 500 600 700;
  font-display: swap;
  src: url("fonts/Slanter-Sans-Serif-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Sans";
  font-style: italic;
  font-weight: 400 500 600 700;
  font-display: swap;
  src: url("fonts/Slanter-Sans-Serif-Bold-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Serif";
  font-style: normal;
  font-weight: 100 200;
  /* block, not swap: this face renders the empty-chat greeting, which is painted on
     the first frame. With swap the greeting laid out in the fallback serif and then
     reflowed to different metrics -- a visible jitter. It is preloaded in index.html,
     so the block period is normally over before first paint. */
  font-display: block;
  src: url("fonts/Slanter-Serif-Extra-Light.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Serif";
  font-style: italic;
  font-weight: 100 200;
  font-display: swap;
  src: url("fonts/Slanter-Serif-Extra-Light-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Serif";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("fonts/Slanter-Serif-Book.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Serif";
  font-style: normal;
  font-weight: 400 500 600 700;
  font-display: swap;
  src: url("fonts/Slanter-Serif-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "Slanter-Serif";
  font-style: italic;
  font-weight: 400 500 600 700;
  font-display: swap;
  src: url("fonts/Slanter-Serif-Bold-Italic.woff2") format("woff2");
}

html, body, *, *::before, *::after {
  font-synthesis: none;
}


:root {
  --white: #F3F3F1;
  --white-50: #878784;
  --white-75: #b6b6b0;
  --black: #1B1B18;
  --black-hover-color: #00000058;
  --black-border-color: #32322d;
  --black-light: #3535314d;
  --black-blue-accent: #3a7ede;

  --background-color: #151513;
  --input-bg: #1d1d1b;
  --input-bg-lighter: hsl(60 4% 14% / 1);
  --input-bg-50: #1d1d1b80;
  --input-darker-bg: #242424;
  --input-lighter-bg: #30302D;
  --text-color: #DCDCD6;

  --text-color-sidebar: #a1a198;
  --dark-text: #70706b;

  --user-bubble: #20201e;
  --border-color-darker: #454540;
  --border-color-input: #42423da3;
  --border-color: #42423d59;
  --solid-border-color: #252522;
  --border-color-sharper: #42423db0;
  --border-color-lighter: rgba(66, 66, 61, 0.5);
  --sidebar-color: #10100e;
  --sidebar-color-rgb: 16, 16, 14;
  --contrast: #F3F3F1;
  --contrast-text: #000000;
  --contrast-color: #DCDCD6;
  --light-background: #EEEEEE;
  --light-background-hover: #c8c8c8;
  --med-dark-text: #DEDEDE;
  --med-text: #7B7B77;
  --med-light-text: #DCDCDC;
  --light-text:#9e9e92;
  --sidebar-border-color: #2A2A2A;
  --black-shadow: rgba(0,0,0,0.14);
  --dark-light-bg: var(--black);
  --highlight-bg: #05244ab5;
  --highlight-text: #5b99e5;
  --btn-default: #282825;
  --btn-default-hover: #31312e;

  --switch-bg: var(--blue-accent);
  --switch-bg-off: #000;
  --switch-border: var(--border-color);

  --color-green-slanter: #969640;

  /*--mobile-button-inset: inset 0 0px 10px 0px rgba(255, 255, 255, 0.1);*/
  --file-btn-mobile-bg: #222220;
  --file-btn-mobile-bg-trans: rgba(53, 53, 49, 0.5);
  --add-btn-mobile-bg: var(--file-btn-mobile-bg);
  --code-ouput-bg: #292926;
  --code-paste-bg: #282c34;
  --banner-text: var(--light-text);
  --long-press-bg: var(--user-bubble);

  --thumb-color: #5f5f59;

  --no-avatar: #40403d;

  --light-box-question: #4F4F49;

  --mobile-quiz-bg: rgba(40, 40, 37, 0.4);
  --mobile-quiz-pill: rgba(220, 220, 214, 0.15);

  --thinking-gradient: rgba(100, 100, 100, 0.7);
  --thinking-shimmer: rgba(220, 220, 220, 0.9);

  --sidebar-controls: rgba(255, 255, 255, 0.35);

  --link-color: #2B7CBE;

  --image-controls: #333333;

  --circle-bg-correct: rgba(113, 196, 58, 0.3);
  --circle-bg-wrong: rgba(224, 62, 51, 0.3);
  
  --green-text: #71C43A;
  --green-border: rgba(113, 196, 58, 0.6);
  --green-bg-transp: rgba(113, 196, 58, 0.1);
  --green-bg-not-transp: #273A32;

  --blue-accent: #3a7ede;
  --blue-accent-light: rgba(43, 116, 217, 0.15);
  --blue-accent-med: rgba(43, 116, 217, 0.30);
  --blue-accent-med-bg: #1D3F5D;
  --blue-accent-dark: #3471c7;

  --input-box-bg: #3B3A3A;
  --input-border: #4F4F4F;
  --darker-box-bg: #3B3A3A;

  --lighter-hover-color: #fffff00f;
  --hover-color: #70707023;
  --hover-color-50: #70707013;
  --darker-hover-color: rgba(255, 255, 255, 0.14);
  --sidebar-hover-not-trans: #20201E;
  --sidebar-active-not-trans: #333332;
  --active-hover-color: #70707058;
  --switch-active-hover-color: #70707058; 

  --red-bg: #3D2523;
  --red-bg-light: #dd7068;
  --red-text: #de564d;
  --dark-red-text: #df9994; 
  --red-border: #691B0F;
  --red-bg-transp: rgba(224, 62, 51, 0.15);
  --red-bg-transp-2: rgba(224, 62, 51, 0.5);
  --red-bg-not-transp: #361C16;

  --red-text-light: #EE7E6C;

  --orange-text: #F49D15;
  --orange-border: rgba(155, 97, 7, 0.5);
  --orange-bg: #362A16;

  --disabled-bg: #3F3F3F;
  --disabled-text: #797979;
  --skeleton-base: #5D5D55;
  --skeleton-highlight: #8A8A7F;
  --invite-skeleton-base: #484842;
  --invite-skeleton-highlight: #5D5D55;

  --weblink-hover-grad: linear-gradient(90deg, #21283300 0%, #212833 50%);
 
  --blue-400: #578dd9;
  --orange-400: #d97757;
  --turquois-400: #40bfae;
  --yellow-400: #d5b144;
  --magenta-400: #cc66c4;
  --green-400: #46b970;
  --violet-400: #8369d3;
  --red-400: #d35059;
  --blue-200: #bed2ef;
  --orange-200: #efcabe;
  --turquois-200: #b5e3dd;
  --yellow-200: #ede0b6;
  --magenta-200: #efbeeb;
  --green-200: #bce6cb;
  --violet-200: #cabeef;
  --red-200: #efbec1;
}

:root[data-theme="light"] {
  --white: #F3F3F1;
  --black: #1B1B18;
  --black-hover-color: #00000058;
  --black-border-color: #32322d;
  --black-blue-accent: #3a7ede;

  --background-color: #F3F3F1;
  --input-bg: #FAFAF9;
  --input-bg-50: #ffffff80;
  --input-lighter-bg: #ffffff;
  --input-bg-lighter: #ffffff;
  --text-color: #292929;

  --text-color-sidebar: #535353;
  --dark-text: #8d8d8d;

  --user-bubble: #e3e3de;
  --border-color: #d9d9d3a8;
  --solid-border-color: #e2e2de;
  --border-color-sharper: #d9d9d3;
  --border-color-lighter: rgba(204,204,204,0.5);
  --border-color-darker: #b3b3a8a8;
  --border-color-input: #d9d9d3a8;
  --sidebar-color: #F3F3F1;
  --sidebar-color-rgb: 236, 236, 233;
  --contrast: #1B1B18;
  --contrast-text: #ffffff;
  --contrast-color: #ffffff;
  --light-background: #292929;
  --light-background-hover: #303030;
  --med-dark-text: #262626;
  --med-text: #565656;
  --med-light-text: #747474;
  --light-text: #7d7d75;
  --sidebar-border-color: #e3e3e3;
  --black-shadow: rgba(0, 0, 0, 0.05);
  --dark-light-bg: var(--input-bg);
  --highlight-bg: #0074ff29;
  --highlight-text: #104c96;
  --btn-default: #DCDCD6;

  --switch-bg: var(--blue-accent);
  --switch-bg-off: #1b1b1880;
  --switch-border: var(--background-color);

  --color-green-slanter: #969640;

  --mobile-button-inset: inset 0 0px 10px 0px rgba(255, 255, 255, 0.1);
  --file-btn-mobile-bg: #DCDCD6;
  --file-btn-mobile-bg-trans: rgba(220, 220, 214, 0.5);
  --add-btn-mobile-bg: var(--file-btn-mobile-bg-trans);
  --code-ouput-bg: #EBEBE8;
  --code-paste-bg: #fafafa;
  --banner-text: var(--text-color);
  --long-press-bg: var(--input-bg);

  --thumb-color: #ADADAC;

  --no-avatar: #40403d;

  --light-box-question: #d2d2cd6b;

  --mobile-quiz-bg: rgba(255, 255, 255, 0.35);
  --mobile-quiz-pill: rgba(41, 41, 41, 0.42);

  --thinking-gradient: rgba(255, 255, 255, 0.7);
  --thinking-shimmer: rgba(30, 30, 30, 0.7);

  --sidebar-controls: rgba(0, 0, 0, 0.35);
  
  --image-controls: #ffffff;

  --circle-bg-correct: rgba(113, 196, 58, 0.3);
  --circle-bg-wrong: rgba(224, 62, 51, 0.3);
  
  --green-text: #9ab535;
  --green-border: rgba(113, 196, 58, 0.6);
  --green-bg-transp: rgba(113, 196, 58, 0.1);
  --green-bg-not-transp: #DEF1E9;

  --blue-accent: #3471c7;
  --blue-accent-light: hsla(215, 70%, 51%, 0.15);
  --blue-accent-med: rgba(43, 116, 217, 0.30);
  --blue-accent-med-bg: #B3D5F4;
  --blue-accent-dark: #3471c7;

  --input-box-bg: #F6F6F7;
  --input-border: #E8E8E9;
  --darker-box-bg: #fff;

  --lighter-hover-color: rgba(0.13, 0.13, 0.1, 0.04);
  --hover-color: rgba(0.13, 0.13, 0.1, 0.05);
  --darker-hover-color: rgba(0.13, 0.13, 0.1, 0.14);
  --hover-color-50: #ffffff9a;
  --sidebar-hover-not-trans: #E4E4E2;
  --sidebar-active-not-trans: #E0E0DE;
  --active-hover-color: rgba(0.13, 0.13, 0.1, 0.08);
  --switch-active-hover-color: #fff; 

  --red-bg: #fde8e6;
  --red-bg-light: #de6860;
  --red-text: #cf564e;
  --dark-red-text: #87332d; 
  --red-border: #B4220C;
  --red-bg-transp: rgba(224, 62, 51, 0.15);
  --red-bg-not-transp: #EFDFDB;

  --red-text-light: #B4220C;

  --orange-text: #7E4E06;
  --orange-border: rgba(126, 78, 6, 0.5);
  --orange-bg: #F9DDB2;

  --disabled-bg: #F2F2F2;
  --disabled-text: #4C4C4C;
  --skeleton-base: #e4e8ed;
  --skeleton-highlight: #f3f6f9;
  --invite-skeleton-base: #CECEC5;
  --invite-skeleton-highlight: #DCDCD6;

  --weblink-hover-grad: linear-gradient(90deg, #DFEAF900 0%, #DFEAF9 50%);
}


html {
  color: var(--text-color);
  font-family: 'Slanter-Sans', sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
}

html,  body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden !important;
  /* Leaving overflow-y unset here makes it compute to `auto` (per spec,
     whenever overflow-x isn't `visible` the other axis can't stay `visible`
     either) — Safari then treats html/body as a scrollable ancestor and
     clips any `position: fixed` descendant (e.g. #userBox) to whatever
     part of the page is currently scrolled into view, even though other
     browsers never clip fixed elements against a non-transformed ancestor.
     This only actually bites once the page's real content height exceeds
     the viewport (narrower widths reflow more content taller), which is
     why it looked width-dependent. Pin overflow-y explicitly so it can't
     silently become a clipping context — this app scrolls internally
     (sidebar/chat/subtabs), never the page itself. */
  overflow-y: hidden !important;
}

/* Block browser pull-to-refresh on touch devices. */
@media (hover: none) and (pointer: coarse) {
  html,
  body {
    overscroll-behavior-y: none;
  }
}

body {
  -webkit-tap-highlight-color: transparent !important;
  background-color: var(--background-color);
  --sb-track-color: var(--background-color);
  --sb-thumb-color: var(--thumb-color);
  --sb-size: 8px;
}

li {
  margin: 14px 0;
}

p {
  line-height: 1.5rem;
}

hr {
  color: transparent;
  border-color: var(--border-color);
  border-style: solid;
}

/* --- INPUT + CHAT AREA --- */

.chat-scroll {
    flex: 1;
    width: 100%;               /* full width from sidebar to right edge */
    overflow-y: auto;          /* scrollbar HERE */
    box-sizing: border-box;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    /* Streaming re-parses markdown above the caret every token; the browser's
       scroll anchoring then re-adjusts scrollTop and fights the auto-scroll pin. */
    overflow-anchor: none;
}

.chat-scroll,
.PaymentPage,
.tool-scroll {
    --sb-size: 10px;
    scrollbar-gutter: stable;
}

.chat-scroll::-webkit-scrollbar,
.PaymentPage::-webkit-scrollbar,
.tool-scroll::-webkit-scrollbar {
    width: var(--sb-size);
}

.chat-scroll::-webkit-scrollbar-track,
.PaymentPage::-webkit-scrollbar-track,
.tool-scroll::-webkit-scrollbar-track {
    background: var(--background-color);
    border-radius: 11px;
}

.chat-scroll::-webkit-scrollbar-thumb,
.PaymentPage::-webkit-scrollbar-thumb,
.tool-scroll::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 11px;
    border: 1px solid var(--background-color);
}

@supports not selector(::-webkit-scrollbar) {
  .chat-scroll,
  .PaymentPage,
  .tool-scroll {
      scrollbar-color: var(--border-color) var(--background-color);
  }
}

.chat-scroll {
    --sb-size: 9px;
}

.chat-scroll::-webkit-scrollbar-thumb {
    background: var(--file-btn-mobile-bg);
    border: 1px solid var(--background-color);
}

@supports not selector(::-webkit-scrollbar) {
  .chat-scroll {
      scrollbar-color: var(--file-btn-mobile-bg) var(--background-color);
  }
}

.chat-inner {
    width: calc(100% - 24px);
    max-width: 765px;
    margin: 0 auto;            /* centers content */
    display: flex;
    flex-direction: column;
    /* gap: 6px; */
    padding: 20px 0;
}

.skeleton_chat {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.skeleton_chat_user {
  background: var(--user-bubble);
  margin-left: auto;
  height: 51.15px;
  width: 50%;
  padding: 0px 16px;
  border-radius: 21px;
  background-size: 230% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  mix-blend-mode: lighten;
}

.skeleton_chat_bot_stack {
  display: flex;
  flex-direction: column;
  margin-top: 21px;
  margin-left: 16px;
  gap: 12px;
  width: 80%;
  pointer-events: none;
}

.skeleton_chat_bot {
  background-color: var(--user-bubble);
  height: 18px;
  padding: 0px 16px;
  border-radius: 6px;
  box-sizing: border-box;
  background-size: 230% 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  mix-blend-mode: lighten;
}

.sidebarMenuButton > .skeleton_chat_bot {
  flex: 1 1 auto;
  width: 100%;
  max-width: none;
  margin-left: 8px;
}

.sidebarMenuButton.chat > .skeleton_chat_bot {
  margin-left: 0;
}

#mobileRecentChatsList > .buttonMobileSidebar > .skeleton_chat_bot {
  margin-left: 0;
  width: 100%;
  max-width: none;
}


.input-container {
  width: 100% !important;
  max-width: 765px !important;
  margin: 0 auto !important;
  border: 1px solid var(--border-color-input);
  border-radius: 21px;
  overflow: hidden;               /* makes everything look like 1 box */
  box-sizing: border-box;
  transition: all 0.2s ease;
  position: relative; /* default */
  background-color: var(--input-bg);
  box-shadow: 0 0 0 var(--black-shadow);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-container:hover,
.input-container:has(#inputbox:focus){
  border-color: var(--border-color-darker);
  box-shadow: 0 0 15px var(--black-shadow);
}

.input-disclaimer {
  max-width: 765px;
  margin: 4px auto 4px;
  padding: 0 8px;
  font-size: 0.8rem;
  color: var(--dark-text);
  text-align: center;
}

.input-disclaimer-link {
  color: var(--contrast);
  text-decoration: underline;
  cursor: pointer;
}
  

textarea {
  font-family: 'Slanter-Sans', sans-serif;
  font-weight: 300;
  width: 100%;
  min-height: 0px;
  padding: 20px 20px 8px 20px;
  border: none;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
  font-size: 1rem;
  display: block;
  text-align: left;
  background-color: var(--input-bg);
  color: var(--text-color);
}

textarea:focus {
  outline: none;
}

.voice-live-overlay-active {
  color: transparent !important;
  caret-color: var(--text-color);
  -webkit-text-fill-color: transparent !important;
}

.voice-live-transcript-overlay {
  position: absolute;
  pointer-events: none;
  box-sizing: border-box;
  white-space: pre-wrap;
  overflow: hidden;
  overflow-wrap: break-word;
  color: var(--text-color);
  background: transparent;
  z-index: 3;
}

.voice-live-transcript-overlay .voice-live-spoken {
  color: var(--med-text);
  font-style: italic;
}

.chat-container {
  flex: 1;
  width: 80%;
  max-width: none;
  margin: 0;
  padding: 20px 20px 150px;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.message {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 16px;
  border-radius: 13px;
  font-size: 16px;
  line-height: 1.41;
  word-wrap: break-word;
  overflow-wrap: break-word;
  min-width: 0;
  animation: fadeIn 0.2s ease;
}

.message.user {
  padding: 16px;
  margin-left: auto;
  background: var(--user-bubble);
  margin-right: 0;
  /*border-top-right-radius: 8px;*/
}

.message.user.edit {
  background-color: transparent;
  outline: 1px solid var(--blue-accent);
  box-shadow: 0px 0px 11px var(--highlight-bg);
}

.message.ask {
  margin-bottom: 8px;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border-color);
  padding: 16px;
  max-width: 100%;
  gap: 5px;
  display: flex;
  flex-direction: column;
}

.message.ask.tool {
  padding: 10px 0;
}

/* Tool-run box inside a bot message (renderSegmentArray): one element per
   panel/stack, divided by a rule; prose after the run goes back to the bot body. */
/* A run = summary header ("Ran 3 commands, Created a file") + the box, which
   the header expands/collapses (applyToolRunOpenState animates the box only,
   so the header never moves — just the content below it). overflow-anchor:
   none keeps the browser from scrolling to compensate while it resizes. */
.tool-run {
  margin: 8px 0;
  overflow-anchor: none;
  font-family: 'Slanter-Sans', sans-serif;
  font-weight: 300;
  user-select: none;
}

.tool-run.is-hidden > .message.ask.tool,
/* image_generation/visualizer panels remove themselves once their image or
   canvas has rendered below the run — don't leave an empty bordered box. */
.tool-run > .message.ask.tool:empty {
  display: none;
}

.tool-run.is-hidden > .tool-run-header .search-header-text {
  color: var(--dark-text);
}

/* Colour the whole header row so the chevron (currentColor) matches the text.
   !important beats the global `.TopTextThink.search-top-text-think:hover`
   (text-color !important) — this header never goes brighter than light-text. */
.tool-run.is-hidden > .tool-run-header {
  color: var(--dark-text);
}

.tool-run > .TopTextThink.tool-run-header:hover,
.tool-run > .TopTextThink.tool-run-header:hover .search-header-text {
  color: var(--light-text) !important;
}

.message.bot .tool-run > .message.ask.tool {
  /* `.message`'s fadeIn would replay on every unhide (display:none restarts
     CSS animations) — that was the flash on expand. The 14px gap under the
     header is the box's own margin so it animates with the box. */
  animation: none;
  margin: 14px 0 0;
  gap: 10px;
}

.message.ask.tool > .search-step-inline {
  margin-top: 0;
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--border-color);
}

.message.ask.tool > .search-step-inline:last-child {
  padding: 0 10px;
  border-bottom: none;
}

/* Titles and query/summary lines stay on one line and ellipsize. The header's
   fit-content wrapper must be allowed to shrink, or nothing ever overflows. */
.message.ask.tool .search-top-text-think,
.tool-run-header {
  max-width: 100%;
  min-width: 0;
}

.message.ask.tool .search-header-text,
.message.ask.tool .search-text-query-line,
.tool-run-header .search-header-text {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.message.ask.tool .search-header-text,
.tool-run-header .search-header-text {
  flex: 0 1 auto;
}

.message.ask.tool .search-collapse-thinking,
.tool-run-header .search-collapse-thinking {
  flex-shrink: 0;
}

.message.ask.tool .search-header-text::after,
.message.ask.tool .search-text-query::after {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* "Interrupted" line under a panel's title (syncInterruptedHeader). Not a
   toggle, so no pointer or hover tint. */
.Text.top.search-text.search-header-text.failed {
  color: var(--red-text-light);
  font-size: 0.85rem;
  margin-top: 4px;
}

.search-interrupted-line {
  cursor: default;
}

.search-step-inline .search-interrupted-line .Text.top:hover {
  color: var(--red-text-light);
}

/* No trailing connector under a panel's final step row. */
.message.ask.tool .search-text-steps-inner > .search-thinking-row:last-of-type .search-thinking-vbar,
.message.ask.tool .search-text-steps-inner > .search-thinking-row:has(+ .search-thinking-row-noicon:last-of-type) .search-thinking-vbar,
.tool-panel-preview .search-text-steps-inner > .search-thinking-row:last-of-type .search-thinking-vbar,
.tool-panel-preview .search-text-steps-inner > .search-thinking-row:has(+ .search-thinking-row-noicon:last-of-type) .search-thinking-vbar {
  display: none;
}

/* Sub-call titles (one per stacked call / query row). */
.message.ask.tool .search-text-steps-inner .search-text-query,
.tool-panel-preview .search-text-steps-inner .search-text-query {
  color: var(--text-color);
  margin-top: 1px;
  font-size: 0.85rem;
}

/* Side-window listing of a boxed panel's steps (openToolPanelSubtab):
   uncapped, no show more/less, and no download (there's no file). */
.tool-panel-preview {
  margin-top: 0;
  padding: 14px;
}

.tool-panel-preview .search-text-steps-inner {
  max-height: none;
  overflow: visible;
}

#mdPreviewSubtabHost .tool-panel-preview .slanter-codeblock-io-block pre code {
  padding: 0;
  padding-bottom: 5px;
  font-size: 0.8rem;
  font-weight: 100;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 300;
}

#mdPreviewSubtabHost .tool-panel-preview .slanter-codeblock-header {
  display: flex;
}

/* Side view: only the sub-call still running shimmers (light text); every
   other title is plain text colour with no gradient. */
#mdPreviewSubtabHost .tool-panel-preview .search-text-steps-inner .search-text-query {
  color: var(--text-color);
}

#mdPreviewSubtabHost .tool-panel-preview .search-thinking-row.search-row-running .search-text-query {
  color: var(--light-text);
}

#mdPreviewSubtabHost .tool-panel-preview .search-thinking-row:not(.search-row-running) .Text::after {
  content: none;
}

/* Tool listings aren't wrapped in .md_render (which is what scrolls a file
   preview), so in tool mode the list itself scrolls — otherwise a long
   listing was clipped with no way to reach the rest. */
#mdPreviewSubtabHost.is-tool-panel .Quiz_subtab_list {
  display: block;
  overflow-y: auto;
}

/* A plan element opened on its own in the side view. */
.tool-panel-plan-view {
  padding: 14px;
}

/* The message's thinking plan, pinned to the top of the tool side view
   (sides match .tool-panel-preview's 14px). */
.tool-panel-plan-pin {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 14px;
  background-color: var(--input-bg);
}

.tool-panel-plan-pin + .tool-panel-preview {
  padding-top: 0;
}

#mdPreviewSubtabHost.is-tool-panel .md-preview-download-btn {
  display: none;
}

/* Single-call panels (not code) have nothing to open: no chevron, not a link. */
.search-step-inline.is-not-expandable .search-collapse-thinking {
  display: none;
}

.search-step-inline.is-not-expandable .search-top-text-think {
  cursor: default;
}

.search-step-inline.is-not-expandable {
  pointer-events: none !important;
}

/* ── Thinking run (renderSegmentArray): the thinking phase as a tool run —
   "Thinking · Ns" header, a box of "Thinking..." span elements and the tool
   panels called while thinking. It replaces the old thinking panel, which
   stays only for chats saved before thinking segments existed. */
.message.bot.has-thinking-run .search-step-inline:has(> .search-thinking.thinking-summary-mode) {
  display: none;
}

/* Shine on the thinking run's header while thinking is live — the same sweep
   the panels use (.search-thinking:not(.is-done)), driven by `is-running`. */
.thinking-run.is-running > .tool-run-header {
  animation: textSweepVar 3s linear infinite, textSweepVar2 2.4s linear infinite;
}

.thinking-run.is-running > .tool-run-header .search-header-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding-top: 1px;
  background: linear-gradient(90deg, transparent 30%, var(--thinking-shimmer) 50%, transparent 70%);
  background-size: 230% 100%;
  background-repeat: no-repeat;
  background-position: var(--shimmer-pos) 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  white-space: nowrap;
}

.thinking-run .thinking-header-label {
  color: var(--light-text);
}

.thinking-run .thinking-header-time {
  color: var(--dark-text);
}

/* ── Thinking panel, summary mode (renderer: isThinkingSummaryMode) ──
   Same look as a tool run: "Thinking · 120s" header on top, then a bordered
   box whose elements are the thinking summary and each tool it called. The
   chain of thought itself is never rendered. */
.thinking-summary-mode > .search-thinking-row-header > .search-row-left {
  display: none;
}

.thinking-summary-mode .thinking-header-label {
  color: var(--light-text);
}

.thinking-summary-mode .thinking-header-time {
  color: var(--dark-text);
}

.thinking-summary-mode .search-text-steps-inner {
  border: 1px solid var(--border-color);
  padding: 10px 0;
  gap: 10px;
  box-sizing: border-box;
}

.thinking-summary-mode .search-text-steps-inner > .search-thinking-row {
  padding: 0 10px 10px;
  border-bottom: 1px solid var(--border-color);
}

.thinking-summary-mode .search-text-steps-inner > .search-thinking-row:last-of-type {
  padding: 0 10px;
  border-bottom: none;
}

.thinking-summary-mode .search-text-steps-inner > .search-thinking-row > .search-row-left {
  display: none;
}

.thinking-summary-mode .search-text-steps-inner .search-row-right {
  padding-bottom: 0;
}

.thinking-summary-mode .search-text-steps-inner .search-text-query {
  color: var(--light-text);
}

/* Only the element still in flight shimmers. */
.thinking-summary-mode .search-text-steps-inner > .search-thinking-row:not(.search-row-running) .Text::after {
  content: none;
}

/* Rich web search / fetch headers (renderRichSearchHeaderInto): favicon + text
   on one line; the fetched host is text-colour; "Searching the web" is followed
   by a one-line window the found sites flip through vertically. */
/* No ancestor in the selector (it failed to match where these headers are
   used), and the layout is !important: the base `.search-text` rule is a
   COLUMN flexbox, which stacked the favicon above the text and trimmed
   "Fetched "'s space. */
.search-text.search-header-text.search-header-rich {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
}

.search-header-rich .search-header-plain {
  flex: 0 0 auto;
  white-space: pre;
}

.search-header-rich .search-header-site {
  color: var(--text-color);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: -4px;
}

.search-header-rich .search-header-plain:last-child {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The live line leaving when a search finishes (slides up over the summary). */
.search-header-rich .search-header-outgoing {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  white-space: nowrap;
}

.search-header-rich::after {
  content: none !important;
}

.search-site-ticker {
  display: inline-grid;
  /* Track at the items' own width (never squeezed to the animating ticker
     width — that ellipsized the incoming name mid-flip), and clip only
     vertically so the flip is masked but a wider name isn't cut short. */
  grid-template-columns: max-content;
  overflow: visible;
  clip-path: inset(0 -100vw);
  /* Its width is set per site by the ticker loop; don't let the header row
     squeeze it (names are capped by .search-site-ticker-name instead). */
  flex: 0 0 auto;
  height: 1.35em;
  align-items: center;
}

.search-site-ticker-item {
  grid-area: 1 / 1;
  /* Own width, not the track's — the ticker animates between items' widths. */
  justify-self: start;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--text-color);
}

.search-site-ticker-name {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

/* "Searched the web for <query>" (searchedTheWebLineHtml). */
.search-query-prefix {
  color: var(--light-text);
}

.search-query-text {
  color: var(--text-color);
}

/* "Asked the user" element (syncAskUserNode): the answers block's rows are
   moved in under the title (mergeAskAnswersIntoAskElement), styled like the
   standalone block, which is then hidden. */
.message.ask.is-merged {
  display: none;
}

.ask-user-element .ask-answers:not(:empty) {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  font-size: 0.9rem;
  color: var(--text-color);
  user-select: text;
}

.ask-user-element .ask-answers .question {
  opacity: 0.5;
  margin-bottom: 2px;
}


/* image_generation/visualizer panels are pure progress: not clickable, no
   chevron, no done row — they hide themselves once their output renders. */
.search-thinking.is-loading-tool {
  pointer-events: none;
}

.search-thinking.is-loading-tool .search-collapse-thinking,
.search-thinking.is-loading-tool .search-done-row-wrapper {
  display: none;
}

/* The box replaces each panel's main header icon; step icons stay. */
.message.ask.tool .search-thinking-row-header > .search-row-left {
  display: none;
}

/* One row per answered question: the question itself sits muted above the
   answer the user picked. */
.message.ask > div + div {
  margin-top: 10px;
}

.message.ask .question {
  opacity: 0.5;
  margin-bottom: 2px;
}

.message.ask.question {
  opacity: 0.5;
}

.message.bot {
  font-family: 'Slanter-Serif', serif;
  font-style: normal;
  font-weight: 300;
  margin-right: auto;
  /* The pull-up is applied via `.tight` only when the bubble actually has
     height — a collapsed (0-height) bot message would otherwise drag whatever
     follows it up into the content above. Set by trackBotMessageTightness(). */
  margin-top: 0;
  background: transparent;
  margin-left: 0;
  line-height: 1.6;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  transition: background-color 220ms ease;
  will-change: background-color;
}

.message.bot.tight {
  margin-top: -10px;
}

.message.bot.slanter-has-codeblock {
  overflow: visible;
}

:root[data-chat-font="serif"] .message.bot {
  font-family: 'Slanter-Serif', serif;
  font-weight: 100 !important;
  line-height: 1.7;
}

:root[data-chat-font="sans"] .message.bot {
  font-family: 'Satotshi', 'Slanter-Sans', sans-serif;
  font-weight: 300 !important;
  line-height: 1.41;
}

:root[data-chat-font="dislexic"] .message.bot {
  font-family: 'Open-Dyslexic', 'OpenDyslexic', sans-serif;
  font-style: normal;
  font-weight: normal;
}

.message.bot::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blue-accent-med);
  opacity: 0;
  pointer-events: none;
}

/* Markdown tables inside messages, and in the platform docs (#docsModal),
   which reuse them. */
.docs-article table,
.message table {
  border: 1px solid var(--border-color-sharper);
  width: 100%;
  border-collapse: separate;
  overflow: hidden;
  border-radius: 10px;
  border-spacing: 0;
  background: var(--background-color);
  margin: 10px 0;
}

.docs-article th,
.message th,
.docs-article td,
.message td {
  border-bottom: 1px solid var(--border-color-sharper);
  padding: 10px;
  text-align: left;
  color: var(--light-text);
}

.docs-article th {
  color: var(--text-color) !important;
}

.docs-article tbody tr:last-child td,
.message tbody tr:last-child td {
  border-bottom: none;
}

.docs-article th,
.message th {
  border-bottom: 1px solid var(--border-color-darker);
  background-color: var(--add-btn-mobile-bg);
}


.message th,
.message table thead th,
.message table tr:first-child th,
.message table tr:first-child td {
  font-weight: 900;
  color: var(--text-color);
}

.message th strong,
.message th b,
.message table tr:first-child td strong,
.message table tr:first-child td b {
  font-weight: 900;
}

.message .katex,
.message .katex-display {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.message .katex {
  display: inline-flex;
  flex-wrap: wrap;
  line-height: 1;
}

.message .katex-display {
  display: block;
  /* Explicit: the only vertical separation display math used to get came from
     vendor katex.min.css's `margin: 1em 0`, which this rule's margin-left/right
     longhands silently left in place. Consecutive equations need a gap that is
     obviously larger than a line of prose or they read as one blob. */
  margin: 1.15em 0;
  margin-left: 0;
  margin-right: 0;
  text-align: center;
  overflow-x: auto;
  overflow-y: hidden;
  --kd-track-color: var(--background-color);
  --kd-thumb-color: var(--background-color);
  --kd-size: 9px;
}

/* Vendor katex.min.css (index.html:41) loads AFTER home.css (index.html:31)
   and defines `.katex-display > .katex { display:block; text-align:center;
   white-space:nowrap }` at the SAME (0,2,0) specificity as `.message .katex`
   above -- so until now, centered display math was one source-order tie-break
   away from being laid out as a wrapping inline-flex box. Restate it at (0,3,0)
   so the outcome no longer depends on stylesheet order. */
.message .katex-display > .katex {
  display: block;
  /* Inherit so per-context overrides on the container keep working. */
  text-align: inherit;
  white-space: nowrap;
  /* Without this, an equation wider than the bubble is centered inside the
     overflow box and its LEFT edge cannot be scrolled to. */
  min-width: fit-content;
}

/* No :first-child/:last-child margin trimming here: KaTeX's auto-render wraps
   each rendered expression in its own outer <span>, so EVERY .katex-display is
   both the first and the last element child of its parent, and such a rule
   silently zeroes the separation between consecutive equations -- the exact
   thing this margin exists to provide. */

.message .katex-display:hover {
  --kd-thumb-color: var(--file-btn-mobile-bg);
}


.message .katex-display::-webkit-scrollbar {
  height: var(--kd-size);
}

.message .katex-display::-webkit-scrollbar-track {
  background: var(--kd-track-color);
  border-radius: 11px;
}

.message .katex-display::-webkit-scrollbar-thumb {
  background: var(--kd-thumb-color);
  border-radius: 11px;
  border: 1px solid var(--background-color);
}

@supports not selector(::-webkit-scrollbar) {
  .message .katex-display {
    scrollbar-color: var(--kd-thumb-color) var(--kd-track-color);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.bottom-bar {
  width: 100%;
  padding: 0 16px 16px 16px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  box-sizing: border-box;
}

/* Typing dots */
#typingIndicator {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  width: 80%;
  margin: 4px 0;
  align-self: flex-start;
}

.typing.hidden { display: none; }

.dot {
  width: 8px;
  height: 8px;
  background: #bbb;
  border-radius: 50%;
  animation: blink 1.4s infinite both;
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: .2s; }
.dot:nth-child(3) { animation-delay: .4s; }

@keyframes blink {
  0% { opacity: .2; }
  20% { opacity: 1; }
  100% { opacity: .2; }
}

/* Buttons */

.circle-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: none;
  background: var(--light-background);
  color: var(--contrast-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s;
  padding: 0;
  margin-left: 8px;
}

.circle-btn.wide {
  font-size: 0.9rem;
  width: auto;
  gap: 4px;
  padding: 0 10px 0 10px;
  margin-left: 8px;
}

.modelSwitch.mode {
  color: var(--light-text);
  margin-left: 2px;
}

.circle-btn .voice-btn {
  margin-right: 10px;
}

.circle-btn:disabled {
  pointer-events: none !important; 
}

.stop-btn {
  background: var(--contrast);
}

.hidden:not(.modal):not(.settings-modal) {
  display: none !important;
}

.circle-btn:hover,
.circle-btn.dropdown-open {
  background: var(--hover-color);
}

#submitBtn:hover{
  background: var(--light-background-hover);
}

#submitBtn.outline:hover{
  background: var(--hover-color);
}

.send-icon {
  width: 24px;
  height: 24px;
}

.send-icon.stop {
  width: 18px;
  height: 18px;
}

.send-icon.small {
  width: 15px;
  height: 15px;
}

.send-icon.light {
  color: var(--light-text);
}

.send-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--text-color) 32%, transparent);
  border-top-color: var(--text-color);
  border-radius: 999px;
  animation: authBtnSpinnerRotate 0.65s linear infinite;
}

#submitBtn.is-loading .send-icon {
  display: none;
}

#submitBtn.is-loading .send-btn-spinner {
  display: inline-block !important;
}

#submitBtn.is-loading {
  pointer-events: none;
}

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

/* Layout with sidebar */

.app-layout {
  --sidebar-w: 290px;
  display: flex;
  height: 100vh;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  /* See the html/body comment above: pin overflow-y explicitly so Safari
     never treats this box as a scrollable clipping ancestor for #userBox
     (position: fixed, a direct child of this element). */
  overflow-y: hidden;
}

.app-layout.sidebar-collapsed {
  --sidebar-w: 54px;
}

/* Sidebar */

.sidebar {
  --sidebar-inline-pad: 12px;
  --sidebar-fixed-logo-h: 52px;
  --sidebar-fixed-menu-h: 148px;
  --sidebar-fixed-top-h: calc(var(--sidebar-fixed-logo-h) + var(--sidebar-fixed-menu-h));
  /*--sidebar-fixed-bottom-h: 70px;*/
  --sidebar-scroll-gutter: calc(var(--sb-size) + 4px);
  --sb-track-color: var(--sidebar-color);
  --sb-thumb-color: var(--thumb-color);
  --sb-size: 9px;
  width: var(--sidebar-w);
  background: var(--sidebar-color);
  border-right: 1px solid var(--border-color);
  padding: 0 4px 12px 9px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  transition: width 0.25s ease, padding 0.25s ease; /* background 0.25s ease; */
  height: calc(100vh - 202px); 
  overflow: hidden; 
  position: relative;
  z-index: 1000;
  overflow-y: auto;          
  overflow-x: hidden;       
  overscroll-behavior-y: contain;
}

.sidebar::-webkit-scrollbar {
  width: var(--sb-size);
}

.sidebar::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 11px;
}

.sidebar::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 1px solid var(--sidebar-color);
}

@supports not selector(::-webkit-scrollbar) {
  .sidebar {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

/* Sidebar top / footer */

.sidebar-top { 
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-footer {
  padding: 8px;
  display: flex;
  justify-content: center;
}

/* Logo row in sidebar */

.sidebar-logo-row {
  display: flex;
  padding-top: 3px;
  align-items: center;
  justify-content: flex-start;
  position: fixed;
  top: 0;
  min-height: 52px;
  left: var(--sidebar-inline-pad);
  width: calc(var(--sidebar-w) - (var(--sidebar-inline-pad) * 2));
  padding-right: calc(32px + var(--sidebar-scroll-gutter));
  z-index: 100002;
  background: var(--sidebar-color);
  box-sizing: border-box;
  transition: width 0.25s ease, left 0.25s ease;
}

.sidebar-logo-btn {
  color: var(--text-color);
  width: 153px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  padding: 4px 6px;
  overflow: visible;
  transition: color 0.2s ease;
}

.logo-icon {
  width: 32px;
  height: 32px;
}


#sidebarLogoRive {
  align-self: center;
  display: block;
  width: 108px !important;
  height: 75px !important;
  min-width: 108px;
  min-height: 75px;
  max-width: 108px;
  max-height: 75px;
  flex: 0 0 108px;
  pointer-events: none;
}


/* two logo variants: default + menu */

.logo-menu {
  display: none;
  visibility: visible !important;
  cursor: e-resize;
  margin: auto 0;
}

.logo-text {
  font-weight: 600;
  font-size: 1.1rem;
  display: inline-block;
  max-width: 160px;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
  transition: max-width 0.22s ease, opacity 0.18s ease;
}

/* Close button inside sidebar when open */

.sidebar-close-btn {
  visibility: visible !important;
  margin-left: auto;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
}

.close-icon {
  width: 20px;
  height: 20px;
}

/* Logout icon button */

.logout-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: #e9e9e9;
  cursor: pointer;
}
.sidebarMenuButton {
    font-family: 'Slanter-Sans', sans-serif;
    font-weight: 300;
    margin-top: 0;
    margin-left: 4px;
    width: 263px;
    height: 38px;
    min-height: 30px;
    border-radius: 10px;
    border: none;
    background: none;
    padding: 0 11px;
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-color-sidebar);
    text-align: left;
    box-sizing: border-box;
}

.sidebarMenuButton.is-active {
  background-color: var(--hover-color);
  color: var(--text-color);
  font-weight: bold;
}

.sidebarMenuButton.Contrast {
  background-color: var(--light-background);
  color: var(--contrast-text);
}

.sidebarMenuButton.search {
  background-color: transparent;
  color: var(--med-text) !important;
  border: 1px solid var(--border-color);
  height: 36px;
  padding-right: 5px;
  font-weight: 300 !important;
}

.sidebarMenuButton.search:hover {
  background-color: transparent;
  border: 1px solid var(--border-color-input);
}

.sidebarMenuButton.Contrast:hover {
  background-color: var(--light-background-hover);
  color: var(--contrast-text);
}

.sidebarMenuButton:hover {
  background: var(--hover-color-50);
}

.sidebarMenuButton.chat:hover {
  color: var(--text-color);
  background: var(--hover-color-50);
}

.sidebarMenuButton.chat.force-hover {
  color: var(--text-color);
  background: var(--hover-color);
}

.sidebarMenuButton.chat:hover .threeDotsMenu {
  visibility: visible;
}

.sidebarMenuButton:active {
  transform: none;
}

.sidebar-menu-list {
    position: fixed;
    top: var(--sidebar-fixed-logo-h);
    width: calc(var(--sidebar-w) - (var(--sidebar-inline-pad) * 2));
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 100002;
    background: var(--sidebar-color);
    box-sizing: border-box;
    padding-bottom: 8px;
    /* Reserved, transparent until #sidebarNavList scrolls under it (class
       toggled in dashboard-sidebar.js) -- reserving it keeps the fixed block's
       height constant, so --sidebar-fixed-top-h never shifts. */
    border-bottom: 1px solid transparent;
    transition: width 0.25s ease !important, border-bottom-color 0.15s ease;
}

.sidebar-menu-list.is-scrolled {
    border-bottom-color: var(--border-color);
}

.sidebar.collapsed .sidebar-menu-list {
    top: var(--sidebar-fixed-logo-h);
    background: var(--background-color);
}

/* Institution nav list: the scrolling counterpart to the fixed
   .sidebar-menu-list above it. Same metrics as .sidebar-folder-list so the
   buttons keep identical spacing to the ones that used to sit in the fixed
   block. */
.sidebar-nav-list {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sidebar-chat-list {
    padding-top: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: padding-top 0.16s cubic-bezier(0.22, 1, 0.36, 1), gap 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-folder-list {
    padding-top: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: padding-top 0.16s cubic-bezier(0.22, 1, 0.36, 1), gap 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.sidebar-folder-items,
.sidebar-chat-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overscroll-behavior-y: contain;
}

/* Keep sidebar dropdown menus visible while sections are expanded. */
.sidebar-folder-list:not(.is-collapsed) .sidebar-folder-items,
.sidebar-chat-list:not(.is-collapsed) .sidebar-chat-items {
    overflow: visible;
}

.temp-folder-preview {
    display: none !important;
}


.sidebar-menu-highlight {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    width: var(--highlight-w, 0px);
    height: var(--highlight-h, 0px);
    transform: translate(var(--highlight-x, 0), var(--highlight-y, 0px));
    border-radius: 8px;
    background: var(--hover-color);
    opacity: 0;
    transition: transform 0.2s ease-out, width 0.04s ease-out, height 0.2s ease-out, border-radius 0.2s ease-out, background-color 0.18s ease, opacity 0.18s ease;
    z-index: 0;
    pointer-events: none;
    will-change: transform, height, opacity;
}

body.sidebar-highlight-initializing .sidebar-menu-highlight {
    transition: none !important;
}

.sidebar-menu-highlight.active {
    background: var(--contrast);
    opacity: 1;
}

.sidebar-menu-highlight.hover {
    background: var(--darker-hover-color);
    opacity: 0;
}

.sidebar-menu-list.is-visible .sidebar-menu-highlight {
    opacity: 1;
}

.sidebar-menu-item {
    position: relative;
    z-index: 1;
    background: none;
}

.sidebarMenuButton .new-chat-text,
.sidebarMenuButton .organize-text {
  display: inline-block;
  margin-left: 12px;
  max-width: 195px;
  opacity: 1;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.2s ease-out, opacity 0.16s ease-out;
}

.new-chat-text.light {
  margin-left: auto;
  color: var(--med-text) !important;
  font-weight: 100 !important;
}

.sidebarMenuButton .organize-text.chat {
  margin-left: 0;
}


/* Organize button (under New chat) */
.organize-btn {
    margin-top: 8px;
    width: 100%;
    border-radius: 8px;
    border: none;
    background: none;
    padding: 8px 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--contrast);
    transition: all 0.2s ease;
    text-align: left;
}

.sidebarSVG.organize-icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    min-height: 16px;
    flex: 0 0 16px;
    display: block;
    align-self: center;
    stroke-width: 1.3;
}

.sidebarSVG.folder-open-icon {
    transform: translateX(1.4px) scale(1.15);
    transform-origin: center;
}


.organize-btn:hover {
    background: transparent;
}

.organize-btn:active {
  transform: scaleX(0.95);
}

.organize-text {
    white-space: nowrap;
}

/* Folders list at top of scroll area */
.folder-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.folder-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.folder-item:hover {
    background: #ececf1;
}

.folder-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.folder-color-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex-shrink: 0;
}

.folder-name {
    font-size: 0.86rem;
    color: #111827;
}

.folder-count {
    font-size: 0.78rem;
    color: #6b7280;
}

/* Color preset grid in folder popup */
.color-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 6px;
    margin-top: 6px;
}

.color-swatch {
    width: 18px;
    height: 18px;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    outline: none;
    background-clip: padding-box;
}

.color-swatch.selected {
    border-color: #111827;
}

/* Ensure modal labels look nice */
.modal-label {
    font-size: 0.82rem;
    color: #6b7280;
    margin-bottom: 4px;
}

.Folderpopup {
  display: flex;
  flex-direction: column;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  gap: 16px;
  border-radius: 13px;
  padding: 12px;
  width: 400px;
  box-sizing: border-box;
}

.inputrowfolder {
  display: flex;
  align-items: center;
}

.RoleIconEdit {
  color: var(--disabled-text);
  background-color: var(--input-box-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  min-height: 42px;
  aspect-ratio: 1;
  margin-right: 12px;
  position: relative;
}

#folderIconTrigger.roleEditPopupIcon {
  position: relative;
  cursor: pointer;
}

#folderIconTrigger.roleEditPopupIcon svg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 25px;
  height: 25px;
  transform: translate(-50%, -50%);
  aspect-ratio: 1;
  align-self: center;
  max-width: 25px;
  max-height: 25px;
}

#folderIconTrigger .roleEditIconDefault {
  opacity: 1;
}

#folderIconTrigger .roleEditIconHover {
  opacity: 0;
}

#folderIconTrigger .roleEditIconDefault *,
#folderIconTrigger .roleEditIconHover * {
  vector-effect: non-scaling-stroke;
}

#folderIconTrigger:hover .roleEditIconDefault {
  opacity: 0;
}

#folderIconTrigger:hover .roleEditIconHover {
  opacity: 1;
}

#folderIconTrigger[data-role-icon-selected="false"]:hover .roleEditIconDefault {
  opacity: 0 !important;
}

#folderIconTrigger[data-role-icon-selected="false"]:hover .roleEditIconHover {
  opacity: 1 !important;
}

.Folderpopup .createRoleName {
  background-color: #F6F6F7;
  border: none;
  padding: 10px;
  border-radius: 8px;
  outline: none;
  font-size: 1rem;
  width: 100%;
  box-sizing: border-box;
  transition: all 0.2s ease;
}

.FolderCarousel {
  margin-top: 8px;
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  min-height: 38px;
}

.FolderCarousel::before,
.FolderCarousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  pointer-events: none;
  z-index: 2;
}

.FolderCarousel::before {
  left: 0;
  background: linear-gradient(to right, var(--background-color) 0%, transparent 100%);
}

.FolderCarousel::after {
  right: 0;
  background: linear-gradient(to left, var(--background-color) 0%, transparent 100%);
}

.FolderCarouselTrack {
  display: flex;
  gap: 8px;
  width: max-content;
  will-change: transform;
}

.IconFolderCarousel {
  display: flex;
  width: 20px;
}

.folder-custom-icon,
.folder-custom-icon [fill]:not([fill="none"]) { fill: none !important; }

.folder-custom-icon [stroke],
.folder-closed-icon [stroke],
#folderIconTrigger .roleEditIconDefault [stroke],
#roleIconSelectorPopup .roleIconBtn [stroke],
.chat-folder-option-icon [stroke],
.TabTooltipFolderIcon [stroke] {
  stroke-width: 1.5px !important;
}

.FolderCarouselItem {
  display: flex;
  flex: 0 0 auto;
  border: none;
  align-items: center;
  padding: 9px 10px;
  border-radius: 8px;
  gap: 9px;
  cursor: pointer;
  font-size: 0.85rem;
  white-space: nowrap;
}

.Folderpopup .settingsBtnBlack {
  font-size: 0.9rem;
  margin-left: auto;
  display: flex;
  align-self: start;
  align-items: center;
  background-color: var(--contrast);
  border: none;
  color: var(--contrast-text);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.1s ease;
}

#folderPopup.folder-edit-mode #folderCarouselWrap {
  display: none;
}

.closebuttonfolder {
  margin-left: auto;
  padding: 4px;
  width: 26px;
  aspect-ratio: 1;
  border: none;
  background-color: transparent;
  color: var(--med-text);
  display: flex;
  align-content: center;
  cursor: pointer;
}

.roleIconBtn {
  width: 22px;
  height: 22px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.roleIconBtn svg {
  display: block;
  width: 100%;
  height: 100%;
}

.roleIconSelectorPopup {
  width: 230px;
  background-color: var(--input-bg-lighter);
  border: 1px solid var(--border-color);
  border-radius: 13px;
  padding: 12px;
  box-sizing: border-box;
  display: grid;
  gap: 8px;
  position: fixed;
  z-index: 13060000000;
  box-shadow: 0 12px 28px var(--black-shadow);
}

.roleColorSelector {
  --role-hover-w: 30px;
  --role-hover-h: 30px;
}

.roleIconSelector {
  padding-top: 4px;
  --role-hover-w: 30px;
  --role-hover-h: 30px;
}

.roleColorSelector,
.roleIconSelector {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
  align-items: center;
  position: relative;
  --role-hover-x: 0px;
  --role-hover-y: 0px;
}

.roleColorSelector::before,
.roleIconSelector::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: var(--role-hover-w);
  height: var(--role-hover-h);
  transform: translate(var(--role-hover-x), var(--role-hover-y));
  box-sizing: border-box;
  border-radius: 8px;
  background: var(--hover-color);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.roleColorSelector.is-hovering::before,
.roleIconSelector.is-hovering::before {
  opacity: 1;
}

.roleColorSelector.has-selected::before,
.roleIconSelector.has-selected::before {
  opacity: 1;
}

.roleColorSelector > *,
.roleIconSelector > * {
  justify-self: center;
  position: relative;
  z-index: 1;
}

.roleColorSelectorColor {
  width: 22px;
  aspect-ratio: 1;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: visible;
  display: grid;
  place-items: center;
}

.roleColorSelectorColor svg {
  width: 22px;
  height: 22px;
  display: block;
  pointer-events: none;
}

.roleColorSelectorColor.is-selected {
  background-color: transparent !important;
  border-radius: 0;
}

.roleColorSelectorColor.Black { background-color: #FFFFFF; }
:root[data-theme="light"] .roleColorSelectorColor.Black { background-color: #1F2933; }
.roleColorSelectorColor.Red { background-color: #e47067; }
.roleColorSelectorColor.Orange { background-color: #e59e5b; }
.roleColorSelectorColor.Yellow { background-color: #e0bd4a; }
.roleColorSelectorColor.Green { background-color: #87c481; }
.roleColorSelectorColor.Blue { background-color: #6186c7; }
.roleColorSelectorColor.Purple { background-color: #ab84d5; }
.roleColorSelectorColor.Pink { background-color: #cd8ecc; }

/* New chat button */

.new-chat-btn {
    margin-top: 8px;
    width: 100%;
    border-radius: 6px;
    border: none;
    background: var(--contrast);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--background-color);
    transition: all 0.2s ease;
    text-align: left;
}

.new-chat-btn:hover {
    background: #272727;
}

.new-chat-btn:active {
  transform: scaleX(0.95);
}

.new-chat-btn:active .plus-icon {
  stroke: black;
}

.plus-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
}

/* Chat list sidebar */

.chat-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  padding-bottom: 90px; /* create space for fixed box */
  flex-direction: column;
  gap: 4px;
}

.chat-item-wrapper {
  display: flex;
  align-items: center;
  min-width: 0; /* CRITICAL: allows ellipsis to work */
}

.chat-item {
  width: 100%;
  border-radius: 8px;
  border: none;
  padding: 8px 10px;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
  background: transparent;
  color: var(--text-color-sidebar);
  min-width: 0; /* required for child text truncation */
  position: relative;
}

/* Sidebar chat title — single line, overflow revealed via hover marquee instead of ellipsis */
.chat-item-title,
.folder-item-title {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 100%;
  transition: none !important;
}

.folder-item-title {
  max-width: 203px !important;
}

.pinned-folder-row:hover .folder-item-title,
.folder-row:hover .folder-item-title {
  max-width: 195px !important;
  color: var(--text-color);
}

.chat-item.chat-item-overflowing::after,
.pinned-folder-row.chat-item-overflowing::after,
.folder-row.chat-item-overflowing::after {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--sidebar-color) 100%);
  position: absolute;
  top: 0;
  right: 31px;
  width: 25px;
  height: 100%;
  opacity: 1;
  transition: opacity 0.15s ease;
}

.chat-item-overflowing.force-hover::after {
  background: linear-gradient(90deg, transparent 0%, var(--sidebar-hover-not-trans) 100%) !important;
}

.chat-item-wrapper.menu-open.force-hover .sidebarMenuButton::after {
  background: linear-gradient(90deg, transparent 0%, var(--sidebar-hover-not-trans) 100%) !important;
}

.chat-item.active.chat-item-overflowing::after {
  background: linear-gradient(90deg, transparent 0%, var(--sidebar-active-not-trans) 100%) !important;
}

.chat-item.chat-item-scrolled-end::after,
.pinned-folder-row.chat-item-scrolled-end::after,
.folder-row.chat-item-scrolled-end::after {
  opacity: 0;
}

.chat-item.chat-item-overflowing::before,
.pinned-folder-row.chat-item-overflowing::before,
.folder-row.chat-item-overflowing::before {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, var(--sidebar-color) 0%, transparent 100%);
  position: absolute;
  top: 0;
  left: 10px;
  width: 25px;
  height: 100%;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.pinned-folder-row.chat-item-overflowing::before,
.folder-row.chat-item-overflowing::before{
  left: 33px !important;
}

.chat-item.chat-item-revealed-left::before,
.pinned-folder-row.chat-item-revealed-left::before,
.folder-row.chat-item-revealed-left::before {
  opacity: 1;
}

.chat-item.chat-item-overflowing:hover::after,
.pinned-folder-row.chat-item-overflowing:hover::after,
.folder-row.chat-item-overflowing:hover::after {
  background: linear-gradient(90deg, transparent 0%, var(--sidebar-hover-not-trans) 100%);
  right: 39px;
}

body.mobile-active .chat-item.chat-item-overflowing.active::after,
body.mobile-active .chat-item.chat-item-overflowing:hover::after {
  background: linear-gradient(90deg, transparent 0%, var(--sidebar-hover-not-trans) 100%);
  right: 31px;
}

body.mobile-active .sidebarMenuButton.chat.sidebar-menu-item.chat-item.buttonMobileSidebar.active.chat-item-overflowing.mobile-chat-context-clone::after{
  display: none;
}

.chat-item.chat-item-overflowing:hover::before,
.pinned-folder-row.chat-item-overflowing:hover::before,
.folder-row.chat-item-overflowing:hover::before {
  background: linear-gradient(90deg, var(--sidebar-hover-not-trans) 0%, transparent 100%);
}

.chat-item.chat-item-overflowing.active::before {
  background: linear-gradient(90deg, var(--sidebar-active-not-trans) 0%, transparent 100%);
}

.chat-item-title-inline-input {
  width: 100%;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  margin: 0;
}

.chat-item-wrapper.renaming .chat-item-title-inline-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  display: block !important;
  position: relative;
  z-index: 2;
  opacity: 1 !important;
  visibility: visible !important;
}

.chat-item-wrapper.renaming .chat-item-status-dot {
  display: none !important;
}

.chat-item-wrapper.renaming .chat-item {
  display: flex !important;
  align-items: center !important;
}

body.mobile-active .chat-item-wrapper.renaming .chat-item-title-inline-input {
  color: var(--contrast-text) !important;
  -webkit-text-fill-color: var(--contrast-text) !important;
  caret-color: var(--contrast-text) !important;
}

.TopbarTabs .TabFace.topbar-inline-rename-host .chat-item-title-inline-input {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 240px !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.mobile-active .mobiletopbartab.topbar-inline-rename-host .chat-item-title-inline-input {
  width: 100% !important;
  text-align: center !important;
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
  pointer-events: auto !important;
}

body.mobile-active .mobiletopbartab.topbar-inline-rename-host,
body.mobile-active .mobiletopbartab.topbar-inline-rename-host * {
  -webkit-user-select: text !important;
  user-select: text !important;
  -webkit-touch-callout: default !important;
}

.chat-item:hover {
  background: var(--hover-color);
}

body.mobile-active .chat-item:hover {
  background: transparent;
}

.chat-item-wrapper.force-hover .chat-item {
  color: var(--text-color);
  background: var(--hover-color);
}

.chat-item.active {
  background-color: var(--active-hover-color) !important;
  color: var(--text-color);
}

.delete-chat-btn {
  margin-left: auto;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.6;
}

.delete-chat-btn:hover {
  opacity: 1;
}

.trash-icon {
  width: 16px;
  height: 16px;
}

/* Main area */

.main-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    --chat-scrollbar-shift: 0px;
    overflow: hidden;         /* keep chat input pinned, chat-scroll handles overflow */
    position: relative;       /* required for pinned input */
    overflow-x: hidden !important;
    transition: margin-right 0.24s ease;
}


/* center containers in main area */

.main-area .chat-container {
    flex: 1;
    width: calc(100% - 260px);      /* expanded sidebar */
    margin-left: 260px;
    max-width: none;
    overflow-y: auto;
    padding: 20px 20px 150px;
    box-sizing: border-box;
}


.main-area .input-container {
   width: min(calc(100% - 24px), 765px) !important;
    margin: 0 auto !important;      /* CENTER IT */
    padding-left: 0;
    padding-right: 0;
}

/* Make chat content visually continue behind the bottom input bar */
.main-area:not(.empty-chat) {
  --chat-input-underlap: 24px;
  --chat-input-cover-h: 96px;
  /* Breathing room BELOW the composer's covered area: how far the last line of
     a message rests above the input bar once auto-scroll is pinned to bottom.
     Single knob — both padding rules below add it. */
  --chat-bottom-gap: 62px;
}

.main-area:not(.empty-chat) .chat-scroll {
  padding-bottom: calc(var(--chat-input-underlap) + var(--chat-input-cover-h) + var(--chat-bottom-gap));
}

.main-area:not(.empty-chat) .input-container {
  position: relative;
  z-index: 6;
  margin-top: calc(-1 * var(--chat-input-underlap)) !important;
  transform: translateX(calc(var(--chat-scrollbar-shift) * -0.5));
}

body:not(.mobile-active) .main-area:not(.empty-chat) #chatView {
  position: relative;
}

body:not(.mobile-active) .main-area:not(.empty-chat) #chatView > .chat-scroll {
  padding-bottom: calc(var(--chat-input-cover-h) + var(--chat-bottom-gap));
}

body:not(.mobile-active) .main-area:not(.empty-chat) #chatView > .input-container {
  position: absolute;
  left: 50%;
  bottom: 24px;
  margin: 0 !important;
  z-index: 7;
  transform: translateX(calc(-50% + (var(--chat-scrollbar-shift) * -0.5)));
}

body:not(.mobile-active) .main-area:not(.empty-chat) #chatView > .input-disclaimer {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: min(100%, 765px);
  margin: 0;
  transform: translateX(-50%);
  z-index: 7;
}

.chat-scroll,
.chat-inner,
.main-area .chat-container {
    min-width: 0;
}

.chat-scroll {
    overflow-x: hidden;
}

/* Collapse logic */

.sidebar.collapsed {
  width: 54px;
background-color: var(--sidebar-color);
}

.sidebar.collapsed .sidebar-scroll {
  background-color: var(--sidebar-color);
}

.sidebar.collapsed + .main-area .chat-container {
    width: calc(100% - var(--sidebar-w));
    margin-left: var(--sidebar-w);
}

/* When collapsed, hide text, keep icons */

.sidebar.collapsed .chat-item {
  display: none;
}

.sidebar.collapsed .logo-text {
  max-width: 0;
  opacity: 0;
}

.sidebar.collapsed .new-chat-text,
.sidebar.collapsed .shortcut-text,
.sidebar.collapsed .organize-text {
  display: inline-block !important;
  max-width: 0;
  opacity: 0;
}


.sidebar.compact .sidebarMenuButton {
    width: 38px;
    height: 38px;
    min-height: 30px;
    margin: 0;
    margin-left: -1px;
    padding: 0 0 0 11px;
    border-radius: 10px;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
}

.sidebar.compact .sidebarMenuButton.search {
    width: 36px;
    height: 36px;
    margin-left: 0;
    padding: 0 0 0 9px;
}

.sidebar.compact .sidebarMenuButton.search .key-bind{
  display: none;
}

/* #userBox is a SIBLING of .sidebar, not a descendant, so none of the
   .sidebar.compact / .sidebar.collapsed rules above reach the nav buttons
   inside it (Notifications, Credits). Restate them through the sibling
   combinator -- same values as the originals, so the two sets stay in
   lockstep; edit both together. */
.sidebar.compact ~ .user-box .sidebarMenuButton {
    width: 38px;
    height: 38px;
    min-height: 30px;
    margin: 0;
    margin-left: -1px;
    padding: 0 0 0 11px;
    border-radius: 10px;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
}

/* Matches the `display: none !important` pair further down the file, which is
   what actually wins for the in-sidebar items. Covers .new-chat-text.light
   (the Credits amount) too, since that carries .new-chat-text. */
.sidebar.collapsed ~ .user-box .new-chat-text,
.sidebar.collapsed ~ .user-box .shortcut-text,
.sidebar.collapsed ~ .user-box .organize-text {
    display: none !important;
}

/* Collapsed, the unread count can't sit after a label that is gone: it pins
   to the bell's top-right corner instead, smaller. */
.user-box .sidebar-menu-item:has([data-notification-count]) {
    position: relative;
}
.sidebar.collapsed ~ .user-box [data-notification-count] {
    position: absolute;
    top: 3px;
    right: 3px;
    margin: 0;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 0.6rem;
    box-sizing: border-box;
}

.sidebar.compact .sidebar-menu-highlight {
  border-radius: 8px;
}

/* Only show close button when expanded */

.sidebar.compact .sidebar-close-btn {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}



/* Collapsed rail shows #sidebarOpenBtn INSTEAD of the logo, permanently --
   index.html swaps the two only while the collapsed sidebar is hovered, the
   dashboard keeps the open button on screen. `.compact` (not `.collapsed`) is
   the settled collapsed state, so the swap still waits for the width
   transition to finish and nothing flickers mid-animation.
   NOTE: #sidebarOpenBtn is authored INSIDE #sidebarLogoBtn, but nested
   <button>s are illegal, so the parser makes it a SIBLING inside
   .sidebar-logo-row -- which is why hiding #sidebarLogoBtn does not hide it. */
.sidebar.compact .logo-menu {
  display: flex;
}

.sidebar:not(.compact) .logo-menu{
  display: none;
}

.sidebar.compact #sidebarLogoBtn{
  display: none;
}

.sidebar:not(.compact) #sidebarLogoBtn{
  display: flex;
}


.logo-default {
  display: inline-block;
}

/* The app layout class is used for some width adjustments */

.app-layout.sidebar-collapsed .chat-container {
  width: calc(100% - var(--sidebar-w));
  margin-left: var(--sidebar-w);
}


/* Small screens: full-width chat, sidebar overlay on open */
@media (max-width: 900px) {
  .chat-container {
    width: 100%;
    max-width: none;
  }

/* Mobile sidebar should overlay and not take layout space */
.sidebar.mobile-open {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 260px !important;
    height: 100%;
    z-index: 999 !important;
    transform: none !important;
}

/* ---------------------------------------------------
   MOBILE SIDEBAR OPEN FIX: prevent chatbar from shifting
   --------------------------------------------------- */
.sidebar.mobile-open ~ .main-area .input-container {
    position: fixed !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 765px !important;
    margin: 0 !important;
    z-index: 500 !important;
}
} 

.chat-menu-btn {
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 4px;
    opacity: 0.7;
}

.chat-menu-btn:hover,
.chat-item-wrapper.menu-open .chat-menu-btn {
    opacity: 1;
}

.chat-popup-menu {
    position: absolute;
    right: 10px;
    top: 32px;
    background: var(--background-color);
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    box-shadow: 0 4px 10px #0002;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.chat-popup-menu.hidden {
    display: none;
}

.popup-item {
    padding: 8px 12px;
    width: 120px;
    text-align: left;
    border: none;
    background: var(--background-color);
    cursor: pointer;
    font-size: 0.9rem;
}

.popup-item:hover {
    background: #efefef;
}

/* Chat dropdowns (new UI) */
.ChatDropdown,
.ChatFolderDropdown {
  z-index: 99999;
  position: fixed;
  cursor: default;
  background-color: var(--input-bg);
  height: fit-content;
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 8px 20px var(--black-shadow);
}

.ChatDropdown {
  width: 160px;
}

.ChatDropdown.in-collection {
  width: 205px;
}

/* #topbarChatDropdown is shared between desktop (Recently created / Rename
   chat / Delete chat) and mobile (portalTopbarDropdownsForMobile() adds
   .mobile-topbar-context-menu and reskins it to match the sidebar's
   canonical Pin / Rename / Add-or-Change-collection / Remove-from-collection
   / Delete layout). Reordering via flex `order` instead of moving DOM nodes
   keeps desktop's natural order untouched when this class isn't present. */
.ChatDropdown.mobile-topbar-context-menu #topbarPinBtn {
  order: 1;
}
.ChatDropdown.mobile-topbar-context-menu #topbarRenameBtn {
  order: 2;
}
.ChatDropdown.mobile-topbar-context-menu #topbarRecentBtn {
  order: 3;
}
.ChatDropdown.mobile-topbar-context-menu #topbarRemoveCollectionBtn {
  order: 4;
}
.ChatDropdown.mobile-topbar-context-menu #topbarChatDropdownBreakLine {
  order: 5;
}
.ChatDropdown.mobile-topbar-context-menu #topbarDeleteBtn {
  order: 6;
}

.ChatFolderDropdown {
  width: fit-content;
  min-width: 160px;
}

.ChatFolderDropdown.topbar-recent-dropdown {
  z-index: 100000;
}

.ChatFolderDropdown.chat-folder-dropdown {
  z-index: 100000;
  width: 220px;
  min-width: 220px;
  max-width: 220px;
  max-height: min(380px, calc(100vh - 24px));
  overflow: hidden;
  overscroll-behavior: contain;
  padding: 0;
  gap: 0;
  align-items: stretch;
}

.ChatFolderDropdown.chat-folder-dropdown .chat-folder-dropdown-header {
  width: 100%;
  padding: 8px 8px 0;
  box-sizing: border-box;
}

.ChatFolderDropdown.chat-folder-dropdown .chat-folder-dropdown-header-divider {
  width: 100%;
  padding-top: 8px;
  border-bottom: 1px solid var(--border-color);
}

.ChatFolderDropdown.chat-folder-dropdown .chat-folder-dropdown-scroll {
  --sidebar-scroll-gutter: calc(var(--sb-size) + 4px);
  --sb-track-color: var(--background-color);
  --sb-thumb-color: var(--thumb-color);
  --sb-size: 9px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 8px;
  min-height: 0;
  width: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  padding-right: 4px;
  margin-right: 0;
  background: var(--input-bg);
  transition: none;
  scrollbar-width: auto;
  scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  scrollbar-gutter: stable;
  box-sizing: border-box;
}

.ChatFolderDropdown.chat-folder-dropdown::-webkit-scrollbar,
.ChatFolderDropdown.chat-folder-dropdown .chat-folder-dropdown-scroll::-webkit-scrollbar {
  width: var(--sb-size);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.ChatFolderDropdown.chat-folder-dropdown::-webkit-scrollbar-track,
.ChatFolderDropdown.chat-folder-dropdown .chat-folder-dropdown-scroll::-webkit-scrollbar-track {
  background: var(--sb-track-color) !important;
  border-radius: 8px;
  border: none;
  box-shadow: none;
}

.ChatFolderDropdown.chat-folder-dropdown::-webkit-scrollbar-thumb,
.ChatFolderDropdown.chat-folder-dropdown .chat-folder-dropdown-scroll::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color) !important;
  border-radius: 8px;
  border: 1px solid #282825 !important;
  box-shadow: none;
}

@supports not selector(::-webkit-scrollbar) {
  .ChatFolderDropdown.chat-folder-dropdown,
  .ChatFolderDropdown.chat-folder-dropdown .chat-folder-dropdown-scroll {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color) !important;
  }
}

.ChatFolderDropdown.chat-folder-dropdown .ChatDropdownOption.folder-item {
  min-width: 0;
}

.ChatFolderDropdown.chat-folder-dropdown .chat-folder-option-icon {
  flex: 0 0 18px;
}

.ChatFolderDropdown.chat-folder-dropdown .chat-folder-dropdown-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ChatDropdown.hidden,
.ChatFolderDropdown.hidden {
  display: none;
}

.chat-item-wrapper.menu-open {
  z-index: 100001;
}

.ChatDropdownOption {
  height: 32px;
  border-radius: 8px;
  background-color: transparent;
  border: none;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  font-size: 0.9rem !important;
  width: 100%;
  color: var(--med-dark-text);
  cursor: pointer;
  text-align: left;
}

.ChatDropdownOption.tall {
  height: 55px;
  box-sizing: border-box;
}

.ChatDropdownOption.Red {
  height: 32px;
  border-radius: 8px;
  background-color: transparent;
  border: none;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  width: 100%;
  color: var(--red-text);
  cursor: pointer;
  text-align: left;
}

.ChatDropdownOption:hover {
  background-color: var(--hover-color);
  color: var(--text-color);
}

.ChatDropdownOption.is-open {
  background-color: var(--hover-color);
  color: var(--text-color);
}

.ChatDropdownOption.Red:hover {
  background-color: var(--red-text);
  color: var(--white);
}

.ChatDropdownOption.active {
  background-color: var(--hover-color);
  color: var(--text-color);
}

.ChatDropdownOption.on {
  color: var(--highlight-text)
}

.ChatDropdownOption.on:hover {
  background-color: var(--highlight-bg);
}

.ChatDropdownOnCheckmark{
  color: var(--blue-accent);
  width: 18px;
  height: 18px;
  margin-left: auto;
  display: none;
  justify-content: center;
  align-items: center;
}

.ChatDropdownOnCheckmark.mobile{
  width: 22px;
  height: 22px;
}

.ChatDropdownOption.on .ChatDropdownOnCheckmark,
.ChatDropdownOnCheckmark.on{
  display: flex;
}

#addFileDropdownBottomMenu,
.add-file-collection-dropdown,
.add-file-tools-dropdown {
  gap: 4px;
  padding: 4px;
  width: 205px;
}

#modelSelectDropdown {
  gap: 4px;
  padding: 4px;
  width: 290px;
}

.add-file-bottom-dropdown {
  z-index: 1000100;
}

.add-file-tools-dropdown {
  z-index: 999999;
}

.ChatDropdownArrowIcon {
  width: 18px;
  display: flex;
  opacity: 0.5;
  margin-left: auto;
  transition: opacity 0.2s ease;
}

.ChatDropdownOption:hover .ChatDropdownArrowIcon {
  opacity: 1;
}

.ChatDropdownIcon {
  width: 14px;
  display: flex;
  margin-right: 8px;
}

.ChatDropdownIcon.ml {
  margin-left: auto;
  margin-right: 0;
}

body.mobile-active .message{
  border-radius: 24px;
}

body.mobile-active .message.bot{
  padding: 0;
}

body.mobile-active .Thinking{
  margin-top: 20px !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.mobile-active .search-thinking-row{
  min-width: 0;
  max-width: 100%;
}

body.mobile-active .search-top-text-think {
  width: 100%;
  min-width: 0;
}

body.mobile-active .search-header-text{
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}


body.mobile-active .ChatDropdownOption {
  padding: 12px 8px;
  font-size: 0.9rem;
}

body.mobile-active .ChatDropdownOption.Red.delete-item {
  stroke-width: 2;
}

.ChatDropdownOption.move-folder-item .ChatDropdownIcon,
#addFileDropdownBottomCollectionBtn .ChatDropdownIcon,
.ChatDropdownOption.remove-folder-item .ChatDropdownIcon,
body.mobile-active #topbarRecentBtn,
body.mobile-active .ChatDropdownOption.remove-folder-item,
body.mobile-active .ChatDropdownOption.move-folder-item {
  stroke-width: 1.25;
}

body.mobile-active .ChatDropdownIcon {
  width: 18px;
  height: 18px;
}

body.mobile-active .ChatDropdown.chat-dropdown {
  border-radius: 24px;
  width: fit-content !important;
  background-color: var(--input-bg);
  border-color: var(--border-color);
  padding: 8px 16px;
  gap: 5px;
}

.ChatDropdown.chat-dropdown.settings-dropdown {
  width: 260px;
}

body.mobile-active .BreakLine{
  display: none !important;
}

/* Disable hover-only chat action feedback on touch/mobile. */
body.mobile-active .ChatDropdownOption:hover,
body.mobile-active .ChatDropdownOptionRed:hover,
body.mobile-active .folder-popup-menu .popup-item:hover,
body.mobile-active .folder-item:hover {
  background-color: transparent !important;
  color: inherit !important;
}

body.mobile-active .ChatDropdownOption:hover .ChatDropdownArrowIcon {
  visibility: hidden !important;
}

body.mobile-active .threeDotsMenu:hover {
  color: inherit !important;
}

body.mobile-active .folder-row:hover {
  background: transparent !important;
}

.ChatDropdownIconPlus {
  width: 18px;
  display: flex;
  margin-right: 14px;
}

.BreakLine {
  border-bottom: 1px solid var(--border-color-lighter);
  width: calc(100% - 18px);
}

.user-dropdown {
  width: 260px;
}

.user-dropdown.mid{
  width: 200px;
}

.user-text-dropdown.user-menu-header {
  padding: 6px 8px;
}

/* User menu header: the institution's icon beside its name and the email. */
.user-menu-inst-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  overflow: hidden;
  border: 1px solid var(--border-color-lighter);
  border-radius: 6px;
  box-sizing: border-box;
}

.user-menu-inst-icon[hidden] {
  display: none;
}

.user-menu-inst-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* "Chat with Slanter" leaves the dashboard: its arrow always shows. */
.ChatDropdownArrowIcon.user-menu-external-arrow {
  opacity: 1;
  scale: 0.9;
  margin-top: -2px;
}

.user-text-dropdown{
  width: 100%;
  box-sizing: border-box;
  font-size: 0.84rem;
  color: var(--light-text);
  padding: 6px 12px;
  text-align: left;
  display: flex;
}

.topbar-dropdown {
  width: 191px;
}

.topbar-recent-dropdown {
  width: 220px;
}

.chat-dropdown-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.create-folder-item {
  padding-bottom: 7px;
}

/* --- Modal Overlay --- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 9999;
    backdrop-filter: blur(2px);
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.modal > * {
    transform: scale(1);
    transition: transform 0.2s ease;
}

.modal.hidden > * {
    transform: scale(0.95);
}

/* --- Modal Box --- */
.modal-box {
    background: var(--input-bg);
    padding: 24px;
    border-radius: 21px;
    border: 1px solid var(--border-color-sharper);
    width: 450px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.modal-box h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.modal-input {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    font-size: 0.95rem;
    width: 100%;
    box-sizing: border-box;
}

.modal-actions {
    display: flex;
    padding-top: 22px;
    justify-content: flex-end;
    gap: 8px;
}

#deleteConfirm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

#deleteConfirm.is-loading {
    pointer-events: none;
    opacity: 0.85;
}

#deleteConfirm:not(.is-loading) #deleteConfirmSpinner {
    display: none;
}

.modal-btn {
    padding: 8px 14px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.9rem;
    border: none;
}

.modal-btn.cancel {
    background: transparent;
    color: var(--contrast);
}

.modal-btn.cancel:hover {
    background: var(--hover-color);
}

.modal-btn.save {
    background: var(--contrast);
    color: var(--background-color);
}

.modal-btn.save:hover {
    background: var(--light-background-hover);
}

.modal-btn.delete {
    background: var(--red-text);
    color: var(--contrast-color);
}

.modal-btn.delete:hover {
    background: var(--red-text);
}


/* Improved 3-dot popup menu */
.chat-popup-menu {
    position: fixed;
    width: 150px;                 /* <--- Set fixed width */
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: 0 4px 12px #0003;
    display: flex;
    flex-direction: column;
    padding: 6px 0;
    animation: fadeIn 0.15s ease-out;
    z-index: 99999;
    pointer-events: auto;
}

.popup-item {
    padding: 10px 16px;
    font-size: 0.9rem;
    cursor: pointer;
    background: none;
    border: none;
    text-align: left;
    width: 150px;
}

.popup-item:hover {
    background: var(--border-color);
}

.chat-menu-btn {
    margin-left: auto;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    opacity: 0.7;
}

.chat-menu-btn:hover,
.chat-item-wrapper.menu-open .chat-menu-btn {
    opacity: 1;
}

.chat-item-wrapper {
    position: relative; /* <--- ADD THIS */
}

/* --- USER BOX --- */
.user-box {
    position: fixed;
    bottom: 0;
    left: 0;
    /* Notifications, Documentation, Credits and the user row; the sidebar
       above is calc(100vh - this), in two places. */
    height: 202px;
    /* width: calc(var(--sidebar-w) - 1px); */
    width: var(--sidebar-w);
    background: var(--sidebar-color);
    padding: 9px;
    border-top: 1px solid var(--border-color);
    border-right: 1px solid var(--border-color);
    z-index: 9999;
    transition: width 0.25s ease, padding 0.25s ease;
    user-select: none;
    box-sizing: border-box;
    overflow: hidden;
    gap: 6px;
    display: flex;
    flex-direction: column;
}

  /* .user-box:hover {
    background-color: var(--hover-color);
  } */

  .user-box:hover .collection_btn {
    background-color: var(--hover-color);
  }

.sidebar.collapsed ~ .user-box { 
  background-color: var(--sidebar-color);
}

.user-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 10px;
    margin-left: 4px;
    width: 263px;
    border-radius: 10px;
    height: 51px;
    cursor: pointer;
}

.user-inner:hover {
  background-color: var(--hover-color-50);
}

.user-info {
    min-width: 0;
    max-width: 100%;
    opacity: 1;
    transform: translateX(0);
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.2s ease-out, opacity 0.16s ease-out, transform 0.2s ease-out;
}

.sidebar.collapsed ~ .user-box .user-info {
    max-width: 0;
    opacity: 0;
    transform: translateX(-4px);
    pointer-events: none;
}

/* Disable user-box hover when hovering Get Plus */
.user-inner:has(.get-plus-btn:hover) {
    background: transparent !important;
}

.user-avatar {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    background: var(--no-avatar);
    border-radius: 50%;
    color: var(--white);
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 13px;
    font-size: 11px;
}

.user-avatar.small{
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
}

.sidebar.collapsed ~ .user-box .user-avatar {
    margin-right: 0;
}

.user-name {
    font-size: 0.9rem;
    font-weight: 300;
}

/* Popup menu */
.user-menu {
    position: absolute;
    bottom: 70px;
    left: 14px;
    width: 180px;
    background: var(--background-color);  /* ensure popup stays clean white */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: none;
    z-index: 99999;
}

.user-menu-item {
    padding: 12px;
    cursor: pointer;
    transition: background 0.2s;
}

.user-menu-item:hover {
    background: var(--hover-color);
}

.logout-item {
    color: var(--red-text);
    font-weight: 600;
}

.sidebar.collapsed {
    overflow-y: hidden;

}

.sidebar.collapsed ~ .user-box {
    padding: 8px;
}

.sidebar.collapsed .chat-list {
    display: none;
}

.sidebar.collapsed ~ .user-box #userMenu {
    left: 70px;  /* small offset from the collapsed bar */
}

.sidebar.collapsed .chat-menu-btn {
    display: none !important;
}

.sidebar.collapsed .chat-popup-menu {
    display: none !important;
}

/* COLLAPSED USER BOX — FIXED HEIGHT + TIGHT HOVER */
.sidebar.collapsed ~ .user-box .user-inner {
    justify-content: flex-start;
    padding: 8px;
    margin: 0;
}


/* Remove shadow-space from scroll area when empty */
.main-area.empty-chat .chat-scroll {
    padding-bottom: 0 !important;
}

.input-container-centered.hidden {
    display: none;
}


.Greeting {
  padding-bottom: 24px;
    position: absolute;
    top: calc(var(--slanter-topbar-h, 50px) + ((100vh - var(--slanter-topbar-h, 50px)) * 0.46) - 58px);
    left: 50%;
    transform: translateX(-50%);
    font-family: "Slanter-serif", serif;
    font-weight: 100;
    color: #292929;
    font-size: 2.3rem;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

body:not(.mobile-active) .Greeting.inputbarGreeting .mobileGreetingText,
body:not(.mobile-active) .Greeting.inputbarGreeting .mobileGreetingMessage {
    white-space: nowrap;
    text-wrap: nowrap;
}

.mobileGreeting{
    display: none;
    position: relative;
    font-family: "Slanter-serif", serif;
    font-weight: 100;
    color: #292929;
    font-size: 1.7rem;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    pointer-events: none;
}

.mobileGreetingText{
    display: inline-block;
    position: relative;
    user-select: none;
    text-align: center;
    white-space: normal;
    min-height: 17px;
    line-height: 1.25;
    width: auto;
    max-width: calc(100vw - 120px);
    text-wrap: wrap;
}

.mobileGreetingMessage {
    color: var(--text-color);
    display: block;
    max-width: 100%;
    white-space: normal;
}

.logosidegreeting{
    color: var(--color-green-slanter);
    width: 20px;
    position: absolute;
    left: -16px;
    bottom: -8px;
    transform: translate(-35%, 35%);
    opacity: 0.5;
}

.logosidegreetingrota{
    transform: rotate(180deg);
    color: var(--color-green-slanter);
    width: 20px;
    position: absolute;
    right: -16px;
    top: -8px;
    transform: translate(35%, -35%) rotate(180deg);
    opacity: 0.5;
}

.input-container-centered.collection {
  top: 0;
}

.input-container-centered {
    transition: box-shadow 0.25s ease;
    position: absolute;
    top: calc(var(--slanter-topbar-h, 50px) + ((100vh - var(--slanter-topbar-h, 50px)) * 0.46));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 675px;
    background: var(--input-bg);
    border: 1px solid var(--border-color-input);
    border-radius: 21px;
    box-shadow: 0 0 0 var(--black-shadow);
    padding: 0;                     /* SAME as bottom bar */
    overflow: hidden;               /* SAME */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;         /* SAME */
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.input-container-centered textarea {
    width: 100%;
    border: none;
    resize: none;
    overflow-y: auto;
    font-size: 1rem;
    line-height: 1.4;
    box-sizing: border-box;
}

.input-container-centered:hover,
.input-container-centered:has(#inputCenteredBox:focus){
  border-color: var(--border-color-darker);
  box-shadow: 0 0 15px var(--black-shadow);
}

.empty-chat-composer-stack {
    display: none;
}

.empty-chat-composer-stack.collection {
    display: flex;
    position: relative;
    top: 0;
    width: min(100%, 765px);
    max-width: 765px;
    margin: 0 auto;
    flex-direction: column;
    align-items: stretch;
}

.empty-chat-composer-stack.collection .collection-live-composer-host {
    width: 100%;
}

.main-area.empty-chat .empty-chat-composer-stack.collection {
    position: relative;
    top: 0;
    left: auto;
    transform: none;
    width: 100%;
    align-items: stretch;
}

.empty-chat-composer-stack.collection .inputbarGreeting,
.empty-chat-composer-stack.collection .mobileGreeting {
    display: none !important;
}

.empty-chat-composer-stack.collection #filePreviewRow {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
}

.empty-chat-composer-stack.collection .input-container-centered {
    position: static !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    width: 100%;
    max-width: 765px;
}

.main-area.empty-chat .empty-chat-composer-stack {
    position: absolute;
    top: calc(var(--slanter-topbar-h, 50px) + ((100vh - var(--slanter-topbar-h, 50px)) * 0.46));
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(calc(100% - 24px), 675px);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 8;
}

.main-area.empty-chat .empty-chat-composer-stack .inputbarGreeting {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    margin-bottom: 20px;
}

.main-area.empty-chat .empty-chat-composer-stack .mobileGreeting {
    display: none;
}

.main-area.empty-chat .empty-chat-composer-stack #filePreviewRow {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
}

.main-area.empty-chat .empty-chat-composer-stack .input-container-centered {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
}

.centered-bottom-bar {
    height: 50px;
    width: 100%;
    background: var(--input-bg);
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
}


/* Auto-grow until max height, then scroll */
#inputbox,
#inputCenteredBox {
    min-height: 50px;
    max-height: 500px;
    overflow-y: hidden;      /* JS toggles when needed */
    resize: none;
}

#inputbox {
    max-height: 320px;
}

#inputCenteredBox {
    color: var(--text-color);
    -webkit-text-fill-color: currentColor;
    max-height: calc(1.4em * 10 + 24px);
    margin-bottom: 15px !important;
}

/* Block-model contenteditable chat input: .line (plain prose) + .code-block (highlighted code) */
.editable-chat-input {
    --sb-track-color: var(--input-bg);
    --sb-thumb-color: var(--thumb-color);
    --sb-size: 9px;
    font-family: 'Slanter-Sans', sans-serif;
    font-weight: 300;
    width: 100%;
    min-height: 0px;
    padding: 20px 20px 0 20px;
    margin-bottom: 8px;
    border: none;
    box-sizing: border-box;
    font-size: 1rem;
    display: block;
    text-align: left;
    background-color: var(--input-bg);
    color: var(--text-color);
    white-space: pre-wrap;
    overflow-wrap: break-word;
    outline: none;
    cursor: text;
    position: relative;
}

.editable-chat-input::-webkit-scrollbar {
    width: var(--sb-size);
}

.editable-chat-input::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 11px;
}

.editable-chat-input::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 11px;
    border: 1px solid var(--input-bg);
}

@supports not selector(::-webkit-scrollbar) {
    .editable-chat-input {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}

.editable-chat-input .line {
    background: transparent;
    white-space: pre-wrap;
    min-height: 1.4em;
}

/* Empty "Enter" lines have no text/<br> content, so the browser's native
   ::selection never paints across them. line-selection-marker.js toggles
   .line-selected on lines covered by the current selection, and this shows
   a small highlighted block (like a selected space character) so blank
   lines don't look skipped when a multi-line selection passes through them. */
.editable-chat-input .line.line-selected.line-empty::after {
    content: "";
    display: inline-block;
    width: 0.55em;
    height: 1.1em;
    vertical-align: text-bottom;
    background: var(--highlight-bg);
}

.editable-chat-input .code-block {
    background: var(--code-paste-bg);
    margin: 6px 0;
    padding: 10px 12px;
    border-radius: 8px;
}

.editable-chat-input .code-block code {
    background: transparent !important;
    color: var(--text-color);
    font-family: 'JetBrains Mono', monospace;
    font-weight: 300;
    font-size: 0.85em;
    display: block;
}

.editable-chat-input .code-block .code-line {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-height: 1.3em;
}

.editable-chat-input.is-placeholder-empty::before {
    content: attr(data-placeholder);
    position: absolute;
    left: 20px;
    top: 20px;
    right: 20px;
    color: var(--text-color);
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 440ms ease;
}

.editable-chat-input.is-placeholder-fading.is-placeholder-empty::before {
    opacity: 0;
}

.scroll-down {
    position: fixed;
    /* --chat-input-cover-h tracks the bottom input bar's actual rendered
       height (grows with multi-line content), kept in sync by
       syncChatInputCoverSpace(). Sit just above it instead of a fixed guess. */
    bottom: calc(var(--chat-input-cover-h, 90px) + 15px);
    /* Center relative to the chat column (expanded sidebar) */
    left: calc(260px + (100% - 260px) / 2);
    transform: translateX(-50%) translateY(0);
    color: var(--text-color);
    width: 38px;
    height: 38px;
    padding: 0;
    background: var(--input-bg);
    border-radius: 50%;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 8px var(--black-shadow);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;

    z-index: 10050;
    isolation: isolate;
    will-change: transform, opacity;
    backface-visibility: hidden;
    /* smooth movement */
    opacity: 1;
    visibility: visible;
}


/* Scroll-down icon swap: arrow <-> thinking dot-shuffle while the model is
   generating. Both glyphs are stacked in the same box and cross-fade with a
   scale(1)->scale(0) / scale(0)->scale(1) pair. .is-thinking is set by
   syncScrollDownThinkDot() only while the VISIBLE chat is streaming (another
   chat generating in the background keeps the arrow); it also mounts/destroys
   the lottie. */
.scroll-down .scroll-down-icon-swap {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}

.scroll-down .scroll-down-arrow,
.scroll-down .scroll-down-thinkdot {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    transition:
        transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 180ms ease;
}

.scroll-down .scroll-down-arrow {
    transform: scale(1);
    opacity: 1;
}

.scroll-down .scroll-down-thinkdot {
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
}

/* The dot-shuffle lottie is drawn at the inline-think-dot's native box; scale it
   up a touch so it reads at the button's smaller size. */
.scroll-down .scroll-down-thinkdot .stream-inline-thinkdot-lottie {
    width: 130%;
    height: 130%;
    margin: -15%;
}

.scroll-down.is-thinking .scroll-down-arrow {
    transform: scale(0);
    opacity: 0;
}

.scroll-down.is-thinking .scroll-down-thinkdot {
    transform: scale(0.6);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-down .scroll-down-arrow,
    .scroll-down .scroll-down-thinkdot {
        transition-duration: 0ms;
    }
}

/* Center correctly when sidebar is collapsed */
.app-layout.sidebar-collapsed .scroll-down {
    left: calc(60px + (100% - 60px) / 2);
}

.scroll-down.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(0);
    transition-delay: 0ms, 0ms, 320ms, 0ms;
}

.scroll-down:hover {
  background-color: var(--input-box-bg);
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  z-index: 10051;
}

.scroll-down:focus-visible {
  opacity: 1 !important;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  z-index: 10051;
}

body.mobile-active #scrollDownBtn {
    left: 50% !important;
    right: auto !important;
    bottom: calc(
        env(safe-area-inset-bottom, 0px)
        + 12px
        + var(--mobile-inputbar-height, 64px)
        + 10px
    );
    transform: translateX(-50%) translateY(calc(-1 * var(--mobile-keyboard-shift, 0px)));
    width: 45px;
    height: 45px;
    border-radius: 16px;
    padding: 11px;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    box-shadow: var(--mobile-button-inset);
    transition:
        transform 260ms ease,
        opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0ms linear 0ms,
        background-color 0.2s ease;
}

body.mobile-active #scrollDownBtn.is-hidden {
    transform: translateX(-50%) translateY(calc(-1 * var(--mobile-keyboard-shift, 0px)));
}

body.mobile-active #scrollDownBtn:hover,
body.mobile-active #scrollDownBtn:focus-visible {
    transform: translateX(-50%) translateY(calc(-1 * var(--mobile-keyboard-shift, 0px)));
}

body.mobile-active #scrollDownBtn:active:not(:disabled),
body.mobile-active #scrollDownBtn.mobilebutton-pressed:not(:disabled) {
    transform: translateX(-50%) translateY(calc(-1 * var(--mobile-keyboard-shift, 0px))) scale(1.3);
}

.sidebar-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;

    padding-top: var(--sidebar-fixed-top-h);
    padding-bottom: var(--sidebar-fixed-bottom-h);
    padding-right: var(--sidebar-scroll-gutter);
    margin-right: 0;

    background: var(--sidebar-color);
    scrollbar-width: thin;
    transition: all 0.25s ease;
}

/* chrome scrollbar styling */
.sidebar-scroll::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 11px;
    border: none;
    box-shadow: none;
}

.sidebar-scroll::-webkit-scrollbar {
    width: var(--sb-size);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 11px;
    border: none;
    box-shadow: none;
    border: 1px solid var(--sidebar-color);
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--sb-thumb-color);
}

@supports not selector(::-webkit-scrollbar) {
  .sidebar,
  .sidebar-scroll {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

.top-box,
.top-box-Dash {
    position: relative;
    width: 100%;
    background: var(--sidebar-color);
    padding: 0 0 var(--sidebar-fixed-bottom-h) 0;
    padding-top: var(--sidebar-fixed-top-h);
    /*padding-right: var(--sidebar-scroll-gutter);*/
    box-sizing: border-box;
    border-bottom: none;
    z-index: auto;
}

.sidebar.collapsed .top-box,
.sidebar.collapsed .top-box-Dash {
    width: 54px;
    background-color: var(--sidebar-color);
    border-bottom: none;
}

.sidebar.collapsed .chat-list {
    display: none;
}

/* Hide conversation names when collapsed */
.sidebar.collapsed .chat-item-title {
    display: none !important;
}

.sidebar.collapsed .chat-item-subtitle {
    display: none !important;
}

/* Center logo + new-chat when compact */
.sidebar.compact .top-box,
.sidebar.compact .top-box-Dash {
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.sidebar.compact .logo-text {
    display: inline-block;
}

.sidebar.compact #collapseBtn {
    display: none;
}


/* Expanded = pill button */
.sidebar:not(.collapsed) #newChatBtn {
    width: 100%;
    border-radius: 8px;
    height: auto;
    padding: 8px 9px;
    justify-content: flex-start;
}

#newChatBtn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sidebarSVG {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  color: var(--light-text) !important;
  opacity: 0.6;
  flex: 0 0 16px;
  transition: scale 0.2s ease;
}

.sidebarSVG.red{
  color: var(--red-text) !important;
}

.sidebar.collapsed #newChatBtn {
    margin: 0 auto;
}

.sidebar.collapsed #newChatBtn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 8px;
    justify-content: center !important;
}

.sidebar.collapsed .logo-section img {
    margin: 0 auto;
}
/* Center logo container when collapsed */
.sidebar.collapsed .logo-section {
    width: 100%;
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    padding: 0;
}

.sidebar.collapsed .chat-item {
    display: none !important;
}

/* Center the entire logo row when collapsed */
.sidebar.collapsed .sidebar-logo-row {
    left: 0;
    width: 53px;
    justify-content: center !important;
    align-items: center;
    background: var(--sidebar-color);
    padding-top: 0;
    padding-right: 0;
}

/* Hide the close button when collapsed */
.sidebar.collapsed #sidebarCloseBtn {
    display: none !important;
}

/* Deterministic collapsed centering for logo/open button */
.sidebar.collapsed .sidebar-logo-row {
    display: grid;
    place-items: center;
}

.sidebar.collapsed .sidebar-logo-btn {
    width: 110px !important;
    left: 10px !important;
    justify-content: center !important;
}

.sidebar.collapsed .logo_text {
  fill: none;
}

/* Remove the close button so it doesn't push logo away */
.sidebar.collapsed .sidebar-close-btn {
    display: none !important;
}

#sidebarLogoBtn {
  margin-left: 9px;
  padding: 0;
  justify-content: flex-start;
  gap: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: left 0.25s ease;
}

/* Hide entire chat list (names + buttons) */
.sidebar.collapsed #chatList {
    display: none !important;
}

/* Hide the "Past Conversations" label */
.sidebar.collapsed .sidebar-section-label {
    display: none !important;
  }

.sidebar.collapsed .sidebar-folder-list,
.sidebar.collapsed .sidebar-chat-list {
    display: none !important;
}

  .sidebar-section-label {
    color: var(--med-light-text);
    font-size: 0.8rem;
    font-weight: 500;
  }

.chat-item-inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-item-status-dot {
    width: 12px;
    height: 12px;
    aspect-ratio: 1;
    position: absolute;
    right: 13px;
    top: 50%;
    margin-top: -6px;
    border-radius: 999px;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    transform: scale(0.8);
}

@keyframes chat-item-status-spin {
    to {
        transform: rotate(360deg);
    }
}

.chat-item-background-complete .chat-item-status-dot {
    background: var(--blue-accent);
    opacity: 1;
    transform: scale(0.6);
}

.chat-item-background-pending .chat-item-status-dot {
    background: transparent;
    border: 2px solid color-mix(in srgb, var(--blue-accent) 35%, transparent);
    border-top-color: var(--blue-accent);
    opacity: 1;
    transform: none;
    animation: chat-item-status-spin 0.9s linear infinite;
}

.chat-item.active .chat-item-status-dot {
    opacity: 0 !important;
    transform: scale(0.8);
}

.chat-item.chat-item-background-pending:hover .chat-item-status-dot,
.chat-item.chat-item-background-complete:hover .chat-item-status-dot,
.chat-item-wrapper.force-hover .chat-item.chat-item-background-pending .chat-item-status-dot,
.chat-item-wrapper.force-hover .chat-item.chat-item-background-complete .chat-item-status-dot {
    opacity: 0;
    transform: scale(0.8);
    animation-play-state: paused;
}

.chat-item-dots {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0 4px;
    visibility: hidden;
    opacity: 0%;
    transition: opacity 0.2s;
}

.chat-item.active .chat-item-dots {
    opacity: 70%;
    visibility: visible;
}

.chat-item.chat-item-background-pending .chat-item-dots,
.chat-item.chat-item-background-complete .chat-item-dots {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.chat-item:hover .chat-item-dots {
    opacity: 70%;
    visibility: visible;
}

.chat-item-wrapper.force-hover .chat-item .chat-item-dots {
    opacity: 70%;
    visibility: visible;
}

.chat-item.chat-item-background-pending:hover .chat-item-dots,
.chat-item.chat-item-background-complete:hover .chat-item-dots,
.chat-item-wrapper.force-hover .chat-item.chat-item-background-pending .chat-item-dots,
.chat-item-wrapper.force-hover .chat-item.chat-item-background-complete .chat-item-dots {
    opacity: 70%;
    visibility: visible;
    pointer-events: auto;
}

.chat-item-wrapper.renaming .chat-item .chat-item-dots {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.chat-item.active .chat-item-dots .threeDotsMenu,
.chat-item.chat-item-background-pending .chat-item-dots .threeDotsMenu,
.chat-item.chat-item-background-complete .chat-item-dots .threeDotsMenu,
.chat-item:hover .chat-item-dots .threeDotsMenu,
.chat-item-wrapper.force-hover .chat-item .chat-item-dots .threeDotsMenu,
.folder-row:hover .folder-dots-btn .threeDotsMenu {
    visibility: visible;
}

.pinned-folder-row {
    position: relative;
    min-width: 0;
}

.pinned-folder-row:hover .folder-dots-btn .threeDotsMenu,
.pinned-folder-row .folder-dots-btn.is-dropdown-open .threeDotsMenu {
    visibility: visible;
}

.pinned-folder-row .folder-dots-btn {
    flex-shrink: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0 4px;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    margin-left: auto;
}

.pinned-folder-row:hover .folder-dots-btn,
.pinned-folder-row .folder-dots-btn.is-dropdown-open {
    opacity: 0.7;
    visibility: visible;
    pointer-events: auto !important;
}

.pinned-folder-row .folder-dots-btn:hover {
    opacity: 1;
    pointer-events: auto !important;
}

.chat-item-dots:hover {
    opacity: 100%;
}

/* Remove old external 3-dot button */
.chat-menu-btn {
    display: none !important;
}

/* Make dots white when chat is selected */
.chat-item.active .chat-item-dots {
    color: var(--contrast) !important;
    opacity: 1 !important;
}



/* Folders at top of chat list */

.folder-row {
    border-radius: 12px;
    padding: 8px 10px;
    margin-left: 1px;
    margin-right: 4px;
    cursor: pointer;
    user-select: none;          /* prevent text selection */
    -webkit-user-select: none;
    -ms-user-select: none;
    align-items: center;
    position: relative;
}

.folder-left {
  display: flex;
  align-items: center;
  gap: 6px;
}


/* SVG circle wrapper */
.folder-color-svg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.folder-color-svg-el {
    width: 10px;
    height: 10px;
}
/* Folder text slightly bigger */
.folder-name {
  font-size: 0.9rem;      /* was smaller before */
  display: block;
  max-width: 100%;
  color: var(--text-color-sidebar);
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: none !important;
}

/* count on the right */
.folder-right {
  display: flex;
  align-items: center;
  gap: 6px;
}

.folder-count {
  user-select: none;
  font-size: 0.8rem;
  color: #6b7280;
}


.chat-item-dots {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0 4px;
    visibility: hidden;
    opacity: 0%;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease, box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1), background-color 300ms ease;
}

.chat-item.active .chat-item-dots {
    opacity: 70%;
    visibility: visible;
}

.chat-item.chat-item-background-pending .chat-item-dots,
.chat-item.chat-item-background-complete .chat-item-dots {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.chat-item:hover .chat-item-dots {
    opacity: 70%;
    visibility: visible;
}

.chat-item-dots:hover {
    opacity: 100%;
}

.chat-item.chat-item-background-pending .chat-item-dots .threeDotsMenu,
.chat-item.chat-item-background-complete .chat-item-dots .threeDotsMenu {
    visibility: visible;
}

.chat-item.chat-item-background-pending:hover .chat-item-dots,
.chat-item.chat-item-background-complete:hover .chat-item-dots {
    opacity: 70%;
    visibility: visible;
    pointer-events: auto;
}

/* 3-dot menu button on folder */
.folder-dots-btn {
    pointer-events: none;
}

.folder-row:hover .folder-dots-btn,
.folder-row:focus-within .folder-dots-btn,
.folder-dots-btn.is-dropdown-open {
    visibility: visible;
    opacity: 70%;
    pointer-events: auto;
}

.folder-row.active .folder-dots-btn {
    opacity: 70%;
    visibility: visible;
    pointer-events: auto;
}


.folder-dots-btn:hover,
.folder-dots-btn.is-dropdown-open {
    opacity: 100%;
    visibility:visible;
}

.chat-item-wrapper {
  position: relative;
}

.folder-popup-menu {
  position: absolute;
  background: var(--background-color);
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 6px 0;
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
  z-index: 40;
}

.folder-popup-menu.hidden {
  display: none;
}

.folder-popup-menu .popup-item {
  width: 100%;
  padding: 6px 12px;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
}

.folder-popup-menu .popup-item:hover {
  background: #f3f4f6;
}

.folder-row {
    padding: 8px 10px;
    margin: 4px 10px;
    border-radius: 8px;   
    background: none;      
    transition: background 0.15s ease;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 0;
    position: relative;
    min-width: 0;
}

.folder-toggle-btn {
    width: 100%;
    min-width: 0;
}

.folder-row:hover {
    background: var(--hover-color);
}

.folder-group {
    border-radius: 8px;
    overflow: visible;
}

.folder-group.is-open {
    background: var(--hover-color);
    padding: 0;
}

.folder-group .folder-row {
    margin: 0;
    padding: 8px 10px;
}

.folder-group.is-open .folder-row {
    background: transparent;
}

.folder-group-child {
    padding: 0;
}

.folder-group .folder-group-child + .folder-group-child {
    margin-top: 4px;
}

.folder-group.is-open .folder-group-child .chat-item {
    background: transparent;
}

.folder-group.is-open .folder-group-child .chat-item:hover {
    background: var(--hover-color);
}

body.mobile-active .folder-group.is-open .folder-group-child .chat-item:hover {
    background: transparent;
}

.folder-group.is-open .folder-group-child .chat-item.active {
    background: var(--hover-color);
}

/* Dot SVG sizing */
.folder-color-svg {
    display: flex;
    align-items: center;
    margin-right: 6px;
}

.folder-color-svg-el {
    width: 12px;
    height: 12px;
}

/* Collapse: shrink JUST the width so they become circles */
.sidebar.collapsed .new-chat-btn,
.sidebar.collapsed .organize-btn {
    width: 32px !important;   /* ← matches existing height (38px) */
    aspect-ratio: 1;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: center !important;
}

/* hide text ONLY */
.sidebar.collapsed .new-chat-text,
.sidebar.collapsed .organize-text {
    display: none !important;
}

/* keep icon centered, same size */
.sidebar.collapsed .new-chat-btn svg,
.sidebar.collapsed .organize-btn svg {
    margin: 0 auto !important;
}

/* Add 2px spacing between logo and New Chat in collapsed mode */
.sidebar.collapsed #newChatBtn {
    margin-top: 5px !important;
}

/* Center the Organize button under New Chat */
.sidebar.collapsed #organizeBtn {
    margin-left: auto !important;
    margin-right: auto !important;
}

.voice-btn svg path {
    fill: var(--contrast-color);
}

.recording .voice-btn {
    background: red !important;
}

.voice-ui {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
}

.voice-timer {
    font-size: 0.9rem;
    color: #222;
}


.voice-ui {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
}

.voice-ui.hidden {
    display: none;
}

.bar {
    width: 4px;
    background: var(--contrast); 
    border-radius: 50px;
    margin: 0 2px;
    height: 6px;                   /* VERY LOW baseline height */
    transition: height 0.12s ease; /* smooth motion instead of jitter */
}

.voice-ui {
    width: 100%;
    padding: 0 12px;
}

.voice-visualizer {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.voice-visualizer .bar {
    width: 6px;
    background: var(--contrast);
    border-radius: 4px;
    height: 3px;        /* initial height */
    transition: height 0.1s ease;   /* JS animates height */
    animation: none !important;     /* override old rules */
}

.voiceVisualizer {
  --voice-lane-h: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  height: var(--voice-lane-h);
  min-height: var(--voice-lane-h);
  max-height: var(--voice-lane-h);
  overflow: hidden;
  position: relative;
}

.voiceBar {
  width: 2px;
  flex: 0 0 2px;
  background-color: var(--text-color);
  transform: scaleY(0);
  transform-origin: center;
  animation: barGrow 0.35s ease-out forwards;
  opacity: 1;
  transition: transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: 100px;
  will-change: transform;
}

.desktop-voice-stop {
  width: fit-content;
  min-width: 112px;
  gap: 8px;
  padding: 0;
}

.desktop-voice-ui {
  display: flex;
  align-items: center;
  width: 70px;
  min-width: 70px;
  height: 18px;
  margin-left: 7px;
  overflow: hidden;
}

.desktop-voice-visualizer {
  --voice-bar-step: 6px;
  --voice-lane-h: 18px;
  width: 100%;
  height: 10px;
  min-height: 10px;
  max-height: 10px;
}

.desktop-voice-stop .send-icon {
  width: 18px;
  height: 18px;
  margin-left: auto;
  margin-right: 7px;
  flex: 0 0 18px;
}

.voiceBar.voiceBar-ghost {
  position: absolute;
  margin: 0 !important;
  animation: none;
  transform: translateY(-50%) scaleY(1);
  transform-origin: center;
  top: 50%;
  bottom: auto;
  pointer-events: none;
  z-index: 4;
  opacity: 1;
  will-change: transform;
}

.voiceBar.is-removing {
  animation: voiceBarExit 140ms cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  transition: none !important;
  pointer-events: none;
}

@keyframes voiceBarExit {
  0% {
    opacity: 1;
    transform: translateY(-50%) scaleY(1);
  }
  100% {
    opacity: 1;
    transform: translateY(-50%) scaleY(0);
  }
}

@keyframes barGrow {
  to {
    transform: scaleY(1);
  }
}

/* === FILE PREVIEW ROW (ABOVE COMPOSER) === */
.file-preview-stack {
    width: 100%;
    max-width: 765px;
    margin: 0 auto;
    box-sizing: border-box;
}

.file-preview-row {
    --file-preview-edge-fade: 28px;
    display: none;
    align-items: flex-end;
    gap: 12px;
    overflow-x: scroll;
    overflow-y: hidden;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb-color) var(--background-color);
    scrollbar-gutter: stable;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
}

.file-preview-row.mobile{
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
}

.file-preview-row::before,
.file-preview-row::after {
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    bottom: var(--sb-size);
    width: var(--file-preview-edge-fade);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 120548;
}

.mobile-file-row::before,
.mobile-file-row::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: var(--sb-size);
    width: var(--file-preview-edge-fade);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 120548;
}

.file-preview-row::before {
    left: 0;
    background: linear-gradient(to right, var(--input-bg) 0%, transparent 100%);
}

.file-preview-row::after {
    right: 0;
    background: linear-gradient(to left, var(--input-bg) 0%, transparent 100%);
}

.mobile-file-row::before {
    left: 0;
    background: linear-gradient(to right, var(--background-color) 0%, transparent 100%);
}

.mobile-file-row::after {
    right: 0;
    background: linear-gradient(to left, var(--background-color) 0%, transparent 100%);
}

.file-preview-row.can-scroll-left::before,
.mobile-file-row.can-scroll-left::before {
    opacity: 1;
}

.file-preview-row.can-scroll-right::after,
.mobile-file-row.can-scroll-right::after {
    opacity: 1;
}

.file-preview-row:not(.has-files) {
    display: none !important;
}

.main-area.empty-chat #filePreviewRow {
    display: flex;
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
    z-index: 8;
}

.empty-chat-composer-stack.collection #filePreviewRow.has-files {
    display: flex !important;
    position: static;
    left: auto;
    top: auto;
    width: 100%;
    transform: none;
    z-index: 8;
}

.file-preview-row::-webkit-scrollbar {
    height: var(--sb-size);
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.file-preview-row::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 11px;
    border: none;
    box-shadow: none;
}

.file-preview-row::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 11px;
    border: 1px solid var(--sidebar-color);
    box-shadow: none;
}

.file-preview-row::-webkit-scrollbar-thumb:hover {
    background: var(--sb-thumb-color);
}

.file-preview-row.has-files {
    padding-top: 16px;
}

:is(.file-preview-row, .mobile-file-row) .file-chip {
    flex-shrink: 0;
    position: relative;
}

:is(.file-preview-row, .mobile-file-row) .file-chip.loading,
:is(.file-preview-row, .mobile-file-row) .file-chip.loading * {
    cursor: progress !important;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-media-file {
    width: 60px;
    height: 60px;
    margin-left: 1px;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-new {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 21px;
    display: flex;
    align-items: center;
    align-self: flex-end;
    width: 300px;
    height: 66px;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-box {
    width: 60px;
    height: 60px;
    min-width: 50px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
    transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-title {
    color: var(--text-color);
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* Without this, clicking the title starts a native text selection —
       selected text inside a clipped/nowrap element renders unclipped in
       most browsers, which visually looks like the ellipsis "disappears". */
    user-select: none;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-sub {
    color: var(--med-text);
    font-size: 0.9rem;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-close {
    width: 20px;
    aspect-ratio: 1;
    display: flex;
    background-color: transparent;
    border-radius: 13px;
    padding: 5px;
    align-self: flex-start;
    margin: 8px 8px 8px auto;
    cursor: pointer;
    color: var(--med-text);
    transition: all 0.15s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-close:hover {
    background-color: var(--hover-color);
    color: var(--text-color);
}

:is(.file-preview-row, .mobile-file-row) .file-chip-image-new-file {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 21px;
    align-items: center;
    align-self: flex-end;
    width: 66px;
    height: 66px;
    position: relative;
    display: flex;
    overflow: hidden;
    --image-overlay-bg: rgba(255, 255, 255, 0.72);
    --image-overlay-bg-hover: rgba(255, 255, 255, 0.9);
    --image-overlay-fg: #111111;
    --image-overlay-track: rgba(255, 255, 255, 0.28);
    --image-overlay-shadow: rgba(0, 0, 0, 0.18);
}

:is(.file-preview-row, .mobile-file-row) .file-chip-media-image {
    width: 100%;
    height: 100%;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-box-image-file {
    width: 58px;
    height: 58px;
    aspect-ratio: 1;
    object-fit: cover;
    margin: 4px;
    border-radius: 16px;
    clip-path: inset(0 round 16px);
    filter: blur(0);
    transition: filter 0.35s ease, transform 0.35s ease, opacity 0.35s ease;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-close-image {
    width: 20px;
    height: 20px;
    background-color: var(--image-overlay-bg);
    border-radius: 13px;
    padding: 5px;
    align-self: flex-start;
    cursor: pointer;
    color: var(--image-overlay-fg);
    transition: all 0.15s ease;
    position: absolute;
    display: flex;
    right: 0;
    margin: 8px;
    box-shadow: 0 4px 14px var(--image-overlay-shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-close-image:hover {
    color: var(--image-overlay-fg);
    background: var(--image-overlay-bg-hover);
}

:is(.file-preview-row, .mobile-file-row) .file-chip.upload-complete .file-chip-close,
:is(.file-preview-row, .mobile-file-row) .file-chip.upload-complete .file-chip-close-image {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-image-new {
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 21px;
    align-items: center;
    align-self: flex-end;
    width: calc(var(--image-chip-display-width, 150px) + 8px);
    height: fit-content;
    position: relative;
    display: flex;
    overflow: hidden;
    --image-overlay-bg: rgba(255, 255, 255, 0.72);
    --image-overlay-bg-hover: rgba(255, 255, 255, 0.9);
    --image-overlay-fg: #111111;
    --image-overlay-track: rgba(255, 255, 255, 0.28);
    --image-overlay-shadow: rgba(0, 0, 0, 0.18);
}

:is(.file-preview-row, .mobile-file-row) .file-chip-box-image {
    width: var(--image-chip-display-width, 150px);
    max-width: min(240px, 50vw);
    height: 150px;
    object-fit: cover;
    margin: 4px;
    border-radius: 17px;
    clip-path: inset(0 round 17px);
    display: block;
    filter: blur(0);
    transition: filter 0.35s ease, transform 0.35s ease, opacity 0.35s ease;
    cursor: zoom-in;
    will-change: filter;
}

:is(.file-preview-row, .mobile-file-row) .file-chip.loading.preview-ready .file-chip-box-image,
:is(.file-preview-row, .mobile-file-row) .file-chip.loading.preview-ready .file-chip-box-image-file {
    filter: blur(4px);
    transform: scale(1.008);
    opacity: 0.96;
}

:is(.file-preview-row, .mobile-file-row) .file-chip.loading .file-chip-box {
    filter: blur(2px);
    opacity: 0.88;
    transform: scale(1.01);
}

:is(.file-preview-row, .mobile-file-row) .file-chip-box-image-file {
    cursor: zoom-in;
}

@keyframes imageAnalysisSweep {
  0% {
    background-position: 180% 50%;
  }
  100% {
    background-position: -180% 50%;
  }
}

.file-chip.analysis-pending .file-chip-media-image {
    position: relative;
    overflow: hidden;
}

.file-chip.analysis-pending .file-chip-media-image::after {
    content: "";
    position: absolute;
    inset: var(--analysis-overlay-inset, 4px);
    border-radius: var(--analysis-overlay-radius, 16px);
    pointer-events: none;
    background: linear-gradient(135deg, rgba(86, 86, 86, 0) 30%, rgba(174, 174, 174, 0.47) 50%, rgba(86, 86, 86, 0) 70%);    background-size: 260% 260%;
    background-repeat: no-repeat;
    z-index: 120548;
    animation: imageAnalysisSweep 3s cubic-bezier(0.22, 1, 0.36, 1) infinite;
    will-change: background-position;
}

.file-chip.file_upload_chip.upload-complete:hover{
  background-color: var(--file-btn-mobile-bg);
  border-color: var(--border-color-darker);
}

.fullscreenfileimageoverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 130700;
  padding: 24px;
  box-sizing: border-box;
}

.fullscreenfileimageoverlay.has-gallery {
  padding: 24px;
}

.fullscreenfileimageoverlay.hidden {
  display: none;
}

.mobileimageview{
  display: none;
  flex-direction: column;
  position: relative;
  background-color: transparent;
  z-index: 2;
}

.mobileimagebackdrop{
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 520ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  z-index: 1;
}

.mobileimageviewtop{
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  padding-top: 16px;
  color: #DCDCD6;
  z-index: 2;
}

.mobileimageviewbottom{
  width: 100%;
  box-sizing: border-box;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 12px;
  z-index: 2;
}

.iamgecarouselmobile{
  display: flex;
  gap: 6px;
  margin: 0 auto;
}

.iamgecarouselmobileimg{
  width: 30px;
  height: 45px;
  object-fit: cover;
  border-radius: 4px;
  opacity: 0.5; 
}

.iamgecarouselmobileimg.active{
  width: 45px;
  height: 45px;
  opacity: 1;
}

.mobileimageview .mobilebutton.dark{
  background-color: #282825;
  border: 1px solid #42423D;
  color: #DCDCD6;
  box-shadow: inset 0 0px 10px 0px rgba(255, 255, 255, 0.1);
}

.mobileimageview .mobilebutton.xtreme{
  margin-left: auto;
}

.mobilebutton.width-auto{
  width: auto !important;
  aspect-ratio: auto !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
  font-size: 0.9rem;
}

.mobileimageviewstage{
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  touch-action: none;
}

.mobileimageviewimg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  margin: auto 0;
  object-fit: contain;
  touch-action: none;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.mobileimageviewimg-neighbor{
  display: none;
  opacity: 0;
  pointer-events: none;
}

.mobileimageviewimg-neighbor.is-visible{
  display: flex;
}

body.mobile-active #fullscreenFileImageOverlay {
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  background-color: transparent;
  transition: none;
}

.fullscreenfileimageoverlay.mobile-preview-open {
  background-color: transparent !important;
}

.fullscreenfileimageoverlay.mobile-preview-open .mobileimagebackdrop{
  display: block;
}

.fullscreenfileimageoverlay.mobile-preview-open:not(.mobile-backdrop-visible) .mobileimagebackdrop{
  background-color: rgba(0, 0, 0, 0);
}

.fullscreenfileimageoverlay.mobile-preview-open.mobile-backdrop-visible .mobileimagebackdrop{
  background-color: rgba(0, 0, 0, 1);
}

body.mobile-active #fullscreenFileImageOverlay .fullscreenfileimagepopup {
  display: none;
}

body.mobile-active #fullscreenFileImageOverlay .mobileimageview {
  display: flex;
  position: fixed;
  inset: 0;
}

body.mobile-active #fullscreenFileImageOverlay .mobileimageviewtop,
body.mobile-active #fullscreenFileImageOverlay .mobileimageviewbottom,
body.mobile-active #fullscreenFileImageOverlay .mobileimageviewimg {
  opacity: 1;
  transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.mobile-active #fullscreenFileImageOverlay .mobileimageview.is-opening .mobileimageviewtop,
body.mobile-active #fullscreenFileImageOverlay .mobileimageview.is-opening .mobileimageviewbottom {
  opacity: 0;
}

body.mobile-active #fullscreenFileImageOverlay .mobileimageview.zoom-ui-hidden .mobileimageviewtop,
body.mobile-active #fullscreenFileImageOverlay .mobileimageview.zoom-ui-hidden .mobileimageviewbottom {
  opacity: 0;
  pointer-events: none;
}

body.mobile-active #fullscreenFileImageOverlay .mobileimageview.is-opening .mobileimageviewimg,
body.mobile-active #fullscreenFileImageOverlay .mobileimageview.media-opening .mobileimageviewimg {
  opacity: 0;
}

.mobileimageview-open-ghost{
  position: fixed;
  object-fit: cover;
  z-index: 130702;
  pointer-events: none;
  will-change: left, top, width, height, border-radius, opacity;
}

.fullscreenfileimagepopup {
  --fullscreen-gallery-space: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: min(100%, 1100px);
  max-height: calc(100vh - 48px);
}

.fullscreenfileimagepopup.has-gallery {
  --fullscreen-gallery-space: 120px;
}

.fullscreenimage {
  display: flex;
  max-width: min(100vw - 48px, 1100px);
  max-height: min(700px, calc(100vh - 48px - var(--fullscreen-gallery-space)));
  border-radius: 8px;
  object-fit: contain;
  background: var(--background-color);
}

.controlsimagepopup {
  gap: 8px;
  z-index: 10;
  position: absolute;
  display: flex;
  top: 16px;
  right: 16px;
}

.controlsimagepopup.left {
  left: 16px;
  right: unset;
}

.circle-btn.control {
  margin: 0;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  flex: 0 0 40px;
  border-radius: 13px;
  border: none;
  background: var(--image-controls);
  color: var(--text-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
  font-size: 0;
  appearance: none;
  -webkit-appearance: none;
  transform: none !important;
}

.circle-btn.control:hover {
  background: var(--input-border);
  transform: none !important;
}

.circle-btn.control:active {
  transform: none !important;
}

.circle-btn.outline{
  background-color: transparent;
  border: 1px solid var(--border-color-lighter);
  color: var(--text-color);
}

.circle-btn.outline:hover{
  background: var(--hover-color);
  border-color: transparent;
}

.send-icon {
  width: 20px;
  height: 20px;
}

.send-icon2 {
  width: 18px;
  height: 18px;
}

.imagepreviewbtn {
  background-color: transparent;
  border: none;
  border-radius: 13px;
  height: 95px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: background-color 0.2s ease;
  flex: 0 0 auto;
  cursor: pointer;
}

.imagepreviewbtn:hover,
.imagepreviewbtn.is-active {
  background-color: var(--image-controls);
}

.imagepreviewbtn:hover .imagepreview {
  outline: none;
}

.imagepreview {
  outline: 1px solid #fff;
  border-radius: 8px;
  display: flex;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.imagepreviewbtn.is-active .imagepreview {
  outline: none;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-progress-shell {
    position: absolute;
    top: 50%;
    left: 49%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%) rotate(-90deg);
    display: none;
    z-index: 3;
    pointer-events: none;
    overflow: visible;
    filter: drop-shadow(0 4px 12px var(--image-overlay-shadow, rgba(0, 0, 0, 0.2)));
}

:is(.file-preview-row, .mobile-file-row) .file-chip-progress-track,
:is(.file-preview-row, .mobile-file-row) .file-chip-progress-ring {
    fill: none;
    stroke-width: 2.5;
    cx: 18;
    cy: 18;
    r: 15;
}

:is(.file-preview-row, .mobile-file-row) .file-chip-progress-track {
    stroke: var(--image-overlay-track, rgba(255, 255, 255, 0.24));
}

:is(.file-preview-row, .mobile-file-row) .file-chip-progress-ring {
    stroke: var(--image-overlay-fg, #ffffff);
    stroke-linecap: round;
    stroke-dasharray: 94.2478;
    stroke-dashoffset: 94.2478;
    transition: stroke-dashoffset 0.18s ease;
}

:is(.file-preview-row, .mobile-file-row) .file-chip.loading .file-chip-progress-shell {
    display: block;
}

.add-file-btn {
  background-color: transparent;
  color: var(--text-color);
}
/* Add-file button styling */
.add-file-btn:hover {
    background: var(--hover-color);
}

/* ===== CENTERED 400×500 DROP ZONE ===== */
.file-drop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.25); /* translucent backdrop */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 120200;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.file-drop-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.file-drop-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--text-color);
    gap: 16px;
}

.file-drop-content .file_dropdown_svg {
    height: 142px;
    width: 129px;
}

.file-drop-text {
    font-size: 20px;
    font-weight: 600;
}

/* ===========================
   RED FILE TYPE ERROR BOX
=========================== */

.file-type-error-overlay {
    position: fixed;
    top: 0; left: 0; right:0; bottom:0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.file-type-error-overlay.show {
    opacity: 1;
    pointer-events: auto;
}

.file-error-content {
    width: 380px;
    height: 150px;
    background: #ffe5e5;
    border: 3px dashed #d10000;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 20px;
}

.file-error-content svg {
    width: 50px;
    height: 50px;
    color: #d10000;
}

.file-error-text {
    font-size: 18px;
    font-weight: 600;
    color: #b00000;
    text-align: center;
}

.chat-file-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 8px;
}

.chat-file-item {
    background: rgba(0,0,0,0.05);
    padding: 6px 10px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-file-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid rgba(0,0,0,0.2);
    border-top-color: rgba(0,0,0,0.7);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

.chat-file-item:not(.loading) .chat-file-spinner {
    display: none;
}

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

.chat-attachments {
    display: flex;
    margin-left: auto;
    flex-direction: column;
    max-width: 440px;
    width: 100%;
    gap: 10px;
    margin-bottom: 8px;
}

.chat-attachment {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0,0,0,0.05);
    padding: 10px;
    border-radius: 12px;
}

.chat-attachment-name {
    font-weight: 600;
}

.chat-attachment-type {
    font-size: 12px;
    opacity: 0.6;
}

.chat-attachments.chat-attachments-new {
    gap: 8px;
    margin-bottom: 8px;
}

.chat-attachments.chat-attachments-new .chat-attachment-image-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
}

.message.bot .chat-attachments.generated-image-attachment {
    margin-left: 0;
    margin: 16px 0;
    margin-right: auto;
    align-self: flex-start;
}

/* Caps the brief moment a history-hydrated image has no inline width yet
   (waiting on its own naturalWidth/naturalHeight to size correctly, see
   buildChatAttachmentFragment) — without this it briefly spans the full
   message width before snapping down, which reads as a jarring flash.
   Desktop only: mobile intentionally wants non-square images to actually
   fill the width once sized (see applyGeneratedImageRenderBox's mobile
   branch), so this must not cap that. */
@media (min-width: 901px) {
    .message.bot .chat-attachments.generated-image-attachment .generated-image-frame,
    .message.bot .chat-attachments.generated-image-attachment .file-chip-media.file-chip-media-image {
        max-width: 412px;
    }
}

.search-step-inline + .chat-attachments.generated-image-attachment {
    margin-top: 8px;
}

.chat-attachments.chat-attachments-new .chat-attachment-image-grid.is-multi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
}

.message.bot .chat-attachments.generated-image-attachment .chat-attachment-image-grid {
    margin-left: 0;
    margin-right: auto;
}

.chat-attachments.chat-attachments-new .chat-attachment-file-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, 98px);
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    justify-content: flex-end;
}

.chat-attachments.chat-attachments-new .chat-attachment-file-list.bot {
  margin-left: 0;
}

/* The generated-image attachment reuses .chat-attachment-file-list.bot for
   layout/alignment, but its frame is sized explicitly via JS to match the
   requested aspect ratio — don't let the file-list's fixed 98px columns
   clamp it. */
.chat-attachments.chat-attachments-new.generated-image-attachment .chat-attachment-file-list.bot {
  grid-template-columns: minmax(0, max-content);
  justify-content: flex-start;
}

.chat-attachments.chat-attachments-new .file-chip.file-chip-image-new,
.chat-attachments.chat-attachments-new .file-chip.file-chip-image-new-file,
.chat-attachments.chat-attachments-new .file-chip.file-chip-new {
    position: relative;
    border: 1px solid var(--border-color);
    background-color: var(--file-btn-mobile-bg-trans);
    border-radius: 8px;
    overflow: hidden;
}

.chat-attachments.chat-attachments-new .file-chip.file-chip-image-new {
    display: inline-block;
    width: auto;
    max-width: 100%;
}

.chat-attachments.chat-attachments-new .file-chip.file-chip-image-new-file {
    display: block;
    width: 100%;
    border-radius: 8px;
}

.chat-attachments.chat-attachments-new .file-chip-media-image {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
    overflow: hidden;
}

.chat-attachments.chat-attachments-new .file-chip-box-image {
    width: auto;
    height: 100%;
    object-fit: contain;
    display: block;
    position: relative;
    z-index: 1;
}

.chat-attachments.chat-attachments-new .file-chip-box-image-file {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    clip-path: inset(0 round 12px);
    margin: 0;
    cursor: zoom-in;
    display: block;
    position: relative;
    z-index: 1;
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

.chat-attachments.chat-attachments-new .chat-attachment-image-placeholder {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-size: 260% 100%;
    animation: skeletonShimmer 1.85s linear infinite;
    overflow: hidden;
    clip-path: inset(0 round inherit);
    opacity: 1;
    transition: opacity 360ms ease, filter 360ms ease;
    will-change: opacity, filter;
}

.file-chip-media{
  transition: width 0.3s cubic-bezier(1, 0, 0, 1), height 0.3s cubic-bezier(1, 0, 0, 1);
}

.chat-attachments.chat-attachments-new .chat-attachment-image-placeholder.is-generating-image {
    inset: 0;
    animation: none;
}

.chat-attachments.chat-attachments-new .chat-attachment-image-placeholder.is-generating-image .generated-image-noise {
    opacity: 1;
}

.chat-attachments.chat-attachments-new .generated-image-frame {
    width: 100%;
    position: relative;
}

/* "Failed to load" state of a generated image — same box, warn icon + label
   centered (applyGeneratedImageFailedState). */
.chat-attachments.chat-attachments-new .generated-image-frame.is-failed {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.chat-attachments.chat-attachments-new .generated-image-frame.is-failed .QuizBtnleftIcon.warn {
    width: 28px;
    height: 28px;
}

.chat-attachments.chat-attachments-new .generated-image-noise {
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0.92;
    transition: opacity 360ms ease;
    will-change: opacity;
}

.chat-attachments.chat-attachments-new .file-chip.is-image-loading .file-chip-box-image,
.chat-attachments.chat-attachments-new .file-chip.is-image-loading .file-chip-box-image-file {
    opacity: 0;
    filter: blur(12px);
    transform: scale(1.015);
}

.chat-attachments.chat-attachments-new .file-chip.is-image-loading.is-reveal-transition .file-chip-box-image,
.chat-attachments.chat-attachments-new .file-chip.is-image-loading.is-reveal-transition .file-chip-box-image-file {
    opacity: 1;
    filter: blur(11px);
    transform: scale(1.01);
}

.chat-attachments.chat-attachments-new .file-chip.is-image-loading.is-reveal-transition.is-reveal-active .file-chip-box-image,
.chat-attachments.chat-attachments-new .file-chip.is-image-loading.is-reveal-transition.is-reveal-active .file-chip-box-image-file {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

.chat-attachments.chat-attachments-new .file-chip .file-chip-box-image,
.chat-attachments.chat-attachments-new .file-chip .file-chip-box-image-file {
    transition: opacity 420ms ease, filter 480ms ease, transform 480ms ease;
}

.chat-attachments.chat-attachments-new .chat-attachment-image-placeholder.is-fading-out {
    opacity: 0;
    filter: blur(10px);
}

.chat-attachments.chat-attachments-new .chat-attachment-image-placeholder.is-fading-out .generated-image-noise {
    opacity: 0;
}

.chat-attachments.chat-attachments-new .file-chip.file-chip-new {
    display: flex;
    align-items: center;
    width: 300px;
    max-width: 100%;
    min-height: 66px;
    padding-right: 8px;
    margin-left: auto;
}

.chat-attachments.chat-attachments-new .file-chip-media-file {
    width: 60px;
    height: 60px;
    margin-left: 1px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-attachments.chat-attachments-new .file-chip-box {
    width: 60px;
    height: 60px;
    min-width: 50px;
    object-fit: cover;
    border-radius: 18px;
    display: block;
}

.chat-attachments.chat-attachments-new .file-chip-title {
    color: var(--text-color);
    font-weight: 600;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    user-select: none;
}

.chat-attachments.chat-attachments-new .file-chip-sub {
    color: var(--med-text);
    font-size: 0.9rem;
}

.file-chip-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--accent, #d1d1d1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.chat-attachment-chips {
   display: flex;
    margin-left: auto;
    flex-direction: column;
    max-width: 400px;
    gap: 10px;
    margin-bottom: 10px;
}

.file-chip-icon {
    width: 34px;
    height: 34px;
    min-width: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chip-svg {
    width: 18px;
    height: 18px;
    color: var(--contrast-color);
}

/* Colors */
.file-doc {
    background-color: #3b82f6; /* Blue */
}

.file-xls {
    background-color: #22c55e; /* Green */
}

.file-img {
    background-color: #ec4899; /* Pink */
}

.file-txt {
    background-color: #64748b; /* Gray */
}

.disabled-btn {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Prevent overflow for bot messages */
.message.bot {
    overflow-wrap: break-word;
    max-width: 100%;
}

/* Also fix markdown rendering of long content */
.message.bot * {
    max-width: 100%;
    overflow-wrap: break-word;
}

.message pre {
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.5;
    max-width: 100%;
}

.slanter-codeblock {
    margin: 12px 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: visible;
    position: relative;
    background: var(--input-bg);
    max-width: 100%;
}

body.mobile-active .slanter-codeblock{
  border-radius: 18px;
  overflow: hidden !important;
}

body.mobile-active .slanter-codeblock-header{
  border-bottom: 1px solid var(--border-color);
  padding: 8px 14px 11px 14px;
}

body.mobile-active .slanter-codeblock .slanter-codeblock-copy.collection_box_threedot{
  visibility: visible !important;
}

body.mobile-active .slanter-codeblock:hover .slanter-codeblock-copy.collection_box_threedot:hover{
  color: var(--med-text) !important;
}

body.mobile-active .message code{
  font-size: 0.8rem;
}

.slanter-codeblock.thinking {
    max-height: 220px;
    overflow-y: auto !important;
    box-sizing: border-box;
    margin: 0;
    font-size: 0.82rem;
    --sidebar-scroll-gutter: calc(var(--sb-size) + 4px);
    --sb-track-color: var(--input-bg);
    --sb-thumb-color: var(--thumb-color);
    --sb-size: 9px;
}

.slanter-codeblock.thinking::-webkit-scrollbar {
    width: var(--sb-size);
}

.slanter-codeblock.thinking::-webkit-scrollbar-track {
    background: var(--sb-track-color);
    border-radius: 11px;
}

.slanter-codeblock.thinking::-webkit-scrollbar-thumb {
    background: var(--sb-thumb-color);
    border-radius: 11px;
    border: 1px solid var(--sb-track-color);
}

@supports not selector(::-webkit-scrollbar) {
    .slanter-codeblock.thinking {
        scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    }
}

.slanter-codeblock-io-block {
    margin: 8px;
    overflow: hidden;
    border-radius: 5px;
}

.slanter-codeblock-io-block .slanter-codeblock-header {
    background: transparent;
}

.slanter-codeblock-io-block pre code {
    /* Tool command/code blocks force-wrap instead of scrolling sideways.
       !important because `.message pre code` (later, less specific) sets
       overflow-x: auto; long unbroken tokens break anywhere. */
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: transparent !important;
    --sb-track-color: transparent !important;
}

.slanter-codeblock-io-block pre code::-webkit-scrollbar-thumb {
  border-color: var(--code-ouput-bg) !important;
  background: var(--border-color-sharper) !important;
}


.slanter-codeblock:hover .slanter-codeblock-copy.collection_box_threedot{
  visibility: visible;
}

.slanter-codeblock-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    min-height: 38px;
    padding: 8px 0 6px 0;
    background: var(--input-bg);
    user-select: none;
    border-radius: 10px 10px 0 0;
}

.slanter-codeblock-language {
    font-family: 'Slanter-Sans', sans-serif;
    font-weight: 300;
    color: var(--light-text);
    font-size: 0.8rem;
    text-transform: lowercase;
}

.slanter-codeblock-sticky-actions {
    position: sticky;
    top: var(--codeblock-copy-sticky-top, 0px);
    right: 0;
    z-index: 9;
    width: 100%;
    height: 38px;
    margin-bottom: -38px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 8px 8px 0 0;
    box-sizing: border-box;
    pointer-events: none;
}

body.mobile-active .slanter-codeblock-sticky-actions {
    top: calc(var(--mobile-top-fade-h, 78px) + env(safe-area-inset-top, 0px) + 8px);
}

body.mobile-active .slanter-codeblock-sticky-actions{
  top: 0 !important;
}

.slanter-codeblock-copy.collection_box_threedot {
    background: var(--input-bg);
    margin-left: 0;
    transform: none;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    pointer-events: auto;
    position: relative;
    overflow: hidden;
}

.slanter-codeblock-copy.collection_box_threedot:hover {
  background-color: var(--sidebar-color) !important;
}

.slanter-codeblock-copy .slanter-copy-icon,
.slanter-codeblock-copy .slanter-copy-check {
  position: absolute;
  margin: auto;
  width: 20px;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}

.slanter-codeblock-copy .slanter-copy-icon {
  opacity: 1;
  transition: opacity 0.1s ease;
}

.slanter-codeblock-copy .slanter-copy-check {
  width: 80%;
  height: 80%;
  transform: scale(0);
  transform-origin: center;
  transition: transform 0.2s ease;
}

.slanter-codeblock-copy.is-copied .slanter-copy-icon {
  opacity: 0;
}

.slanter-codeblock-copy.is-copied .slanter-copy-check {
  transform: scale(1);
}

.slanter-codeblock-copy.collection_box_threedot.is-copied {
  visibility: visible;
}

.slanter-codeblock pre {
    margin: 0;
    border: 0;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}

.message code {
    font-family: "JetBrains Mono", monospace;
    /* white-space: pre-wrap;  */
    font-size: 0.88rem;
    padding: 2px;
    font-weight: 300;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--sidebar-color);
    color: var(--dark-red-text);
}

.message pre code {
    display: block;
    padding: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0 0 10px 10px;
    background-clip: padding-box;
    --sb-track-color: var(--input-bg);
    --sb-thumb-color: var(--thumb-color);
    --sb-size: 13px;
}

.message pre code::-webkit-scrollbar {
  width: 0;
  height: var(--sb-size);
}

.message pre code::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 9px;
}

.message pre code::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 9px;
  border: 3px solid var(--input-bg);
}

.hljs {
    background: var(--input-bg) !important;
    color:  var(--text-color);
}

.message pre code.hljs {
    border: none !important;
    display: block;
    color: var(--text-color);
    padding: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0 0 10px 10px;
}

@supports not selector(::-webkit-scrollbar) {
  .message pre code {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

/* =========================
   ACCOUNT SETTINGS OVERLAY
   ========================= */

#settingsPanel {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);   /* dark glass over chat */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}

#settingsPanel.open {
  opacity: 1;
  pointer-events: auto;
}

.settings-panel-inner {
  background: var(--background-color);
  border-radius: 24px;
  padding: 22px 24px 18px;
  width: 520px;
  max-width: calc(100% - 40px);
  max-height: 90vh;
  box-shadow: 0 18px 60px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* header + description */

.settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 4px;
}
.settings-header h2 {
  margin: 0;
  font-size: 1.1rem;
}
.settings-header p {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: #6b7280;
}
/* pill buttons (back / cancel / save) */

.settings-back-btn,
.settings-pill-btn {
  border-radius: 999px;
  padding: 7px 16px;
  border: 1px solid #e5e7eb;
  background: var(--background-color);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.settings-back-btn:hover,
.settings-pill-btn:hover {
  background: #f3f4f6;
}

/* black primary pill (Save / Next) */

.settings-pill-btn.primary {
  background: var(--contrast);
  border-color: var(--contrast);
  color: var(--background-color);
}

.settings-pill-btn.primary:hover {
  background: #111827;
}

/* sections (Profile / Appearance / Password / Danger) */

.settings-section {
  background: var(--background-color);
  border-radius: 24px;
  border: 1px solid #f3f4f6;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 10px;
}

.settings-section h3 {
  margin: 0 0 4px;
  font-size: 0.98rem;
}

/* layout inside sections */

.settings-grid {
  display: flex;
  gap: 12px;
}

.settings-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.settings-field label,
.settings-row label {
  font-size: 0.8rem;
  color: #6b7280;
}

.settings-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* inputs */

.settings-input {
  width: 100%;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  font-size: 0.9rem;
  box-sizing: border-box;
  background: var(--background-color);
}

.settings-input:focus {
  outline: none;
  border-color: #111827;
}

/* email + theme controls */

.email-row {
  display: flex;
  gap: 10px;
  align-items: center;
}

.settings-toggle-row {
  display: inline-flex;
  padding: 4px;
  border-radius: 999px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.toggle-pill {
  border-radius: 999px;
  padding: 5px 18px;
  border: none;
  background: transparent;
  font-size: 0.85rem;
  cursor: pointer;
}

.toggle-pill.active {
  background: var(--contrast);
  color: var(--background-color);
}

/* avatar color dots */

.color-dot-row {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}

.color-dot {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
}

.color-dot.selected {
  border-color: #111827;
}

.settings-hint {
  font-size: 0.75rem;
  color: #6b7280;
}

/* footer buttons row */

.settings-footer {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Danger zone */

.danger-zone {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

.danger-btn {
  align-self: flex-start;
  border-radius: 999px;
  padding: 9px 18px;
  border: 1px solid #d93025;
  background: transparent;
  color: #d93025;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}

.danger-btn:hover {
  background: rgba(217, 48, 37, 0.06);
}

/* subviews (Change email / password / delete) */

.settings-subview {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#settingsMainView.hidden,
#settingsEmailView.hidden,
#settingsPasswordView.hidden,
#settingsDeleteView.hidden {
  display: none;
}

#settingsMainView {
  max-height: 70vh;
  overflow-y: auto;
}

.subview-title {
  margin: 4px 0 2px;
  font-size: 1rem;
}

.subview-subtitle,
.settings-danger-text {
  font-size: 0.82rem;
  color: #6b7280;
}

/* Change email button */
#settingsChangeEmailBtn {
    border-radius: 999px;
    padding: 7px 18px;
    font-size: 0.85rem;
    background: var(--contrast);
    color: var(--background-color);
    border: none;
}

#settingsChangeEmailBtn:hover {
    background: #111;
}

/* Red pill button inside delete subpage */
#deleteNext {
    border-radius: 999px;
    padding: 8px 20px;
    background: var(--red-text);
    color: var(--contrast-color);
    border: 1px solid var(--red-text);
    font-weight: 500;
    font-size: 0.9rem;
}

#deleteNext:hover {
    background: var(--red-text);
}

/* Make subpages match main settings card size */
#settingsEmailView,
#settingsPasswordView,
#settingsDeleteView {
    width: 100%;
    flex: 1;
}

/* Make subpages match main view height */
.settings-panel-inner {
    display: flex;
    flex-direction: column;
}

.settings-subview {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* unified card wrapper for main view + subviews */
.settings-content-card {
    background: var(--background-color);
    border-radius: 24px;
    border: 1px solid #f3f4f6;
    padding: 26px 24px 28px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    width: 100%;
    box-sizing: border-box;
}

/* =========================
   ACCOUNT SETTINGS OVERLAY
   ========================= */

.settings-panel {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 16px;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

/* open state */
.settings-panel.open {
    opacity: 1;
    pointer-events: auto;
}

/* main card */
.settings-panel-inner {
    width: 100%;
    max-width: 720px;
    max-height: calc(100vh - 80px);
    background: var(--background-color);
    border-radius: 24px;
    padding: 24px 24px 18px;
    box-shadow: 0 18px 60px rgba(15, 23, 42, 0.33);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* header row */
.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.settings-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.settings-header p {
    margin: 4px 0 0;
    font-size: 0.9rem;
    color: var(--text-light);
}

/* shared card area (main + subpages) */
.settings-content-card {
    background: #fafafa;
    border-radius: 24px;
    padding: 22px 20px;
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

/* sections inside card */
.settings-section {
    background: var(--background-color);
    border-radius: 20px;
    padding: 18px 18px 16px;
    border: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.settings-section h3 {
    margin: 0;
    font-size: 1.02rem;
}

/* grid for first/last name */
.settings-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}

/* simple row (email, etc.) */
.settings-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-field label {
    font-size: 0.82rem;
    font-weight: 500;
}

/* input style matches site */
.settings-input {
    width: 100%;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    padding: 10px 14px;
    font-size: 0.9rem;
    outline: none;
    background: var(--background-color);
}

.settings-input:disabled {
    background: #f3f4f6;
    color: #6b7280;
}

.settings-input:focus {
    border-color: #111827;
}

/* email row (input + button) */
.email-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* theme pills */
.settings-toggle-row {
    display: flex;
    padding: 4px;
    border-radius: 999px;
    background: #f3f4f6;
    gap: 4px;
}

.toggle-pill {
    flex: 1;
    border-radius: 999px;
    padding: 7px 10px;
    border: none;
    font-size: 0.85rem;
    cursor: pointer;
    background: transparent;
}

.toggle-pill.active {
    background: var(--contrast);
    color: var(--background-color);
}

/* avatar colors */
.color-dot-row {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.color-dot {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    border: 2px solid transparent;
    cursor: pointer;
}

.color-dot.selected {
    border-color: var(--contrast);
}

.settings-hint {
    font-size: 0.78rem;
    color: var(--text-light);
}

/* footer buttons (cancel/save) */
.settings-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 16px;
}

/* back + pill buttons */
.settings-back-btn,
.settings-pill-btn {
    border-radius: 999px;
    padding: 9px 16px;
    border: 1px solid #e5e7eb;
    background: var(--background-color);
    font-size: 0.86rem;
    cursor: pointer;
}

.settings-back-btn {
    white-space: nowrap;
}

/* primary pill */
.settings-pill-btn.primary {
    background: var(--contrast);
    color: var(--background-color);
    border-color: var(--contrast);
}

/* red pill for delete / send code */
.settings-pill-btn.danger {
    background: var(--red-bg);
    border-color: var(--red-text);
    color: var(--red-text);
}

/* password & danger sections */
.password-section .settings-pill-btn.primary {
    width: 100%;
    justify-content: center;
}

.danger-zone {
    border-top: 1px solid #e5e5e5;
    margin-top: 10px;
    padding-top: 10px;
}

/* main delete button */
.danger-btn {
    width: 180px;
    border-radius: 999px;
    padding: 8px 14px;
    background: var(--background-color);
    color: var(--red-text);
    border: 1px solid var(--red-bg);
    font-size: 0.86rem;
    cursor: pointer;
}

/* responsive */
@media (max-width: 640px) {
    .settings-panel {
        padding: 24px 10px;
    }

    .settings-panel-inner {
        padding: 18px 16px 14px;
        border-radius: 20px;
    }

    .settings-grid {
        grid-template-columns: 1fr;
    }

    .email-row {
        flex-direction: column;
        align-items: stretch;
    }

    .danger-btn {
        width: 100%;
    }
}

/* Toast popups */
.toast-container {
  position: fixed;
  z-index: 1300000;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast-container-limit {
  left: 50%;
  transform: translateX(-50%);
  width: min(765px, calc(100vw - 32px));
}

body.mobile-active .toast-container-limit {
  left: 50%;
  transform: translateX(-50%);
  width: min(765px, calc(100vw - 24px));
}

.toast-container-top {
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(765px, calc(100vw - 32px));
}

.toast-container-top-right {
  top: calc(var(--slanter-topbar-h, 64px) + 12px);
  right: 24px;
  width: min(365px, calc(100vw - 32px));
  align-items: flex-end;
}

.Toast {
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 21px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  max-width: 765px;
  width: 100%;
  box-sizing: border-box;
  pointer-events: auto;
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition: opacity 160ms ease, transform 160ms ease;
  will-change: opacity, transform;
  backface-visibility: hidden;
}

.Toast.show {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.Toast.ChatComplete {
  gap: 4px;
  border-radius: 13px;
  max-width: 365px;
  transform: translate3d(120%, 0, 0);
  transition: opacity 190ms ease, transform 190ms ease;
  cursor: pointer;
}

.Toast.ChatComplete.show {
  transform: translate3d(0, 0, 0);
}

.Toast.ChatComplete .ToastChatCompleteTitle,
.Toast.ChatComplete .ToastChatCompletePreview {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.Toast.ChatComplete:hover {
  background-color: var(--input-darker-bg);
}

.Toast.Limit {
  flex-direction: row;
  align-items: center;
  gap: clamp(8px, 2vw, 16px);
  min-width: 0;
  max-width: none;
}

.ToastText {
  font-size: 1rem;
  color: var(--text-color);
  line-height: 1.35;
}

.ToastText.Bold {
  font-weight: 600;
}

.ToastText.Sub {
  margin-top: 6px;
  padding: 0 8px;
  padding-bottom: 7px;
  font-size: 0.95rem;
  color: var(--light-text);
}

.ToastText.Error {
  color: var(--red-text);
}

.linktext {
  font-size: 1rem;
  color: var(--link-color);
  cursor: pointer;
}

.linktext:hover {
  text-decoration: underline;
}

.ToastErrorBottom {
  align-items: center;
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.ToastErrorSvg {
  color: var(--red-bg-transp-2);
  width: 18px;
  display: flex;
  flex: 0 0 18px;
}

.ToastText.ErrorMSG {
  color: var(--red-bg-transp-2);
}

.ToastLimitLeft {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.ToastLimitRight {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.CTABlack {
  height: 40px;
  color: var(--contrast-text);
  background-color: var(--contrast);
  border: none;
  border-radius: 13px;
  padding: 10px 15px;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

.Toast.Error.mobile{
  background-color: var(--red-bg-not-transp);
  border: 1px solid rgba(224, 62, 51, 0.3);
  width: 100%;
  max-width: none;
  border-radius: 24px;
  box-sizing: border-box;
  justify-self: center;
}

.Toast.Limit.mobile{
  flex-direction: column;
  width: 100%;
  gap: 12px;
  border-radius: 24px;
  box-sizing: border-box;
  justify-self: center;
}

.Toast.mobile {
  position: relative;
}

.Toast.mobile::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 44px;
  pointer-events: auto;
}

.ToastText.mobile{
  font-size: 1rem;
  padding: 0 10px;
  padding-bottom: 3px;
  padding-top: 10px;
}

.ToastLimitRight.mobile{
  flex-wrap: nowrap;
  margin: 0;
  display: flex;
  width: 100%;
  align-items: center;
  gap: 8px;
}

.CTABlack.mobile{
  display: flex;
  width: 100%;
  height: 40px;
  border-radius: 15px;
  border: none;
  background-color: var(--contrast);
  font-size: 0.9rem;
  align-items: center;
  gap: 12px;
  padding: 12px;
  color: var(--contrast-text);
  justify-content: center;
}

.CTABlack.mobile.Grey{
  background-color: var(--file-btn-mobile-bg);
  color: var(--text-color);
}

.CTABlack.mobile.Grey{
  margin-top: auto;
}

.CTABlack.mobile.Red {
  background-color: var(--red-bg-not-transp);
  color: var(--red-text-light);
}

@media (max-width: 700px) {
  .Toast.Limit {
    flex-direction: column;
    align-items: stretch;
  }

  .ToastLimitRight {
    margin-left: 0;
    justify-content: flex-start;
  }
}

.message.bot.toast-inline-host {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border-radius: 0;
  line-height: 1.2;
  overflow: visible;
  animation: none;
}

.message.bot.toast-inline-host::before {
  display: none;
}

.message.bot.toast-inline-host .Toast {
  max-width: none;
}

.toast-test-panel {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 1000000;
  display: flex;
  gap: 8px;
}

.toast-test-btn {
  height: 34px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-color);
  border-radius: 8px;
  padding: 0 10px;
  font-size: 0.85rem;
  cursor: pointer;
}

.toast-test-btn:hover {
  background: var(--hover-color);
}

/* --- Bot message actions (copy / regenerate / dislike) --- */

.bot-actions-row {
    display: flex !important;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 12px;
    opacity: 1 !important;
    height: auto !important;
}

/* -------- BOT ACTION BUTTONS (copy / regen / dislike) -------- */

.bot-actions-row {
    display: flex !important;
    gap: 10px;
    margin: 8px 0 14px 0;
    padding-left: 4px;
    align-items: center;
}

/* Filled dislike state */
.bot-action-btn.liked svg {
    fill: #e53935 !important;
    stroke: #e53935 !important;
    opacity: 1 !important;
}

.user-tier {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}

/* -------- BOT ACTION BUTTONS (copy / regen / dislike) -------- */

.bot-actions-row {
    display: flex !important;
    gap: 10px;
    margin: 8px 0 14px 0;
    align-items: center;

}

/* User-bubble action row: same row, right-aligned under the user message. */
.bot-actions-row.user {
    justify-content: flex-end;
}

/* Inline edit of the latest user message: the bubble becomes a textarea that
   grows with its content, and the action row stays permanently visible. */
.message.user.edit textarea {
    field-sizing: content;
    padding: 0;
    min-width: 1px;
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

.bot-actions-row.user.editing {
    opacity: 1 !important;
}

/* Text-labelled action buttons (Cancel / Save) — the icon buttons are square. */
.bot-action-btn.text {
    width: auto;
    height: 28px;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
}

.bot-action-btn.text.contrast {
    background: var(--contrast);
    color: var(--contrast-text);
}

.bot-action-btn.text.contrast:hover {
    background: var(--light-background-hover);
    color: var(--contrast-text);
}

.bot-action-btn.text.disabled {
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
}

/* Filled dislike state */
.bot-action-btn.liked svg {
    fill: #e53935 !important;
    stroke: #e53935 !important;
    opacity: 1 !important;
}

.user-tier {
  font-size: 11px;
  opacity: 0.7;
  margin-top: 2px;
}

/* =========================
   MLA Citation Pill (stacked)
========================= */

.citation-pill {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.citation-pill-inner {
    display: flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    max-height: 28px;
    padding: 0 3px;
    padding-right: 8px;
    outline: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--background-color);
    transition: background 0.15s ease, transform 0.1s ease;
    width: fit-content;
    cursor: pointer;
}

.citation-pill-inner:hover {
  background-color: var(--border-color);
}

.citation-pill-inner:hover .citation-favicon {
  border-color: var(--solid-border-color);
  background-color: var(--solid-border-color);
}

.citation-favicon-stack {
  margin-left: 12px;
  display: flex;
  align-items: center;
}

.citation-favicon {
  align-self: center;
  display: flex;
  width: 18px;
  height: 18px;
  border-radius: 6px;
  border: 3px solid var(--background-color);
  background: var(--background-color);
  margin-left: -13px;
  transition: margin 0.15s ease, transform 0.15s ease, border 0.15s ease;
}

.citation-label {
  display: flex;
  color: var(--med-light-text);
  font-size: 14px;
  white-space: nowrap;
}


.citation-pill-open {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 20;
}

.citation-line {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.citation-label-text {
  display: inline-flex;
  color: var(--contrast);
  font-size: 14px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.citation-label-text:hover {
  color: var(--contrast);
  text-decoration: underline;
  cursor: pointer;
}

.citation-link-icon {
  color: var(--med-light-text);
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.citation-link-button {
  display: inline-flex;
  align-items: center;
  background-color: var(--background-color);
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  margin-left: auto;
  transition: all 0.15s ease;
}

.citation-link-button:hover {
  background-color: var(--hover-color);
}

.citation-link-button:hover .citation-label {
 color: var(--contrast);
}

.citation-link-button:hover .citation-link-icon {
 color: var(--contrast);
}

.bot-actions-row .citation-pill {
    margin-left: 2px !important;
}

body:not(.mobile-active) .mobileFileSlideupRoot {
  display: none !important;
}

/* ================================
   MOBILE-ONLY CHAT INPUT + SIDEBAR
================================ */
@media (max-width: 900px) {

  .mobile-sources-action-row {
    display: flex;
    margin: 2px 0 0 0;
  }

  .mobileSourcesBtn{
    user-select: none;
    background-color: transparent;
    border-radius: 16px;
    display: flex;
    border: 1px solid var(--border-color);
    align-items: center;
    margin-left: 4px;
    padding: 10px;
    width: fit-content;
    gap: 10px;
    height: 21px;
    align-items: center;
    cursor: pointer;
    transform: scale(1);
    transition: transform 0.14s ease;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
  }

  body.mobile-active .mobileSourcesBtn:active {
    transform: scale(1.2);
  }

  body.mobile-active .bot-action-btn {
    padding: 2px;
    transform: scale(1);
    transition: background 0.15s ease, color 0.15s ease, transform 0.14s ease;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
  }

  body.mobile-active .bot-action-btn:hover {
    background: transparent;
    color: var(--light-text);
    opacity: 1;
  }

  body.mobile-active .bot-action-btn:active {
    transform: scale(1.3);
  }

  .mobileSourcesicons{
    display: flex;
  }

  .mobileSourcesfavicon{
    display: flex;
    border: 3px solid var(--background-color);
    background-color: #fff;
    border-radius: 8px;
    margin-left: -17px;
    width: 18px;
    height: 18px;
    object-fit: cover;
  }

  .mobileSourcesfavicon.first{
    margin-left: -1px;
  }

  .mobileSourcesBtnText {
    color: var(--med-light-text);
    font-size: 0.95rem;
    line-height: 1;
  }

  body.mobile-active .file-preview-stack {
      display: none !important;
  }

  /* Hide desktop inputs only when mobile UI mode is active */
  body.mobile-active .input-container,
  body.mobile-active .input-container-centered {
      display: none !important;
  }

  /* Show mobile bar only in mobile UI mode */
  body.mobile-active #mobileInputBar {
      display: block;
  }

  /* Fixed bottom pill */
  #mobileInputBar {
      position: fixed;
      left: 0;
      font-size: 1rem;
      bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
      top: auto;
      transform: none;
      width: 100vw;
      padding: 0 10px;
      box-sizing: border-box;
      z-index: 5000;
  }

  .mobileinputbar.search {
    flex-direction: row !important;
    max-height: 30px !important;
  }

  body.mobile-active #mobileInputBar {
      padding-bottom: 0;
  }

  .mobiletopbar{
      width: 100%;
      background-color: transparent;
      display: flex;
      flex-direction: row;
      gap: 10px;
      align-items: center;
  }

  .mobilebutton{
    align-items: center;
    justify-content: center;
      aspect-ratio: 1;
      height: 45px;
      border-radius: 40px;
      border: none;
      padding: 11px;
      display: flex;
      transform: scale(1);
      transform-origin: center;
      transition: transform 0.14s ease;
      will-change: transform;
      -webkit-tap-highlight-color: transparent;
      tap-highlight-color: transparent;
      -webkit-appearance: none;
      appearance: none;
  }

  .mobilebutton:active:not(:disabled),
  .mobilebutton.mobilebutton-pressed:not(:disabled) {
      transform: scale(1.3);
  }

  .mobilebutton:focus,
.mobilebutton:focus-visible {
      outline: none;
  }

  #mobileTopbarMenuBtn:disabled svg {
      opacity: 0.5;
  }

  .mobilebutton.grey{
      background-color: var(--input-bg);
      border: 1px solid var(--border-color);
      color: var(--text-color);
      box-shadow: var(--mobile-button-inset);
  }

  .mobilebutton.transp{
      background-color: transparent;
      color: #000;
  }

  .mobilebutton.transp.small{
      padding: 15px;
      height: 100px;
      background-color: transparent;
      color: #000;
  }

  .mobilebutton.transp.small:active{
    transform: scale(1.3) !important;
  }

  .mobilebutton.black{
      background-color: #000;
      color: #ffffff;
  }

  .mobilebutton.red{
      padding: 8px;
      border: 1px solid rgba(233, 76, 76, 0.3);
      background-color: rgba(233, 76, 76, 0.15);
      color: #E94C4C;
  }

  .mobilebutton.black.small{
      padding: 20px;
      height: 100px;
      background-color: #000;
      color: #ffffff;
  }

  .mobilebutton.black.small.xtreme{
      padding: 20px;
      height: 100px;
      background-color: #000;
      color: #ffffff;
      margin-left: auto;
  }

  .mobiletopbartab{
      border: 1px solid var(--border-color);
      color: var(--text-color);
      font-size: 1.15rem;
      height: 45px;
      border-radius: 15px;
      justify-content: center;
      align-items: center;
      display: flex;
      flex-grow: 1;
  }

  .mobileinputbar{
      display: flex;
      flex-direction: column;
      border: 1px solid #ccc;
      border-radius: 60px;
      padding: 15px;
      align-items: center;
  }

  .mobileinputbottom{
      display: flex;
      width: 100%;
  }

  .mobileinput{
      color: var(--text-color);
      align-items: center;
      display: flex;
      flex-grow: 1;
      border: none;
      font-size: 3rem;
      outline: none;
      width: 100%;
      box-sizing: border-box;
  }

  .mobileinputplace{
      flex-grow: 1;
      font-size: 3rem;
      color: #a9a9a9;
  }

  .mobile-file-row {
      --file-preview-edge-fade: 28px;
      display: flex;
      align-items: flex-end;
      gap: 8px;
      overflow-x: scroll;
      overflow-y: hidden;
      scrollbar-width: thin;
      scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
      scrollbar-gutter: stable;
      margin-bottom: 6px;
      position: relative;
  }

  .mobile-pill {
      display: flex;
      align-items: flex-end;
      gap: 6px;
      background: var(--input-bg, var(--background-color));
      border-radius: 28px;
      border: 1px solid rgba(0,0,0,0.15);
      padding: 8px 10px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  }

  .mobile-pill-btn {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: none;
      background: transparent;
      padding: 0;
  }

  .mobile-pill-btn svg {
      width: 22px;
      height: 22px;
  }

  #mobileTextbox {
      flex: 1;
      border: none;
      resize: none;
      background: transparent;
      font-size: 16px;
      line-height: 20px;
      padding: 4px 0;
      max-height: 260px;         /* auto-grow up to here */
      overflow-y: auto;          /* scroll after this */
  }

  #mobileTextbox:focus {
      outline: none;
  }

  #mobileTextbox::-webkit-scrollbar {
      width: 0;
      height: 0;
  }

  #mobileSendBtn.hidden,
  #mobileVoiceBtn.hidden {
      display: none;
  }

  body.mobile-active.mobile-file-slideup-open #mobileInputBar,
  body.mobile-active.mobile-file-slideup-open #mobileFileRow,
  body.mobile-active.mobile-quiz-slideup-open #mobileInputBar,
  body.mobile-active.mobile-quiz-slideup-open #mobileFileRow,
  body.mobile-active.mobile-sources-slideup-open #mobileInputBar,
  body.mobile-active.mobile-sources-slideup-open #mobileFileRow,
  body.mobile-active.mobile-model-slideup-open #mobileInputBar,
  body.mobile-active.mobile-model-slideup-open #mobileFileRow {
      opacity: 0;
      pointer-events: none;
      transform: translateY(14px);
      transition: opacity 180ms ease, transform 220ms ease;
  }

  .mobileFileSlideupRoot {
      position: fixed;
      inset: 0;
      z-index: 120560;
      pointer-events: none;
      opacity: 0;
      transition: opacity 200ms ease;
  }

  .mobileFileSlideupRoot.open {
      pointer-events: auto;
      opacity: 1;
  }

  .mobileFileSlideupBackdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.24);
      opacity: 0;
      transition: opacity 200ms ease;
  }

  .mobileFileSlideupRoot.open .mobileFileSlideupBackdrop {
      opacity: 1;
  }

  .mobileFileSlideupPopup {
      --mobile-slideup-offset: calc(100% + 36px);
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      transform: translateY(var(--mobile-slideup-offset));
      transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
      font-size: 1.1rem;
      box-sizing: border-box;
      width: 100%;
      max-height: calc(100vh - 18px - env(safe-area-inset-top, 0px));
      overflow-y: hidden;
      background-color: var(--input-bg);
      border-top-left-radius: 32px;
      border: 1px solid var(--border-color);
      border-top-right-radius: 32px;
      box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.12);
      padding: 16px;
      padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
      display: flex;
      flex-direction: column;
      touch-action: auto;
      border-bottom: none;
      will-change: transform;
  }

  .mobileFileSlideupPopup::after{
    content: "";
    z-index: 100000;
    position: absolute;
    width: 38px;
    top: 5px;
    height: 5px;
    background: var(--border-color-sharper);
    left: 50%;
    transform: translate(-50%);
    border-radius: 10px;
  }

  .mobileFileSlideupPopup .mobilefilepopup_top {
    touch-action: none;
    flex: 0 0 auto;
    min-height: 45px;
    position: relative;
    z-index: 5;
  }

  .mobileFileSlideupListWrap {
    margin-top: 0;
    width: 100%;
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    z-index: 1;
  }

  .mobileFileSlideupScrollList {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
    position: relative;
    z-index: 1;
  }

  .mobileFileSlideupPopup.no-transition {
      transition: none !important;
  }

  .mobilebutton.grey.absolute{
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
  }

  .mobilebutton.grey.right{
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    color: var(--text-color);
  }

  .mobilefilepopup_top_text{
    font-size: 1rem;
    color: var(--text-color);
    align-self: center;
  }

  .mobilefilepopup_top{
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .mobilefilepopup_mid{
    display: flex;
    gap: 12px;
  }

  .mobilefilepopup_btm{
    margin-top: 16px;
    gap: 16px;
    display: flex;
    flex-direction: column;
    width: 100%;
    align-self: stretch;
  }

  .mobilefilepopup_optionbtn{
    color: var(--text-color);
    background-color: var(--background-color);
    border: none;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 0;
    justify-content: center;
    gap: 4px;
    min-height: 85px;
    font-size: 1rem;
    transition: transform 0.2s ease;
  }

  .mobilefilepopup_optionbtn:active{
    transform: scale(1.06);
  }

  .mobilefilepopup_optionbtn_svg{
    opacity: 0.5;
    width: 22px;
    height: 22px;
  }

  .mobilefilepopup_optionbtn_svg.file{
    opacity: 1;
    width: 20px;
    height: 20px;
  }

  .mobilefilepopup_optionsection{
    width: 100%;
    gap: 12px;
    color: var(--text-color);
    border: none;
    background-color: transparent;
    padding: 12px 8px;
    font-size: 1rem;
    box-sizing: border-box;
    align-items: center;
    display: flex;
  }

  #mobileSettingsLogoutAllBtn,
  #mobileSettingsDeleteChatsBtn,
  #mobileSettingsLeaveInstitutionBtn,
  #mobileSettingsLogoutBtn{
    color: var(--red-text-light);
  }

  .mobileswitch{
    min-width: 70px;
    margin-left: auto;
  }

  .TextButtonMobile{
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--med-text);
    margin-left: auto;
  }

  /* Long collection names need to truncate with an ellipsis on one line,
     not wrap — give the tag a shrinkable, bounded box so overflow/ellipsis
     actually has something to clip against. */
  #mobileFilePopupAddToCollectionBtn .TextButtonMobile {
    min-width: 0;
    flex-shrink: 1;
  }

  #mobileFilePopupCollectionTag {
    display: inline-block;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
  }

  /* Keep the whole row (icon, "Add to collection" label, tag, chevron) on
     one line — without this the label text itself can wrap onto a second
     line as the row gets squeezed by a long collection name. */
  #mobileFilePopupAddToCollectionBtn {
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .mobileCollectionSlideupRoot {
    z-index: 2147483608;
  }

  body.mobile-active.mobile-collection-slideup-open .main-area,
  body.mobile-active.mobile-collection-slideup-open .sidebar,
  body.mobile-active.mobile-collection-slideup-open #mobileSidebarOverlay {
    pointer-events: none !important;
  }

  body.mobile-active.mobile-collection-slideup-open #mobileCollectionSlideupRoot {
    pointer-events: auto !important;
  }

  .mobileSettingsSlideupRoot {
    z-index: 2147483609;
  }

  .mobileQuizSlideupRoot {
    z-index: 2147483610;
  }

  .mobileSourcesSlideupRoot {
    z-index: 2147483611;
  }

  body.mobile-active.mobile-quiz-slideup-open .main-area,
  body.mobile-active.mobile-quiz-slideup-open .sidebar,
  body.mobile-active.mobile-quiz-slideup-open #mobileSidebarOverlay {
    pointer-events: none !important;
  }

  body.mobile-active.mobile-quiz-slideup-open #mobileQuizSlideupRoot {
    pointer-events: auto !important;
  }

  body.mobile-active.mobile-sources-slideup-open .main-area,
  body.mobile-active.mobile-sources-slideup-open .sidebar,
  body.mobile-active.mobile-sources-slideup-open #mobileSidebarOverlay {
    pointer-events: none !important;
  }

  body.mobile-active.mobile-sources-slideup-open #mobileSourcesSlideupRoot {
    pointer-events: auto !important;
  }

  body.mobile-active.mobile-model-slideup-open .main-area,
  body.mobile-active.mobile-model-slideup-open .sidebar,
  body.mobile-active.mobile-model-slideup-open #mobileSidebarOverlay {
    pointer-events: none !important;
  }

  body.mobile-active.mobile-model-slideup-open #mobileModelSlideupRoot {
    pointer-events: auto !important;
  }

  .mobileSourcesSlideupPopup {
    --mobile-slideup-offset: calc(100% + 36px);
    padding-bottom: 5px;
    overflow-y: hidden;
    touch-action: auto;
  }

  .mobileSourcesSlideupPopup .mobilefilepopup_top {
    touch-action: none;
    flex: 0 0 auto;
    min-height: 45px;
    position: relative;
    z-index: 5;
  }

  .mobileModelSlideupPopup {
    --mobile-slideup-offset: calc(100% + 36px);
    padding-bottom: 5px;
    overflow-y: hidden;
    touch-action: auto;
  }

  .mobileModelSlideupPopup .mobilefilepopup_top {
    touch-action: none;
    flex: 0 0 auto;
    min-height: 45px;
    position: relative;
    z-index: 5;
  }

  .mobileSourcesSlideupOption {
    cursor: pointer;
    text-align: left;
    border-top: 1px solid var(--border-color);
    padding: 8px 0 !important;
  }

  .mobileSourceSlideupTitle {
    display: block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mobileSourcesfaviconSmall{
    display: flex;
    border-radius: 6px;
    height: 18px;
    width: 18px;
    background-color: #fff;
    object-fit: cover;
  }

  .SmallerSlideUpText.sources{
    gap: 8px;
    display: flex;
    font-size: 0.9rem;
    align-items: center;
    color: #9F9F9F;
    margin-top: 2px;
    margin-left: auto;
  }

  .mobileQuizSlideupPopup {
    --mobile-slideup-offset: calc(100% + 36px);
    padding-bottom: 16px;
    touch-action: pan-y;
    overflow: hidden;
    overflow-x: hidden;
  }

  .mobileQuizSlideupPopup .mobilefilepopup_top{
    flex: 0 0 45px;
    min-height: 45px;
  }

  #mobileQuizSlideupContent {
    width: 100%;
    overflow: visible;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
  }

  .mobileQuizSlideupPopup .mobilefilepopup_btm {
    flex: 1 1 auto;
    min-height: 0;
    overflow: visible;
    display: flex;
  }

  .quizboxmobile{
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid var(--border-color);
    border-radius: 34px;
    background-color: var(--mobile-quiz-bg);
    box-shadow: 0 0 15px var(--black-shadow);
    padding: 16px;
    justify-items: center;
    gap: 16px;
    will-change: transform, opacity;
  }

  .mobilequizlayout{
    --mobile-quiz-side-pad: 16px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 16px;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: visible;
  }

  .mobilequizswipestage{
    position: relative;
    overflow: visible;
    touch-action: pan-y;
    --mobile-quiz-swipe-gap: 22px;
    margin-inline: calc(-1 * var(--mobile-quiz-side-pad));
    padding-inline: var(--mobile-quiz-side-pad);
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
  }

  .mobilequizswipestage.is-animating .mobilequizpage,
  .mobilequizswipestage.is-swiping .mobilequizpage{
    pointer-events: none !important;
  }

  .mobilequizswipestage.is-swiping .mobilequizpage{
    transition: none !important;
  }

  .mobilequizswipestage.swipe-bounce-left{
    animation: mobileQuizSwipeBounceLeft 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobilequizswipestage.swipe-bounce-right{
    animation: mobileQuizSwipeBounceRight 260ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .mobilequizpage{
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
    will-change: transform, opacity;
    width: 100%;
    box-sizing: border-box;
    height: 100%;
  }

  .quizboxmobile.mobilequizpage{
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .mobilequizpage.prev,
  .mobilequizpage.next{
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--mobile-quiz-side-pad);
    right: var(--mobile-quiz-side-pad);
    width: auto;
    pointer-events: none;
    z-index: 1;
  }

  .mobilequizpage.prev{
    transform: translate3d(calc(-100% - var(--mobile-quiz-swipe-gap)), 0, 0);
    opacity: 0.34;
  }

  .mobilequizpage.next{
    transform: translate3d(calc(100% + var(--mobile-quiz-swipe-gap)), 0, 0);
    opacity: 0.34;
  }

  .mobilequizpage.current{
    position: relative;
    z-index: 2;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  .quizoptionsmobile{
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 0 0 auto;
  }

  .quiztitlemobile{
    font-family: "Slanter-serif", serif;
    color: var(--text-color);
    word-break: auto-phrase;
    font-size: clamp(1rem, calc(0.96rem + 0.32vh), 1.1rem);
    text-align: center;
    line-height: 1.35;
    margin-block-start: auto;
    margin-block-end: auto;
  }

  .quiztitlemobile > p{
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .mobilequizlayout.mobilequizlayout-summary{
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }

  .mobilequizsummarybox{
    gap: 14px;
    height: 100%;
    min-height: 0;
    justify-content: center;
    text-align: center;
  }

  .quiztitlemobile.justify{
    font-family: "Slanter-serif", serif;
    text-align: justify;
    line-height: 120%;
    margin-block-start: 0;
    margin-block-end: 0;
  }

  .quiztitlemobile.justify > p{
    margin: 0;
  }

  .quizsummarystats{
    display: flex;
    border-top: 1px solid var(--border-color);
    color: var(--text-color);
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
    padding-top: 16px;
    gap: 10px;
  }

  .quizsummarystatsbox{
    padding: 12px 0;
    display: flex;
  }

  .quizsummarystat{
    display: flex;
    flex-direction: column;
    font-size: 0.95rem;
    align-items: center;
    padding: 0 16px;
    padding-left: 0;
    border-right: 1px solid var(--border-color);
  }

  .quizsummarystat.noborder{
    border-right: none;
    padding-left: 16px;
  }

  .quizsummarystatnumb{
    font-size: 1.3rem;
    color: var(--text-color);
  }

  .mobilequizoption{
    display: flex;
    color: var(--text-color);
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    box-shadow: 0 0 11.5px 0 rgba(0, 0, 0, 0.05);
    width: 100%;
    padding: 16px;
    min-height: 60px;
    font-size: 1rem;
    align-items: center;
    border-radius: 21px;
    text-align: left;
    transition: transform 160ms ease, background-color 200ms ease, border-color 200ms ease, color 200ms ease;
  }

  .mobilequizoption:active{
    transform: scale(0.99);
  }

  .mobilequizoption:disabled{
    cursor: default;
  }

  .mobilequizoption [data-md]{
    display: block;
    width: 100%;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    opacity: 1 !important;
    visibility: visible !important;
    white-space: normal;
    line-height: 1.35;
  }

  .mobilequizoption [data-md] > p{
    margin: 0;
  }

  .mobilequizoption.is-muted{
    opacity: 0.5;
  }

  .mobilequizoption.wrong{
    color: var(--red-text);
    background-color: var(--red-bg);
    border: 1px solid var(--red-border);
  }

  .mobilequizoption.correct{
    color: var(--green-text);
    background-color: var(--green-bg-transp);
    border: 1px solid var(--green-border);
  }

  .mobilequizoption.is-wrong-shake{
    animation: mobileQuizOptionWrongShake 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .mobilequizprogress{
    align-self: center;
    display: flex;
    gap: 6px;
  }

  .mobilequizprogress.mobilequizprogress-fixed{
    position: relative;
    z-index: 3;
    margin-bottom: 4px;
    flex: 0 0 auto;
    width: max-content;
    margin-inline: auto;
    justify-self: center;
    align-self: center;
  }

  .mobilequizstatus{
    height: 10px;
    width: 20px;
    border-radius: 20px;
    background-color: var(--mobile-quiz-pill);
    will-change: width, background-color;
    transition: width 220ms cubic-bezier(0.22, 1, 0.36, 1), background-color 220ms ease;
  }

  .mobilequizstatus.active{
    width: 60px;
    background-color: var(--text-color);
  }

  .mobilequizstatus.wrong{
    background-color: var(--circle-bg-wrong);
  }

  .mobilequizstatus.correct{
    background-color: var(--circle-bg-correct);
  }

  .mobilequizstatus.active.wrong{
    background-color: var(--red-bg-transp-2, var(--red-border));
  }

  .mobilequizstatus.active.correct{
    background-color: var(--green-border);
  }

  .mobilequizstatus.summary.is-entering{
    animation: mobileQuizSummaryPillCreate 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
  }

  @keyframes mobileQuizSummaryPillCreate {
    0% {
      width: 0;
      opacity: 0;
      transform: scale(0.88);
    }
    56% {
      width: 68px;
      opacity: 1;
      transform: scale(1.03);
    }
    100% {
      width: 60px;
      opacity: 1;
      transform: scale(1);
    }
  }

  body.mobile-active.mobile-settings-slideup-open .main-area,
  body.mobile-active.mobile-settings-slideup-open .sidebar,
  body.mobile-active.mobile-settings-slideup-open #mobileSidebarOverlay {
    pointer-events: none !important;
  }

  body.mobile-active.mobile-settings-slideup-open #mobileSettingsSlideupRoot {
    pointer-events: auto !important;
  }

  .mobileSettingsSlideupPopup {
    height: calc(100vh - 18px - env(safe-area-inset-top, 0px));
    padding-bottom: 0;
    background-color: var(--input-bg) !important;
    padding-left: 16px;
    padding-right: 0;
    overflow: hidden;
    touch-action: auto;
  }

  .mobileSettingsSlideupPopup .mobilefilepopup_top {
    touch-action: none;
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    min-height: 45px;
    z-index: 8;
  }

  .mobileSettingsPagesHost {
    margin-top: 0;
    width: 100%;
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding-bottom: 25px;
  }

  .mobileSearchStepSlideupBody {
    margin-top: 4px;
    width: 100%;
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    box-sizing: border-box;
    padding-bottom: 25px;
  }

  .mobileSearchStepSlideupBody .search-thinking {
    max-height: none;
  }

  .mobileSearchStepSlideupBody .search-collapse-thinking {
    display: none;
  }

  .mobileSearchStepSlideupBody .search-top-text-think:hover .search-collapse-thinking {
    visibility: hidden;
  }

  .mobileSearchStepSlideupBody .search-header-text {
    pointer-events: none;
  }

  .mobileSettingsIsland {
    background: var(--background-color);
    overflow: hidden;
    border-radius: 23px;
    padding: 0 16px;
    flex-shrink: 0;
  }

  .mobileSettingsIsland.upgrade {
    border: 1px solid var(--border-color-sharper);
    background: var(--file-btn-mobile-bg);
  }

  .mobileSettingsPagesHost .mobileCollectionListFade {
    z-index: 6;
  }

  .mobileSettingsPagesHost .mobileCollectionListFade.top {
    top: var(--mobile-settings-header-offset, 55px);
  }

  .mobileSettingsPagesHost .mobilefilepopup_btm {
    margin-top: 0;
    height: auto;
    min-height: 0;
    padding-bottom: 25px;
  }

  .mobileSettingsPage {
    display: none;
    flex-direction: column;
    position: absolute;
    left: 0;
    right: 0;
    top: var(--mobile-settings-header-offset, 55px);
    bottom: 0;
    gap: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    background: transparent;
    padding-right: 16px;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease;
    will-change: transform;
  }

  .mobileSettingsPage.is-active,
  .mobileSettingsPage.is-behind {
    display: flex;
  }

  .mobileSettingsPage.is-behind {
    opacity: 0.94;
  }

  .mobileSettingsPage.is-swiping {
    transition: none !important;
  }

  #mobileSettingsSwipeBackgroundLayer,
  #mobileSettingsSwipeFrontLayer {
    display: none;
  }

  .mobileSettingsSlideupPopup > #mobileSettingsSwipeBackgroundLayer,
  .mobileSettingsSlideupPopup > #mobileSettingsSwipeFrontLayer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }

  body.mobile-active.mobile-settings-slideup-open.mobile-settings-back-swipe-dragging #mobileSettingsSwipeBackgroundLayer,
  body.mobile-active.mobile-settings-slideup-open.mobile-settings-back-swipe-dragging #mobileSettingsSwipeFrontLayer {
    display: block;
  }

  body.mobile-active.mobile-settings-slideup-open.mobile-settings-back-swipe-dragging #mobileSettingsSwipeBackgroundLayer {
    z-index: 3;
  }

  body.mobile-active.mobile-settings-slideup-open.mobile-settings-back-swipe-dragging #mobileSettingsSwipeBackgroundLayer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, var(--mobile-settings-bg-dim, 0));
    pointer-events: none;
    z-index: 1;
  }

  body.mobile-active.mobile-settings-slideup-open.mobile-settings-back-swipe-dragging #mobileSettingsSwipeFrontLayer {
    z-index: 4;
    box-shadow: -1px 0 0 rgba(0, 0, 0, 0.12), -6px 0 12px rgba(0, 0, 0, 0.12);
  }

  @keyframes mobileQuizSwipeBounceLeft {
    0% { transform: translateX(0); }
    48% { transform: translateX(-22px); }
    100% { transform: translateX(0); }
  }

  @keyframes mobileQuizSwipeBounceRight {
    0% { transform: translateX(0); }
    48% { transform: translateX(22px); }
    100% { transform: translateX(0); }
  }

  @keyframes mobileQuizOptionWrongShake {
    0% { transform: translateX(0); }
    15% { transform: translateX(-8px); }
    30% { transform: translateX(7px); }
    45% { transform: translateX(-6px); }
    60% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); }
  }

  .mobileSettingsPage.mobileSettingsSwipeSourceHidden {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mobileSettingsSlideupPopup.mobile-settings-back-swipe-sources-hidden .mobileSettingsPagesHost {
    visibility: hidden !important;
  }

  #mobileSettingsSwipeBackgroundLayer .mobileSettingsSwipeLayerPage,
  #mobileSettingsSwipeFrontLayer .mobileSettingsSwipeLayerPage {
    display: flex !important;
    position: absolute;
    left: var(--mobile-settings-content-left, 0px);
    top: var(--mobile-settings-content-top, 0px);
    right: auto;
    bottom: auto;
    width: var(--mobile-settings-content-width, 100%);
    height: var(--mobile-settings-content-height, 100%);
    min-height: 0;
    margin-top: 0 !important;
    padding-top: var(--mobile-settings-layer-padding-top, 55px);
    box-sizing: border-box;
    max-width: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    background: var(--input-bg);
    pointer-events: none;
    z-index: 2;
  }

  #mobileSettingsSwipeBackgroundLayer .mobileSettingsSwipeLayerPage {
    transform-origin: 50% 50%;
  }

  #mobileSettingsSwipeBackgroundLayer .mobileSettingsSwipeLayerSurface,
  #mobileSettingsSwipeFrontLayer .mobileSettingsSwipeLayerSurface {
    position: absolute;
    inset: 0;
    background: var(--input-bg);
    overflow: hidden;
  }

  .mobileSettingsNavRow {
    border-top: 1px solid var(--border-color);
    font: inherit;
    text-align: left;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    padding: 16px 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }

  .mobileSettingsNavRow.light{
    color: var(--light-text);
  }

  #mobileSettingsInstitutionInput {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobileSettingsRow{
    border-top: 1px solid var(--border-color);
    width: 100%;
    display: grid;
    padding: 20px 0;
    padding-bottom: 16px;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 12px;
  }

  .mobileCollectionSlideupPopup {
    padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px));
    overflow-y: hidden;
    touch-action: auto;
  }

  .mobileCollectionSlideupPopup[data-view="list"] {
    padding-bottom: 5px;
  }

  .mobileCollectionSlideupPopup .mobilefilepopup_top {
    touch-action: none;
    flex: 0 0 auto;
    min-height: 45px;
    position: relative;
    z-index: 5;
  }

  .mobileCollectionSlideupListWrap {
    margin-top: 12px;
    width: 100%;
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    z-index: 1;
  }

  .mobileCollectionSlideupList {
    margin-top: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-height: 100%;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: auto;
    touch-action: pan-y;
    position: relative;
    z-index: 1;
  }

  .mobileCollectionListFade {
    position: absolute;
    left: 0;
    right: 0;
    height: 22px;
    pointer-events: none;
    opacity: 0;
    z-index: 2;
    transition: opacity 140ms ease;
  }

  .mobileCollectionListFade.top {
    top: 0;
    background: linear-gradient(to bottom, var(--input-bg) 0%, rgba(0, 0, 0, 0) 100%);
  }

  .mobileCollectionListFade.bottom {
    bottom: 0;
    background: linear-gradient(to top, var(--input-bg) 0%, rgba(0, 0, 0, 0) 100%);
  }

    .mobileCollectionListFade.top.settings {
    background: linear-gradient(to bottom, var(--input-bg) 0%, rgba(0, 0, 0, 0) 100%);
  }

  .mobileCollectionListFade.bottom.settings {
    bottom: 0;
    background: linear-gradient(to top, var(--input-bg) 0%, rgba(0, 0, 0, 0) 100%);
  }

  .mobileCollectionSlideupListWrap.can-scroll-up .mobileCollectionListFade.top,
  .mobileFileSlideupListWrap.can-scroll-up .mobileCollectionListFade.top,
  .mobileSettingsPagesHost.can-scroll-up .mobileCollectionListFade.top {
    opacity: 1;
  }

  .mobileCollectionSlideupListWrap.can-scroll-down .mobileCollectionListFade.bottom,
  .mobileFileSlideupListWrap.can-scroll-down .mobileCollectionListFade.bottom,
  .mobileSettingsPagesHost.can-scroll-down .mobileCollectionListFade.bottom {
    opacity: 1;
  }

  .mobileCollectionCreateView {
    margin-top: 12px;
    width: 100%;
    align-self: stretch;
    gap: 8px;
  }

  .mobileCollectionIconPickerView {
    margin-top: 12px;
    width: 100%;
    align-self: stretch;
    gap: 0;
  }

  .toppreviewiconmobile {
    width: 55px;
    height: 55px;
    display: flex;
    margin: 8px auto 26px;
    align-items: center;
    justify-content: center;
  }

  .toppreviewiconmobile svg {
    width: 100%;
    height: 100%;
  }

  .foldericonmobilepreview {
    width: 100%;
    height: 100%;
    flex: 0 0 100%;
  }

  .roleColorSelectorColorMobile {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    aspect-ratio: 1;
    border-radius: 13px;
    cursor: pointer;
    position: relative;
    overflow: visible;
    display: grid;
    place-items: center;
    transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
    touch-action: pan-x;
  }

  .roleColorSelectorColorMobile svg {
    width: 40px;
    height: 40px;
    display: block;
    pointer-events: none;
  }

  .roleColorSelectorColorMobile.is-selected {
    background-color: transparent !important;
    border-radius: 0;
  }

  .roleColorSelectorColorMobile:active {
    transform: scale(1.2);
  }

  .roleColorSelectorColorMobile.is-selected.should-pop svg {
    animation: mobilePickerSelectedPop 220ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: center;
  }

  @keyframes mobilePickerSelectedPop {
    0% {
      opacity: 0;
      transform: scale(1.2);
    }
    70% {
      opacity: 1;
      transform: scale(0.9);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  .roleColorSelectorColorMobile.Black { background-color: #FFFFFF; }
  :root[data-theme="light"] .roleColorSelectorColorMobile.Black { background-color: #1F2933; }
  .roleColorSelectorColorMobile.Red { background-color: #e47067; }
  .roleColorSelectorColorMobile.Orange { background-color: #e59e5b; }
  .roleColorSelectorColorMobile.Yellow { background-color: #e0bd4a; }
  .roleColorSelectorColorMobile.Green { background-color: #87c481; }
  .roleColorSelectorColorMobile.Blue { background-color: #6186c7; }
  .roleColorSelectorColorMobile.Purple { background-color: #ab84d5; }
  .roleColorSelectorColorMobile.Pink { background-color: #cd8ecc; }

  .mobilefilepopup_bar {
    width: 100%;
    border-top: 1px solid var(--border-color);
    margin-bottom: 16px;
  }

  .iconSelectorMobile {
    box-sizing: border-box;
    width: 100%;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    justify-items: center;
    align-items: center;
    margin-bottom: 8px;
  }

  .roleIconBtnMobile {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-color);
    border: none;
    background: transparent;
    padding: 0;
    transition: transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .roleIconBtnMobile.is-selected {
    opacity: 0.6;
  }

  .roleIconBtnMobile:active {
    transform: scale(1.2);
  }

  .foldericonmobilepicker {
    width: 40px;
    height: 40px;
  }

  .mobilecollectioninputbar {
    width: 100%;
    box-sizing: border-box;
    transition: border-color 320ms ease, box-shadow 420ms ease;
  }

  .mobileCollectionCreateInput {
    border: none;
    outline: none;
    width: 100%;
    min-width: 0;
    background: transparent;
    color: var(--text-color);
    font-size: 1rem;
  }

  .mobileCollectionCreateInput::placeholder {
    color: #9f9f9f;
  }

  .mobilebutton.transp.small.foldericon {
    align-items: center;
    justify-content: center;
    display: flex;
    padding: 8px;
    width: 40px;
    height: 40px;
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid transparent;
  }

  .titlemobileinput {
    color: #9f9f9f;
    font-size: 1rem;
    margin-bottom: 4px;
    margin-left: 16px;
  }

  .titlemobileinput.under {
    margin: 0 8px;
  }

  .settingsinputmobile {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
  }

  .mobilefilepopup_optionsection_inner {
    display: flex;
    flex-direction: column;
    margin-bottom: 16px;
  }

  .mobilefilepopup_optionsection.und {
    padding-bottom: 12px;
  }

  .mobilefilepopup_optionsection.und2 {
    padding-bottom: 4px;
  }

  .mobilefilepopup_optionsection.nobar {
    border-top: none;
    padding-top: 0;
  }

  .horizontalbar {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 16px;
  }

  .mobileinput.alone {
    padding-left: 8px;
    font-size: 1.2rem;
    color: var(--text-color);
  }

  .mobileinput.alone:disabled {
    color: var(--light-text);
    -webkit-text-fill-color: var(--light-text);
  }

  .mobileinput.alone.large {
    padding-top: 8px !important;
    font-family: 'Slanter-Sans', sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    align-items: center;
    display: flex;
    min-height: 120px;
    height: auto;
    flex-grow: 1;
    border: none;
    font-size: 1.2rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    resize: none;
    color: var(--text-color);
  }

  .mobileinput.alone.large::placeholder {
    color: #A1A1A1;
  }

  .mobileInputBar{
    width: 100%;
    box-sizing: border-box;
    outline: none !important;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 1rem;
    text-align: right;
  }

  .mobileInputBar.light{
    color: var(--light-text);
  }

  .themeRow.mobile {
    display: flex;
    gap: 12px;
    margin-top: 8px;
    padding: 0 12px;
    flex-wrap: wrap;
  }

  .themeBtn.mobile{
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
  }

  .themeBtn.mobile.active .themeImg {
    outline: 1px solid var(--blue-accent-dark);
  box-shadow: 0 0 4px 4px var(--highlight-bg);
  border-color: var(--background-color);
  }

  .themeImg.mobile {
    width: 88px;
    height: 59px;
    border-radius: 10px;
  }

  .themeText.mobile {
    color: var(--text-color);
    text-align: center;
    padding-top: 12px;
    font-size: 0.8rem;
  }

  .CTABlack.margTop {
    margin-top: 12px;
  }

  .mobilefoldersuggest {
    margin-top: 12px;
    height: 45px;
    padding: 12px;
    gap: 12px;
    width: fit-content;
    border-radius: 13px;
    background-color: transparent;
    color: #000;
    border: 1px solid #cccccc;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
    flex: 0 0 auto;
    transition: transform 160ms ease;
    touch-action: pan-x;
  }

  .mobilefoldersuggest:active {
    transform: scale(1.04);
  }

  .mobilefoldersuggest.is-selected {
    transform: scale(0.985);
  }

  .mobilefoldersuggest.is-muted-selected {
    filter: grayscale(1);
    opacity: 0.46;
    pointer-events: none;
  }

  .foldericonmobilesuggestion {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .mobilefoldersuggestions {
    display: flex;
    gap: 12px;
    overflow-x: scroll;
    overflow-y: hidden;
    align-items: center;
    padding: 4px 2px 8px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
  }

  .mobilefoldersuggestions::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  .mobilefoldersuggest-ghost-shell {
    position: fixed;
    pointer-events: none;
    z-index: 2147483646;
    box-sizing: border-box;
    will-change: left, top, width, height, border-radius, opacity;
  }

  .mobilefoldersuggest-ghost-icon {
    position: fixed;
    pointer-events: none;
    z-index: 2147483647;
    will-change: transform, opacity;
  }

  .mobilefoldersuggest-ghost-text {
    position: fixed;
    pointer-events: none;
    z-index: 2147483647;
    will-change: transform, opacity;
  }

  .mobilebutton.grey.right.mobilebutton-disabled {
    opacity: 0.42;
  }

  .mobilefilepopup_optionsection.collection-option {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    inline-size: 100%;
    min-inline-size: 100%;
    max-inline-size: 100%;
    align-self: stretch;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background-color 140ms ease;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
  }

  .mobilefilepopup_optionsection.collection-option .mobileCollectionOptionIcon {
    opacity: 1 !important;
    flex: 0 0 22px;
    width: 20px;
    height: 20px;
  }

  .mobilefilepopup_optionsection.collection-option .collectionSlideupBox {
    flex: 1 1 0%;
    min-width: 0;
    width: 100%;
  }

  .mobilefilepopup_optionsection.collection-option .TextButtonMobile {
    margin-left: auto;
    flex: 0 0 auto;
  }

  @supports (-webkit-touch-callout: none) {
    .mobileCollectionSlideupList {
      width: -webkit-fill-available;
      min-width: -webkit-fill-available;
      max-width: -webkit-fill-available;
    }

    .mobilefilepopup_optionsection.collection-option {
      width: -webkit-fill-available;
      min-width: -webkit-fill-available;
      max-width: -webkit-fill-available;
      inline-size: -webkit-fill-available;
      min-inline-size: -webkit-fill-available;
      max-inline-size: -webkit-fill-available;
    }
  }

  .mobilefilepopup_optionsection.collection-option:active {
    background-color: var(--file-btn-mobile-bg);
  }

  .mobilefilepopup_optionsection.collection-option:hover {
    background-color: transparent;
  }

  .mobilefilepopup_optionsection.collection-option:disabled {
    opacity: 0.6;
  }

  .mobileCollectionsSwipeRowShell {
    --mobile-collections-snap-duration: 360ms;
    --mobile-collections-snap-ease: cubic-bezier(0.2, 0.82, 0.2, 1);
    --mobile-collections-delete-gap: 16px;
    position: relative;
    width: 100%;
    border-radius: 13px;
    overflow: visible;
    touch-action: pan-y;
  }

  .mobileCollectionsSwipeRowShell.delete-popup-dimmed .mobilefilepopup_optionbtn_svg.mobileCollectionOptionIcon,
  .mobileCollectionsSwipeRowShell.delete-popup-dimmed .collectionSlideupBox {
    opacity: 0.3 !important;
  }

  .mobileCollectionsSwipeRowShell.is-swiping .mobileCollectionsSwipeRow {
    transition: none !important;
  }

  .mobileCollectionsSwipeRowShell.is-swiping .mobileCollectionsSwipeAction,
  .mobileCollectionsSwipeRowShell.is-swiping .mobileCollectionsSwipeDeleteBtn.mobilebutton.red {
    transition: none !important;
  }

  .mobileCollectionsSwipeRowShell.is-swiping .mobileCollectionsSwipeRow::before {
    transition: none !important;
  }

  .mobileCollectionsSwipeRowShell.is-open .mobileCollectionsSwipeRow {
    border-radius: 18px;
  }

  .mobileCollectionsSwipeRowShell.is-context-open .mobileCollectionsSwipeRow {
    border-radius: 21px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    transform: translate3d(calc(-1 * var(--mobile-collections-row-shift, 0px)), 0, 0) scale3d(1.03, 1.03, 1);
  }

  .mobileCollectionsSwipeRowShell.is-longpress-pressing .mobileCollectionsSwipeRow {
    border-radius: 21px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    animation: mobileChatContextHoldGrow var(--mobile-collections-row-hold-ms, 460ms) cubic-bezier(0.15, 0.86, 0.28, 1) forwards;
  }

  .mobileCollectionsSwipeRowShell.is-swiping .mobileCollectionsSwipeRow,
  .mobileCollectionsSwipeRowShell.is-open .mobileCollectionsSwipeRow {
    border-top-color: transparent;
    border-bottom-color: transparent;
  }

  .mobileCollectionsSwipeRowShell.is-swiping + .mobileCollectionsSwipeRowShell .mobileCollectionsSwipeRow,
  .mobileCollectionsSwipeRowShell.is-open + .mobileCollectionsSwipeRowShell .mobileCollectionsSwipeRow {
    border-top-color: transparent;
  }

  .mobileCollectionsSwipeRowShell.is-context-open + .mobileCollectionsSwipeRowShell .mobileCollectionsSwipeRow {
    border-top-color: transparent;
  }

  .mobileCollectionsSwipeRowShell.is-longpress-pressing + .mobileCollectionsSwipeRowShell .mobileCollectionsSwipeRow {
    border-top-color: transparent;
  }

  .mobileCollectionsSwipeRow {
    position: relative;
    z-index: 2;
    transform: translate3d(calc(-1 * var(--mobile-collections-row-shift, 0px)), 0, 0);
    transition: transform var(--mobile-collections-snap-duration) var(--mobile-collections-snap-ease), background-color var(--mobile-collections-snap-duration) var(--mobile-collections-snap-ease);
    will-change: transform;
  }

  /* Prevent iOS text highlight on collection/chat swipe rows. */
  body.mobile-active #mobileCollectionsPage .mobilefilepopup_optionsection.collection-option.mobileCollectionsPageRow,
  body.mobile-active #mobileCollectionsPage .mobilefilepopup_optionsection.collection-option.mobileCollectionsPageRow *,
  body.mobile-active #mobileCollectionsPage .mobileCollectionsSwipeRowShell,
  body.mobile-active #mobileCollectionsPage .mobileCollectionsSwipeRowShell *,
  body.mobile-active #mobileCollectionsPage .mobileCollectionsSwipeRow,
  body.mobile-active #mobileCollectionsPage .mobileCollectionsSwipeRow * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* Temporary hard lock while touching collection rows to stop full-page iOS selection flicker. */
  body.mobile-active.mobile-collections-page-open.mobile-collections-selection-lock,
  body.mobile-active.mobile-collections-page-open.mobile-collections-selection-lock *:not(input):not(textarea):not([contenteditable="true"]) {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }

  .mobileCollectionsSwipeRow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    background-color: var(--hover-color);
    opacity: var(--mobile-collections-row-hover-opacity, 0);
    pointer-events: none;
    transition: opacity var(--mobile-collections-snap-duration) var(--mobile-collections-snap-ease);
  }

  .mobileCollectionsSwipeRowShell.is-context-open .mobileCollectionsSwipeRow::before {
    opacity: 1;
    animation: none;
  }

  .mobileCollectionsSwipeRowShell.is-context-enter .mobileCollectionsSwipeRow {
    animation: mobileChatContextCloneFluidIn 340ms cubic-bezier(0.18, 0.9, 0.24, 1.15) both;
  }

  .mobileCollectionsSwipeAction {
    position: absolute;
    right: 0;
    top: 50%;
    height: 45px;
    width: var(--mobile-collections-delete-width, 45px);
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: stretch;
    padding-right: 0;
    box-sizing: border-box;
    z-index: 1;
    transform: translate3d(
      var(
        --mobile-collections-delete-translate-x,
        calc(var(--mobile-collections-delete-width, 45px) + var(--mobile-collections-delete-gap, 16px))
      ),
      -50%,
      0
    );
    transition: transform var(--mobile-collections-snap-duration) var(--mobile-collections-snap-ease), width var(--mobile-collections-snap-duration) var(--mobile-collections-snap-ease), opacity var(--mobile-collections-snap-duration) var(--mobile-collections-snap-ease);
    opacity: 0;
    pointer-events: none;
  }

  .mobileCollectionsSwipeRowShell.is-open .mobileCollectionsSwipeAction {
    opacity: 1;
    pointer-events: auto;
  }

  .mobileCollectionsSwipeDeleteBtn.mobilebutton.red {
    height: 45px;
    width: 100%;
    min-width: 0;
    margin-left: 0;
    border-radius: 15px;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--red-bg-not-transp);
    color: var(--red-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity var(--mobile-collections-snap-duration) var(--mobile-collections-snap-ease);
  }

  .mobileCollectionsSwipeDeleteBtn.mobilebutton.red svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .mobileCollectionOptionIcon {
    flex-shrink: 0;
  }

  .mobileCollectionOptionIcon svg {
    width: 100%;
    height: 100%;
  }

  .mobileCollectionsFolderHero {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 8px 14px;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    box-sizing: border-box;
    margin-top: 10px;
  }

  .mobileCollectionsFolderHeroIcon {
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
  }

  .mobileCollectionsFolderHeroText .SmallerSlideUpText {
    color: var(--med-text);
  }

  .mobileCollectionsBackRow .mobileCollectionsBackIcon {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    color: var(--med-text);
  }

  .mobileCollectionsPageChatRow {
    gap: 0;
  }

  .mobileCollectionsPageChatRow .collectionSlideupBox {
    width: 100%;
  }

  .collectionSlideupBox{
    display: flex;
    min-width: 0;
    width: 100%;
  }

  .collectionSlideupBox span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .SmallerSlideUpText{
    font-size: 0.9rem;
    color: var(--light-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    max-width: 100%;
  }

  /* Flex items default to min-width:auto (their content's natural width),
     which would stop .SmallerSlideUpText's ellipsis truncation above from
     ever kicking in — it can't shrink past that. */
  .mobileCollectionsPageChatRow .collectionSlideupBox .flex.flex-direction-column {
    min-width: 0;
  }

  .TextButtonMobile.check{
    display: flex;
    align-items: center;
    height: 25px;
    width: 25px;
    gap: 8px;
    color: #2B74D9;
    margin-left: auto;
  }

  .mobileCollectionSlideupEmpty {
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
    padding: 20px 8px;
    color: var(--med-text);
    font-size: 0.98rem;
  }

  .mobileSidebar{
      box-sizing: border-box;
      background-color: var(--sidebar-color);
      display: flex;
      flex-direction: column;
      --mobile-sidebar-pad-x: 10px;
      padding: 0 var(--mobile-sidebar-pad-x);
      padding-bottom: 10px;
  }

  .logorowmobile{
      color: var(--text-color);
      height: 33px;
      display: flex;
      align-items: center;
      gap: 12px;
      margin: 12px 0;
  }

  .logorowmobile svg:first-child{
      width: 33px;
      flex-shrink: 0;
  }

  .logorowmobile svg:last-child{
      width: auto;
      flex-shrink: 1;
  }

  body.mobile-active.mobile-startup-pending::before{
      content: "";
      position: fixed;
      inset: 0;
      background: var(--background-color);
      z-index: 2147483000;
  }

  body.mobile-active.mobile-startup-pending .sidebar{
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: none !important;
      border-right: none !important;
      background: transparent !important;
      padding: 0 !important;
      overflow: visible !important;
      z-index: 2147483001 !important;
  }

  body.mobile-active.mobile-startup-pending .sidebar > :not(#mobileSidebarCustom){
      display: none !important;
  }

  body.mobile-active.mobile-startup-pending #mobileSidebarCustom{
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent !important;
      padding: 0 !important;
      z-index: 2147483001;
  }

  body.mobile-active.mobile-startup-pending #mobileSidebarCustom > :not(.logorowmobile){
      display: none !important;
  }

  body.mobile-active.mobile-startup-pending #mobileSidebarCustom .logorowmobile{
      width: min(84vw, 360px);
      height: 33px;
      margin: 0;
      color: var(--contrast-color);
  }

  body.mobile-active.mobile-startup-pending #mobileSidebarCustom .logorowmobile svg:first-child path{
      fill: #A9A963 !important;
  }

  .mobileSidebarButtons{
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
  }

  #mobileRecentChatsList,
  #mobilePinnedList{
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: stretch;
  }

  #mobilePinnedList.hidden,
  #mobilePinnedSectionLabel.hidden{
      display: none;
  }

  .recentChatSidebarMobile{
      display: flex;
      align-items: center;
      gap: 4px;
      margin-top: 12px;
      margin-left: 12px;
      color: var(--med-text);
      font-size: 0.85rem;
  }

  .recentChatSidebarMobile.all-chats {
      margin-top: 0;
      margin-right: 12px;
      padding-top: 0;
      width: fit-content;
      padding-bottom: 20px;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
  }

  .recentChatSidebarMobile.all-chats:active {
      opacity: 0.6;
  }

  .buttonMobileSidebar{
      display: flex;
      width: 100%;
      height: 40px;
      border-radius: 12px;
      border: none;
      background-color: transparent;
      font-size: 1rem;
      align-items: center;
      gap: 12px;
      padding: 12px;
      color: var(--text-color);
      -webkit-tap-highlight-color: transparent;
      transition: background-color 140ms ease, color 140ms ease;
  }

  @media (hover: hover) and (pointer: fine) {
      .buttonMobileSidebar:hover{
          background-color: var(--hover-color);
      }
  }

  .mobileSidebarSVG{
      height: 18px;
      width: 18px;
  }

  .userboxmobile{
      display: flex;
      background-color: var(--input-bg);
      border: 1px solid var(--border-color);
      border-radius: 18px;
      padding: 8px;
      align-items: center;
      gap: 12px;
  }

  .usericonmobile{
    /* Match desktop's .user-avatar coloring instead of a hardcoded green —
       syncMobileSidebarIdentity() (theme-voice-and-sidebar-shell.js) also
       copies #userAvatar's live inline color/background here, this is just
       the correct default so first paint (before that JS runs) matches too. */
    color: #000;
      background-color: #4a4a4a;
      border: none;
      border-radius: 12px;
      height: 40px;
      width: 40px;
      aspect-ratio: 1;
      /* Without flex-shrink:0 this flex child (sibling of the username
         text in .userboxmobile) could get squeezed narrower than its
         aspect-ratio-implied size when the row is tight, squishing the
         initials down to invisible instead of clipping/staying legible. */
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: 600;
      font-size: 0.95rem;
      line-height: 1;
      overflow: hidden;
  }

  .usericontextmobile{
      color: var(--text-color);
  }

.userboxmobileUpgrade{
    background-color: var(--file-btn-mobile-bg-trans);
    color: var(--text-color);
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 0 16px;
    width: fit-content;
    font-size: 0.9rem;
    margin-left: auto;
  }

  .userboxmobileUpgrade.hidden,
  .mobileSettingsIsland.upgrade.hidden {
    display: none;
  }

  .userboxmobileUpgrade.settings {
    border-radius: 10px;
    margin-top: 8px;
    margin-left: 0;
    height: 35px;
    background-color: var(--contrast);
    color: var(--contrast-text);
    border: none;
  }

  body.mobile-active .sidebar-folder-list {
      display: none !important;
  }

  body.mobile-active .sidebar-chat-list .sidebarsectionheader {
      display: none !important;
  }

  body.mobile-active .threeDotsMenu,
  body.mobile-active .chat-item-dots,
  body.mobile-active .folder-dots-btn {
      display: none !important;
  }

  body.mobile-active #sidebarLogoBtn,
  body.mobile-active #sidebarCloseBtn,
  body.mobile-active #sidebarLogoRive {
      display: none !important;
  }

  /* Sidebar mobile overlay */
  body.mobile-active {
      --mobile-sidebar-width: 100vw;
      --mobile-chat-peek: 44px;
      --mobile-sidebar-content-width: calc(95vw - var(--mobile-chat-peek));
      --mobile-chat-shift: var(--mobile-sidebar-content-width);
  }

  .mobile-sidebar-overlay {
      position: fixed;
      inset: 0;
      background: transparent;
      z-index: 120540;
  }
  .mobile-sidebar-overlay.hidden {
      display: none;
  }

  body.mobile-active .sidebar.mobile-open,
  body.mobile-active .sidebar.mobile-closing {
      --mobile-sidebar-content-dim: 0;
      display: flex !important;
      position: fixed !important;
      top: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: var(--mobile-sidebar-width);
      min-width: 100vw;
      max-width: none;
      z-index: 120545;
      transform-origin: left center;
      transform: scale(1) !important;
      overflow: hidden;
      box-shadow: none;
      transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
      will-change: transform, opacity;
      backface-visibility: hidden;
      border-right: none !important;
      padding: 0 !important;
      margin: 0 !important;
      gap: 0 !important;
      background: transparent !important;
      isolation: isolate;
      pointer-events: auto;
  }

  body.mobile-active .sidebar.mobile-open::before,
  body.mobile-active .sidebar.mobile-closing::before {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--sidebar-color);
      z-index: 0;
      pointer-events: none;
  }

  body.mobile-active .sidebar.mobile-open::after,
  body.mobile-active .sidebar.mobile-closing::after {
      content: "";
      position: absolute;
      inset: 0;
      background: transparent;
      z-index: 2;
      pointer-events: none;
  }

  body.mobile-active .sidebar.mobile-open .sidebar-logo-row,
  body.mobile-active .sidebar.mobile-open .sidebar-menu-list,
  body.mobile-active .sidebar.mobile-closing .sidebar-logo-row,
  body.mobile-active .sidebar.mobile-closing .sidebar-menu-list {
      width: calc(var(--mobile-sidebar-content-width) - (var(--sidebar-inline-pad) * 2));
  }

  body.mobile-active .main-area {
      position: relative;
      z-index: 120546;
      transform: none;
      opacity: 1;
      background: var(--background-color);
      box-shadow: none !important;
      transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease, box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1), background-color 300ms ease;
      will-change: transform, opacity, box-shadow;
      backface-visibility: hidden;
  }

  body.mobile-active .main-area > #chatView {
      opacity: var(--mobile-main-content-opacity, 1);
      transition: opacity 300ms ease;
      will-change: opacity;
      backface-visibility: hidden;
  }

  body.mobile-active.mobile-sidebar-dragging .main-area,
  body.mobile-active.mobile-sidebar-dragging #mobileSidebarOverlay,
  body.mobile-active.mobile-sidebar-dragging .sidebar.mobile-open {
      transition: none !important;
  }

  /* Collections / chatlist / saved reveal fix.
     These pages render #mobileCollectionsPage as a full-screen `position: fixed`
     overlay that is a DOM child of the transformed `.main-area`, so it rides
     main-area's transform. During the sidebar reveal on these pages the shared
     gesture drives main-area's transform, but `mobile-sidebar-dragging` (which
     turns the transition off) is not applied on this path — so main-area *eases*
     toward each target (329 → … → finger) instead of tracking it, and the overlay
     visibly lurches (the "collapse → reopen" + lag). Forcing transition:none here
     makes main-area track the drag instantly (no 329 blip, no lag), exactly like
     the chat drawer. Scoped to the reveal state (collections page open AND sidebar
     open) so the initial page-open animation is untouched. */
  body.mobile-active.mobile-collections-page-open.mobile-sidebar-open .main-area {
      transition: none !important;
  }

  body.mobile-active.mobile-sidebar-dragging .main-area {
      z-index: 120560;
  }

  body.mobile-active.mobile-sidebar-dragging.mobile-collections-page-open #mobileCollectionsSearchBar {
      transition: none !important;
      z-index: 120561 !important;
      display: flex !important;
      visibility: visible !important;
  }

  body.mobile-active.mobile-sidebar-dragging .main-area > #chatView {
      transition: none !important;
  }

  body.mobile-active.mobile-sidebar-open .main-area {
      transform: translate3d(var(--mobile-chat-shift), 0, 0);
      --mobile-main-content-opacity: 0.48;
      --mobile-main-surface-bg: #F7F7F8;
      box-shadow: -1px 0 0 rgba(0, 0, 0, 0.12), -6px 0 12px rgba(0, 0, 0, 0.12) !important;
      pointer-events: none !important;
  }

  body.mobile-active.mobile-collections-page-open.mobile-sidebar-open:not(.mobile-collections-searchbar-linked) #mobileCollectionsSearchBar {
      transform: translateY(calc(-1 * var(--mobile-keyboard-shift, 0px)));
      z-index: 120561 !important;
      display: flex !important;
      visibility: visible !important;
  }

  body.mobile-active.mobile-collections-page-open.mobile-sidebar-closing #mobileCollectionsSearchBar {
      z-index: 120561 !important;
      display: flex !important;
      visibility: visible !important;
  }

  /* Prevent collections bottom mask from visually interfering with the sidebar fade layer. */
  body.mobile-active.mobile-collections-page-open.mobile-sidebar-open #mobileCollectionsBottomMask,
  body.mobile-active.mobile-collections-page-open.mobile-sidebar-closing #mobileCollectionsBottomMask,
  body.mobile-active.mobile-collections-page-open.mobile-sidebar-dragging #mobileCollectionsBottomMask {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
  }

  body.mobile-active.mobile-sidebar-closing .main-area {
      --mobile-main-content-opacity: 1;
      --mobile-main-surface-bg: #FAFAF9;
      box-shadow: -1px 0 0 rgba(0, 0, 0, 0.12), -6px 0 12px rgba(0, 0, 0, 0.12) !important;
  }

  /* Keep shadow while dragging so it moves with the translated chat surface. */
  body.mobile-active.mobile-sidebar-dragging .main-area {
      box-shadow: -1px 0 0 rgba(0, 0, 0, 0.12) !important;
  }

  body.mobile-active.mobile-sidebar-open #mobileSidebarOverlay {
      left: var(--mobile-sidebar-content-width);
      background: transparent;
      z-index: 120547;
  }

  body.mobile-active:not(.mobile-sidebar-open):not(.mobile-sidebar-closing) .main-area {
      box-shadow: none !important;
      opacity: 1 !important;
   }

  body.mobile-active.mobile-sidebar-closing .sidebar.mobile-open,
  body.mobile-active.mobile-sidebar-closing .sidebar.mobile-closing {
      transform: none !important;
      opacity: 1;
  }

  /* Ensure sidebar is hidden by default in mobile mode */
  body.mobile-active .sidebar {
      display: none !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
  }

  body.mobile-active.mobile-sidebar-open .sidebar.mobile-open,
  body.mobile-active.mobile-sidebar-closing .sidebar.mobile-open,
  body.mobile-active.mobile-sidebar-closing .sidebar.mobile-closing {
      display: flex !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
  }
}


/* =========================
   REAL MOBILE MODE
========================= */
body.mobile-active .input-container,
body.mobile-active .input-container-centered {
    display: none !important;
}

html.mobile-active {
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior-y: none;
}

body.mobile-active {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden !important;
    overscroll-behavior-y: none;
}

html.mobile-composer-focused,
body.mobile-active.mobile-composer-focused {
    overflow: hidden !important;
    overscroll-behavior-y: none;
    overscroll-behavior-x: none;
}

body.mobile-active .app-layout {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
}

#mobileTopbar {
    display: none;
}

#mobileInputBar {
    display: none;
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    top: auto;
    transform: translateY(calc(-1 * var(--mobile-keyboard-shift, 0px)));
    left: 0;
    width: 100vw;
    padding: 0 12px;
    z-index: 120550;
    box-sizing: border-box;
}

body.mobile-active #mobileInputBar {
    display: flex !important;
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    top: auto;
    transform: translateY(calc(-1 * var(--mobile-keyboard-shift, 0px)));
    width: 100vw;
    padding: 0 12px;
    z-index: 120550;
    align-items: flex-end;
    justify-content: center;
}

body.mobile-active #mobileTopbar {
    display: flex !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(var(--mobile-top-fade-h, 78px) + env(safe-area-inset-top, 0px));
    padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px 10px;
    box-sizing: border-box;
    z-index: 120551;
    isolation: isolate;
    overflow: visible;
    background: transparent;
}

body.mobile-active #mobileTopbar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-color: transparent;
    background-image: linear-gradient(to bottom, var(--background-color) 0%, transparent 100%);
    -webkit-mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.95) 18%,
        rgba(0, 0, 0, 0.72) 44%,
        rgba(0, 0, 0, 0.40) 72%,
        rgba(0, 0, 0, 0.12) 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.95) 18%,
        rgba(0, 0, 0, 0.72) 44%,
        rgba(0, 0, 0, 0.40) 72%,
        rgba(0, 0, 0, 0.12) 90%,
        transparent 100%
    );
    -webkit-backdrop-filter: blur(var(--mobile-fade-blur, 2px));
    backdrop-filter: blur(var(--mobile-fade-blur, 2px));
}

body.mobile-active #mobileTopbar > * {
    position: relative;
    z-index: 2;
}

body.mobile-active #mobileTopbar > :not(.mobilebutton) {
    transform: translateZ(0);
}

body.mobile-active #mobileTopbar .mobilebutton.grey,
body.mobile-active #mobileTopbar .mobiletopbartab {
    background-color: var(--input-bg);
}

body.mobile-active #chatView > .chat-topbar {
    display: none;
}

body.mobile-active .input-disclaimer {
    display: none !important;
}

body.mobile-active .main-area {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden;
}

body.mobile-active #chatView {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.mobile-active .main-area.empty-chat .empty-chat-composer-stack {
    top: var(--mobile-empty-chat-center-y, 50%);
    transform: translate(-50%, -50%);
    transition: top 220ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: top;
}

body.mobile-active .main-area.empty-chat .empty-chat-composer-stack .inputbarGreeting {
    display: none;
}

body.mobile-active .main-area.empty-chat .empty-chat-composer-stack .mobileGreeting {
    display: flex;
}

body.mobile-active #chatView > .chat-scroll {
    flex: 1;
    min-height: 0;
    height: 100%;
    max-height: 100%;
    padding-top: calc(var(--mobile-top-fade-h, 78px) + env(safe-area-inset-top, 0px));
    scroll-padding-top: calc(var(--mobile-top-fade-h, 78px) + env(safe-area-inset-top, 0px));
    /* Override desktop chat underlap spacing with mobile-specific bottom inset. */
    padding-bottom: calc(var(--mobile-bottom-fade-h, 112px) + var(--chat-bottom-gap, 0px) + env(safe-area-inset-bottom, 0px));
    scroll-padding-bottom: calc(var(--mobile-bottom-fade-h, 84px) + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
}

.mobileCollectionsPage,
.mobileCollectionsSearchBar,
.mobileCollectionsBottomMask {
    display: none;
}

body.mobile-active #mobileCollectionsSwipeFrontLayer {
    display: none;
}

body.mobile-active #mobileCollectionsSwipeBackgroundDimmer {
    display: none;
}

body.mobile-active #mobileCollectionsPage {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overscroll-behavior-x: none;
}

body.mobile-active #mobileCollectionsPageList {
    height: 100%;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    touch-action: pan-y;
    padding-top: calc(var(--mobile-top-fade-h, 78px) + env(safe-area-inset-top, 0px));
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
}

body.mobile-active #mobileCollectionsPageList.is-empty-state {
    position: relative;
    text-align: center;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
}

body.mobile-active #mobileCollectionsPageList.is-empty-state .mobileEmptySearch,
body.mobile-active #mobileCollectionsPageList.is-empty-state .mobileEmptyChatlist {
    position: absolute;
    top: var(--mobile-empty-state-top, calc(var(--mobile-top-fade-h, 78px) + env(safe-area-inset-top, 0px)));
    bottom: var(--mobile-empty-state-bottom, calc(88px + env(safe-area-inset-bottom, 0px)));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    width: min(calc(100% - 32px), 420px);
}

.mobileEmptySearchText{
    position: relative;
    font-family: "Slanter-serif", serif;
    font-weight: 300;
    color: var(--contrast);
    font-size: 1.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.mobileEmptySearchText.search{
  padding: 25px 0;
}

#collectionEmptyState {
    display: flex;
    align-items: center;
    margin-top: 50px;
    justify-content: center;
}

#collectionEmptyState.hidden {
    display: none;
}

.mobileEmptySearchSVG{
  color: #969640;
  width: 40px;
  height: 40px;
}

.mobileEmptyChatlistSVG{
  color: #969640;
  width: 45px;
  height: 45px;
}

.mobileEmptySearch,
.mobileEmptyChatlist{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  user-select: none;
}

body.mobile-active #mobileCollectionsSearchBar {
    position: fixed;
    left: 0 !important;
    right: 0 !important;
    width: 100vw;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    transform: translateY(calc(-1 * var(--mobile-keyboard-shift, 0px)));
    transform-origin: 50% 100%;
    transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease, box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1), background-color 300ms ease;
    will-change: transform;
    padding: 0 12px;
    z-index: 120550;
    box-sizing: border-box;
    align-items: flex-end;
    justify-content: center;
}

body.mobile-active.mobile-collections-searchbar-linked #mobileCollectionsSearchBar {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 120561 !important;
}

body.mobile-active #mobileCollectionsSearchBar .mobileinputbar {
    width: 100%;
}

body.mobile-active #mobileCollectionsSearchInput.mobileinput {
    padding: 0;
    margin: 0;
    min-height: 40px;
    max-height: none;
    overflow: visible;
    font-size: 1rem;
    line-height: 1.25;
}

/* input[type="search"] renders its own native clear ("x") icon once it has
   text — kill it so only #mobileCollectionsSearchClearBtn shows, not both. */
#mobileCollectionsSearchInput::-webkit-search-cancel-button,
#mobileCollectionsSearchInput::-webkit-search-decoration {
    -webkit-appearance: none;
    display: none;
}

#mobileCollectionsSearchClearBtn {
    flex-shrink: 0;
}

.ios-spinner {
  --size: 20px;
  --blades: 8;
  width: var(--size);
  height: var(--size);
  position: relative;
  position: relative;
}

.ios-spinner-blade {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12%;
  height: 30%;
  margin-left: -3%;
  background: var(--text-color);
  border-radius: 2px;
  transform-origin: 50% 160%;
  transform: rotate(calc(var(--i) * (360deg / var(--blades))));
  animation: ios-spinner-fade 1s linear infinite;
  animation-delay: calc((var(--i) - var(--blades)) * (1s / var(--blades)));
}

@keyframes ios-spinner-fade {
  0% { opacity: 1; }
  100% { opacity: 0.15; }
}

.mobileCollectionsDeepSearchSpinner {
    position: fixed;
    inset: 0;
    z-index: 120555;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.mobile-collections-load-more-sentinel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 0;
    width: 100%;
}

.mobileCollectionsDeepSearchSpinner.hidden {
    display: none;
}

body.mobile-active.mobile-collections-page-open #chatView > .chat-scroll,
body.mobile-active.mobile-collections-page-open #chatView > #chatBottomMask,
body.mobile-active.mobile-collections-page-open #chatView > .chat-bottom-mask,
body.mobile-active.mobile-collections-page-open #chatView > .empty-chat-composer-stack,
body.mobile-active.mobile-collections-page-open #chatView > .file-preview-stack,
body.mobile-active.mobile-collections-page-open #scrollDownBtn,
body.mobile-active.mobile-collections-page-open #typingIndicator,
body.mobile-active.mobile-collections-page-open #mobileInputBar,
body.mobile-active.mobile-collections-page-open #mobileFileRow {
    display: none !important;
}

body.mobile-active.mobile-collections-page-open #mobileCollectionsPage {
    display: flex;
    flex-direction: column;
    position: fixed;
    inset: 0;
    z-index: 120548;
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
    background-color: var(--background-color);
}

body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileCollectionsSwipeFrontLayer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 120552;
    overflow: hidden;
    pointer-events: none;
    box-shadow: -1px 0 0 rgba(0, 0, 0, 0.12), -6px 0 12px rgba(0, 0, 0, 0.12);
}

body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileCollectionsSwipeBackgroundDimmer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 120549;
    pointer-events: none;
    background: rgba(0, 0, 0, var(--mobile-collections-bg-dim, 0));
}

body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileCollectionsSwipeFrontLayer > #mobileCollectionsPage,
body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileCollectionsSwipeFrontLayer > #mobileCollectionsBottomMask {
    transform: translate3d(var(--mobile-collections-swipe-front-shift, 0px), 0, 0) !important;
}

/* Keep fixed chrome above the swiping collections surface. */
body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileTopbar {
    z-index: 120554 !important;
}

body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileCollectionsSearchBar,
body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileInputBar {
    z-index: 120553 !important;
}

body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileCollectionsPage:not([data-swipe-front-clone="1"]),
body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileCollectionsBottomMask:not([data-swipe-front-clone="1"]) {
    transform: scale(var(--mobile-collections-bg-scale, 1)) !important;
    transition: none !important;
}

body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileCollectionsPage:not([data-swipe-front-clone="1"]) {
    transform-origin: 50% 50%;
}

body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileCollectionsBottomMask:not([data-swipe-front-clone="1"]) {
    transform-origin: 50% 100%;
}

body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileTopbar,
body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileCollectionsPage,
body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileCollectionsSearchBar,
body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileCollectionsBottomMask {
    pointer-events: none !important;
}

/* Keep the collections search bar visible + interactive even during folder swipe transitions. */
body.mobile-active.mobile-collections-page-open.mobile-collections-detail-swipe-dragging #mobileCollectionsSearchBar {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 120555 !important;
}

body.mobile-active.mobile-collections-page-open #mobileCollectionsSearchBar {
    display: flex !important;
    position: fixed !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.mobile-active.mobile-collections-page-open #mobileCollectionsBottomMask {
    display: block !important;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--mobile-bottom-fade-h, 84px);
    background-color: transparent;
    background-image: linear-gradient(
        to top,
        var(--background-color) 0%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.95) 18%,
        rgba(0, 0, 0, 0.72) 44%,
        rgba(0, 0, 0, 0.40) 72%,
        rgba(0, 0, 0, 0.12) 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.95) 18%,
        rgba(0, 0, 0, 0.72) 44%,
        rgba(0, 0, 0, 0.40) 72%,
        rgba(0, 0, 0, 0.12) 90%,
        transparent 100%
    );
    -webkit-backdrop-filter: blur(var(--mobile-fade-blur, 2px));
    backdrop-filter: blur(var(--mobile-fade-blur, 2px));
    z-index: 120549;
    pointer-events: none;
}

body.mobile-active.mobile-collections-page-open.mobile-collection-slideup-open #mobileCollectionsPage,
body.mobile-active.mobile-collections-page-open.mobile-collection-slideup-open #mobileCollectionsSearchBar,
body.mobile-active.mobile-collections-page-open.mobile-collection-slideup-open #mobileCollectionsBottomMask {
    pointer-events: none !important;
}

body.mobile-active.mobile-collections-page-open .main-area,
body.mobile-active.mobile-collections-page-open #chatView {
    height: 100dvh !important;
    min-height: 100dvh !important;
}

body.mobile-active #mobileCollectionsPage .mobileCollectionsPageRow {
    cursor: pointer;
}

body.mobile-active #mobileCollectionsPage .mobileCollectionsPageRow:active {
    background-color: var(--file-btn-mobile-bg);
}

/* Swipe rows manage their own fade/curve via .mobileCollectionsSwipeRow::before */
body.mobile-active #mobileCollectionsPage .mobileCollectionsSwipeRowShell .mobileCollectionsPageRow {
    transition: transform var(--mobile-collections-snap-duration) var(--mobile-collections-snap-ease),
                background-color var(--mobile-collections-snap-duration) var(--mobile-collections-snap-ease) !important;
}

body.mobile-active #mobileCollectionsPage .mobileCollectionsSwipeRowShell.is-swiping .mobileCollectionsPageRow {
    transition: none !important;
}

body.mobile-active #mobileCollectionsPage .mobileCollectionsSwipeRowShell .mobileCollectionsPageRow:active {
    background-color: transparent !important;
}

/* When mobile composer is open on an empty/new chat, lock chat scrolling. */
body.mobile-active.mobile-composer-open .main-area.empty-chat #chatView > .chat-scroll {
    overflow-y: hidden;
    overscroll-behavior-y: none;
    touch-action: none;
}

body.mobile-active #mobileSidebarCustom {
    touch-action: pan-y;
}

body.mobile-active.mobile-sidebar-dragging #chatView > .chat-scroll,
body.mobile-active.mobile-sidebar-dragging #mobileSidebarCustom {
    touch-action: none;
}

body.mobile-active #chatView > .chat-scroll > .chat-inner,
body.mobile-active #chatContainer.chat-inner {
    box-sizing: border-box;
    padding-left: 12px;
    padding-right: 4px;
}

/* .chat-inner is display:flex;flex-direction:column, so this ::after is
   always the last flex item after every real message child regardless of
   what streaming appends/updates inside #chatContainer — no JS needed to
   keep it pinned below the last message. Only rendered once
   body.chat-disclaimer-ready is set (setAiGenerating()/clearOpenChatSkeleton()
   in the JS) — i.e. after a chat has either finished its first generation
   or already has message history — and never while body.ai-is-generating
   (the very first message still streaming in a brand-new chat). */
body.mobile-active.chat-disclaimer-ready:not(.ai-is-generating) #chatContainer.chat-inner::after {
    content: "Slanter is AI and can makes mistakes. Check important informations.";
    font-size: 0.8rem;
    max-width: 220px;
    width: 100%;
    margin-left: auto;
    margin-right: 16px;
    text-align: right;
    color: var(--med-text);
}

body.mobile-active #chatView > #chatBottomMask,
body.mobile-active #chatView > .chat-bottom-mask {
    height: var(--mobile-bottom-fade-h, 84px);
    background-color: transparent;
    background-image: linear-gradient(
        to top,
        var(--background-color) 0%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.95) 18%,
        rgba(0, 0, 0, 0.72) 44%,
        rgba(0, 0, 0, 0.40) 72%,
        rgba(0, 0, 0, 0.12) 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.95) 18%,
        rgba(0, 0, 0, 0.72) 44%,
        rgba(0, 0, 0, 0.40) 72%,
        rgba(0, 0, 0, 0.12) 90%,
        transparent 100%
    );
    -webkit-backdrop-filter: blur(var(--mobile-fade-blur, 2px));
    backdrop-filter: blur(var(--mobile-fade-blur, 2px));
}

#mobileInputBar {
    overflow: visible;
    transform-origin: 50% 100%;
    transition: transform 260ms ease;
}

/* While the virtual keyboard is animating, follow visualViewport in lock-step. */
body.mobile-active.mobile-keyboard-tracking #mobileInputBar,
body.mobile-active.mobile-keyboard-tracking #mobileCollectionsSearchBar {
    transition: none !important;
}

#mobileInputBar #mobileInputMorphBar {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-end;
    gap: 14px;
    box-sizing: border-box;
    margin-top: auto;
    transform-origin: 50% 100%;
    transition:
        border-radius 420ms cubic-bezier(0.22, 1, 0.36, 1),
        padding 420ms cubic-bezier(0.22, 1, 0.36, 1),
        gap 420ms cubic-bezier(0.22, 1, 0.36, 1),
        min-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

#mobileInputBar #mobileTextbox {
    width: 100%;
    max-height: 260px;
    padding: 10px;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 1;
    overflow: hidden;
    transform: none;
    pointer-events: auto;
    margin-top: 8px;
    scroll-padding-top: 8px;
    transition:
        max-height 420ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 320ms cubic-bezier(0.33, 1, 0.68, 1),
        margin 420ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, max-height;
    backface-visibility: hidden;
}

#mobileInputBar #mobileTextboxScrollWrap {
    position: relative;
    width: 100%;
    min-width: 0;
}

#mobileInputBar #mobileTextboxScrollWrap .mobileCollectionListFade {
    height: 16px;
    z-index: 3;
}

#mobileInputBar #mobileTextboxScrollWrap .mobileCollectionListFade.top {
    background: linear-gradient(to bottom, var(--input-bg) 0%, rgba(0, 0, 0, 0) 100%);
}

#mobileInputBar #mobileTextboxScrollWrap .mobileCollectionListFade.bottom {
    background: linear-gradient(to top, var(--input-bg) 0%, rgba(0, 0, 0, 0) 100%);
}

#mobileInputBar #mobileTextboxScrollWrap.can-scroll-up .mobileCollectionListFade.top {
    opacity: 1;
    margin-top: 8px;
}

#mobileInputBar #mobileTextboxScrollWrap.can-scroll-down .mobileCollectionListFade.bottom {
    opacity: 1;
}

#mobileInputBar .mobileinputplace,
#mobileInputBar .mobileinput {
    transition: opacity 220ms cubic-bezier(0.33, 1, 0.68, 1);
    will-change: opacity;
    backface-visibility: hidden;
}

/* Lives inside #mobileInputMorphBar now (first child, above the textarea) —
   part of the pill's own flex column flow, not a fixed overlay above it. */
#mobileFileRow {
    display: none;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    max-height: min(260px, 38vh);
    pointer-events: auto;
    gap: 8px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: none;
    touch-action: pan-x;
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
    scrollbar-gutter: stable both-edges;
}

/* Plain instant display:none <-> display:flex — no animation. */
body.mobile-active #mobileFileRow:not(:empty) {
    display: flex;
}

body.mobile-active #mobileFileRow::before,
body.mobile-active #mobileFileRow::after {
    display: none;
}

#mobileInputBar .mobileinputbottom .mobileinputplace {
    display: flex;
    align-items: center;
    min-height: 20px;
    padding: 4px 0;
    opacity: 0;
    transform: none;
    pointer-events: none;
    transition: opacity 220ms cubic-bezier(0.33, 1, 0.68, 1);
}

#mobileInputBar .mobileinput {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

/* Mobile UI style system (applies whenever mobile mode is active, regardless of width) */
body.mobile-active .mobiletopbar{
    width: 100%;
    background-color: transparent;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    padding: 12px;
    box-sizing: border-box;
}

body.mobile-active .mobiletopbartab {
    min-width: 0;
}

body.mobile-active .mobiletopbartab > div {
    width: min(100%, 227px);
    max-width: 227px;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    margin: 0 auto;
}

body.mobile-active #mobileTopbarTitle {
    width: min(100%, 227px);
    max-width: 227px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

#mobileTopbarTitle::after{
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--input-bg) 100%);
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 100%;
  opacity: 0;
}

#mobileTopbarTitle.is-overflowing::after{
  opacity: 1;
}

body.mobile-active #mobileTopbarTitle.mobiletopbar-folder-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: normal;
}

body.mobile-active #mobileTopbarTitle.mobiletopbar-folder-title .mobileCollectionOptionIcon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

body.mobile-active #mobileTopbarTitle.mobiletopbar-folder-title .mobileCollectionOptionIcon svg {
    width: 100%;
    height: 100%;
    display: block;
}

body.mobile-active #mobileTopbarTitle.mobiletopbar-folder-title .mobiletopbar-folder-label {
    min-width: 0;
    max-width: calc(100% - 24px);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

body.mobile-active .mobilebutton{
    aspect-ratio: 1;
    height: 45px;
    width: 45px;
    box-sizing: border-box;
    border-radius: 15px;
    border: none;
    padding: 11px;
    display: flex;
    transform: scale(1);
    transform-origin: center;
    transition: transform 0.14s ease;
    will-change: transform;
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    -webkit-appearance: none;
    appearance: none;
}

body.mobile-active .mobilebutton:active:not(:disabled),
body.mobile-active .mobilebutton.mobilebutton-pressed:not(:disabled) {
    transform: scale(1.3);
}

body.mobile-active .mobilebutton:focus,
body.mobile-active .mobilebutton:focus-visible {
    outline: none;
}

body.mobile-active #mobileTopbarMenuBtn:disabled svg {
    opacity: 0.5;
}

body.mobile-active .mobilebutton.grey{
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    box-shadow: var(--mobile-button-inset);
}

body.mobile-active .mobilebutton.transp{
    background-color: var(--add-btn-mobile-bg);
    color: var(--text-color);
}

body.mobile-active .mobilebutton.transp.small{
    padding: 8px;
    height: 37px;
    width: 37px;
}

body.mobile-active .mobilebutton.black{
    background-color: var(--contrast-color);
    color: var(--contrast-text);
}

body.mobile-active .mobilebutton.red{
    padding: 8px;
    border: none;
    background-color: var(--red-bg-not-transp);
    color: var(--red-text-light);
}

body.mobile-active .mobilebutton.black.small{
    padding: 9px;
    height: 40px;
    background-color: var(--contrast-color);
    color: var(--contrast-text);
}

body.mobile-active .mobilebutton.black.small.xtreme{
    padding: 8px;
    height: 37px;
    width: 37px;
    background-color: var(--contrast);
    color: var(--contrast-text);
    margin-left: auto;
}

body.mobile-active .mobilebutton.black.blue.small.xtreme{
    background-color: var(--blue-accent);
    color: #fff;
}

/* #mobileVoiceConfirmBtn shows a spinner instead of the checkmark while
   stopRecording()'s transcribe pipeline is still in flight (see
   mobileVoiceFinalizing / setMobileVoiceConfirmBtnLoading in
   mobile-input-and-composer.js) -- swap icon visibility via a class rather
   than swapping DOM nodes so there's nothing to race with the button's
   own show/hide transition. */
#mobileVoiceConfirmBtn .mobile-voice-confirm-spinner {
    display: none;
}

#mobileVoiceConfirmBtn.is-loading .mobile-voice-confirm-check {
    display: none;
}

#mobileVoiceConfirmBtn.is-loading .mobile-voice-confirm-spinner {
    display: block;
}

#mobileVoiceConfirmBtn .ios-spinner-blade {
    background: #fff;
}

body.mobile-active .mobilebutton.red.small{
    padding: 8px;
    height: 40px;
    border: 1px solid rgba(233, 76, 76, 0.3);
    background-color: rgba(233, 76, 76, 0.15);
    color: #E94C4C;
}

body.mobile-active .mobilebutton.red.small.msg{
    padding: 8px;
    height: 40px;
    width: 130px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    border: 1px solid rgba(233, 76, 76, 0.3);
    background-color: rgba(233, 76, 76, 0.15);
    color: #E94C4C;
}

body.mobile-active .mobilebutton.red.small.msg svg{
    width: 24px;
    min-width: 24px;
}

body.mobile-active .mobileVoiceText{
    font-size: 0.9rem;
    color: var(--text-color);
    display: flex;
    align-self: center;
    margin-left: auto;
    margin-right: 8px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.mobile-active .mobileVoiceText.red{
    color: #E94C4C;
    margin-right: 0;
}

body.mobile-active #mobileVoiceBtn .icon-send {
    opacity: 0;
    transform: scale(0.82);
}

body.mobile-active #mobileVoiceBtn.is-release-send .icon-voice {
    opacity: 0;
    transform: scale(0.82);
}

body.mobile-active #mobileVoiceBtn.is-release-send .icon-send {
    opacity: 1;
    transform: scale(1);
}

body.mobile-active #mobileVoiceBtn .icon-voice,
body.mobile-active #mobileVoiceBtn .icon-send {
    grid-area: 1 / 1;
    transition: opacity 140ms ease, transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.mobile-active #mobileInputBar.voice-open #mobileVoiceUI {
    opacity: 1;
    max-height: 40px;
    min-height: 40px;
    align-self: center;
    width: calc(100% - 8px);
    transform: translateY(0);
    pointer-events: auto;
}

body.mobile-active #mobileInputBar.voice-open #mobileVoiceReleaseHint {
    opacity: 1;
    transform: translateX(0);
}

body.mobile-active #mobileInputBar.voice-open.voice-delete-armed #mobileVoiceReleaseHint {
    opacity: 0;
    transform: translateX(18px);
    pointer-events: none;
}

body.mobile-active .mobile-voice-ui {
    display: flex;
    width: 100%;
    min-height: 0;
    align-items: center;
    padding: 0;
    box-sizing: border-box;
    opacity: 0;
    max-height: 0;
    transform: translateY(8px);
    pointer-events: none;
    overflow: hidden;
    transition:
        opacity 190ms ease,
        max-height 240ms cubic-bezier(0.22, 1, 0.36, 1),
        min-height 240ms cubic-bezier(0.22, 1, 0.36, 1),
        padding 240ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.mobile-active .mobile-voice-ui.hidden {
    display: none;
}

body.mobile-active #mobileInputBar #mobileVoiceUI.is-mobile-hidden {
    display: none;
}

body.mobile-active #mobileInputBar #mobileVoiceUI.is-mobile-visible {
    display: flex;
    opacity: 1;
    max-height: none;
    min-height: 0;
    transform: none;
    pointer-events: auto;
}

/* Now lives inline in .mobileinputbottom (next to the buttons) instead of
   as its own full-width row above the textarea — compact instead of
   width:100%, textarea stays visible behind it showing live transcript text. */
body.mobile-active .mobileinputbottom #mobileVoiceUI {
    width: auto;
    /* Bar count is computed live from this element's rendered width
       (getMobileMaxBars in theme-voice-and-sidebar-shell.js: floor(width /
       (barWidth+gap)), 6px per bar) — too narrow here was exactly why only
       a handful of bars were rendering. ~200px gets close to the ~29 bars
       desktop shows while still leaving room for the buttons either side;
       it'll still shrink further on narrow screens since flex-shrink isn't
       overridden, and the bar count recalculates on resize either way. */
    max-width: 200px;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 8px;
    overflow: hidden;
}

body.mobile-active .mobileinputbottom #mobileVoiceVisualizer {
    width: 100%;
    overflow: hidden;
}

#mobileSidebarCustom{
    --mobile-logo-row-space: 70px;
    --mobile-userbox-space: 70px;
    --mobile-top-fade-h: 80px;
    --mobile-bottom-fade-h: 84px;
    --mobile-fade-blur: 2px;
    display: none;
    width: var(--mobile-sidebar-content-width);
    max-width: var(--mobile-sidebar-content-width);
    height: 100%;
    min-height: 100%;
    padding-top: var(--mobile-logo-row-space);
    padding-bottom: var(--mobile-userbox-space);
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    position: relative;
    z-index: 1;
    box-sizing: border-box;
}

body.mobile-active .sidebar.mobile-open #mobileSidebarCustom .mobileSidebarButtons,
body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobileRecentChatsList,
body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobilePinnedList,
body.mobile-active .sidebar.mobile-open #mobileSidebarCustom .recentChatSidebarMobile,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom .mobileSidebarButtons,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobileRecentChatsList,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobilePinnedList,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom .recentChatSidebarMobile {
    transform-origin: left top;
    transform: scale(var(--mobile-sidebar-scroll-scale, 1));
    opacity: var(--mobile-sidebar-scroll-opacity, 1);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
    will-change: transform, opacity;
}

body.mobile-active #mobileSidebarCustom::before,
body.mobile-active #mobileSidebarCustom::after {
    content: "";
    position: fixed;
    left: var(--mobile-sidebar-pad-x, 10px);
    width: calc(var(--mobile-sidebar-content-width) - (var(--mobile-sidebar-pad-x, 10px) * 2));
    pointer-events: none;
    z-index: 120542;
    background-color: transparent;
    -webkit-backdrop-filter: blur(var(--mobile-fade-blur));
    backdrop-filter: blur(var(--mobile-fade-blur));
}

body.mobile-active #mobileSidebarCustom::before {
    top: 0;
    height: var(--mobile-top-fade-h);
    background-image: linear-gradient(to bottom, rgba(var(--sidebar-color-rgb), 1) 30%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 18%, rgba(0, 0, 0, 0.72) 44%, rgba(0, 0, 0, 0.40) 72%, rgba(0, 0, 0, 0.12) 90%, transparent 100%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 80%, transparent 100%);
}

body.mobile-active #mobileSidebarCustom::after {
    bottom: -1px;
    height: var(--mobile-bottom-fade-h);
    background-image: linear-gradient(
        to top,
        rgba(var(--sidebar-color-rgb), 0.98) 0%,
        rgba(var(--sidebar-color-rgb), 0.90) 16%,
        rgba(var(--sidebar-color-rgb), 0.74) 34%,
        rgba(var(--sidebar-color-rgb), 0.52) 52%,
        rgba(var(--sidebar-color-rgb), 0.30) 70%,
        rgba(var(--sidebar-color-rgb), 0.14) 86%,
        rgba(var(--sidebar-color-rgb), 0.06) 94%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.95) 18%,
        rgba(0, 0, 0, 0.72) 44%,
        rgba(0, 0, 0, 0.40) 72%,
        rgba(0, 0, 0, 0.12) 90%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to top,
        rgba(0, 0, 0, 1) 0%,
        rgba(0, 0, 0, 0.95) 18%,
        rgba(0, 0, 0, 0.72) 44%,
        rgba(0, 0, 0, 0.40) 72%,
        rgba(0, 0, 0, 0.12) 90%,
        transparent 100%
    );
}

body.mobile-active #mobileSidebarCustom .logorowmobile {
    position: fixed;
    top: 0;
    left: var(--mobile-sidebar-pad-x, 10px);
    width: calc(var(--mobile-sidebar-content-width) - (var(--mobile-sidebar-pad-x, 10px) * 2));
    max-width: calc(var(--mobile-sidebar-content-width) - (var(--mobile-sidebar-pad-x, 10px) * 2));
    z-index: 120543;
    margin: 0;
    padding: 16px 4px;
    background: transparent;
    transform-origin: left top;
    transform: scale(var(--mobile-sidebar-scroll-scale, 1));
    opacity: var(--mobile-sidebar-scroll-opacity, 1);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
    will-change: transform, opacity;
}

body.mobile-active #mobileSidebarCustom .userboxmobile {
    position: fixed;
    bottom: 12px;
    left: var(--mobile-sidebar-pad-x, 10px);
    width: calc(var(--mobile-sidebar-content-width) - (var(--mobile-sidebar-pad-x, 10px) * 2));
    max-width: calc(var(--mobile-sidebar-content-width) - (var(--mobile-sidebar-pad-x, 10px) * 2));
    z-index: 120548;
    margin: 0;
    box-sizing: border-box;
    background: var(--input-bg);
    transform-origin: left bottom;
    transform: scale(var(--mobile-sidebar-scroll-scale, 1));
    opacity: var(--mobile-sidebar-scroll-opacity, 1);
    box-shadow: var(--mobile-button-inset);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), opacity 220ms ease;
    will-change: transform, opacity;
}

body.mobile-active .sidebar.mobile-open #mobileSidebarCustom,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom{
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Prevent iOS long-press text highlight/selection while mobile sidebar is open. */
body.mobile-active.mobile-sidebar-open #mobileSidebarCustom,
body.mobile-active.mobile-sidebar-open #mobileSidebarCustom *:not(input):not(textarea):not([contenteditable="true"]) {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
}

/* Allow inline chat rename input to actually receive/edit text on mobile. */
body.mobile-active.mobile-sidebar-open #mobileSidebarCustom .chat-item-title-inline-input {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
}

/* iOS can ignore input-level user-select overrides when ancestors are locked. */
body.mobile-active.mobile-sidebar-open #mobileSidebarCustom .chat-item-wrapper.renaming,
body.mobile-active.mobile-sidebar-open #mobileSidebarCustom .chat-item-wrapper.renaming * {
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default !important;
}

body.mobile-active .sidebar.mobile-open #mobileSidebarCustom .mobileSidebarButtons,
body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobileRecentChatsList,
body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobilePinnedList,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom .mobileSidebarButtons,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobileRecentChatsList,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobilePinnedList{
    width: calc(var(--mobile-sidebar-content-width) - (var(--mobile-sidebar-pad-x, 10px) * 2));
    max-width: calc(var(--mobile-sidebar-content-width) - (var(--mobile-sidebar-pad-x, 10px) * 2));
    margin-right: auto;
    box-sizing: border-box;
}

body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobileRecentChatsList,
body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobilePinnedList,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobileRecentChatsList,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobilePinnedList {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
}

body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobileRecentChatsList > .sidebarMenuButton,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobileRecentChatsList > .sidebarMenuButton,
body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobileRecentChatsList > .chat-item-wrapper,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobileRecentChatsList > .chat-item-wrapper,
body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobileRecentChatsList .chat-item-wrapper .sidebarMenuButton.chat-item,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobileRecentChatsList .chat-item-wrapper .sidebarMenuButton.chat-item,
body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobilePinnedList > .sidebarMenuButton,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobilePinnedList > .sidebarMenuButton,
body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobilePinnedList > .chat-item-wrapper,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobilePinnedList > .chat-item-wrapper,
body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobilePinnedList .chat-item-wrapper .sidebarMenuButton.chat-item,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobilePinnedList .chat-item-wrapper .sidebarMenuButton.chat-item {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    align-self: stretch;
}

body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobileRecentChatsList > .sidebarMenuButton.buttonMobileSidebar.chat.sidebar-menu-item,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobileRecentChatsList > .sidebarMenuButton.buttonMobileSidebar.chat.sidebar-menu-item,
body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobilePinnedList > .sidebarMenuButton.buttonMobileSidebar.chat.sidebar-menu-item,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobilePinnedList > .sidebarMenuButton.buttonMobileSidebar.chat.sidebar-menu-item {
    -webkit-appearance: none;
    appearance: none;
}

body.mobile-active .sidebar.mobile-open #mobileSidebarCustom .buttonMobileSidebar:hover,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom .buttonMobileSidebar:hover {
    background-color: transparent !important;
}

body.mobile-active .sidebar.mobile-open #mobileSidebarCustom .buttonMobileSidebar.black:hover,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom .buttonMobileSidebar.black:hover {
    background-color: var(--contrast-color) !important;
    color: var(--contrast-text) !important;
}

body.mobile-active .sidebar.mobile-open #mobileSidebarCustom .buttonMobileSidebar:not(.black):active,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom .buttonMobileSidebar:not(.black):active {
    background-color: var(--hover-color);
}

body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobileRecentChatsList > .sidebarMenuButton .organize-text.chat,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobileRecentChatsList > .sidebarMenuButton .organize-text.chat,
body.mobile-active .sidebar.mobile-open #mobileSidebarCustom #mobilePinnedList > .sidebarMenuButton .organize-text.chat,
body.mobile-active .sidebar.mobile-closing #mobileSidebarCustom #mobilePinnedList > .sidebarMenuButton .organize-text.chat {
    flex: 1;
    min-width: 0;
    max-width: none;
}

body.mobile-active.mobile-sidebar-dragging .sidebar.mobile-open #mobileSidebarCustom .mobileSidebarButtons,
body.mobile-active.mobile-sidebar-dragging .sidebar.mobile-open #mobileSidebarCustom #mobileRecentChatsList,
body.mobile-active.mobile-sidebar-dragging .sidebar.mobile-open #mobileSidebarCustom #mobilePinnedList,
body.mobile-active.mobile-sidebar-dragging .sidebar.mobile-open #mobileSidebarCustom .recentChatSidebarMobile,
body.mobile-active.mobile-sidebar-dragging #mobileSidebarCustom .logorowmobile,
body.mobile-active.mobile-sidebar-dragging #mobileSidebarCustom .userboxmobile,
body.mobile-active.mobile-sidebar-dragging .sidebar.mobile-closing #mobileSidebarCustom .mobileSidebarButtons,
body.mobile-active.mobile-sidebar-dragging .sidebar.mobile-closing #mobileSidebarCustom #mobileRecentChatsList,
body.mobile-active.mobile-sidebar-dragging .sidebar.mobile-closing #mobileSidebarCustom #mobilePinnedList,
body.mobile-active.mobile-sidebar-dragging .sidebar.mobile-closing #mobileSidebarCustom .recentChatSidebarMobile {
    transition: none !important;
}

body.mobile-active.mobile-sidebar-closing .sidebar.mobile-open #mobileSidebarCustom,
body.mobile-active.mobile-sidebar-closing .sidebar.mobile-closing #mobileSidebarCustom{
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

body.mobile-active .sidebar.mobile-open > .top-box-Dash,
body.mobile-active .sidebar.mobile-open > .sidebar-scroll,
body.mobile-active .sidebar.mobile-open ~ .user-box,
body.mobile-active .sidebar.mobile-closing > .top-box-Dash,
body.mobile-active .sidebar.mobile-closing > .sidebar-scroll,
body.mobile-active .sidebar.mobile-closing ~ .user-box{
    display: none !important;
}

body.mobile-active .mobiletopbartab{
    box-shadow: var(--mobile-button-inset);
    background-color: var(--input-bg);
    color: var(--text-color);
    font-size: 1rem;
    height: 45px;
    border-radius: 16px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    display: flex;
    flex-grow: 1;
    transform: scale3d(1, 1, 1);
    transform-origin: center center;
    will-change: transform;
    transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

body.mobile-active .mobiletopbartab.mobile-3dtouch-pressing {
    animation: mobileChatContextHoldGrow var(--mobile-chat-press-hold-ms, 460ms) cubic-bezier(0.15, 0.86, 0.28, 1) forwards;
}

body.mobile-active .mobiletopbartab.mobile-3dtouch-active {
    transform: scale3d(1.03, 1.03, 1);
    background-color: var(--long-press-bg) !important;
    color: var(--text-color) !important;
    box-shadow: 0 8px 20px var(--black-shadow);
}

body.mobile-active .mobiletopbartab.mobile-3dtouch-active > div {
    color: var(--text-color) !important;
}

body.mobile-active .mobiletopbartab.mobile-topbar-title-fluid-enter {
    animation: mobileChatContextCloneFluidIn 340ms cubic-bezier(0.18, 0.9, 0.24, 1.15) both;
}

body.mobile-active .mobileinputbar{
    display: flex;
    flex-direction: column;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
    box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.1);
    box-shadow: var(--mobile-button-inset);
    border-radius: 24px;
    padding: 8px;
    align-items: center;
    transition: box-shadow 0.2s ease;
}

body.mobile-active .mobileinputbottom{
    display: flex;
    width: 100%;
    align-items: center;
    box-sizing: border-box;
    gap: 8px;
    min-height: 40px;
    position: relative;
    padding-right: 53px;
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceBtn,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileSendBtn,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceConfirmBtn {
    /* !important needed: a later legacy media-query rule (~L11499,
       "FIX MOBILE MIC/SEND ALIGNMENT") forces position:static !important
       on these same IDs, which otherwise wins over this rule regardless
       of specificity since !important always beats a non-important rule. */
    position: absolute !important;
    right: 0 !important;
    top: 50%;
    /* Baseline transform so the button is already vertically centered
       on first paint, before JS assigns is-mobile-visible/is-mobile-hidden
       (those classes only vary the scale) — otherwise it sits at the
       raw top:50% point (no offset) until JS catches up, visibly
       dropping in from below on load. */
    transform: translateY(-50%);
}

body.mobile-active .mobileinput{
    background-color: transparent;
    padding: 16px;
    padding-bottom: 0;
    display: block;
    flex-grow: 1;
    border: none;
    font-size: 1rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
    font-weight: 300;
    line-height: 1.3;
    resize: none;
    overflow-y: hidden;
    max-height: 180px;
}

.mobileinput.alone{    
  min-height: 40px;
  padding: 0 12px !important;
}

body.mobile-active .mobileinputplace{
    align-content: center;
    font-size: 1rem;
    color: #a9a9a9;
    min-width: 0;
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileAddFile,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceScrapBtn {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileInlinePlaceholder,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceReleaseHint {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileInlinePlaceholder {
    justify-self: stretch;
    width: 100%;
    margin-left: 0;
    display: flex;
    align-items: center;
    padding-left: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 220ms cubic-bezier(0.33, 1, 0.68, 1),
        transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileInlinePlaceholder.has-draft {
    color: var(--text-color);
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceReleaseHint {
    justify-self: end;
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceBtn,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileSendBtn {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: grid;
    place-items: center;
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileInlinePlaceholder {
    opacity: 0;
    transform: none;
    pointer-events: none;
}

/* display:none is applied via inline style with a delay (see
   setMobileSlotVisibility in mobile-input-and-composer.js) instead of here
   — display can't itself be transitioned, so setting it immediately on
   .is-mobile-hidden would skip this animation entirely. */
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileAddFile,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceScrapBtn,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceBtn,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileSendBtn,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceConfirmBtn,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileSwitchModel {
    transition: transform 0.1s ease, opacity 0.1s ease;
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileAddFile.is-mobile-visible,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceScrapBtn.is-mobile-visible,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileSwitchModel.is-mobile-visible {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: auto;
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileAddFile.is-mobile-hidden,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceScrapBtn.is-mobile-hidden,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileSwitchModel.is-mobile-hidden {
    opacity: 0 !important;
    transform: scale(0.5) !important;
    pointer-events: none;
}

/* These three are absolutely positioned in the same slot (see the
   position:absolute rule above), so their transform must keep the
   translateY(-50%) vertical centering alongside the scale swap. */
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceBtn.is-mobile-visible,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileSendBtn.is-mobile-visible,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceConfirmBtn.is-mobile-visible {
    opacity: 1 !important;
    transform: translateY(-50%) scale(1) !important;
    pointer-events: auto;
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceBtn.is-mobile-hidden,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileSendBtn.is-mobile-hidden,
body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceConfirmBtn.is-mobile-hidden {
    opacity: 0 !important;
    transform: translateY(-50%) scale(0.5) !important;
    pointer-events: none;
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceReleaseHint {
    opacity: 0;
    transform: translateX(18px);
    pointer-events: none;
    transition:
        opacity 190ms ease,
        transform 250ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceReleaseHint.is-mobile-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

body.mobile-active #mobileInputBar .mobileinputbottom > #mobileVoiceReleaseHint.is-mobile-hidden {
    opacity: 0;
    transform: translateX(18px);
    pointer-events: none;
}

body.mobile-active #mobileInputBar #mobileVoiceScrapBtn {
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px;
}

body.mobile-active #mobileInputBar #mobileVoiceScrapBtn > svg {
    width: 24px;
    height: 24px;
    min-width: 24px;
}

body.mobile-active #mobileInputBar.voice-open.voice-delete-armed #mobileVoiceScrapBtn {
    width: 168px;
    max-width: 168px;
}

body.mobile-active #mobileInputBar #mobileVoiceDeleteText {
    margin-left: 0;
    margin-right: 0;
    opacity: 0;
    transform: translateX(-8px);
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        max-width 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.mobile-active #mobileInputBar.voice-open.voice-delete-armed #mobileVoiceDeleteText.is-mobile-visible {
    opacity: 1;
    transform: translateX(0);
    max-width: 120px;
}

/* MOBILE BUTTONS – same style as desktop */
#mobileVoiceBtn.mobile-pill-btn,
#mobileStopBtn.mobile-pill-btn,
#mobileSendBtn.mobile-pill-btn {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--contrast);
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
}

#mobileVoiceBtn.mobile-pill-btn svg,
#mobileStopBtn.mobile-pill-btn svg,
#mobileSendBtn.mobile-pill-btn svg {
    width: 20px;
    height: 20px;
    fill: var(--background-color);
    stroke: var(--background-color);
}

#mobileVoiceBtn.mobile-pill-btn,
#mobileStopBtn.mobile-pill-btn {
    position: absolute;
    right: 10px;         /* SAME SPOT */
    top: 50%;
    transform: translateY(-50%);
}

.mobile-pill {
    position: relative;
}

textarea#mobileTextbox {
    display: block;
    margin: 0;
    line-height: 1.3;
    font-size: 1rem;
    padding-top: 10px;
    padding-bottom: 10px;

    /* Prevent iOS/Android from snapping to top-left */
    vertical-align: middle;
}

.mobile-hamburger {
    border: 0px;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 120551;
    background: var(--background-color);
    border-radius: 50%;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.thinking-step-ephemeral {
    color: #4f5b66 !important;
    font-style: italic !important;
    font-size: 13px !important;
    margin: 6px 0 !important;
    padding: 4px 10px !important;
    opacity: 0.9 !important;
    pointer-events: none !important;
    display: inline-block !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #f1f3f4 0%, #e7f0ff 50%, #f1f3f4 100%) !important;
    background-size: 200% 100% !important;
    animation: searchStepShimmer 1.4s linear infinite !important;
}

@keyframes searchStepShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.search-step-inline {
    font-family: 'Slanter-Sans', sans-serif;
    font-weight: 300;
    user-select: none;
    margin-top: 6px;
}

.search-step-inline .file-download-card {
    width: 100%;
    max-width: 100%;
    margin: 16px 0;
    box-sizing: border-box;
    user-select: text;
}

.file-download-card[data-md-preview-url] {
    cursor: pointer;
}

.quiz-thinking-panel.search-step-inline {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin: 6px 0 8px;
    padding: 0;
}

.quiz-thinking-panel .slanter-codeblock.thinking {
    width: 100%;
    max-width: 100%;
}

.quiz-thinking-panel .quiz-thinking-label {
    display: inline-flex;
    width: fit-content;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.search-step-inline .Thinking,
.search-thinking {
    display: flex;
    flex-direction: column;
}

/* ── Per-row layout: icon + vbar on left, text on right ── */
.search-thinking-row {
    display: flex;
    gap: 8px;
    color: var(--dark-text);
}

.search-row-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 22px;
}

.search-thinking-vbar {
    width: 1.5px;
    background-color: var(--dark-text);
    opacity: 0.2;
    flex-grow: 1;
    min-height: 8px;
    transition: opacity 380ms cubic-bezier(0.22, 1, 0.36, 1);
}

.search-thinking-row-last .search-thinking-vbar {
    display: none;
}

.search-row-right {
    flex: 1;
    min-width: 0;
    padding-bottom: 14px;
}

.search-thinking-row-last .search-row-right {
    padding-bottom: 0;
}

/* Header row's gap to the steps closes with the panel, on the same curve as
   .search-text-steps' collapse. */
.search-thinking-row-header .search-row-right {
    transition: padding-bottom 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.search-thinking.is-collapsed > .search-thinking-row-header .search-row-right {
    padding-bottom: 0;
}


.search-step-inline .iconthiningstep {
    width: 18px;
    height: 18px;
    padding: 2.25px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.search-thinking-icon-step{
  display: flex;
  width: 18px;
  height: 18px;
  padding: 2.25px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.search-step-inline .TopTextThink:hover .CollapseThinking,
.search-top-text-think:hover .search-collapse-thinking{
    visibility: visible;
}

.search-step-inline .TopTextThink,
.search-top-text-think {
    gap: 4px;
    display: flex;
    width: 100%;
    align-items: center;
    cursor: pointer;
    width: fit-content;
}

.search-text-steps {
    overflow: hidden;
    max-height: none;
    transition: max-height 420ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: max-height;
}

.search-text-steps-inner {
    display: flex;
    flex-direction: column;
    position: relative;
    max-height: 550px;
    overflow: hidden;
}


.search-text-steps-inner.is-overflowing .show-more-fade {
    position: absolute;
    font-size: 0.8rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    bottom: 0;
    left: 0;
    padding-left: 30px;
    z-index: 100;
    margin-left: 0;
    padding-bottom: 11px;
    color: var(--light-text);
    width: 100%;
    height: 40px;
    background: transparent;
    transition: color 0.2s ease;
    border: none;
    cursor: pointer;
    text-align: left;
}

.search-text-steps-inner.is-overflowing button.show-more-fade::before {
    content: "";
    left: 0;
    bottom: 0;
    position: absolute;
    z-index: -1;
    pointer-events: none;
    width: 100%;
    height: 100px;
    background: linear-gradient(0deg, var(--background-color) 32%, transparent);
}

.search-text-steps-inner.is-overflowing .show-more-fade:hover {
    color: var(--text-color);
}

.search-text-steps-inner .show-less-fade {
    position: absolute;
    font-size: 0.8rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    bottom: 11px;
    left: 0;
    padding-left: 0px;
    margin-left: 30px;
    padding-bottom: 0;
    color: var(--light-text);
    width: 100%;
    height: 20px;
    background: var(--background-color);
    border: none;
    cursor: pointer;
    text-align: left;
    transition: color 0.2s ease;
}

.search-text-steps-inner .show-less-fade:hover {
    color: var(--text-color);
}



.search-step-inline .Text,
.search-text {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 0.9rem;
    padding-top: 1px;
    width: 100%;
    color: currentColor;
    line-height: 1.35;
}

@property --sidebar-w {
    syntax: "<length>";
    inherits: true;
    initial-value: 290px;
}

@property --shimmer-pos {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 200%;
}

@property --shimmer-pos-2 {
    syntax: "<percentage>";
    inherits: true;
    initial-value: 200%;
}

/* Animations live on the panel itself (its `content` never changes), so the
   shimmer keeps progressing smoothly even when streamed text re-creates the
   ::after pseudo-elements that read these custom properties below. */
.search-thinking:not(.is-done) {
    animation: textSweepVar 3s linear infinite, textSweepVar2 2.4s linear infinite;
}

.search-thinking:not(.is-done) .Text::after,
.search-thinking:not(.is-done) .search-header-text::after,
.search-thinking:not(.is-done) .search-text-active::after {
    content: attr(data-text);
    position: absolute;
    inset: 0 0 0 0;
    padding-top: 1px;
    background: linear-gradient(90deg, transparent 30%, var(--thinking-shimmer) 50%, transparent 70%);
    background-size: 230% 100%;
    background-repeat: no-repeat;
    background-position: var(--shimmer-pos) 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: normal;
    pointer-events: none;
}

.search-thinking.kind-thinking:not(.is-done) .search-text-query::after {
    content: none;
}

.quiz-thinking-panel .search-thinking:not(.is-done) .search-text-query::after {
    inset: 2px auto auto 0;
    width: fit-content;
    max-width: 100%;
    height: 1.35em;
}

@keyframes textSweep {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes textSweepVar {
    from { --shimmer-pos: 200%; }
    to { --shimmer-pos: -200%; }
}

@keyframes textSweepVar2 {
    from { --shimmer-pos-2: 200%; }
    to { --shimmer-pos-2: -200%; }
}

.search-step-inline .CollapseThinking,
.search-collapse-thinking {
    transform: rotate(90deg);
    display: flex;
    color: currentColor;
    height: 16px;
    min-width: 16px;
    width: 16px;
}

.word-thinking-panel .search-collapse-thinking {
    visibility: visible;
}

/* Suppress broad shimmer on all word rows */
.word-thinking-panel .search-thinking:not(.is-done) .Text::after {
    content: none;
}

/* Shimmer only on the label text, not the codeblock */
.word-thinking-panel .search-thinking:not(.is-done) .word-step-label {
    position: relative;
    display: inline;
}

.word-thinking-panel .search-thinking:not(.is-done) .word-step-label::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 30%, var(--thinking-shimmer, rgba(150,150,150,0.35)) 50%, transparent 70%);
    background-size: 230% 100%;
    background-repeat: no-repeat;
    background-position: var(--shimmer-pos-2) 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    mix-blend-mode: normal;
    pointer-events: none;
}

.search-collapse-thinking.is-collapsed {
    transform: rotate(0deg);
}

.TopTextThink.search-top-text-think{
  color: var(--light-text);
}
.TopTextThink.search-top-text-think:hover{
  color: var(--text-color) !important;
}

.search-step-inline .Text:hover::after,
.search-header-text:hover::after,
.search-text-active:hover::after {
    background: linear-gradient(90deg, transparent 40%, transparent 50%, transparent 60%);
}

.search-text-completed {
    color: var(--dark-text);
}

.search-thinking.is-done .search-text-active::after,
.search-thinking.is-done .search-header-text::after {
    animation: none;
}

.search-thinking.is-collapsed .search-verticalbar,
.search-thinking.is-collapsed .search-thinking-vbar {
    opacity: 0;
}

.quiz-thinking-panel .search-thinking-row {
    transition:
        opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.quiz-thinking-panel .quiz-thinking-row-success,
.quiz-thinking-panel .quiz-thinking-row-done {
    display: none;
}

.quiz-thinking-panel[data-quiz-thinking-stage="success"] .quiz-thinking-row-success,
.quiz-thinking-panel[data-quiz-thinking-stage="done"] .quiz-thinking-row-success,
.quiz-thinking-panel[data-quiz-thinking-stage="done"] .quiz-thinking-row-done {
    display: flex;
}

.quiz-thinking-panel .search-thinking.is-finalizing .search-thinking-row.quiz-step-waiting {
    opacity: 0.52;
    transform: translateY(2px);
}

.quiz-thinking-panel .search-thinking.is-finalizing .search-thinking-row.quiz-step-complete {
    opacity: 1;
    transform: translateY(0);
}

.word-thinking-panel .search-thinking-row {
    transition:
        opacity 360ms cubic-bezier(0.22, 1, 0.36, 1),
        transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.word-thinking-panel .word-thinking-row-render,
.word-thinking-panel .word-thinking-row-attach,
.word-thinking-panel .word-thinking-row-done {
    display: none;
}

.word-thinking-panel[data-word-thinking-stage="render"] .word-thinking-row-render,
.word-thinking-panel[data-word-thinking-stage="attach"] .word-thinking-row-render,
.word-thinking-panel[data-word-thinking-stage="done"] .word-thinking-row-render,
.word-thinking-panel[data-word-thinking-stage="attach"] .word-thinking-row-attach,
.word-thinking-panel[data-word-thinking-stage="done"] .word-thinking-row-attach,
.word-thinking-panel[data-word-thinking-stage="done"] .word-thinking-row-done {
    display: flex;
}

.search_result_Box {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px;
    max-width: min(520px, 100%);
}

body.mobile-active .search_result_Box {
  border-radius: 18px;
  background-color: var(--background-color);
  gap: 8px;
}

body.mobile-active .search_result_item_text.small {
  color: var(--text-color) !important; 
}

.search_result_item {
    padding: 6px;
    display: flex;
    gap: 8px;
    align-items: center;
    border-radius: 6px;
    transition: background 0.2s ease;
    text-decoration: none;
    min-width: 0;
}

.search_result_item:hover {
    color: var(--text-color) !important;
    background-color: var(--sidebar-color);
}

.favicon_search_result_item {
    width: 20px;
    height: 20px;
    background-color: transparent;
    border-radius: 6px;
    overflow: hidden;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.favicon_search_result_item img {
    display: block;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.favicon_search_result_fallback {
    color: var(--med-text);
    font-size: 0.72rem;
    line-height: 1;
    position: absolute;
}

.search_result_item_text {
    color: var(--light-text);
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

.search_result_item_text.normal {
    font-size: 0.92rem;
    opacity: 0.8;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.search_result_item_text.small {
    margin-left: auto;
    font-size: 0.8rem;
    opacity: 0.5;
    flex: 0 0 auto;
    max-width: 34%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search_result_item:hover .search_result_item_text.normal {
    color: var(--text-color) !important;
    opacity: 1;
}

.search_result_item:hover .search_result_item_text.small {
    opacity: 0.8;
}

.search_result_item.result-pending {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.search_result_item.result-crawled {
    opacity: 1;
    transition: opacity 0.2s ease;
}

.search_result_item.result-pending .favicon_search_result_item img {
    opacity: 0.3;
    filter: blur(2px);
    transition: opacity 0.2s ease, filter 0.2s ease;
}

.search_result_item.result-crawled .favicon_search_result_item img {
    opacity: 1;
    filter: none;
    transition: opacity 0.2s ease, filter 0.2s ease;
}
.result-pending-spinner {
    position: absolute;
    z-index: 10000;
    width: 12px !important;
    height: 12px !important;
    margin: 0;
}

/* Mobile-only card layout for inline search results: full title text on
   its own line (no truncation/dimming) with the favicon+sitename grouped
   together on the row below, instead of desktop's single truncated row.
   Achieved with flex-wrap + the title forced to 100% width (which pushes
   the favicon/sitename onto their own wrapped line together) rather than
   restructuring the shared HTML template, so desktop's markup/layout is
   untouched. */
body.mobile-active .search_result_item {
    flex-wrap: wrap;
    align-items: center;
    background: transparent !important;
}

body.mobile-active .search_result_item_text.normal {
    order: 1;
    flex: 1 0 100%;
    color: var(--text-color);
    opacity: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

body.mobile-active .favicon_search_result_item {
    order: 2;
}

body.mobile-active .search_result_item_text.small {
    order: 3;
    margin-left: 0;
}

body.mobile-active .search_result_item:hover .search_result_item_text.normal {
    opacity: 1;
}

.circle-btn.add-file-btn {
    margin-left: 0px;
}

#deletePopup.modal {
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto; /* IMPORTANT */
}

#deletePopup .modal-box {
    pointer-events: auto; /* Make buttons clickable */
    z-index: 999999;
}

#deletePopup.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* --- FIX MOBILE MIC/SEND ALIGNMENT TO MATCH FILE BUTTON --- */
@media (max-width: 900px) {
  /* #mobileVoiceBtn/#mobileSendBtn excluded here: they (and
     #mobileVoiceConfirmBtn) are deliberately position:absolute and
     stacked on top of each other in .mobileinputbottom (~L10678) so
     swapping between mic/send/confirm can't shift layout — forcing
     position:static here used to silently win via !important. */
  #mobileStopBtn {
      position: static !important;      /* no absolute centering */
      transform: scale(1) !important;
  }

  #mobileStopBtn:active:not(:disabled),
  #mobileStopBtn.mobilebutton-pressed:not(:disabled) {
      transform: scale(1.3) !important;
  }

  #mobileVoiceBtn:active:not(:disabled),
  #mobileSendBtn:active:not(:disabled),
  #mobileVoiceConfirmBtn:active:not(:disabled),
  #mobileVoiceBtn.mobilebutton-pressed:not(:disabled),
  #mobileSendBtn.mobilebutton-pressed:not(:disabled),
  #mobileVoiceConfirmBtn.mobilebutton-pressed:not(:disabled) {
      transform: translateY(-50%) scale(1.3) !important;
  }

  .mobile-pill {
      align-items: flex-end;            /* keep everything pinned to bottom */
  }
}

.modal {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.modal-content {
    background: var(--bg);
    padding: 20px;
    border-radius: 12px;
    width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-close-btn {
    margin-top: 20px;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: var(--contrast-color);
    cursor: pointer;
}

.copy-icon-btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.copy-icon-btn:hover svg {
    opacity: 0.75;
}

/* Remove focus outline box */
.copy-icon-btn:focus {
    outline: none;
}

.typing-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stream-inline-thinkdot {
  display: inline-flex;
  width: 32px;
  height: 32px;
  margin-left: 4px;
  vertical-align: text-bottom;
  pointer-events: none;
}

/* The response-body dot must claim NO layout height of its own: the action row
   that replaces it is already reserved (.bot-actions-row.is-reserved), so the
   dot's larger visual size should simply spill into --chat-bottom-gap. Removing
   it then costs zero layout and the message does not shift.

   `height: 0` alone is NOT enough, and that was the remaining jump. The dot is
   appended after the last rendered block, so as an INLINE box it sits in an
   anonymous block and generates a LINE BOX — whose height comes from the
   parent's line-height strut (~26px at 1.6), not from the dot's own height. A
   BLOCK box has no strut and generates no line box, so it measures 0 for real;
   `line-height: 0` kills any inherited strut inside it. The 32px glyph then
   overflows downward, out of flow's way, into the bottom gap.

   Only the response dot gets this: a panel-header dot is a sized grid cell and
   the scroll-down dot lives in a button, and both must keep their real box. */
.stream-inline-thinkdot.is-response-dot {
  display: block;
  height: 0;
  line-height: 0;
  font-size: 0;
  overflow: visible;
  /* The one visual knob: gap between the dot and the text/tool panel/quiz
     button above it (positive = further down). Must stay a transform, never a
     margin — a margin would give the box layout height and bring the
     end-of-stream jump back. The dot spills into --chat-bottom-gap instead. */
  transform: translateY(6px);
}

/* The children are sized `height: 100%`, which against a zero-height parent
   would collapse them to nothing — restate the real size here. 32px must match
   the width on .stream-inline-thinkdot above (the dot is square). */
.stream-inline-thinkdot.is-response-dot > .stream-inline-thinkdot-lottie,
.stream-inline-thinkdot.is-response-dot > .stream-inline-thinkdot-canvas {
  height: 32px;
}

.stream-inline-thinkdot-canvas,
.stream-inline-thinkdot-lottie {
  width: 100%;
  height: 100%;
  display: block;
}

.thinking-dot-icon-slot {
  position: relative;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px;
  margin-top: -8px;
}

.thinking-dot-icon-slot .stream-inline-thinkdot {
  width: 100%;
  height: 100%;
  margin-left: 0;
}

.thinking-dot-icon-slot.icon-slot-hidden {
  display: none;
}

/* Once the header icon slot is hidden (image_generation/quiz_generation/
   visualizer panels once done), the header text should sit flush left
   instead of leaving room for a now-empty icon column, and the connecting
   vbar drops below the text instead of sitting beside it. */
.search-thinking-row-header:has(.thinking-dot-icon-slot.icon-slot-hidden) {
  flex-direction: column;
  gap: 0 !important;
}

.search-thinking-row-header:has(.thinking-dot-icon-slot.icon-slot-hidden) .search-row-right {
  order: -1;
  padding-bottom: 0;
}

.search-text-query-line {
  display: inline;
}

.thinking-dot-inline-slot {
  display: inline-flex;
  vertical-align: text-bottom;
}

.stream-word-fade {
  opacity: 0;
  /* Must stay `inline`: a chunk now holds several words, and inline-block would
     make it an unbreakable unit and shove line breaks around as it fades in. */
  display: inline;
  line-height: inherit;
  /* Duration is mirrored by STREAM_REVEAL_DURATION_MS in
     search-inline-tools-and-streaming.js — change both together. */
  animation: streamWordFadeIn 1600ms cubic-bezier(0.22, 0.72, 0.2, 1) forwards;
  will-change: opacity;
}

@keyframes streamWordFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.typing-indicator.hidden {
  display: none;
}

.analysis-text {
  font-size: 13px;
  color: #888;
  margin-left: 6px;
  white-space: nowrap;
}

.analysis-text.hidden {
  display: none;
}

.analysis-text {
  display: block;
  font-size: 13px;
  color: #888;
}

.analysis-text.hidden {
  display: none;
}

.bot-actions-row {
    gap: 4px; /* tighter spacing overall */
}

.bot-action-btn {
  border: none;
  background: transparent;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--light-text);
  margin-right: 0; /* remove extra gaps if present */
}

.bot-action-btn.text {
  color: var(--text-color);
  width: auto;
  padding: 0 9px;
}

.bot-action-btn.text.contrast {
  background-color: var(--contrast);
  color: var(--contrast-text);
}

.bot-action-btn.text.contrast.disabled {
  opacity: 0.5;
}

.bot-action-btn:hover {
  background: var(--hover-color);
  color: var(--text-color);
  opacity: 1;
}

.bot-action-btn svg {
  width: 18px;
  height: 18px;
  transition: color 0.15s ease;
}

body.mobile-active .bot-actions-row {
    opacity: 1 !important;
    margin-top: 0 !important;
  }

/* --- Action-row space reservation (kills the end-of-stream jump) ---
   The real row is a SIBLING appended only when the turn finishes; its arrival
   grew the page, the bottom-pinned auto-scroll re-clamped, and the message
   lurched at the instant the think dot vanished. ensureBotActionsPlaceholder
   parks a geometrically identical row there for the whole stream instead, so
   the swap changes nothing. It must therefore differ from a real row ONLY in
   paint — never in box model: no display/height/margin/padding overrides. */
.bot-actions-row.is-reserved {
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .bot-actions-row {
    opacity: 0 !important;
    pointer-events: auto;
    margin-left: 10px;
    margin-top: -6px !important;
    position: relative;
    transition: opacity 0.14s ease;
  }

  .bot-actions-row.user {
    opacity: 0 !important;
    pointer-events: auto;
    margin-left: auto;
    margin-top: 6px !important;
    position: relative;
    transition: opacity 0.14s ease;
  }

  /* .message.bot + .bot-actions-row::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
  } */

  .message.bot:hover + .bot-actions-row,
  .message.bot:focus-within + .bot-actions-row,
  .message.user:hover + .bot-actions-row.user,
  .message.user:focus-within + .bot-actions-row.user,
  .bot-actions-row:hover,
  .bot-actions-row:focus-within {
    opacity: 1 !important;
  }
}

.chat-item-wrapper {
    transition: opacity 120ms ease;
}

body.mobile-active .chat-item-wrapper {
    transition: opacity 120ms ease, transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.mobile-active .chat-item-wrapper .chat-item {
    transition: transform 170ms cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: left center;
    will-change: transform;
}

body.mobile-active .chat-item-wrapper.mobile-3dtouch-pressing .chat-item {
    animation: mobileChatContextHoldGrow var(--mobile-chat-press-hold-ms, 460ms) cubic-bezier(0.15, 0.86, 0.28, 1) forwards;
}

body.mobile-active .chat-item-wrapper.mobile-3dtouch-active .chat-item {
    transform: scale3d(1.03, 1.03, 1);
    background-color: #fff !important;
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
    transition: none !important;
}

body.mobile-active .chat-item-wrapper.mobile-3dtouch-active .chat-item .chat-item-title,
body.mobile-active .chat-item-wrapper.mobile-3dtouch-active .chat-item svg,
body.mobile-active .chat-item-wrapper.mobile-3dtouch-active .chat-item .organize-text.chat {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

@keyframes mobileChatContextHoldGrow {
    0% {
        transform: scale3d(1, 1, 1);
    }
    46% {
        transform: scale3d(1.016, 0.996, 1);
    }
    100% {
        transform: scale3d(1.03, 1.03, 1);
    }
}

/* Keep rename text visible with explicit contrast pairing while editing. */
body.mobile-active .chat-item-wrapper.renaming {
    position: relative;
    z-index: 2147483605;
}

body.mobile-active.mobile-inline-rename-active .sidebar.mobile-open,
body.mobile-active.mobile-inline-rename-active .sidebar.mobile-closing {
    --mobile-sidebar-scroll-scale: 1 !important;
    --mobile-sidebar-scroll-opacity: 1 !important;
    overflow: visible;
}

body.mobile-active.mobile-inline-rename-active #mobileSidebarCustom,
body.mobile-active.mobile-inline-rename-active #mobileSidebarCustom .mobileSidebarButtons,
body.mobile-active.mobile-inline-rename-active #mobileSidebarCustom #mobileRecentChatsList,
body.mobile-active.mobile-inline-rename-active #mobileSidebarCustom #mobilePinnedList {
    overflow-x: visible;
}

body.mobile-active.mobile-inline-rename-active #mobileSidebarCustom .chat-item-wrapper.renaming .chat-item {
    width: calc(100% + 10px);
    max-width: none !important;
    margin-right: -10px;
    transform: scale3d(1.03, 1.03, 1) !important;
    transition: none !important;
    animation: none !important;
}

body.mobile-active.mobile-chat-context-open .chat-item-wrapper.mobile-chat-context-source > .chat-item {
    visibility: hidden !important;
    pointer-events: none !important;
}

body.mobile-active.mobile-chat-context-open .chat-item-wrapper.mobile-3dtouch-active .ChatDropdown.chat-dropdown {
    position: fixed !important;
    z-index: 2147483605 !important;
}

body.mobile-active.mobile-chat-context-open .ChatFolderDropdown.chat-folder-dropdown {
    z-index: 2147483606 !important;
}

.mobile-chat-context-layer {
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    pointer-events: none;
    display: none;
    isolation: isolate;
}

body.mobile-active.mobile-chat-context-open.mobile-collections-row-context-open .mobile-chat-context-layer {
    z-index: 2147483610;
}

.mobile-chat-context-layer.is-visible {
    display: block;
}

.mobile-chat-context-dim {
    position: fixed;
    inset: 0;
    z-index: 1;
    border: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    pointer-events: auto;
    -webkit-appearance: none;
    appearance: none;
}

/* Dim background for collections row long-press context menus. */
body.mobile-active.mobile-chat-context-open.mobile-collections-row-context-open .mobile-chat-context-dim {
    background: rgba(0, 0, 0, 0.22);
}

body.mobile-active.mobile-chat-context-open.mobile-collections-row-context-open .mobileCollectionsSwipeRowShell.is-longpress-pressing,
body.mobile-active.mobile-chat-context-open.mobile-collections-row-context-open .mobileCollectionsSwipeRowShell.is-context-open {
    position: relative;
    z-index: 2147483602;
}

body.mobile-active.mobile-chat-context-open.mobile-collections-row-context-open .mobileCollectionsSwipeRowShell.is-longpress-pressing .mobileCollectionsSwipeRow,
body.mobile-active.mobile-chat-context-open.mobile-collections-row-context-open .mobileCollectionsSwipeRowShell.is-context-open .mobileCollectionsSwipeRow {
    position: relative;
    z-index: 2147483603;
}

.mobile-chat-context-clone-host .mobileCollectionsSwipeRowShell.mobile-collections-context-shell-clone {
    position: fixed !important;
    margin: 0 !important;
    z-index: 2147483602;
    pointer-events: none;
}

.mobile-chat-context-clone-host .mobileCollectionsSwipeRowShell.mobile-collections-context-shell-clone .mobileCollectionsSwipeRow {
    position: relative;
    z-index: 2147483603;
}

.mobile-chat-context-menu-host .mobileCollectionsSwipeRowShell.mobile-collections-context-shell-clone {
    position: fixed !important;
    margin: 0 !important;
    z-index: 2147483604 !important;
    pointer-events: none;
}

.mobile-chat-context-menu-host .mobileCollectionsSwipeRowShell.mobile-collections-context-shell-clone .mobileCollectionsSwipeRow {
    position: relative;
    z-index: 2147483605 !important;
    background: var(--long-press-bg) !important;
    box-shadow: 0 8px 20px var(--black-shadow);
    padding: 12px 16px;
    color: var(--text-color) !important;
    opacity: 1 !important;
    filter: none !important;
}

.mobile-chat-context-menu-host .mobileCollectionsSwipeRowShell.mobile-collections-context-shell-clone .mobileCollectionsSwipeRow::before,
.mobile-chat-context-clone-host .mobileCollectionsSwipeRowShell.mobile-collections-context-shell-clone .mobileCollectionsSwipeRow::before {
    opacity: 0 !important;
    animation: none !important;
}

.mobile-chat-context-menu-host .mobileCollectionsSwipeRowShell.mobile-collections-context-shell-clone .collectionSlideupBox,
.mobile-chat-context-menu-host .mobileCollectionsSwipeRowShell.mobile-collections-context-shell-clone .collectionSlideupBox *,
.mobile-chat-context-menu-host .mobileCollectionsSwipeRowShell.mobile-collections-context-shell-clone .mobileCollectionOptionIcon,
.mobile-chat-context-menu-host .mobileCollectionsSwipeRowShell.mobile-collections-context-shell-clone .mobileCollectionOptionIcon *,
.mobile-chat-context-menu-host .mobileCollectionsSwipeRowShell.mobile-collections-context-shell-clone .SmallerSlideUpText {
    opacity: 1 !important;
    filter: none !important;
}

/* In collections-row context mode, keep the topbar behind the dim. */
body.mobile-active.mobile-chat-context-open.mobile-collections-row-context-open #mobileTopbar {
    z-index: 2147483599 !important;
}

body.mobile-active.mobile-chat-context-open.mobile-collections-row-context-open #mobileTopbar::after {
    content: none !important;
    display: none !important;
}

/* While inline-renaming from topbar, force the topbar dim back on. */
body.mobile-active.mobile-chat-context-open.mobile-collections-row-context-open.mobile-topbar-inline-rename-active #mobileTopbar::after,
body.mobile-active.mobile-chat-context-open.mobile-topbar-inline-rename-active #mobileTopbar::after,
body.mobile-active.mobile-topbar-inline-rename-active #mobileTopbar::after {
    content: "" !important;
    display: block !important;
    position: absolute;
    height: 100vh;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    pointer-events: none;
    z-index: 2147483606;
}

/* While inline-renaming from topbar, keep topbar stack above page dim. */
body.mobile-active.mobile-topbar-inline-rename-active #mobileTopbar {
    z-index: 2147483607 !important;
    pointer-events: auto !important;
}

body.mobile-active.mobile-topbar-inline-rename-active #mobileTopbar .mobiletopbartab {
    position: relative;
    z-index: 2147483608 !important;
}

.mobile-chat-context-clone-host {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

body.mobile-active.mobile-inline-rename-active .mobile-chat-context-clone-host {
    pointer-events: none;
}

.mobile-chat-context-menu-host {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.mobile-chat-context-topbar-host {
    position: fixed;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.mobile-chat-context-menu-host .ChatDropdown.mobile-chat-context-portaled,
.mobile-chat-context-menu-host .ChatFolderDropdown.mobile-chat-context-portaled {
    position: fixed !important;
    z-index: 2147483605 !important;
    pointer-events: auto;
    box-shadow: 0 8px 20px var(--black-shadow);
}

.mobile-chat-context-menu-host .ChatFolderDropdown.mobile-chat-context-portaled {
    z-index: 2147483606 !important;
}

.mobile-chat-context-menu-host .ChatDropdown.mobile-chat-context-portaled.mobile-chat-context-enter,
.mobile-chat-context-menu-host .ChatFolderDropdown.mobile-chat-context-portaled.mobile-chat-context-enter {
    animation: mobileChatContextMenuSlideUp 260ms cubic-bezier(0.22, 0.9, 0.24, 1) both;
    will-change: transform, opacity;
}

.mobile-chat-context-menu-host .ChatDropdown.mobile-chat-context-portaled.mobile-topbar-context-menu.mobile-chat-context-enter,
.mobile-chat-context-menu-host .ChatFolderDropdown.mobile-chat-context-portaled.mobile-topbar-context-menu.mobile-chat-context-enter {
    animation: mobileChatContextMenuSlideDown 260ms cubic-bezier(0.22, 0.9, 0.24, 1) both;
}

@keyframes mobileChatContextMenuSlideUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes mobileChatContextMenuSlideDown {
    0% {
        opacity: 0;
        transform: translate3d(0, -14px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.mobile-chat-context-clone {
    position: fixed !important;
    margin: 0 !important;
    transform: scale3d(1.03, 1.03, 1);
    transform-origin: left center;
    background: var(--long-press-bg) !important;
    box-shadow: 0 8px 20px var(--black-shadow);
    color: var(--text-color) !important;
    z-index: 130010;
    pointer-events: none;
    box-sizing: border-box;
}

.mobile-chat-context-clone.mobile-chat-context-clone-enter {
    animation: mobileChatContextCloneFluidIn 340ms cubic-bezier(0.18, 0.9, 0.24, 1.15) both;
}

@keyframes mobileChatContextCloneFluidIn {
    0% {
        transform: scale3d(1.01, 0.9, 1);
    }
    40% {
        transform: scale3d(1.05, 1.06, 1);
    }
    70% {
        transform: scale3d(1.022, 0.99, 1);
    }
    100% {
        transform: scale3d(1.03, 1.03, 1);
    }
}

.mobile-chat-context-clone.is-inline-rename {
    pointer-events: auto;
    transform: scale3d(1.03, 1.03, 1) !important;
    transition: none !important;
    animation: none !important;
    touch-action: manipulation;
}

.mobile-chat-context-topbar-host .mobile-topbar-context-clone {
    position: fixed !important;
    margin: 0 !important;
    z-index: 2147483607;
    pointer-events: none;
}

/* Keep the topbar title pill above the mobile context dim layer. */
body.mobile-active.mobile-chat-context-open #mobileTopbar {
    z-index: 2147483607 !important;
    pointer-events: auto !important;
}

body.mobile-active.mobile-chat-context-open #mobileTopbar::after {
    content: "";
    position: absolute;
    height: 100vh;
    inset: 0;
    background: rgba(0, 0, 0, 0.22);
    pointer-events: none;
    z-index: 2147483606;
}

body.mobile-active.mobile-chat-context-open #mobileTopbar > :not(.mobiletopbartab) {
    position: relative;
    z-index: 2147483605 !important;
}

body.mobile-active.mobile-chat-context-open #mobileTopbar .mobiletopbartab {
    position: relative;
    z-index: 2147483607 !important;
}

body.mobile-active.mobile-chat-context-open #mobileTopbar .mobiletopbartab.mobile-3dtouch-active {
    position: relative;
    z-index: 2147483608 !important;
}

/* Use custom context dim, not sidebar's built-in dim layer, while chat context menu is open. */
body.mobile-active.mobile-chat-context-open .sidebar.mobile-open::after,
body.mobile-active.mobile-chat-context-open .sidebar.mobile-closing::after {
    background: transparent !important;
}

body.mobile-active.mobile-chat-context-open #mobileSidebarOverlay {
    background: transparent !important;
    pointer-events: none !important;
}

body.mobile-active.mobile-chat-context-open #mobileSidebarCustom {
    overflow: hidden;
}

/* ===============================
   INPUT TOOL EXPANDING PILLS
   (MATCH INPUT BAR BUTTON SIZE)
================================ */

.input-tools {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Base pill = SAME SIZE as circle buttons */
.input-tool {
    color: var(--blue-accent);
    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    border-radius: 8px;
    border: none;
    background: var(--blue-accent-light);

    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    justify-content: center;  

    transition:
        max-width 0.25s ease,
        background 0.15s ease,
        border-color 0.15s ease;
}

.input-tool:not(.active):hover {
    color: var(--blue-accent);
}

/* Icon size matches other buttons */
.input-tool svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Label hidden until expanded */
.input-tool span {
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Expanded pill */
.input-tool.active {
    max-width: 180px;
    background: var(--highlight-bg);
    color: var(--highlight-text);
}

.input-tool.active span {
    opacity: 1;
}

/* =========================================
   INPUT BAR: LEFT TOOLS, RIGHT ACTIONS
   FINAL FIX (NO HACKS)
========================================= */

/* Both bars align from the left */
.bottom-bar,
.centered-bottom-bar {
    justify-content: flex-start !important;
    position: relative;
}

/* Pills sit immediately after + */
.input-tools {
    margin-left: 8px;
}

.model-switch-btn {
  margin-right: 8px;
}

/* Push mic + everything after it to the right */
.model-switch-btn {
    margin-left: auto !important;
}

#voiceBtn,
#voiceCenteredBtn {
    transition: opacity 0.4s ease;
}

#voiceBtn.composer-action-voice-hidden,
#voiceCenteredBtn.composer-action-voice-hidden {
    opacity: 0;
    pointer-events: none;
}

#submitBtn.composer-action-send-prep,
#inputCenteredSend.composer-action-send-prep {
    opacity: 0;
    position: absolute;
    right: 16px;
    bottom: -1px;
    margin-left: 0 !important;
    transform: translateX(10px) translateY(-50%);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0, 0, 0, 1.64);
}

#submitBtn.composer-action-send-visible,
#inputCenteredSend.composer-action-send-visible {
    position: absolute;
    right: 16px;
    bottom: -1px;
    margin-left: 0 !important;
    opacity: 1;
    transform: translateX(0) translateY(-50%);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0, 0, 0.14, 0.97);
}

/* ===============================
   GLOBAL TOOLTIP (UNCLIPPABLE)
================================ */

#globalTooltip {
    position: fixed;
    z-index: 2147483647;
    background: var(--input-bg);
    color: var(--text-color);
    border: 1px solid var(--border-color-input);
    font-size: 0.8rem;
    font-weight: 300;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: pre;
    pointer-events: none;

    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    box-shadow: var(--black-shadow);
}

#globalTooltip.show {
    opacity: 1;
    transform: translateY(0);
}

/* ===============================
   GET PLUS BUTTON (USER BOX)
================================ */

.user-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.get-plus-btn {
  color: var(--contrast-text);
  background-color: var(--light-background);
  border: none;
  border-radius: 8px;
  padding: 8px 11px;
  cursor: pointer;
  transition: all 0.2s;
}

.get-plus-btn:hover {
    background: var(--light-background-hover);
}


.get-plus-btn.hidden {
    display: none !important;
}

/* Hide when sidebar collapsed */
.sidebar.collapsed ~ .user-box .get-plus-btn {
    display: none !important;
}

/* ===============================
   USER BOX LAYOUT ADJUSTMENTS
================================ */

/* Make inner row stretch full width */
.user-inner {
    display: flex;
    align-items: center;
    transition: padding 0.2s ease;
}

/* User info grows, pushing Get Plus right */
.user-info {
    flex: 1;
}

/* Row with username + button */
.user-name-row {
    display: flex;
    align-items: center;
}

/* Push Get Plus to the far right */
#getPlusBtn {
    margin-left: auto;
}

/* =========================================================
   MOBILE: FULL-WIDTH EXPANDING PILL FROM THE + BUTTON
   -  stays next to +
   - expanded panel matches width of the normal mobile pill
   - no icon bleed when closed
========================================================= */

@media (max-width: 900px) {

  /* keep wrapper in the row so textarea is always beside it */
  .mobile-tools-wrapper {
    position: relative;
    flex: 0 0 auto;
    z-index: 6001; /* above the pill contents */
  }

  /* + button: NO background when closed */
  #mobileAddFile.mobile-pill-btn {
    background: transparent !important;
  }

  /* panel is anchored to the FULL .mobile-pill width */
  .mobile-pill { position: relative; } /* already true, but ensure */

  .mobile-tools-panel {
    position: absolute;

    /* FULL WIDTH of the mobile input pill */
    left: 0;
    right: 0;

    /* Grow upward from the pill */
    bottom: calc(100% + 8px);

    /* match your pill rounding/feel */
    background: var(--input-bg, var(--background-color));
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 28px;
    box-shadow: 0 10px 26px rgba(0,0,0,0.20);

    /* stack buttons */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;

    padding: 12px;

    /* CLOSED STATE (hidden cleanly) */
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
  }

  /* open */
  .mobile-tools-wrapper.open .mobile-tools-panel {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 0.14s ease, transform 0.14s ease;
  }

  /* HARD prevent bleed-through when closed */
  .mobile-tools-wrapper:not(.open) .mobile-tools-panel * {
    display: none !important;
  }

  /* tool buttons (circle) */
  .mobile-tool-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: #f4f4f5;

    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Tool SVG sizing */
.mobile-tool-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
}

  /* ===============================
   MOBILE TOOL ACTIVE STATES
   (MATCH DESKTOP INPUT TOOLS)
================================ */

.mobile-tool-btn {
  border: 1px solid transparent;
}

/* Flashcards */
.mobile-tool-btn.flashcards.active {
  background: #eef2ff;
  border-color: #c7d2fe;
  color: #4338ca;
}

/* Web */
.mobile-tool-btn.web.active {
  background: #ecfeff;
  border-color: #67e8f9;
  color: #0e7490;
}

/* Study */
.mobile-tool-btn.study.active {
  background: #f0fdf4;
  border-color: #86efac;
  color: #166534;
}

/* Quiz */
.mobile-tool-btn.quiz.active {
  background: #fff7ed;
  border-color: #fdba74;
    color: #9a3412;
}

  /* + to X */
  #mobilePlusIcon { transition: transform 0.18s ease; }
  .mobile-tools-wrapper.open #mobilePlusIcon { transform: rotate(45deg); }
}

/* ===============================
   MOBILE TOOL PANEL – SLIM CAPSULE
================================ */

@media (max-width: 900px) {

  .mobile-tools-panel {
    left: 50%;
    transform: translateX(-50%) translateY(4px);

    width: max-content;
    min-width: 44px;

    padding: 10px 10px;          /* 🔥 MUCH tighter */
    padding-right: 8px;
    gap: 6px;                 /* tighter vertical spacing */

    border-radius: 999px;
  }

  .mobile-tools-wrapper.open .mobile-tools-panel {
    transform: translateX(-50%) translateY(0);
  }

}

#chatTopBar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 28px;
  background: var(--background-color);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
}

.chat-title {
  font-weight: 600;
  font-size: 15px;
}

.chat-tools {
  display: flex;
  gap: 8px;
}

.topbar-btn {
  border: none;
  background: #f3f3f3;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
}

.topbar-btn.active {
  background: #e6f0ff;
}

.flashcard-bg {
  background: radial-gradient(circle at top left, #ff9a9e, #a18cd1);
  padding: 40px;
  border-radius: 24px;
  color: var(--background-color);
  position: relative;
}

.flashcard {
  font-size: 32px;
  text-align: center;
  cursor: pointer;
  background: transparent;
}

.flashcard.flipped {
  background: var(--border-color);
  color: var(--contrast);
  padding: 40px;
  border-radius: 16px;
}

.flashcard-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

/* ============================
   TOOL OVERLAY
============================ */

#toolOverlay {
  position: fixed;
  inset: 0;
  background: var(--background-color);
  z-index: 50;
  display: flex;
  justify-content: center;
  align-items: center;
}

#toolOverlay[hidden] {
  display: none;
}

#toolOverlayContent {
  width: 90%;
  max-width: 900px;
}

.tool-message-btn {
  margin-top: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #f3f3f3;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

/* =========================
   TOOL OVERLAY (GLOBAL)
========================= */
#toolOverlay {
  position: fixed;
  inset: 0;
  background: var(--background-color);
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}

#toolOverlay[hidden] { display: none !important; }

#toolOverlayContent {
  width: min(940px, 94vw);
}

/* top bar button active */
.topbar-btn.active {
  background: #111 !important;
  color: var(--background-color) !important;
  border-color: #111 !important;
}

/* =========================
   FLASHCARDS UI
========================= */
.flashcard-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.flashcard-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flashcard-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
}

.flashcard-close {
  border: 1px solid #e5e7eb;
  background: var(--background-color);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

.flashcard-stage {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.flashcard-bg {
  position: absolute;
  inset: 0;
  filter: blur(28px);
  transform: scale(1.25);
  opacity: 0.95;
}

.flashcard-card {
  position: relative;
  min-height: 280px;
  border-radius: 22px;
  padding: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.flashcard-card.front {
  color: #0b0b0b;
}

.flashcard-card.back {
  background: #f3f4f6;
  color: #0b0b0b;
}

.flashcard-text {
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  text-align: center;
  max-width: 90%;
}

.flashcard-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.flashcard-nav button {
  flex: 1;
  border: 1px solid #e5e7eb;
  background: var(--background-color);
  border-radius: 14px;
  padding: 12px;
  cursor: pointer;
  font-weight: 600;
}

/* =========================
   QUIZ UI
========================= */
.quiz-wrapper {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.quiz-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.quiz-close {
  border: 1px solid #e5e7eb;
  background: var(--background-color);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}

.quiz-stage {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.quiz-bg {
  position: absolute;
  inset: 0;
  filter: blur(28px);
  transform: scale(1.25);
  opacity: 0.95;
}

.quiz-card {
  width: min(520px, 86%);
  height: 420px;               /* 👈 ADD */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.quiz-title {
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 10px 0;
}

.quiz-option {
  display: grid;
  gap: 10px;
}

.quiz-option {
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  font-weight: 600;
}

.quiz-option.correct {
  background: var(--green-bg-transp);
  border-color: var(--green-text);
}

.quiz-option.wrong {
  background: var(--red-bg-transp);
  border-color: var(--red-text);
}

.quiz-result {
  position: relative;
  background: var(--background-color);
  border: none;
  border-radius: 13px;
  padding: 22px;
  margin: 18px;
}

/* ============ TOP BAR ============ */
.chat-topbar{
  --topbar-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: sticky;
  top: 0;
  padding: 0 12px 0 0;
  z-index: 120000;
  background: var(--sidebar-color);
  border-bottom: none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  overflow: visible;
  isolation: isolate;
  gap: 12px;
}

.chat-topbar::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border-color);
  pointer-events: none;
  z-index: 0;
}
.chat-topbar-title{
  font-size: 18px;
  font-weight: 600;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  overflow: visible;
  position: relative;
  z-index: 2;
}

.chat-topbar-title::before,
.chat-topbar-title::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 1px;
  width: 34px;
  pointer-events: none;
  z-index: 35;
  opacity: 0;
  transition: opacity 220ms var(--topbar-ease);
}

.chat-topbar-title::before {
  left: 0;
  background: linear-gradient(to right, var(--sidebar-color) 0%, transparent 100%);
}

.chat-topbar-title::after {
  right: 0;
  background: linear-gradient(to left, var(--sidebar-color) 0%, transparent 100%);
}

.chat-topbar-title.has-overflow-left::before {
  opacity: 1;
}

.chat-topbar-title.has-overflow-right::after {
  opacity: 1;
}
.chat-topbar-actions{
  background-color: transparent;
  display:flex;
  gap:10px;
  position: relative;
  flex-shrink: 0;
  flex: 0 0 auto;
  z-index: 20;
}

.chat-topbar-actions.topbar-actions-placeholder {
  width: 44px;
  min-width: 44px;
  pointer-events: none;
}

body.topbar-tab-dragging .chat-topbar-title {
  z-index: 40;
}

body.topbar-tab-dragging .chat-topbar-actions {
  z-index: 20;
}
.topbar-text-btn{
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #c9c4bd;
  background:#f2eee9;
  color:#2b2a29;
  cursor:pointer;
  transition:
    transform 140ms var(--topbar-ease),
    background-color 220ms var(--topbar-ease);
}
.topbar-text-btn:hover{
  background:#e8e2da;
}
.topbar-text-btn:active{
  transform: translateY(1px);
}
.topbar-icon-btn{
  width:36px;
  height:36px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background:var(--background-color);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:
    border-color 220ms var(--topbar-ease),
    background-color 220ms var(--topbar-ease),
    color 220ms var(--topbar-ease);
}
.topbar-icon-btn.active{
  border-color:#111;
}

.topbar-menu-btn.toast{
  z-index: 0;
  width: 40px;
  height: 40px;
  padding: 7px;
  border-radius: 13px;
  margin-left: 4px;
}

.topbar-menu-btn{
  width:36px;
  height:36px;
  border-radius: 8px;
  margin-left: 8px;
  z-index: 21;
  border: none;
  background:none;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color: var(--text-color);
}
.topbar-menu-btn:hover{
  background:var(--hover-color);
}

/* Keep tab rail position stable when menu button is unavailable on non-chat tabs. */
.chat-topbar-actions > .topbar-menu-btn.hidden {
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}

/* ============ OVERLAY ============ */
#toolOverlay{
  position: fixed;
  inset: 0;
  background: var(--background-color);
  z-index: 50;
  display:flex;
  justify-content:center;
  align-items:flex-start;
}
#toolOverlayContent{
  width: 92%;
  max-width: 1100px;
}

.tool-page{ padding: 10px 10px 20px; }
.tool-backrow{ display:flex; justify-content:flex-start; margin-bottom: 8px; }
.tool-backbtn{
  border:none;
  background: transparent;
  font-weight:600;
  cursor:pointer;
}
.tool-title{ font-weight:700; margin: 10px 0 12px; }

.tool-gradient-panel{
  position: relative;
  border-radius: 22px;
  padding: 18px;
  min-height: 420px;
  overflow:hidden;
}

.tool-progress{
  position:absolute;
  top:16px;
  left:16px;
  display:flex;
  gap:10px;
  align-items:center;
  color:var(--background-color);
}
.progress-circle{
  width:18px;
  height:18px;
  border-radius:50%;
  border: 2px solid rgba(255,255,255,0.9);
}
.progress-text{ font-weight:600; }

.tool-nav{
  position:absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  display:flex;
  justify-content:space-between;
}
.tool-navbtn{
  width:42px;
  height:42px;
  border-radius: 14px;
  border:none;
  background: rgba(255,255,255,0.25);
  color:var(--background-color);
  font-size: 18px;
  cursor:pointer;
}

/* Flashcard */
.flashcard{
  width:100%;
  height: 360px;
  border-radius: 18px;
  border:none;
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.flashcard.flipped{
  background: var(--border-color);
}
.flashcard-text{
  font-size: 44px;
  font-weight: 700;
  letter-spacing: 1px;
  color:var(--background-color);
  text-align:center;
  padding: 0 30px;
}
.flashcard.flipped .flashcard-text{
  color:#111;
}

/* Quiz */
.quiz-card{
  width: 420px;
  max-width: 100%;
  background:var(--background-color);
  border-radius: 18px;
  padding: 18px;
  margin: 60px auto;
}
.quiz-q{
  font-weight:700;
  text-align:center;
  margin-bottom: 10px;
}
.quiz-tip {
  text-align: center;
  font-size: 13px;
  color: #777;
  min-height: 18px;
  margin-bottom: 14px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.quiz-tip.show{ 
  opacity: 1; 
}

.quiz-options{ display:flex; flex-direction:column; gap:12px; margin-top: 14px; }
.quiz-option{
  border:none;
  border-radius: 12px;
  background:var(--border-color);
  padding: 14px;
  text-align:left;
  cursor:pointer;
  position: relative;
}
.quiz-option.correct{
  background: var(--green-bg-not-transp);
}
.quiz-option.wrong{
  background: var(--red-bg-not-transp);
}

/* mini input under tool */
.tool-miniinput{
  margin-top: 16px;
  display:flex;
  gap:10px;
  align-items:center;
}
.tool-miniinput input{
  flex:1;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  padding: 12px 16px;
}
.tool-miniinput button{
  width:42px;
  height:42px;
  border-radius: 999px;
  border:none;
  background:#111;
  color:var(--background-color);
  cursor:pointer;
}

/* tool result button in chat */
.tool-result-btn{
  display:flex;
  gap:12px;
  align-items:center;
  border:1px solid var(--border-color);
  background:var(--background-color);
  padding: 14px 16px;
  border-radius: 18px;
  cursor:pointer;
  max-width: 320px;
}
.tool-result-icon{
  width:42px; height:42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  background:#f4f4f5;
  font-weight:700;
}
.tool-result-title{ font-weight:700; }
.tool-result-sub{ font-size: 12px; color:#777; }

.logo-default .cls-1 {
  fill: #0d0d0d;
  fill-rule: evenodd;
}

.inline-tool-card {
  font-family: 'Slanter-Sans', sans-serif;
  font-weight: 300;
}

.slanter-eikon-host {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 420px;
  height: 420px;
  margin-top: 12px;
  border: none;
  border-radius: 16px;
  background: transparent;
  overflow: visible;
}

.slanter-eikon-stream-anchor {
  display: block;
  width: 100%;
}

.slanter-eikon-host::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, transparent 100%);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

.slanter-eikon-host.is-loading::before {
  opacity: 1;
  animation: slanterEikonShimmer 1.25s linear infinite;
}

.slanter-eikon-host.is-ready::before {
  animation: none;
  opacity: 0;
}

.slanter-eikon-host.is-loading .slanter-eikon-frame {
  opacity: 0;
}

.slanter-eikon-host.is-ready .slanter-eikon-frame {
  opacity: 1;
}

.slanter-eikon-frame {
  display: block;
  width: 100%;
  min-height: 420px;
  height: 100%;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 180ms ease;
  will-change: opacity;
}

.slanter-visualize-host {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  min-height: 200px;
  height: 420px;
  margin: 12px 0;
  border: none;
  border-radius: 13px;
  background: transparent;
  overflow: visible;
}

.slanter-visualize-host.is-loading {
  overflow: hidden !important;
}

.slanter-visualize-host::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, var(--invite-skeleton-highlight) 45%, transparent 100%);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
}

.slanter-visualize-host.is-loading::before {
  opacity: 1;
  animation: slanterEikonShimmer 1.25s linear infinite;
}

.slanter-visualize-host.is-ready::before {
  animation: none;
  opacity: 0;
}

/* Still streaming: the growing preview is visible (is-ready) but the shimmer
   keeps running over it until the visual is complete — in the same rounded,
   bot-body-width box the pre-stream shimmer placeholder uses (is-loading's
   clipping goes away with it, or the sweep spills past the corners). */
.slanter-visualize-host.is-streaming {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 13px;
  overflow: hidden !important;
}

.slanter-visualize-host.is-streaming::before {
  opacity: 1;
  animation: slanterEikonShimmer 1.25s linear infinite;
}

.slanter-visualize-host.is-loading .slanter-visualize-frame {
  opacity: 0;
}

.slanter-visualize-host.is-ready .slanter-visualize-frame {
  opacity: 1;
}

.slanter-visualize-frame {
  display: block;
  width: 100%;
  min-height: 200px;
  height: 100%;
  border: 0;
  background: transparent;
  opacity: 0;
  transition: opacity 180ms ease;
  will-change: opacity;
}

@keyframes slanterEikonShimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(130%);
  }
}

.inline-tool-card-generating {
  display: flex;
  gap: 14px;
  padding: 0 0 0 7px;
  margin-top: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 27px;
  background: var(--input-bg);
  transition: background 0.15s ease, transform 0.1s ease;
  max-width: 420px !important;
  flex-direction: column;
}

.inline-tool-icon {
  font-size: 45px;
  line-height: 0.8;
  padding-top: 16px;
  padding-left: 8px;
  padding-right: 8px;
}

.inline-tool-title {
  font-weight: 600;
  padding-top: 16px;
}

.inline-tool-subtitle {
  font-size: 0.85rem;
  color: #6b7280;
}

.inline-tool-top {
    display: flex;
    width: 100%;
    height: fit-content;
}

.inline-tool-btm {
    display: flex;
    align-items: center;
    padding-left: 9px;
}

.inline-tool-btn {
    color: var(--text-color);
    border: none;
    background: none;
    display: flex;
    width: 30px;
    margin: 0;
    aspect-ratio: 1;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
}

/* Keep all full-screen popup backdrops above topbar tabs/chrome. */
.modal,
.settings-modal {
  z-index: 130500000000000 !important;
}

.inline-tool-btn:hover {
    background-color: var(--hover-color);
}

.inline-tool-start-btn {
    display: flex;
    align-items: center;
    border: none;
    background-color: var(--contrast);
    color: var(--background-color);
    border-radius: 8px;
    padding: 7px 13px;
    cursor: pointer;
}

.inline-tool-btm-right {
    display: flex;
    margin-left: auto;
    gap: 10px;
    padding-right: 16px;
}

.statusText {
    font-weight: 600;
    color: var(--med-text);
}

.statusTextProgress {
    font-weight: 600;
    color: #BB840D;
}

.statusTextComplete {
    font-weight: 600;
    color: #358547;
}

.inline-tool-sideBox {
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-left: auto;
    padding: 12px;
    padding-top: 15px;
    padding-right: 16px;
    border-radius: 0 27px 0 27px;
    background-color: var(--hover-color);
}

.inline-tool-sideBox-generating {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    padding: 14px 16px 14px 10px;
    border-radius: 0 27px 27px 0;
    background-color: transparent;
}

.quiz-gen-completion,
.quiz-gen-blocks {
    display: block;
    image-rendering: auto;
    background: transparent;
}

.quiz-gen-completion {
    width: 145px;
    height: 15px;
}

.quiz-gen-blocks {
    width: 45px;
    height: 45px;
}

.inline-tool-sideBox-top {
  font-size: 0.8rem;
  color: var(--med-text);
}

.inline-tool-sideBox-btm {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  margin-top: 3px;
  color: var(--med-text);
}

.inline-tool-sideBox-btm-small {
  font-size: 0.9rem;
}

.inline-tool-sideBox-progress {
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-left: auto;
    padding: 12px;
    padding-top: 15px;
    padding-right: 16px;
    border-radius: 0 27px 0 27px;
    background-color: #FFE7B5;
    height: fit-content;
}

.inline-tool-sideBox-top-progress {
  font-size: 0.8rem;
  color: #BB840D;
}

.inline-tool-sideBox-btm-progress {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  margin-top: 3px;
  color: #BB840D;
}

.inline-tool-resume-btn {
    display: flex;
    align-items: center;
    border: none;
    background-color: #FFE7B5;
    color: #BB840D;
    border-radius: 8px;
    padding: 7px 13px;
    cursor: pointer;
}

.inline-tool-restart-btn {
    display: flex;
    align-items: center;
    border: none;
    background-color: var(--hover-color);
    margin-left: 10px;
    color: var(--med-text);
    border-radius: 8px;
    padding: 7px 13px;
    cursor: pointer;
}

.inline-tool-sideBox-complete {
    display: flex;
    flex-direction: column;
    align-items: end;
    margin-left: auto;
    padding: 12px;
    padding-top: 15px;
    padding-right: 16px;
    border-radius: 0 27px 0 27px;
    background-color: #C8E9C3;
}

.inline-tool-sideBox-top-complete {
  font-size: 0.8rem;
  color: #358547;
}

.inline-tool-sideBox-btm-complete {
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  margin-top: 3px;
  color: #358547;
}

.inline-tool-results-btn {
    display: flex;
    align-items: center;
    border: none;
    background-color: #C8E9C3;
    color: #358547;
    border-radius: 8px;
    padding: 7px 13px;
    cursor: pointer;
}

.inline-tool-card.inline-flash {
  align-items: center;
  flex-direction: row;
  padding: 14px 16px;
  border-radius: 14px;
  cursor: pointer;
}

.inline-tool-card.inline-flash:hover {
  background: #f9fafb;
}

.inline-tool-card.inline-flash:active {
  transform: scale(0.98);
}

.inline-tool-card.inline-flash .inline-tool-icon {
  font-size: 26px;
  padding: 0;
}

.inline-tool-card.inline-flash .inline-tool-title {
  padding-top: 0;
}

/* =========================
   TOOL OVERLAY (QUIZ / FC)
   Covers ONLY main area (not sidebar/topbar)
========================= */

:root{
  --slanter-sidebar-w: 260px;   /* adjust if your sidebar width differs */
  --slanter-topbar-h: 50px;     /* adjust if your topbar height differs */
}

/* TOOL OVERLAY (QUIZ / FLASHCARDS) */
.tool-overlay {
  position: fixed;
  top: 64px;
  left: var(--sidebar-offset, 260px);
  right: 0;
  bottom: 0;
  background: var(--background-color);
  z-index: 2000;
  overflow-y: auto;
  margin-left: var(--sidebar-offset, 260px);
  transition: margin-left 0.15s;
}

/* THIS is the only visibility toggle */
.tool-overlay.hidden {
  display: none;
}

.tool-overlay-inner{
  position: absolute;
  top: var(--slanter-topbar-h);
  left: var(--slanter-sidebar-w);
  right: 0;
  bottom: 0;
  background: var(--background-color);
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: auto;
}

/* gradient blob */
.tool-gradient-bg{
  position: absolute;
  inset: 24px;
  border-radius: 32px;
  filter: blur(60px);
  opacity: 0.90;
  z-index: 0;
}

/* main content (center stage) */
.tool-content{
  position: relative;
  z-index: 1;
  height: calc(100% - 170px); /* room for bottom chat */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 6px;
  box-sizing: border-box;
}

/* bottom chat */
.tool-chat{
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 20px;
  z-index: 2;
  background: transparent;
}

.tool-chat-scroll{
  max-height: 120px;
  overflow-y: auto;
  padding: 0 4px 10px 4px;
}

.tool-chat-input{
  display: flex;
  gap: 10px;
  align-items: center;
}

.tool-chat-input input{
  flex: 1;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  padding: 0 16px;
  font-size: 14px;
  outline: none;
  background: var(--background-color);
}

.tool-chat-input button{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: var(--background-color);
  cursor: pointer;
}

/* shared panel */
.tool-panel{
  width: min(980px, 92%);
  position: relative;
  overflow: hidden;
  min-height: 420px;
}

/* flashcard big stage */
.flashcard-stage{
  position: relative;
  width: 100%;
  height: 520px;
  border-radius: 28px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.flashcard-card{
  width: 88%;
  height: 78%;
  border-radius: 26px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--background-color);
  text-align: center;
  padding: 24px;
  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  transition: transform 180ms ease, background 220ms ease, color 220ms ease;
}

.flashcard-card:active{ transform: scale(0.99); }

.flashcard-card.answer{
  background: var(--border-color) !important;
  color: #111 !important;
}

.flashcard-nav{
  position: absolute;
  bottom: 18px;
  left: 22px;
  right: 22px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.flashcard-nav button{
  pointer-events: auto;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.9);
  cursor: pointer;
}

/* progress ring */
.progress-ring{
  position: absolute;
  top: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--background-color);
  font-weight: 600;
}

.progress-ring svg{
  width: 18px;
  height: 18px;
  transform: rotate(-90deg);
}

.progress-ring .track{
  stroke: rgba(255,255,255,0.45);
  stroke-width: 3;
  fill: none;
}

.progress-ring .fill{
  stroke: var(--background-color);
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 260ms ease;
}

/* quiz panel */
.quiz-stage{
  position: relative;
  width: 100%;
  min-height: clamp(380px, 56vh, 520px);
  height: auto;
  border-radius: 28px;
  border: 1px solid var(--input-border);
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tool-loading-stage{
  width: 100%;
  min-height: clamp(380px, 56vh, 520px);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quiz-card{
  width: min(380px, 78%);
  background: var(--background-color);
  border-radius: 18px;
  padding: 18px;
  box-sizing: border-box;
  height: auto;
}

.quiz-q{
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
}

.quiz-option{
  display: grid;
  gap: 12px;
}

.quiz-option{
  background: #f3f3f3;
  border-radius: 14px;
  padding: 14px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 120ms ease, background 160ms ease, border-color 160ms ease;
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-weight: 600;
}

.quiz-option:active{ transform: scale(0.99); }

.quiz-option.correct{
  background: var(--green-bg-transp);
  border-color: var(--green-text);
}

.quiz-option.wrong{
  background: var(--red-bg-not-transp);
  border-color: var(--red-text);
}

/* assessment */
.assess-card{
  width: min(980px, 92%);
  background: var(--background-color);
  border-radius: 22px;
  padding: 22px;
  box-sizing: border-box;
  max-height: 520px;
  overflow: auto;
}

.assess-title{
  font-weight: 800;
  text-align: center;
  margin-bottom: 18px;
}

.assess-q{
  font-weight: 700;
  margin-top: 14px;
  margin-bottom: 8px;
}

.assess-input{
  width: 100%;
  height: 52px;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  padding: 0 14px;
  box-sizing: border-box;
  outline: none;
  background: var(--background-color);
}

.assess-submit{
  margin-top: 18px;
  width: 220px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid #e5e7eb;
  background: #111;
  color: var(--background-color);
  font-weight: 700;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.tool-chat-input{
  background: var(--background-color);
  border-radius: 999px;
  padding: 6px 10px;
  border: 1px solid #e5e7eb;
  display: flex;
  gap: 8px;
  align-items: center;
}

.tool-chat-input input{
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
}

.tool-chat-input button{
  background: #111;
  color: var(--background-color);
  border: none;
  border-radius: 999px;
  width: 36px;
  height: 36px;
  cursor: pointer;
}

.tool-inner {
  position: relative;
  height: 100%;
  padding: 24px;
}

.tool-gradient {
  position: absolute;
  inset: 24px;
  border-radius: 32px;
  filter: blur(60px);
  opacity: 0.85;
  z-index: 0;
}

.tool-content {
  position: relative;
  z-index: 1;
  height: 70%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flashcard {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  color: var(--contrast-color);
  cursor: pointer;
}

.flashcard.answer {
  background: var(--border-color) !important;
  color: black;
  font-size: 22px;
}


/* =========================================================
   TOOL OVERLAY + TOOL CHAT (overrides)
   - white background
   - sidebar remains visible (overlay offset via CSS variables)
========================================================= */
:root{
  --slanter-sidebar-w: 260px;
  --slanter-topbar-h: 50px;
  --topbar-height: var(--slanter-topbar-h, 50px);
  --tool-overlay-pad: 18px;
  --tool-overlay-offset: calc(var(--slanter-sidebar-w, 0px) + (var(--tool-overlay-pad) * 2));
}

#toolOverlay.tool-overlay{
  position: absolute;
  inset: auto;
  top: var(--slanter-topbar-h);
  left: var(--slanter-sidebar-w, 0px);
  right: 0;
  bottom: 0;
  margin-left: 0 !important;
  background: var(--background-color);
  z-index: 900;
  overflow: hidden;
  overflow-x: hidden;
  padding-left: var(--tool-overlay-pad, 18px);
  padding-right: var(--tool-overlay-pad, 18px);
  box-sizing: border-box;
}

.tool-overlay{
  position: absolute;
}

#toolOverlay.tool-overlay.split-embedded{
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  z-index: 7;
}

#toolOverlay.tool-overlay.split-embedded .tool-content,
#toolOverlay.tool-overlay.split-embedded .tool-chatlog,
#toolOverlay.tool-overlay.split-embedded #toolChatbar,
#toolOverlay.tool-overlay.split-embedded #toolInputDisclaimer{
  max-width: 765px;
  padding-left: 0;
  padding-right: 0;
}

#toolOverlay.tool-overlay.split-embedded .tool-scroll{
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
}

.chat-main-page-pane.is-split-tool-host{
  position: relative;
  overflow: hidden;
}

.tool-inner{
  position: relative;
  height: 100%;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

.tool-gradient{
  display: none; /* remove second gradient container */
}

.tool-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: calc(var(--chat-input-cover-h, 96px) + 44px);
  box-sizing: border-box;
}

.tool-panel{
  width: 100%;
  margin: 0 auto;
}

.tool-content{
  width: min(calc(100% - 32px), 765px);
  max-width: none;
  height: auto;
  min-height: 520px;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  display: flex;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

.tool-chatlog{
  width: min(calc(100% - 32px), 765px);
  margin: 0 auto;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 12px;
  max-width: none;
  box-sizing: border-box;
  overflow-x: hidden;
}

.tool-msg{
  display: flex;
  min-width: 0;
}

.tool-msg.user{
  justify-content: flex-end;
}

.tool-msg.assistant{
  justify-content: flex-start;
}

.tool-msg .bubble{
  max-width: 70%;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: 13px;
  line-height: 1.35;
  background: var(--border-color);
  color: #111;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.tool-msg.user .bubble{
  background: #e9e9e9;
}

.tool-typing-indicator{
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  width: 80%;
  margin: 4px 0;
  align-self: flex-start;
}

#toolChatbar{
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: min(calc(100% - 32px), 765px) !important;
  max-width: min(calc(100% - 32px), 765px) !important;
  margin: 0 !important;
  transform: translateX(calc(-50% + (var(--chat-scrollbar-shift, 0px) * -0.5)));
  z-index: 7;
  flex: 0 0 auto;
}

#toolFilePreviewHost {
  position: absolute;
  left: 50%;
  bottom: 116px;
  width: min(calc(100% - 32px), 765px);
  max-width: min(calc(100% - 32px), 765px);
  transform: translateX(calc(-50% + (var(--chat-scrollbar-shift, 0px) * -0.5)));
  z-index: 7;
  pointer-events: none;
}

#toolFilePreviewHost > #toolFilePreviewRowBottom {
  display: flex;
  width: 100%;
  max-width: 100%;
  pointer-events: auto;
}

#toolFilePreviewHost > #toolFilePreviewRowBottom:not(.has-files) {
  display: none !important;
}

#toolChatbar.expanded{
  padding-bottom: 0;
}

#toolChatbar .voice-ui{
  padding: 0 12px;
  border-radius: 0;
  background: transparent;
}

#toolChatbar .voice-visualizer{
  min-height: 40px;
}

#toolChatbar textarea{
  width: 100%;
}

#toolChatbar .bottom-bar{
  width: 100%;
  padding: 8px 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;
}

.tool-chat-bottom-mask{
  left: 0;
  right: var(--chat-scrollbar-shift, 0px);
  width: auto;
  transform: none;
  bottom: 0;
  z-index: 5;
}

#toolInputDisclaimer{
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: min(calc(100% - 32px), 765px);
  margin: 0;
  transform: translateX(calc(-50% + (var(--chat-scrollbar-shift, 0px) * -0.5)));
  z-index: 7;
}

#toolVoiceBtn{
  margin-left: auto !important;
}

.voice-btn:hover {
  background-color: var(--light-background-hover);
}

.tool-voice-btn{
  background: var(--light-background);
  border-color: var(--light-background);
  color: var(--contrast-text);
}

.tool-stop-btn{
  background: var(--light-background);
  border-color: var(--light-background);
  color: var(--contrast-text);
}

.tool-send-btn{
  background: var(--light-background);
  border-color: var(--light-background);
  color: var(--contrast-text);
}

.tool-send-btn.is-active{
  background: var(--light-background);
  border-color: var(--light-background);
  color: var(--contrast-text);
}

.tool-circle-btn.active{
  background: var(--light-background);
  border-color: var(--light-background);
  color: var(--contrast-text);
}

.tool-circle-btn:disabled{
  border-color: var(--disabled-bg);
  border-color: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
}

.circle-btn:disabled .send-icon{
  color:var(--contrast-text);
  opacity: 0.5;
}

.tool-icon{
  width: 18px;
  height: 18px;
}

/* =========================================================
   FLASHCARDS (single stage + grey on answer)
========================================================= */
.flashcard-stage{
  width: 100%;
  height: clamp(380px, 56vh, 520px);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  perspective: 1200px;
}

.flashcard-stage.generate{
  cursor: default;
}

.flashcard-body{
  padding: 48px;
  text-align: center;
  font-size: clamp(28px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: 0.02em;
  user-select: none;
  max-width: 80%;
}

.flashcard-body.answer{
  font-size: clamp(18px, 2.4vw, 28px);
  font-weight: 700;
}

.flashcard-corner-btn{
  position: absolute;
  bottom: 16px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.flashcard-corner-btn.prev{ left: 16px; }
.flashcard-corner-btn.next{ right: 16px; }

.flashcard-corner-btn:hover{
  background: rgba(255,255,255,0.24);
}

.flashcard-generate-btn{
  border: none;
  background: rgba(255,255,255,0.9);
  color: #111;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

.flashcard-stage.flashcard-turn{
  animation: flashcardTurn 0.35s ease;
}

.flashcard-stage.flashcard-advance{
  animation: flashcardAdvance 0.35s ease;
}

.flashcard-stage.flashcard-rewind{
  animation: flashcardRewind 0.35s ease;
}

@keyframes flashcardTurn{
  0%{ transform: rotateY(0deg); }
  50%{ transform: rotateY(90deg); }
  100%{ transform: rotateY(0deg); }
}

@keyframes flashcardAdvance{
  0%{ transform: translateX(0); opacity: 1; }
  45%{ transform: translateX(-12px); opacity: 0.4; }
  100%{ transform: translateX(0); opacity: 1; }
}

@keyframes flashcardRewind{
  0%{ transform: translateX(0); opacity: 1; }
  45%{ transform: translateX(12px); opacity: 0.4; }
  100%{ transform: translateX(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .flashcard-stage.flashcard-turn,
  .flashcard-stage.flashcard-advance,
  .flashcard-stage.flashcard-rewind{
    animation: none;
  }
}

/* =========================================================
   QUIZ: show hint only when present
========================================================= */
.quiz-tip:empty{
  display: none;
}

.quiz-summary-card{
  width: min(520px, 86%);
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--text-color);
  border-radius: 20px;
  padding: 22px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quiz-summary-text{
  font-size: 14px;
  line-height: 1.5;
  color: var(--med-dark-text);
}

.quiz-summary-text p,
.quiz-summary-text li,
.quiz-summary-text strong,
.quiz-summary-text span{
  color: inherit;
}

.quiz-summary-text a{
  color: var(--blue-accent);
}

.quiz-question{
  color: var(--text-color);
}

.quiz-summary-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.quiz-generate-btn{
  border: 1px solid var(--contrast);
  background: var(--contrast);
  color: var(--contrast-text);
  padding: 12px 18px;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.18s ease;
}

.quiz-generate-btn:hover{
  opacity: 0.88;
}

.quizcontent{
  display: flex;
  position: relative;
  max-width: 765px;
  width: 100%;
  flex-direction: column;
  align-items: center;
  height: 100vh;
  border-radius: 21px;
  overflow: hidden;
}

.backgroundimagequiz{
  user-select: none;
  z-index: 0;
  position: absolute;
  inset: 0;
  border-radius: 13px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  object-fit: cover;
  opacity: 0.52;
}

.quiztopprogress{
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translate(-50%);
  z-index: 2;
}

.progress-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.circleprogress {
  --circle-bg: var(--sidebar-controls);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--circle-bg);
  transition: background-color 220ms ease;
}

.circleprogress.correct {
  --circle-bg: var(--green-text);
  background-color: var(--circle-bg);
}

.circleprogress.wrong {
  --circle-bg: var(--red-text);
  background-color: var(--circle-bg);
}

.circleprogress.active {
  width: 55px;
  border-radius: 999px;
  background-color: var(--white);
}

.circleprogress.active.active-correct {
  background-color: var(--green-text);
}

.circleprogress.active.active-wrong {
  width: 55px;
  border-radius: 999px;
  background-color: var(--red-text);
}

.circleprogress.review-nav{
  cursor: pointer;
}

.circleprogress.is-expanding {
  animation: quizProgressExpand 300ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.circleprogress.is-contracting {
  animation: quizProgressContract 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.quizsideprogress{
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 32px;
  top: 26px;
  z-index: 2;
}

.quizprogresstext{
  text-align: end;
}

.quizprogresstext.is-obscured{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.quizsideprogress.is-obscured{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.quizprogresstext-sep{
  border-bottom: 1px solid var(--sidebar-controls);
  padding-bottom: 8px;
}

.quizprogresstext-score{
  margin-top: 4px;
}

.toptextquizsmall{
  font-size: 0.9rem;
  color: var(--text-color);
}

.bottomtextquizlarge{
  color:var(--text-color);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
}

.bottomtextquizlarge-number{
  display: inline-block;
}

.bottomtextquizlarge-number.value-change-in{
  animation: quizRightValueIn 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.bottomtextquizsmall{
  font-size: 1rem;
}

.quizcenterquiz{
  width: min(383px, calc(100% - 48px));
  background-color: var(--input-bg);
  border-radius: 21px;
  border: 1px solid var(--input-border);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-self: center;
  margin: auto;
  font-size: 1rem;
  z-index: 2;
  overflow: visible;
  transform-origin: 50% 50%;
  will-change: transform, opacity, filter;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  touch-action: pan-y;
  isolation: isolate;
}

.quizcenterquiz.quizcenterquiz-question{
  height: 394px;
  min-height: 394px;
  max-height: 394px;
  --quiz-q-pad-top: 12px;
  --quiz-q-pad-bottom: 20px;
  margin: auto auto;
}

.quizcenterquiz.quizcenterquiz-question.question-density-short{
  --quiz-q-pad-top: 24px;
  --quiz-q-pad-bottom: 28px;
}

.quizcenterquiz.quizcenterquiz-question.question-density-medium{
  --quiz-q-pad-top: 14px;
  --quiz-q-pad-bottom: 20px;
}

.quizcenterquiz.quizcenterquiz-question.question-density-long{
  --quiz-q-pad-top: 8px;
  --quiz-q-pad-bottom: 10px;
}

.quizcenterquiz.quiz-transition-in{
  animation: quizQuestionIn 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.quizcenterquiz.quiz-transition-out{
  animation: quizQuestionOut 360ms cubic-bezier(0.4, 0, 0.2, 1) both;
}


.quizquestion{
  font-family: 'Slanter-Serif', serif;
  font-size: 1.2rem;
  margin: 16px 0 32px;
  text-align: center;
}

.quizcenterquiz.quizcenterquiz-question .quizquestion{
  margin: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--quiz-q-pad-top) 0 var(--quiz-q-pad-bottom);
  min-height: 0;
  overflow: auto;
  position: relative;
  z-index: 4;
}

.quizcenterquiz.quizcenterquiz-question .quizquestion > *{
  width: 100%;
  margin: 0;
}

.quizanswers{
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: visible;
  z-index: 2;
}

.quizcenterquiz.quizcenterquiz-question .quizanswers{
  margin-top: auto;
}

.quizanswer{
  position: relative;
  font-size: 1rem;
  padding: 8px 12px;
  height: 54px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background-color: transparent;
  cursor:pointer;
  transition: all 0.2s ease;
  color: var(--text-color);
  z-index: 1;
  overflow: visible;
}

.quizanswer::before{
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  width: auto;
  height: auto;
  border-radius: 10px;
  border: inherit;
  background: inherit;
  z-index: 4;
  pointer-events: none;
}

.quizanswer.disabled,
.quizanswer:disabled{
  opacity: 0.5;
}

.quizanswer.wrong{
  color: var(--red-text);
  border: 1px solid var(--red-text);
  background-color: var(--red-bg-transp);
}

.quizanswer.correct{
  color: var(--green-text);
  border: 1px solid var(--green-text);
  background-color: var(--green-bg-transp);
}

.quizanswer.has-expander{
  z-index: 2;
}

.quizanswers .quizanswer.has-expander:last-child{
  z-index: 0;
}

.quizanswer:hover:not(.disabled):not(:disabled){
  background-color: var(--hover-color);
}

.quizanswer:active:not(.disabled):not(:disabled){
  transform: scale(0.99);
}

.quizanswertext{
  display: flex;
  font-size: 1rem;
  position: relative;
  z-index: 5;
  text-align: left;
  height: 100%;
  align-items: center;
  width: 100%;
  min-width: 0;
  flex-wrap: wrap;
}

.quizanswerexpander{
  box-sizing: border-box;
  position: absolute;
  background-color: var(--red-bg-not-transp);
  border-radius: 10px;
  border: 1px solid var(--red-text);
  z-index: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  top: -1px;
  left: -1px;
  right: -1px;
  width: auto;
  min-height: 54px;
  padding: 62px 12px 8px;
  pointer-events: none;
  transform-origin: top center;
  clip-path: inset(0 0 calc(100% - 54px) 0 round 10px);
  animation: quizExpanderReveal 360ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.quizanswerexpander.correct{
  background-color: var(--green-bg-not-transp);
  border: 1px solid var(--green-text);
}

.quizanswerexpander.correct.pinned-open{
  animation: none;
  clip-path: inset(0 0 0 0 round 13px);
}

.quizanswerexpander.correct.pinned-open > *{
  animation: none;
  opacity: 1;
  filter: none;
}

.quizanswerexpander > *{
  opacity: 0;
  filter: blur(8px);
  animation: quizExpanderContentIn 220ms ease-out 360ms forwards;
}

.quizanswerexpander.closing{
  clip-path: inset(0 0 0 0 round 13px);
  animation: quizExpanderHide 280ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.quizanswerexpander.closing > *{
  opacity: 1;
  filter: blur(0);
  animation: quizExpanderContentOut 120ms ease-in forwards !important;
}

.quiztextbold{
  display: flex;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--red-text);}

.quizTiptext{
  display: flex;
  font-size: 0.9rem;
  color: var(--red-text);
  text-align: left;
}

.quizTiptext.correct{
  color: var(--green-text);
}

.quizcontent .katex,
.quizcontent .katex-display,
.assessment-stage .katex,
.assessment-stage .katex-display{
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.quizcontent .katex,
.assessment-stage .katex{
  display: inline-flex;
  flex-wrap: wrap;
  line-height: 1.1;
}

.quizcontent .katex-display,
.assessment-stage .katex-display{
  display: block;
  margin: 0.35rem 0;
  text-align: center;
}

/* Same (0,3,0) restatement as the chat rule above. `text-align: inherit` is
   what keeps the left-aligned overrides further down (.quizanswertext,
   .quizTiptext) working -- they set alignment on the container only. */
.quizcontent .katex-display > .katex,
.assessment-stage .katex-display > .katex{
  display: block;
  text-align: inherit;
  white-space: nowrap;
  min-width: fit-content;
}

.quizquestion .katex-display,
.quizsummarytext .katex-display,
.assessment-title .katex-display,
.assessment-q .katex-display{
  text-align: center;
}

.quizanswertext .katex-display,
.quizTiptext .katex-display{
  text-align: left;
  margin: 0.2rem 0;
}

.UserTextLarge.quizsummarytitle{
  align-self: center;
  margin-top: 4px;
}

.quizbottomrow{
  border-top: 1px solid rgba(224, 62, 51, 0.4);
  padding-top: 8px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.quizbottomrow.correct{
  border-top: none;
  padding-top: 0;
}

.iconquizresult{
  color: var(--red-text);
  width: 20px;
  min-width: 20px;
}

.iconquizresult.correct{
  color: var(--green-text);
}

.quizsummarytext{
  text-align: left;
  margin-bottom: 12px;
  color: var(--text-color);
}

.quizsummaryactions{
  gap: 12px;
}

.quizcontrol{
  font-weight: 300;
  display: flex;
  justify-content: center;
  padding: 9px;
  font-size: 0.9rem;
  height: 34px;
  border: 1px solid var(--border-color);
  background-color: transparent;
  color: var(--text-color);
  border-radius: 8px;
  cursor: pointer;
  transition: border 0.2s ease;
}

.quizcontrol:hover{
  background-color: var(--hover-color);
  border-color: transparent;
}

.quizcontrol.black{
  background-color: var(--contrast);
  color: var(--contrast-text);
  border-color: transparent;
}

.quizcontrol.black:hover{
  background-color: var(--light-background-hover);
}

@keyframes quizExpanderReveal{
  0%{
    clip-path: inset(0 0 calc(100% - 54px) 0 round 10px);
  }
  100%{
    clip-path: inset(0 0 0 0 round 10px);
  }
}

@keyframes quizQuestionIn{
  0%{
    opacity: 0;
    transform: translate3d(-148px, 172px, 0) scale(0.93) rotate(-6.2deg);
    filter: blur(14px);
  }
  28%{
    opacity: 0.7;
    transform: translate3d(-92px, 104px, 0) scale(0.955) rotate(-3.8deg);
    filter: blur(10px);
  }
  62%{
    opacity: 1;
    transform: translate3d(12px, -10px, 0) scale(1.012) rotate(1.1deg);
    filter: blur(2.2px);
  }
  82%{
    opacity: 1;
    transform: translate3d(4px, -3px, 0) scale(1.005) rotate(0.25deg);
    filter: blur(0.9px);
  }
  100%{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
}

@keyframes quizQuestionOut{
  0%{
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
  24%{
    opacity: 0.98;
    transform: translate3d(18px, -9px, 0) scale(0.997) rotate(-1.2deg);
    filter: blur(1px);
  }
  58%{
    opacity: 0.88;
    transform: translate3d(78px, 56px, 0) scale(0.966) rotate(3.1deg);
    filter: blur(5px);
  }
  78%{
    opacity: 0.52;
    transform: translate3d(118px, 126px, 0) scale(0.945) rotate(4.8deg);
    filter: blur(9px);
  }
  100%{
    opacity: 0;
    transform: translate3d(164px, 184px, 0) scale(0.92) rotate(6.4deg);
    filter: blur(14px);
  }
}


@keyframes quizRightValueIn{
  0%{
    opacity: 0.45;
    transform: translateY(6px) scale(0.97);
    filter: blur(8px);
  }
  55%{
    opacity: 1;
    transform: translateY(-1px) scale(1.02);
    filter: blur(1.8px);
  }
  100%{
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes quizProgressExpand{
  0%{
    width: 10px;
    border-radius: 50%;
    background-color: var(--circle-bg);
  }
  100%{
    width: 55px;
    border-radius: 999px;
    background-color: var(--contrast);
  }
}

@keyframes quizProgressContract{
  0%{
    width: 55px;
    border-radius: 999px;
    background-color: var(--contrast);
  }
  100%{
    width: 10px;
    border-radius: 50%;
    background-color: var(--circle-bg);
  }
}

@keyframes quizExpanderHide{
  0%{
    clip-path: inset(0 0 0 0 round 13px);
  }
  100%{
    clip-path: inset(0 0 calc(100% - 54px) 0 round 13px);
  }
}

@keyframes quizExpanderContentIn{
  0%{
    opacity: 0;
    filter: blur(8px);
  }
  100%{
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes quizExpanderContentOut{
  0%{
    opacity: 1;
    filter: blur(0);
  }
  100%{
    opacity: 0;
    filter: blur(6px);
  }
}

@media (prefers-reduced-motion: reduce){
  .quizcenterquiz.quiz-transition-in,
  .quizcenterquiz.quiz-transition-out{
    animation: none;
  }
  .bottomtextquizlarge-number.value-change-in{
    animation: none;
  }
  .circleprogress.is-expanding,
  .circleprogress.is-contracting{
    animation: none;
  }
  .quizanswerexpander{
    animation: none;
    clip-path: inset(0 0 0 0 round 13px);
  }
  .quizanswerexpander > *{
    animation: none;
    opacity: 1;
    filter: none;
  }
}

.inline-tool-card.inline-pending:not(.inline-tool-card-generating) {
  position: relative;
  display: flex;
  flex-direction: column;

  align-items: flex-start;   /* ← CHANGE THIS */
  text-align: left;          /* ← ADD THIS */

  overflow: hidden;
  min-height: 45.5px !important; /* ← give it breathing room */
  padding: 14px 16px;
  line-height: 1;
}

.inline-tool-card.inline-pending .pending-title {
  font-weight: 700;
}

.inline-tool-card.inline-pending .pending-status {
  font-style: italic;
  color: rgba(0,0,0,0.55);
  font-size: 14px;
}

.inline-tool-card.inline-pending .pending-steps{
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 14px;
}

.inline-tool-card.inline-pending .pending-step{
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.inline-tool-card.inline-pending .step-label{
  font-size: 13px;
  color: rgba(0,0,0,0.7);
  font-weight: 600;
}

.inline-tool-card.inline-pending .step-bar{
  width: 100%;
  height: 6px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}

.inline-tool-card.inline-pending .step-bar-fill{
  height: 100%;
  width: 0%;
  background: #22c55e;
  opacity: 0.25;
  transition: width 240ms ease, background 240ms ease, opacity 240ms ease;
}

.inline-tool-card.inline-pending .pending-step.is-active .step-bar-fill{
  width: 60%;
  background: #22c55e;
  opacity: 0.75;
}

.inline-tool-card.inline-pending .pending-step.is-done .step-label{
  color: #16a34a;
}

.inline-tool-card.inline-pending .pending-step.is-done .step-bar-fill{
  width: 100%;
  background: #22c55e;
  opacity: 1;
}

/* Animated sweeping gradient */
.inline-tool-card.inline-pending::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

background: linear-gradient(
  120deg,
  rgba(0,0,0,0.00) 0%,
  rgba(0,0,0,0.02) 25%,
  rgba(0,0,0,0.05) 40%,
  var(--hover-color) 50%,
  rgba(0,0,0,0.05) 60%,
  rgba(0,0,0,0.02) 75%,
  rgba(0,0,0,0.00) 100%
);

  transform: translateX(-100%);
  animation: inlinePendingSweep 2.2s ease-in-out infinite;
}

/* Sweep timing */
@keyframes inlinePendingSweep {
  0% {
    transform: translateX(-110%);
  }
  50% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(110%);
  }
}

/* ==============================
   Dashboard main content layout
   ============================== */

.nav-btn {
  margin-top: 23px;
}

.active-btn {
  margin-top: 23px;
  width: 100%;
  border-radius: 9px;
  border: 1px solid #1d1d1d;
  background: var(--contrast);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--background-color);
  transition: background 0.15s ease, border-color 0.15s ease;
  text-align: left;
}

.nav-link {
  text-decoration: none;
}

.active-btn:hover {
  background: #494949;
  border-color: #363636;
}

.otherbuttons {
  margin-top: 23px;
  width: 100%;
  border-radius: 9px;
  border: none;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  background-color: var(--sidebar-color);
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--contrast);
  transition: background 0.15s ease, border-color 0.15s ease;
  text-align: left;
}

.otherbuttons:hover {
  background: #dadada;
  color: var(--contrast);
}

.side-icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
}

.content {
  width: min(1000px, 100% - 80px);
  align-self: center;
  margin: 30px auto 80px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.dashboard-main {
  overflow: hidden;
}

.dashboard-scroll {
  flex: 1;
  overflow-y: auto;
}

.main-scroll {
  flex: 1;
  overflow-y: auto;
}

.page-panel {
  display: none;
}

.page-panel.is-active {
  display: flex;
}

.dashboard-hero {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dashboard-hero .eyebrow {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.7rem;
  color: #8c8c8c;
  margin: 0;
}

.dashboard-hero h1 {
  margin: 0;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
  letter-spacing: -0.02em;
  color: #1f1f1f;
}

.hero-subtitle {
  margin: 0;
  color: #6f6f6f;
  max-width: 60ch;
}

.hero-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.meta-item {
  background: var(--sidebar-color);
  border: 1px solid #e5e5e5;
  padding: 14px 16px;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.meta-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px var(--hover-color);
}

.meta-label {
  font-size: 0.75rem;
  color: #6f6f6f;
}

.meta-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #141414;
}

.meta-note {
  font-size: 0.75rem;
  color: #4b4b4b;
}

.content-divider {
  border-top: 1px solid #ededed;
}

.split-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
  align-items: center;
}

.split-card.reverse {
  grid-auto-flow: dense;
}

.split-text h2 {
  margin: 0 0 10px;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.split-text p {
  margin: 0 0 10px;
  color: #6c6c6c;
}

.split-text .muted {
  color: #9a9a9a;
}

.image-placeholder {
  width: 100%;
  min-height: 220px;
  border-radius: 16px;
  background: #3f3f3f;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.image-placeholder:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.pill-button {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border: none;
  border-radius: 999px;
  padding: 8px 16px;
  background: #0d0d0d;
  color: var(--background-color);
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease;
}

.pill-button:hover {
  background: #292929;
  transform: translateY(-1px);
}

.pill-arrow {
  font-size: 1rem;
}

.limits-card {
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  padding: 18px;
  background: var(--background-color);
  box-shadow: 0 8px 22px var(--hover-color);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.limits-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.limits-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.limits-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}

.ghost-button {
  border: 1px solid #e0e0e0;
  background: #f8f8f8;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.ghost-button:hover {
  background: #ececec;
  border-color: #cfcfcf;
}

.limit-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.limit-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #585858;
  font-size: 0.85rem;
}

.limit-bar {
  width: 100%;
  height: 12px;
  background: #efefef;
  border-radius: 999px;
  overflow: hidden;
}

.limit-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #111 0%, #3f3f3f 100%);
  transition: width 0.8s ease;
}

.limit-row.is-ready .limit-fill {
  width: var(--limit, 0%);
}

.limit-caption {
  margin: 0;
  font-size: 0.7rem;
  color: #9b9b9b;
}

.need-more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.need-more h2 {
  margin: 0 0 8px;
  font-size: clamp(1.4rem, 2.4vw, 1.8rem);
}

.need-more .muted {
  margin: 0;
  color: #8f8f8f;
}

.alert-dot {
  position: absolute;
  top: -6px;
  right: -6px;
  background: #ef4444;
  color: var(--background-color);
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 999px;
  border: 2px solid var(--background-color);
}

.topbar-icon-btn {
  position: relative;
}

@media (max-width: 900px) {
  .content {
    width: min(100%, 560px);
  }

  .need-more {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .content {
    width: min(100%, 90%);
  }
}

/* ==============================
   Usage page layout
   ============================== */

.usage-content {
  gap: 24px;
}

.usage-header h1 {
  margin: 0;
  font-size: clamp(1.6rem, 2.6vw, 2rem);
}

.usage-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

.usage-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--border-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.usage-card,
.usage-stat-card {
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  background: var(--background-color);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.usage-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.usage-label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1f1f1f;
}

.usage-value {
  font-size: 1.2rem;
  font-weight: 600;
  color: #1f1f1f;
}

.usage-subtitle {
  margin: 6px 0 0;
  font-size: 0.8rem;
  color: #9a9a9a;
}

.usage-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #e0e0e0;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fafafa;
}

.usage-chip {
  border: none;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.usage-dropdown {
  font-size: 0.8rem;
  color: #666;
}

.usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.usage-stat-card.tall {
  min-height: 280px;
}

.usage-chart-placeholder {
  width: 100%;
  min-height: 180px;
  border-radius: 12px;
  background: #f3f3f3;
  border: 1px solid #ededed;
}

.usage-stat-card.tall .usage-chart-placeholder {
  min-height: 240px;
}

@media (max-width: 700px) {
  .usage-title {
    flex-direction: column;
    align-items: flex-start;
  }

  .usage-card-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==============================
   Rules page layout
   ============================== */

.rules-content {
  gap: 28px;
}

.rules-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
}

.rules-hero p {
  margin: 0 0 8px;
  color: #6f6f6f;
  max-width: 70ch;
}

.rules-divider {
  border-top: 1px solid #ededed;
}

.rules-overview {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rules-overview-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.rules-overview-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #f1f1f1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.rules-overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}

.rules-overview-card {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--background-color);
  box-shadow: 0 6px 16px var(--hover-color);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rules-overview-label {
  font-size: 0.75rem;
  color: #8a8a8a;
}

.rules-overview-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: #111;
}

.rules-editor {
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  background: var(--background-color);
  padding: 18px;
  box-shadow: 0 8px 22px var(--hover-color);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rules-editor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.rules-editor-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.rules-editor-icon {
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #f1f1f1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}

.rules-roles {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.role-card {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
  background: var(--background-color);
  box-shadow: 0 4px 14px var(--hover-color);
  --role-color: #ee8f5a;
}

.role-header {
  background: var(--role-color);
  color: var(--background-color);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.role-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.2rem;
  font-weight: 600;
}

.role-name {
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.role-name.is-placeholder:empty::before {
  content: attr(data-placeholder);
  opacity: 0.5;
}

.role-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.role-action-btn {
  border: 1px solid rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.2);
  color: var(--background-color);
  width: 26px;
  height: 26px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.role-save-btn,
.role-undo-btn,
.role-cancel-btn {
  display: none;
}

.role-card.is-editing .role-edit-btn {
  display: none;
}

.role-card.is-editing .role-save-btn,
.role-card.is-editing .role-undo-btn {
  display: inline-flex;
}

.role-cancel-btn.is-visible {
  display: inline-flex;
}

.role-undo-btn.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.role-body {
  padding: 12px;
}

.role-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.role-column h4 {
  margin: 0 0 6px;
  font-size: 0.85rem;
  color: #1f1f1f;
}

.role-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: #5f5f5f;
}

.role-column.disabled h4,
.role-column.disabled ul {
  color: #e1504a;
}

.role-column ul li {
  display: flex;
  align-items: center;
  gap: 4px;
}

.role-column h4 + ul {
  padding-right: 12px;
  border-right: 1px solid #efefef;
}

.role-edit {
  display: none;
  grid-template-columns: minmax(220px, 1fr) 180px;
  gap: 18px;
}

.role-card.is-editing .role-summary {
  display: none;
}

.role-card.is-editing .role-edit {
  display: grid;
}

.role-permissions h4,
.role-customization h4 {
  margin: 0 0 8px;
  font-size: 0.85rem;
  color: #1f1f1f;
}

.switch-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: #9b9b9b;
  margin-bottom: 6px;
}

.switch-row input {
  display: none;
}

.role-customization {
  border-left: 1px solid #efefef;
  padding-left: 12px;
}

.role-color-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: #4f4f4f;
  margin-bottom: 6px;
}

.role-color-button {
  border: none;
  background: var(--contrast);
  color: var(--background-color);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.7rem;
  cursor: pointer;
  width: 100%;
}

.role-color-button:hover {
  background: var(--role-color);
}

.role-delete-btn {
  border: none;
  background: #e6e6e6;
  color: #111;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.7rem;
  cursor: pointer;
  width: 100%;
  margin-top: 8px;
  display: none;
}

.role-card.is-editing .role-delete-btn {
  display: block;
}

.role-delete-btn:hover {
  background: #d3d3d3;
}

.role-color-palette {
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}

.role-card.palette-open .role-color-palette {
  display: grid;
}

.role-card.palette-open .role-color-button {
  display: none;
}

.role-card.palette-open .role-delete-btn {
  display: none;
}

.role-color-swatch {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  background: var(--swatch-color, #ddd);
  transition: transform 0.2s ease;
}

.role-color-swatch:hover {
  transform: scale(1.05);
}

.rules-add-role {
  width: fit-content;
  border: none;
  border-radius: 8px;
  background: var(--contrast);
  color: var(--background-color);
  padding: 8px 12px;
  font-size: 0.8rem;
  cursor: pointer;
}

.rules-add-role:hover {
  background: #2a2a2a;
}

.rules-add-role.is-disabled,
.rules-add-role:disabled {
  background: #d3d3d3;
  color: #7b7b7b;
  cursor: not-allowed;
}

.users-content {
  gap: 28px;
}

.users-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
}

.users-hero p {
  margin: 0 0 8px;
  color: #6f6f6f;
  max-width: 70ch;
}

.users-divider {
  border-top: 1px solid #ededed;
}

.users-manage {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.users-manage-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.users-manage-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: #f1f1f1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.users-manage-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.users-manage-card {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--background-color);
  box-shadow: 0 6px 16px var(--hover-color);
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.users-manage-label {
  font-size: 0.75rem;
  color: #8a8a8a;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.users-manage-value {
  font-size: 1.4rem;
  font-weight: 600;
  color: #111;
}

.users-manage-button {
  cursor: pointer;
}

.users-manage-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.2rem;
}

.users-placeholder-icon {
  width: 20px;
  height: 20px;
}

.users-add-icon {
  width: 16px;
  height: 16px;
}

.users-panel {
  border: 1px solid #e5e5e5;
  border-radius: 16px;
  background: var(--background-color);
  padding: 16px;
  box-shadow: 0 8px 22px var(--hover-color);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.users-panel-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.users-panel-header h2 {
  margin: 0;
  font-size: 1rem;
}

.users-selected-text {
  margin: 4px 0 0;
  font-size: 0.75rem;
  color: #9b9b9b;
}

.users-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.users-filter-wrap {
  transition: margin-right 0.25s ease;
}

.users-controls.bulk-active .users-filter-wrap {
  margin-right: 8px;
}

.users-search,
.users-bulk-btn,
.users-sort-btn,
.users-filter-btn {
  border: 1px solid #e0e0e0;
  background: var(--background-color);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 0.75rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.users-search svg,
.users-bulk-btn svg,
.users-filter-btn svg,
.users-sort-btn svg {
  width: 14px;
  height: 14px;
  transition: transform 0.2s ease;
}

.users-filter-btn.is-open svg,
.users-sort-btn.is-open svg {
  transform: rotate(180deg);
}

.users-search {
  color: #b2b2b2;
  gap: 6px;
  transition: width 0.2s ease;
}

.users-search svg {
  transition: color 0.2s ease;
  pointer-events: none;
}

.users-search:hover svg {
  color: #111;
}

.users-search input {
  border: none;
  outline: none;
  background: transparent;
  width: 60px;
  font-size: 0.75rem;
  color: #b2b2b2;
  transition: width 0.2s ease;
}

.users-search.is-open {
  padding: 6px 14px;
}

.users-search.is-open input {
  width: 160px;
  color: #111;
}

.users-bulk-btn {
  display: inline-flex;
  max-width: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px) scale(0.96);
  filter: blur(6px);
  overflow: hidden;
  padding: 6px 0;
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease, visibility 0.25s ease, max-width 0.25s ease, padding 0.25s ease;
}

.users-bulk-btn.is-visible {
  max-width: 140px;
  padding: 6px 12px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.users-filter-wrap,
.users-sort-wrap {
  position: relative;
}

.users-filter-menu,
.users-sort-menu {
  position: absolute;
  top: 36px;
  right: 0;
  background: var(--background-color);
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  filter: blur(6px);
  pointer-events: none;
  z-index: 1000;
  min-width: 280px;
  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.users-filter-menu {
  width: 420px;
}

.users-filter-menu.is-open,
.users-sort-menu.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.users-filter-menu h4 {
  margin: 0 0 8px;
  font-size: 0.85rem;
}

.users-filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.users-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.users-filter-options button {
  border: 1px solid #f0c2a4;
  background: #f6e2d4;
  color: #c65d1d;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 0.7rem;
  cursor: pointer;
}

.users-filter-options button:hover,
.users-filter-all:hover,
.users-filter-row:hover {
  background: var(--border-color);
}

.users-filter-options button:hover,
.users-filter-all:hover,
.users-filter-row:hover {
  background: var(--border-color);
}

.users-filter-options button.is-active {
  box-shadow: inset 0 0 0 2px #111;
  color: var(--background-color);
}

.users-sort-menu button {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  padding: 6px 0 6px 28px;
  text-align: left;
  cursor: pointer;
  font-size: 0.8rem;
  position: relative;
}

.users-sort-menu button:hover {
  background: var(--border-color);
}

.users-sort-menu button.is-selected::before {
  content: "✓";
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #111;
}

.users-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.users-filter-pill {
  border: 1px solid #9ebdf6;
  background: #e8f0ff;
  color: #2e63d5;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  filter: blur(6px);
}

.users-filter-pill.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.users-filter-pill-role {
  color: var(--background-color);
}

.users-filter-pill-grade {
  background: #e8f0ff;
  color: #2e63d5;
}

.users-filter-pill-alert {
  background: #ffe4e2;
  color: #e1504a;
}

.pill-icon {
  position: relative;
  width: 12px;
  height: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
}

.pill-icon svg {
  width: 12px;
  height: 12px;
}

.users-filter-pill:hover .pill-icon {
  color: transparent;
}

.users-filter-pill:hover .pill-icon svg {
  opacity: 0;
}

.users-filter-pill:hover .pill-icon::after {
  content: "×";
  position: absolute;
  color: #2e63d5;
}

.users-filter-more {
  position: relative;
  font-size: 0.7rem;
  color: #6f6f6f;
  cursor: default;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  filter: blur(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.users-filter-more.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.users-filter-more-pop {
  position: absolute;
  top: 20px;
  left: 0;
  background: var(--background-color);
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1000;
  min-width: 140px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.users-filter-more-pop ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.7rem;
  color: #4f4f4f;
}

.users-filter-more:hover .users-filter-more-pop {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.users-filter-pill-compact {
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 0.72rem;
  gap: 6px;
}

.users-filter-pill-compact .pill-remove {
  margin-left: 4px;
  font-size: 0.75rem;
  opacity: 0.6;
}

.users-list {
  display: flex;
  flex-direction: column;
}

.user-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease, background 0.2s ease;
  cursor: pointer;
  user-select: none;
  position: relative;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  filter: blur(6px);
}

.user-row.is-loaded {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.user-row + .user-row {
  margin-top: 8px;
}

.user-row + .user-row::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 12px;
  right: 12px;
  border-top: 1px solid #efefef;
}

.user-row:hover {
  background: var(--border-color);
}

.user-row.is-selected {
  background: #f0f6ff;
  border-color: #cfe1ff;
}

.users-list .user-avatar {
  width: 32px;
  height: 32px;
  font-size: 0.75rem;
  margin-right: 0;
}

.user-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.user-name {
  font-size: 0.95rem;
  max-width: 120px;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-name-row:has(#getPlusBtn.hidden) .user-name {
  max-width: 215px;
}

.user-name.small{
  font-size: 0.8rem;
  color: var(--light-text);
  display: flex;
  gap: 5px;
}

.user-name-stack{
  display: flex;
  align-items: baseline;
  flex-direction: column;
}

.user-alert {
  color: #e1504a;
  font-size: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.user-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  color: #8a8a8a;
}

.user-role-pill {
  padding: 2px 6px;
  border-radius: 6px;
  color: var(--background-color);
  font-size: 0.7rem;
}

.user-unverified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 6px;
  background: #fff3bf;
  color: #a16a00;
  font-size: 0.7rem;
  position: relative;
}

.user-unverified svg {
  width: 12px;
  height: 12px;
}

.user-unverified-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--background-color);
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 8px 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  font-size: 0.7rem;
  color: #4f4f4f;
  width: 220px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 2;
}

.user-unverified:hover .user-unverified-pop {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.user-edit-btn {
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  background: #111;
  color: var(--background-color);
  font-size: 0.75rem;
  font-weight: 600;
  display: none;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease;
}

.user-row:hover .user-edit-btn,
.user-row:focus-within .user-edit-btn {
  display: inline-flex;
}

.user-edit-btn svg {
  width: 14px;
  height: 14px;
}

.user-edit-btn:hover {
  background: var(--contrast);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.user-edit-btn:active {
  transform: translateY(1px);
}

.users-load-more {
  align-self: center;
  border: none;
  background: var(--contrast);
  color: var(--background-color);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
}

.users-load-more.is-disabled,
.users-load-more:disabled {
  background: #d3d3d3;
  color: #7b7b7b;
  cursor: not-allowed;
}

.users-edit-modal .modal-box {
  width: auto;
  background: transparent;
  box-shadow: none;
  padding: 0;
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.users-edit-modal {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(8px);
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.users-edit-modal.hidden {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(0);
}

.users-edit-modal.hidden .modal-box {
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  filter: blur(10px);
}

.users-edit-modal:not(.hidden) .modal-box {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.add-user-modal .modal-box {
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.add-user-modal .addnewuserpop {
  width: 450px;
  border-color: #d9d9d9;
  border-width: 1px;
  border-style: solid;
  display: block;
  border-radius: 15px;
  padding: 15px;
  justify-content: center;
  background: var(--background-color);
}

.add-user-modal .addnewusermanual {
  width: 450px;
  border-color: #d9d9d9;
  border-width: 1px;
  border-style: solid;
  display: block;
  border-radius: 15px;
  padding: 15px;
  justify-content: center;
  background: var(--background-color);
}

.add-user-modal .addnewuserfile {
  width: 450px;
  border-color: #d9d9d9;
  border-width: 1px;
  border-style: solid;
  display: block;
  border-radius: 15px;
  padding: 15px;
  justify-content: center;
  background: var(--background-color);
}

.add-user-modal .addnewuserpop .toprow {
  display: inline-flex;
}

.add-user-modal .addnewusermanual .toprow {
  display: flex;
}

.add-user-modal .addnewuserfile .toprow {
  display: inline-flex;
}

.add-user-modal .titletext2 {
  margin-top: 3px;
  margin-left: 10px;
}

.add-user-modal .adduser-button {
  width: 100%;
  display: flex;
  padding: 8px 11px;
  border-radius: 15px;
  border-color: #d9d9d9;
  border-style: solid;
  border-width: 1px;
  background-color: var(--background-color);
  margin-top: 15px;
  cursor: pointer;
  transition: transform 0.1s, background-color 0.1s;
}

.add-user-modal .svg1 {
  width: 20px;
  display: inline-block;
  align-self: start;
}

.add-user-modal .penicon {
  width: 25px;
  margin-left: auto;
}

.add-user-modal .toptext {
  font-size: 1rem;
  text-align: left;
}

.add-user-modal .describtor {
  font-size: 0.8rem;
  text-align: left;
  margin-top: 2px;
  color: #9f9f9f;
  transition: color 0.1s;
}

.add-user-modal .saiicon {
  margin-left: auto;
  width: 35px;
}

.add-user-modal .adduser-button:hover {
  background-color: #f1f1f1;
}

.add-user-modal .adduser-button:hover .describtor {
  color: #5c5c5c;
}

.add-user-modal .adduser-button:active {
  transform: scaleX(1.02);
}

.add-user-modal .addnewusermanual .inputbox {
  margin-top: 15px;
}

.add-user-modal .texttop2 {
  font-size: 0.8rem;
  color: #303030;
  margin-bottom: 5px;
}

.add-user-modal .inputusers {
  width: 95%;
  padding: 12px;
  color: var(--contrast);
  border-radius: 15px;
  border-style: solid;
  border-width: 1px;
  border-color: #c7c7c7;
}

.add-user-modal .adduserfin {
  border: none;
  border-radius: 15px;
  background-color: var(--contrast);
  color: var(--background-color);
  display: flex;
  padding: 9px 17px;
  margin-left: auto;
  cursor: pointer;
}

.add-user-modal .bottom-row {
  display: flex;
  margin-top: 15px;
  justify-content: center;
  align-items: center;
}

.add-user-modal .adduserprev {
  border: #d9d9d9;
  border-width: 1px;
  border-radius: 15px;
  border-style: solid;
  background-color: var(--background-color);
  color: var(--contrast);
  display: flex;
  padding: 9px 17px;
  width: 20%;
  justify-content: center;
  cursor: pointer;
  margin-right: auto;
}

.add-user-modal .addusernext {
  border: #d9d9d9;
  border-width: 1px;
  border-radius: 15px;
  border-style: solid;
  background-color: var(--background-color);
  color: var(--contrast);
  display: flex;
  padding: 9px 17px;
  width: 20%;
  justify-content: center;
  cursor: pointer;
  margin-left: auto;
}

.add-user-modal .outof {
  color: #929292;
  font-size: 0.9rem;
}

.add-user-modal .adduserprev:disabled,
.add-user-modal .addusernext:disabled {
  background: #efefef;
  color: #b3b3b3;
  cursor: not-allowed;
}

.add-user-modal .uploadbox {
  margin-top: 15px;
}

.add-user-modal .upload {
  border-color: #d9d9d9;
  border-width: 1px;
  border-style: solid;
  border-radius: 15px;
  padding: 15px;
  height: 120px;
  background-color: #d4d4d47c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.add-user-modal .file-preview-row {
  padding: 0;
  overflow: hidden;
}

.add-user-modal .adduser-file-chip {
  width: 100%;
  margin-top: 12px;
  background: var(--background-color);
  box-shadow: 0 6px 16px var(--hover-color);
  flex: 1;
  align-items: center;
}

.add-user-modal .adduser-file-chip .file-chip-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(0, 0, 0, 0.35);
  position: relative;
}

.add-user-modal .adduser-file-chip .file-chip-progress {
  width: 0%;
  transition: width 1s linear;
}

.add-user-modal .adduser-file-chip .file-chip-text {
  display: flex;
  flex-direction: column;
  min-height: 46px;
}

.add-user-modal .adduser-file-chip .file-chip-time {
  font-size: 0.7rem;
  color: #c0c0c0;
  margin-top: 2px;
  text-align: left;
}

.add-user-modal .adduser-file-chip .file-chip-time.is-importing {
  background: linear-gradient(90deg, #c7c7c7 0%, #9b9b9b 50%, #c7c7c7 100%);
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: addUserImportShimmer 2s linear infinite;
}

.add-user-modal .adduser-file-chip.is-complete .file-chip-time {
  color: #4f4f4f;
}

.add-user-modal .adduser-file-chip .file-chip-type {
  margin-top: 2px;
}

.add-user-modal .adduser-file-chip.is-importing .file-chip-type {
  display: none;
}

.add-user-modal .adduser-file-chip.is-complete .file-chip-type {
  display: none;
}
@keyframes addUserImportShimmer {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 200% 50%;
  }
}

.add-user-modal .adduserfin:disabled {
  background: #d2d2d2;
  color: #9b9b9b;
  cursor: not-allowed;
}

.add-user-modal .upload-svg {
  width: 30px;
  margin-right: 7px;
}

.add-user-modal .bottomtextupload {
  color: #858585;
}

.add-user-modal .adduserimport {
  border: none;
  border-radius: 15px;
  background-color: #d2d2d2;
  color: #606060;
  display: flex;
  padding: 9px 17px;
  cursor: not-allowed;
  justify-content: center;
  width: 100%;
}

.add-user-modal .adduserimport.is-ready {
  background: var(--contrast);
  color: var(--background-color);
  cursor: pointer;
}

.add-user-modal .adduser-file-progress {
  margin-top: 12px;
}

.add-user-modal .adduser-file-progress-bar {
  width: 100%;
  height: 8px;
  background: #e5e5e5;
  border-radius: 999px;
  overflow: hidden;
}

.add-user-modal .adduser-file-progress-fill {
  height: 100%;
  width: 0%;
  background: #111;
  transition: width 1s linear;
}

.add-user-modal .adduser-file-progress-text {
  margin-top: 6px;
  font-size: 0.75rem;
  color: #b3b3b3;
  text-align: right;
}

.add-user-modal .adduser-file-chip.is-importing .file-chip-delete {
  display: none;
}

.add-user-modal .adduser-file-chip.is-importing .file-chip-icon span {
  opacity: 0.4;
}

.add-user-modal.hidden {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.add-user-modal {
  transition: opacity 0.3s ease, backdrop-filter 0.3s ease;
}

.add-user-modal .modal-box {
  transition: opacity 0.3s ease, transform 0.3s ease, filter 0.3s ease;
}

.add-user-modal.hidden .modal-box {
  opacity: 0;
  transform: translateY(12px) scale(0.96);
  filter: blur(10px);
}

.add-user-modal:not(.hidden) .modal-box {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.users-edit-box .main {
  width: 550px;
  border-color: #d9d9d9;
  border-width: 1px;
  border-style: solid;
  border-radius: 15px;
  background: var(--background-color);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

.users-edit-box .top {
  display: block;
  padding: 11px 11px 1px 11px;
}

.users-edit-box .edit {
  border-color: #d9d9d9;
  border-width: 1px;
  border-style: solid;
  display: block;
  border-radius: 13px;
  margin: 11px;
  padding: 11px;
}

.users-edit-box .close {
  width: 20px;
  float: right;
  cursor: pointer;
  background: transparent;
  border: none;
  color: inherit;
}

.users-edit-box .leftedit {
  width: 46%;
  display: inline-block;
  vertical-align: top;
}

.users-edit-box .rightedit {
  width: 46%;
  margin-left: 35px;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.users-edit-box .texttop {
  font-size: 0.8rem;
  color: #adadad;
  margin-bottom: 5px;
}

.users-edit-box .input {
  padding: 9px;
  color: var(--contrast);
  border-radius: 6px;
  border-style: solid;
  border-width: 1px;
  border-color: #c7c7c7;
  margin-bottom: 15px;
  width: 91%;
}

.users-edit-box .sendnew {
  background-color: var(--contrast);
  border: none;
  width: 100%;
  color: var(--background-color);
  padding: 9px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  overflow: hidden;
}

.users-edit-box .sendnew svg {
  transition: transform 0.4s ease;
  transform-origin: center;
}

.users-edit-box .sendtext {
  vertical-align: top;
  display: inline-block;
  margin-top: 1px;
}

.users-edit-box .Role {
  background-color: #eb8f5e;
  border: none;
  color: var(--background-color);
  padding: 5px 10px;
  border-radius: 6px;
  margin-bottom: 21px;
  margin-top: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.users-edit-role-panel {
  position: absolute;
  top: 58px;
  left: 0;
  right: 0;
  background: var(--background-color);
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  z-index: 3;
}

.users-edit-role-panel.is-open {
  display: flex;
}

.users-edit-role-option {
  border: none;
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--background-color);
  cursor: pointer;
  text-align: left;
  font-size: 0.75rem;
}

.users-edit-box .grades {
  display: flex;
  gap: 8px;
}

.users-edit-box .gradebut {
  background-color: #d5d5d5;
  border: none;
  color: #818181;
  padding: 5px 10px;
  border-radius: 6px;
  margin-bottom: 40px;
  margin-top: 4px;
  cursor: pointer;
}

.users-edit-box .gradebut.is-active {
  background: #111;
  color: var(--background-color);
}

.users-edit-box .update {
  background-color: var(--contrast);
  border: none;
  width: 46%;
  color: var(--background-color);
  padding: 9px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background-color 0.2s ease;
}

.users-edit-box .update.is-saved {
  background: #2ecc71;
}

.users-edit-box .cancel {
  background-color: var(--background-color);
  border: solid;
  margin-left: 10px;
  border-color: #d2d2d2;
  border-width: 1px;
  width: 46%;
  color: var(--contrast);
  padding: 9px;
  border-radius: 6px;
  cursor: pointer;
}

.users-edit-box .middle {
  display: block;
  padding: 11px;
  margin-top: 25px;
}

.users-edit-box .svg1 {
  width: 20px;
  display: inline-block;
}

.users-edit-box .title {
  display: inline-block;
  vertical-align: top;
  margin-top: 2px;
}

.users-edit-box .svg2 {
  width: 13px;
  display: inline-block;
  vertical-align: top;
  margin-top: 3px;
}

.users-edit-box .alert {
  color: #e94c4c;
  display: inline-block;
  font-size: 0.7rem;
  vertical-align: top;
  margin-top: 4px;
}

.users-edit-box .Activity {
  border-color: #d9d9d9;
  border-width: 1px;
  border-style: solid;
  display: block;
  border-radius: 13px;
  margin: 1px 11px 11px 11px;
  padding: 11px;
}

.users-edit-box .number {
  font-weight: 900;
  font-size: 2rem;
}

.users-edit-box .alert2 {
  color: #e94c4c;
  margin-top: 6px;
}

.users-edit-box .bottom {
  display: block;
  padding: 11px;
  margin-top: 25px;
}

.users-edit-box .Archive {
  border-color: #d9d9d9;
  border-width: 1px;
  border-style: solid;
  display: block;
  border-radius: 13px;
  margin: 1px 11px 11px 11px;
  padding: 11px;
}

.users-edit-box .info1 {
  border-color: #d9d9d9;
  width: 70%;
  border-width: 1px;
  border-style: solid;
  display: inline-block;
  border-radius: 6px;
  padding: 11px;
  color: #898989;
}

.users-edit-box .icon {
  width: 16px;
  display: inline-block;
  stroke: currentColor;
}

.users-edit-box .archbut {
  background-color: var(--background-color);
  border: solid;
  margin-left: 10px;
  border-color: #d2d2d2;
  border-width: 1px;
  color: var(--contrast);
  padding: 9px;
  width: 21.5%;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  position: relative;
  overflow: hidden;
}

.users-edit-box .archbut:hover {
  border-color: #e94c4c;
  box-shadow: 0 0 0 2px rgba(233, 76, 76, 0.2);
}

.users-edit-box .buttontext {
  vertical-align: top;
  display: inline-block;
  margin-top: 1px;
  transition: color 0.15s;
}

.users-edit-box .archbut.is-archived {
  background-color: var(--red-text);
  border-color: var(--red-text);
  color: var(--contrast-color);
}

.users-edit-box .sendnew.is-sent svg {
  transform: rotate(-12deg);
}

.users-edit-modal.is-bulk input:disabled {
  background: #f1f1f1;
  color: #9b9b9b;
}

.users-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.users-edit-box label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.75rem;
}

.users-edit-box input {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 6px 8px;
}

.users-edit-pill {
  border-radius: 8px;
  background: #f0f0f0;
  padding: 6px 8px;
}

.users-edit-activity {
  margin-top: 8px;
  padding: 10px;
  border-radius: 8px;
  background: #f7f7f7;
}

.users-edit-metric {
  font-size: 1.4rem;
  font-weight: 600;
}

@media (max-width: 900px) {
  .users-panel-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .users-controls {
    flex-wrap: wrap;
  }
}
.info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: 4px;
  border-radius: 50%;
  background: #f0f0f0;
  color: #666;
  font-size: 0.7rem;
  line-height: 1;
}

.info-tooltip-pop {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--background-color);
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  padding: 10px;
  width: 180px;
  display: none;
  flex-direction: column;
  gap: 8px;
  z-index: 10000;
}

.info-tooltip:hover .info-tooltip-pop {
  display: flex;
}

.info-tooltip-title {
  font-weight: 600;
  font-size: 0.75rem;
  color: #111;
}

.info-tooltip-text {
  font-size: 0.7rem;
  color: #5f5f5f;
}

.info-tooltip-image {
  width: 100%;
  height: 60px;
  border-radius: 8px;
  background: #e9e9e9;
}

@media (max-width: 720px) {
  .role-edit {
    grid-template-columns: 1fr;
  }

  .role-customization {
    border-left: none;
    padding-left: 0;
  }
}
.users-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
  font-size: 0.85rem;
  color: #6b6b6b;
  cursor: pointer;
}

.users-filter-row:first-of-type {
  border-top: none;
}

.users-filter-all {
  border: none;
  background: transparent;
  color: #6b6b6b;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  width: 100%;
  justify-content: flex-end;
}

.users-filter-all svg {
  width: 14px;
  height: 14px;
}

.users-filter-panel {
  display: block;
  visibility: hidden;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  background: var(--background-color);
  position: absolute;
  z-index: 1200;
  width: 240px;
  opacity: 0;
  transform: translateY(10px) scale(0.96);
  filter: blur(8px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, filter 0.25s ease;
}

.users-filter-panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  pointer-events: auto;
}

.users-filter-actions {
  display: flex;
  justify-content: flex-end;
}

.users-filter-actions button {
  border: none;
  background: var(--contrast);
  color: var(--background-color);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
}

.institutioninviteModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 120100;
  padding: 20px;
  box-sizing: border-box;
}

@keyframes gradientMove {
  0% { background-color: #C7C7C7; }
  50% { background-color: #9b9b9b; }
  100% { background-color: #C7C7C7; }
}

@keyframes skeletonShimmer {
  0% { background-position: 200% 50%; }
  100% { background-position: -200% 50%; }
}

.bootOverlayText,
#bootOverlayText {
  width: 100px;
  background: linear-gradient(
    96deg,
    var(--invite-skeleton-base) 0%,
    var(--invite-skeleton-highlight) 50%,
    var(--invite-skeleton-base) 100%
  );
  background-size: 260% 100%;
  display: flex;
  height: 20px;
  border-radius: 8px;
  animation: skeletonShimmer 1.85s linear infinite;
}

.bootOverlayInputButton {
  height: 32px;
  background: linear-gradient(
    96deg,
    var(--invite-skeleton-base) 0%,
    var(--invite-skeleton-highlight) 50%,
    var(--invite-skeleton-base) 100%
  );
  background-size: 260% 100%;
  display: flex;
  border-radius: 8px;
  animation: skeletonShimmer 1.85s linear infinite;
}

.institutioninvite {
  display: flex;
  width: 400px;
  max-width: 100%;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  padding: 12px;
  gap: 8px;
  background: var(--background-color);
  box-sizing: border-box;
}

.UserTextLarge {
  display: flex;
  color: var(--contrast);
  font-size: 1.2rem;
  font-weight: 500;
}

.UserTextLarge.IntitutionTitle{
  display: inline-block;
}


.settingsText {
  color: var(--text-color);
  display: flex;
  font-size: 0.95rem;
}

.saved_card_icon {
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  align-items: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.saved_card_icon svg {
  display: block;
}

.auth_btn_spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 999px;
  opacity: 0.75;
  animation: authBtnSpinnerRotate 0.65s linear infinite;
}

.BoldTextNormal {
  color: var(--contrast);
  font-weight: 600;
  font-size: 1rem;
  padding: 12px 12px 0 12px;
}

.institutioninviteBox {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 4px;
}

.PaymentPageFieldRow {
  display: flex;
  align-items: center;
}

.PaymentPageFieldIcons {
  display: flex;
  width: 19px;
  color: var(--med-text);
  margin-right: 8px;
}

.smallTextPayment {
  display: flex;
  color: var(--med-text);
  font-size: 0.9rem;
  font-weight: 500;
}

.smallTextPayment.BlueText {
  color: var(--blue-accent);
}

.PaymentPageFieldList {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.institutioninviteControls {
  display: flex;
  gap: 12px;
  margin-left: auto;
}

.AcceptInvBtn {
  font-size: 0.9rem;
  display: flex;
  align-self: start;
  align-items: center;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--contrast);
  color: var(--background-color);
}

.AcceptInvBtn:hover {
  background-color: var(--med-text);
  color: var(--background-color);
}

.DeclineInvBtn {
  font-size: 0.9rem;
  display: flex;
  align-self: start;
  align-items: center;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: var(--red-bg);
  color: var(--red-text);
}

.DeclineInvBtn:hover {
  background-color: var(--red-text);
  color: var(--contrast-color);
}

.DeclineInvBtn:disabled,
.AcceptInvBtn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

@media (max-width: 620px) {
  .institutioninvite {
    width: 100%;
  }

  .institutioninviteControls {
    margin-left: 0;
    justify-content: flex-end;
  }
}

/* ===============================
   SETTINGS VIEW (NEW)
================================ */
.main-view {
  height: calc(100vh - var(--topbar-height));
  overflow: hidden;
  justify-content: center;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
}

#chatView {
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  min-height: 0;
  position: relative;
}

.chat-main-page-pane {
  display: none;
  width: 50%;
  max-width: 50%;
  min-height: 0;
  overflow: hidden;
}

#chatView.is-main-page-ui .chat-main-page-pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#chatView.is-main-page-ui .chat-main-page-pane {
  position: absolute;
  top: var(--topbar-height, var(--slanter-topbar-h, 64px));
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
}

#chatView.is-main-page-ui > .chat-scroll,
#chatView.is-main-page-ui > .input-container,
#chatView.is-main-page-ui > .input-container-centered,
#chatView.is-main-page-ui > .inputbarGreeting,
#chatView.is-main-page-ui > .input-disclaimer,
#chatView.is-main-page-ui > .chat-bottom-mask,
#chatView.is-main-page-ui > .scroll-down {
  display: none !important;
}

/* Hide tool chat, input bar, and bottom padding when quiz/flashcards are shown in a tab host */
.is-split-tool-host #toolChatLog,
.is-split-tool-host #toolChatbar,
.is-split-tool-host #toolInputDisclaimer,
.is-split-tool-host #toolBottomMask,
.is-split-tool-host .tool-chatpad {
  display: none !important;
}

.chat-bottom-mask {
  position: absolute;
  left: 0;
  right: var(--chat-scrollbar-shift, 0px);
  width: auto;
  align-self: stretch;
  bottom: 0;
  height: 112px;
  background: var(--background-color);
  pointer-events: none;
  z-index: 5;
}

/* Keep all composer containers above visual bottom masks. */
#chatView > .input-container,
#chatView > .input-container-centered,
#toolChatbar {
  z-index: 108 !important;
}

.settings-view {
  background: var(--background-color);
  overflow: hidden;
  flex-direction: column;
}

.saves-view {
  background: var(--background-color);
  flex-direction: column;
  justify-content: flex-start;
}

.settings-topbar {
  flex: 0 0 auto;
}

.settings-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  margin: auto;
  max-width: 1530px;
  display: flex;
}

.saved-body {
  max-width: 763px;
  box-sizing: border-box;
  width: 100%;
  align-self: center;
  display: flex;
  flex-direction: column;
  margin: 24px 12px 0 12px;
  padding: 0 12px;
  padding-top: 24px;
  transition: all 0.1s ease;
  gap: 24px;
  overflow: visible;
  padding-bottom: 18px;
}

#CollectionView,
#CollectionItemView {
  width: 100% !important;
  max-width: 100% !important;
  align-self: stretch !important;
  flex-direction: column;
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

#CollectionView .saved-body,
#CollectionItemView .saved-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  align-self: stretch;
  margin: 0;
  padding: 24px 12px 26px;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

#CollectionView .saved-body::-webkit-scrollbar,
#CollectionItemView .saved-body::-webkit-scrollbar {
  width: 10px !important;
}

#CollectionView .saved-body::-webkit-scrollbar-track,
#CollectionItemView .saved-body::-webkit-scrollbar-track {
  background: var(--background-color) !important;
  border-radius: 11px !important;
}

#CollectionView .saved-body::-webkit-scrollbar-thumb,
#CollectionItemView .saved-body::-webkit-scrollbar-thumb {
  background: var(--border-color) !important;
  border-radius: 11px !important;
  border: 1px solid var(--background-color) !important;
}

@supports not selector(::-webkit-scrollbar) {
  #CollectionView .saved-body,
  #CollectionItemView .saved-body {
    scrollbar-color: var(--border-color) var(--background-color) !important;
  }
}

#CollectionView .saved-body > *,
#CollectionItemView .saved-body > * {
  width: min(100%, 765px);
  max-width: 765px;
  margin-left: auto;
  margin-right: auto;
}

/* Match split chat horizontal inset/centering for Saved surfaces in both panes. */
#chatView.is-main-page-ui .chat-main-page-pane > .saved-body.split-mounted-surface {
  width: min(calc(100% - 32px), 700px);
  max-width: min(calc(100% - 32px), 700px);
  margin-left: auto;
  margin-right: auto;
}

.settings-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  /* Extend the scroll gutter to the very right edge of the screen while
     keeping the actual content in place via matching padding. */
  margin-right: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
}

.settings-pane {
  flex: 1;
  display: flex;
  width: 100%;
  box-sizing: border-box;
}

.settings-sidebar {
  width: 180px;
  display: flex;
  padding: 18px;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
  background: var(--background-color);
}

.settings-mobile-nav {
  display: none;
  width: 100%;
  position: relative;
  padding: 18px 18px 0;
  box-sizing: border-box;
}

.settings-sb-btn.settings-mobile-trigger {
  position: relative;
  background-color: var(--hover-color);
}

.settings-sb-btn.settings-mobile-trigger .settingsBtnIcon {
  margin-left: auto;
}

.settings-sb-btn.settings-mobile-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20px;
  border-bottom: 1px solid var(--border-color);
  pointer-events: none;
}

.SettingDropDown.settings-mobile-dropdown {
  width: calc(100% - 36px);
  position: absolute;
  inset: auto auto auto 18px;
  top: calc(100% - 2px);
  z-index: 150;
  box-sizing: border-box;
  overflow-x: hidden;
  max-width: 100%;
}

.settings-mobile-option.is-active {
  background-color: var(--hover-color);
}

.settings-sb-btn {
  display: flex;
  align-items: center;
  padding: 14px 8px;
  gap: 14px;
  height: 35px;
  background-color: transparent;
  width: 100%;
  border-radius: 8px;
  border: none;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-color-sidebar);
}

.settings-sb-btn:hover {
  background-color: var(--hover-color);
  color: var(--text-color);
}

.settings-sb-btn.is-active {
  background-color: var(--hover-color);
  color: var(--text-color);
}

.settings-sb-text {
  display: flex;
  align-self: center;
}

.settings-sb-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-self: center;
}

.settings-back-btn {
  margin-top: auto;
  background: var(--border-color);
  color: #555;
}

.settingsWindow {
  display: flex;
  padding: 18px;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
}

.settings-body.settings-use-mobile-nav {
  flex-direction: column;
  overflow-x: hidden;
}

.settings-body.settings-use-mobile-nav .settings-sidebar {
  display: none;
}

.settings-body.settings-use-mobile-nav .settings-mobile-nav {
  display: flex;
}

.settings-body.settings-use-mobile-nav .settingsWindow {
  padding-top: 32px;
}

@media (max-width: 720px) {
  #settingsView .settings-body {
    flex-direction: column;
    overflow-x: hidden;
  }

  #settingsView .settings-sidebar {
    display: none;
  }

  #settingsView .settings-mobile-nav {
    display: flex;
  }

  #settingsView .settingsWindow {
    padding-top: 32px;
  }
}

.settingsTextBox {
  display: flex;
  flex-direction: column;
}

.themeRow {
  display: flex;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.themeBtn {
  opacity: 0.7;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  outline-offset: 0;
  transition: transform 0.2s ease, outline  0.2s ease, opactiy  0.2s ease;
}

.themeBtn.mobile:hover .themeImg {
  outline: 1px solid var(--light-text );
}

.themeBtn.mobile.active .themeImg {
  outline: 2px solid var(--blue-accent);
  outline-offset: 2px;
}

.themeText {
  color: var(--text-color);
  text-align: center;
  padding-top: 8px;
}

.settingsBlock {
  gap: 6px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 16px;
  width: 100%;
  padding-top: 16px;
  display: flex;
  align-items: center;
}

.settingsSubText {
  color: var(--light-text);
  font-size: 0.8rem;
  width: 250px;
  padding-top: 4px;
}

.settingsBtn {
  color: var(--text-color);
  font-size: 0.9rem;
  margin-left: auto;
  display: flex;
  align-items: center;
  background-color: var(--background-color);
  gap: 5px;
  border: none;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: background-color 0.14s ease, transform 0.1s ease, box-shadow 0.14s ease;
}

.settingsBtn:hover {
  background-color: var(--hover-color);
}

.settings-btn-disabled,
.settings-btn-disabled:hover {
  background-color: var(--border-color);
  color: #9b9b9b;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.settings-btn-disabled .settingsBtnIconEdit {
  display: none;
}

.settingsBtnIcon {
  width: 18px;
  display: flex;
}

.customPrompt {
  font-size: 0.9rem;
  color: var(--text-color);
  margin-top: 12px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: block;
  width: 100% !important;
  height: 100px;
  padding: 10px;
  box-sizing: border-box;
  resize: none;
  overflow-y: auto;
  overflow-x: hidden;
}

.customPrompt:hover{
  border-color: var(--border-color-sharper);
}

.settingsinputfield{
  position: relative;
  width: 100%;
}

.settingsCharCount {
  position: absolute;
  bottom: 8px;
  right: 8px;
  margin-top: 6px;
  margin-left: auto;
  color: #8e8e8e;
  font-size: 0.72rem;
}

.nickname {
  margin-top: 12px;
  background-color: var(--input-box-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  display: flex;
  max-width: 390px;
  height: 42px;
  padding: 10px;
  box-sizing: border-box;
}

.switchBtn {
  position: relative;
  background-color: var(--darker-hover-color);
  border: none;
  width: 32px;
  height: 18px;
  border-radius: 8px;
  margin-left: auto;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}

.switchBtnShape {
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: var(--background-color);
  border-radius: 5px;
  height: 14px;
  width: 15px;
  transition: transform 0.2s ease;
}

.switchBtn.is-on {
  background-color: var(--switch-bg);
}

.switchBtn.is-on .switchBtnShape {
  transform: translateX(13px);
}

.settingsBtnDefault{
  font-size: 0.9rem;
  margin-left: auto;
  display: flex;
  align-items: center;
  border: none;
  background-color: var(--add-btn-mobile-bg);
  color: var(--text-color);
  gap: 5px;
  border-radius: 8px;
  height: 34px;
  padding: 7px 10px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.settingsBtnText{
  font-size: 0.9rem;
}

.settingsBtnDefault:active{
  transform: scale(0.96);
}

.settingsBtnDefault.contrast {
  background-color: var(--contrast);
  color: var(--contrast-text);
}

.settingsBtnDefault.settingsBtnRed {
  background-color: var(--red-text);
  color: var(--white);
}

.settingsBtnDefault.settingsBtnRed:hover {
  background-color: var(--red-bg-light);
}

.settingsBtnDefault.settingsBtnRed.disabled {
  background-color: var(--file-btn-mobile-bg);
  color: var(--text-color);
  pointer-events: none;
  opacity: 0.5;
}


.SettingPaymentSide {
  display: flex;
  flex-direction: column;
}

.settingsBtnBlack {
  font-size: 0.9rem;
  margin-left: auto;
  display: flex;
  align-self: start;
  align-items: center;
  background-color: var(--contrast);
  border: none;
  color: var(--background-color);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  transition: background-color 0.14s ease, transform 0.1s ease, box-shadow 0.14s ease, opacity 0.14s ease;
}

.settingsBtnBlack:hover {
  background-color: var(--med-text);
}

.settingsBtnBlack:disabled,
.settingsBtnBlack.is-disabled {
  background-color: var(--disabled-bg);
  color: var(--disabled-text);
  cursor: not-allowed;
}

.settingsBtnBlack:disabled:hover,
.settingsBtnBlack.is-disabled:hover {
  background-color: var(--disabled-bg);
}

.settings-save-btn {
  margin-left: 0;
  align-self: flex-start;
  margin-top: 10px;
}

.settings-save-btn.is-loading {
  opacity: 0.9;
  pointer-events: none;
}

.settingsTextLarge {
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  margin: 8px 0;
}

.settingsTierDescription {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settingsTierDescriptor {
  display: flex;
  color: var(--med-text);
  font-size: 0.95rem;
}

.settingsTierDescriptorIcon {
  width: 19px;
  margin-right: 8px;
}

.settingsBtnIconEdit {
  width: 14px;
  display: flex;
  margin-left: 4px;
}

.emailRowSettings {
  display: flex;
  align-items: center;
  width: 100%;
}

.settingsBtnWhite {
  margin-left: auto;
  display: flex;
  align-items: center;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  color: var(--contrast);
  gap: 5px;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  transition: background-color 0.14s ease, transform 0.1s ease, box-shadow 0.14s ease;
}

.settingsBtnWhite:hover {
  background-color: var(--border-color);
}

.SettingDropDown {
    width: 200px;
    position: fixed;
    background-color: var(--input-bg);
    height: fit-content;
    padding: 4px;
    border: 1px solid var(--border-color-input);
    border-radius: 13px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 4px;
    z-index: 5000;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    right: 16px;
}

.SettingDropDown.wide {
  width: 300px;
}

.SettingDropDown.hidden {
  display: none;
}

.SettingDropDownOption {
    border-radius: 8px;
    gap: 14px;
    background-color: transparent;
    border: none;
    padding: 8px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: left;
    font-size: 0.9rem;
    width: 100%;
    color: var(--text-color);
    cursor: pointer;
    transition: all 0.15s ease;
}

.SettingDropDownOption:hover {
  background-color: var(--hover-color);
  color: var(--contrast);
}

.SettingDropDownOption.red{
  color: var(--red-text-light);
}

.SettingDropDownOption.red:hover{
  color: var(--white);
  background-color: var(--red-text);
}

.SettingDropDownSelectedIcon {
  width: 20px;
  display: flex;
  margin-left: auto;
}

.mobile-settings-select-dropdown {
  z-index: 2147483610;
  max-height: min(340px, calc(100vh - 80px));
  overflow-y: auto;
  width: 191px !important;
  min-width: 191px !important;
  max-width: 191px !important;
  transform-origin: var(--mobile-settings-select-origin-x, calc(100% - 12px)) var(--mobile-settings-select-origin-y, calc(100% - 12px));
}

.mobile-settings-select-dropdown .mobile-settings-select-option {
  justify-content: flex-start;
  gap: 8px;
}

.mobile-settings-select-dropdown .mobile-settings-select-option.active,
.mobile-settings-select-dropdown .mobile-settings-select-option.active:hover {
  background-color: transparent !important;
  color: var(--med-dark-text) !important;
}

.mobile-settings-select-dropdown .mobile-settings-select-option .TextButtonMobile.check {
  margin-left: auto;
}

.mobile-settings-select-dropdown.mobile-settings-select-enter {
  animation: mobileSettingsSelectFluidIn 320ms cubic-bezier(0.18, 0.88, 0.24, 1) both;
  will-change: transform, opacity;
}

.mobile-settings-select-dropdown.mobile-settings-select-exit {
  animation: mobileSettingsSelectFluidIn 280ms cubic-bezier(0.18, 0.88, 0.24, 1) reverse both;
  will-change: transform, opacity;
  pointer-events: none;
}

@keyframes mobileSettingsSelectFluidIn {
  0% {
    opacity: 0;
    transform: translate3d(0, var(--mobile-settings-select-from-y, 18px), 0) scale3d(0.965, 0.87, 1);
  }
  54% {
    opacity: 1;
    transform: translate3d(0, -1px, 0) scale3d(1.012, 1.028, 1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
  }
}

#settingsLanguageDropdown {
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
}

.settings-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

.settings-modal.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}

.settings-modal > * {
  transform: scale(1);
  transition: transform 0.2s ease;
}

.settings-modal.hidden > * {
  transform: scale(0.95);
}

.SettingPopupInput {
  font-size: 1rem;
  width: 400px;
  position: relative;
  background-color: var(--background-color);
  height: fit-content;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.SettingPopupButtonRow {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.settingsBtnGrey {
  margin-left: auto;
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  color: var(--contrast);
  gap: 5px;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background-color 0.14s ease, transform 0.1s ease, box-shadow 0.14s ease;
}

.settingsBtnGrey:hover {
  background-color: var(--hover-color);
}

.popupinput {
  color: var(--text-color);
  font-size: 1rem;
  margin-top: 12px;
  background-color: var(--input-box-bg);
  border: 1px solid var(--input-border);
  border-radius: 8px;
  display: block;
  width: 100%;
  height: 42px;
  padding: 8px 10px;
  box-sizing: border-box;
}

.popupinput.folder {
  margin-top: 0;
}

.popupinput:focus {
  outline: 1px solid var(--blue-accent-dark);
  box-shadow: 0 0 4px 4px var(--highlight-bg);
  border-color: var(--background-color);
}

.settings-pane .popupinput {
  margin-top: 0;
}

.payment-view {
  background: var(--background-color);
  overflow: hidden;
  flex-direction: column;
}

.payment-topbar {
  flex: 0 0 auto;
}

.PaymentPage {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 0 16px 32px;
}

.main-view2 {
  height: calc(100vh - var(--topbar-height));
  overflow: hidden;
}

.PaymentHeader {
  font-family: 'Slanter-Serif', serif;
  color: var(--text-color);
  font-size: 2rem;
  align-self: center;
  margin-bottom: 20px;
  margin-top: 48px;
}

.PaymentPageFields {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}

.smallTextPayment {
  display: flex;
  color: var(--med-text);
  font-size: 0.9rem;
  font-weight: 500;
}

.PaymentPageFieldList {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.PaymentPageFieldRow {
  display: flex;
  align-items: center;
}

.PaymentPageFieldIcons {
   display: flex;   
   width: 19px;
   color: var(--med-text);
   margin-right: 8px;
}

.plansmobile{
  display: none;
}

body.mobile-active .payment-view {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.mobile-active #PaymentView > .payment-topbar {
  display: none !important;
}

body.mobile-active.mobile-payment-open #PaymentView {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(var(--mobile-top-fade-h, 78px) + env(safe-area-inset-top, 0px));
  z-index: 120540;
}

body.mobile-active.mobile-payment-open #mobileTopbar {
  display: flex !important;
  z-index: 120552 !important;
  background: var(--background-color) !important;
}

body.mobile-active.mobile-payment-open #mobileTopbar::before {
  background: var(--background-color) !important;
  background-image: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.mobile-active.mobile-payment-open #mobileInputBar {
  display: none !important;
}

body.mobile-active .payment-view .PaymentHeader,
body.mobile-active .payment-view .PaymentPageFields {
  display: none;
}

body.mobile-active .payment-view .PaymentPage {
  padding: 10px 12px 0;
}

body.mobile-active.mobile-payment-open .payment-view .PaymentPage {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 220px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}

body.mobile-active .payment-view .plansmobile {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  padding: 0 12px;
}

body.mobile-active .payment-view .mobilepluspoints {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
}

body.mobile-active .payment-view .plansmobilebtm {
  margin-top: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  padding-top: 14px;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--background-color) 24px);
}

body.mobile-active.mobile-payment-open .payment-view .plansmobilebtm {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
  margin-top: 0;
  z-index: 120553;
}

body.mobile-active .payment-view .plansmobileprice {
  align-items: center;
  gap: 12px;
  padding: 0 20px;
  padding-bottom: 8px;
  display: flex;
  font-size: 2.5rem;
  color: var(--contrast);
}

body.mobile-active .payment-view .plansmobilepriceside {
  display: flex;
  font-size: 0.9rem;
  color: var(--med-text);
  max-width: 120px;
  line-height: 1.2;
}

body.mobile-active .payment-view .mobilepluspoint {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.1rem;
  color: var(--med-text);
}

body.mobile-active .payment-view .mobilepluspointicon {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #A9A963;
}

body.mobile-active .payment-view .mobileplanicon {
  width: 75px;
  height: auto;
  display: flex;
  align-self: center;
  color: #A9A963;
}

body.mobile-active .payment-view .mobileplantitle {
  font-size: 1.4rem;
  font-family: "Slanter-serif", serif;
  color: var(--contrast);
  align-self: center;
}

body.mobile-active .payment-view .mobileplanblue {
  font-size: 1.1rem;
  font-family: "Slanter-serif", serif;
  color: #2B74D9;
  align-self: center;
}

body.mobile-active .payment-view .plansmobiledisclaimer {
  font-size: 0.9rem;
  color: var(--med-text);
  align-self: center;
  text-align: center;
  padding-top: 8px;
}

body.mobile-active .payment-view .plansmobiledisclaimer.light {
  color: #A6A6A5;
  padding-top: 4px;
}

.threeDotsMenu {
  width: 18px;
  margin-left: auto;
  border: none;
  background-color: transparent;
  display: flex;
  color: var(--med-light-text);
  transition: color 0.2s ease;
  cursor: pointer;
  visibility: hidden;
}
.threeDotsMenu:hover{
  color: var(--contrast);
}

.sidebarchevron{
  width: 15px;
  visibility: visible;
  opacity: 0.55;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.sidebarchevron.mobile{
  width: 20px;
  height: 20px;
  transform: rotate(-90deg);
}

.sidebarsectionheader{
  user-select: none;
  padding-left: 9px;
  color: var(--med-text);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  gap: 4px;
  transition: color 0.2s ease;
  align-items: center;
}

.sidebarsectionheader:hover {
  color: var(--light-text);
}

.sidebarsectionheader:hover .sidebarchevron {
  opacity: 0.95;
}

.sidebar-folder-items,
.sidebar-chat-items {
  max-height: 4200px;
  opacity: 1;
  overflow: hidden;
  transition: max-height 0.18s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.14s linear;
}

.sidebar-folder-list.is-collapsed .sidebar-folder-items,
.sidebar-chat-list.is-collapsed .sidebar-chat-items {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
}

.sidebar-folder-list.is-collapsed .sidebarsectionheader .sidebarchevron,
.sidebar-chat-list.is-collapsed .sidebarsectionheader .sidebarchevron {
  transform: rotate(-90deg);
  opacity: 0.9;
}

#PinnedCollections .collectionList,
#AllCollections .collectionList {
  max-height: 4200px;
  opacity: 1;
  /* overflow: hidden;
  overflow-x: visible !important; */
  transition: max-height 0.18s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.14s linear;
}

#PinnedCollections.is-collapsed .collectionList,
#AllCollections.is-collapsed .collectionList {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
}

#PinnedCollections.is-collapsed .sidebarsectionheader .sidebarchevron,
#AllCollections.is-collapsed .sidebarsectionheader .sidebarchevron {
  transform: rotate(-90deg);
  opacity: 0.9;
}

#PinnedCollections.no-pinned {
  display: none;
}

.blueText {
color: var(--blue-accent-dark);
}

.UsersBox {
  display: flex;
  flex-direction: column;
}

.userSeparator {
  height: 1px;
  background-color: var(--border-color);
  width: 100%;
  transition: opacity 0.18s ease;
  opacity: 1;
}

.SavedRow{
  width: 100%;
  box-sizing: border-box;
  border: none;
  background: transparent;
  text-align: left;
  padding: 12px 14px;
  min-height: 52px;
  display: flex;
  border-radius: 0;
  align-items: center;
  transition: all 0.2s ease;
  cursor: pointer;
}

.SavedRow:hover{
  display: flex;
  border-radius: 13px;
  background-color: var(--file-btn-mobile-bg-trans);
  align-items: center;
}

/* hide separator below hovered row */
.SavedRow:hover + .userSeparator {
  opacity: 0;
}

/* hide separator above hovered row */
.userSeparator:has(+ .SavedRow:hover) {
  opacity: 0;
}

.userSeparator.is-hidden-adjacent-hover,
.userSeparator.is-hidden-adjacent-selected {
  opacity: 0;
}

.userInfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
  min-width: 0;
}

.SavedRow .TopRow .UserText{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.TopRow {
  width: 100%;
  display: flex;
  align-items: baseline;
}

.UserText {
  display: flex;
  color: var(--text-color);
  font-size: 1rem;
  font-weight: 500;
}

.UserTextSmall {
  display: flex;
  color: var(--med-text);
  font-size: 0.9rem;
  font-weight: 500;
}

.UserTextSmall.X{
  font-size: 0.8rem;
}

.UserTextSmall.Time {
  margin-left: auto;
  margin-right: 12px;
  position: relative;
  left: 44px;
  transition: all 0.2s ease;
}


.UserTextSmall.Time.search {
  left: 59px;
}

.SavedRow:hover .UserTextSmall.Time.search {
  left: 12px;
}

.SavedRow:hover .UserTextSmall.Time {
  left: 0;
}

/* Keep Saved date labels stable in split-mounted Saved surfaces. */
#chatView.is-main-page-ui .chat-main-page-pane > .saved-body.split-mounted-surface .UserTextSmall.Time,
#chatView.is-main-page-ui .chat-main-page-pane > .saved-body.split-mounted-surface .UserTextSmall.Time.search,
#chatView.is-main-page-ui .chat-main-page-pane > .saved-body.split-mounted-surface .SavedRow:hover .UserTextSmall.Time,
#chatView.is-main-page-ui .chat-main-page-pane > .saved-body.split-mounted-surface .SavedRow:hover .UserTextSmall.Time.search {
  left: 0;
  margin-right: 0;
  transition: none;
}

.BottomRow {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 26px;
  min-height: 26px;
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.SavedSubtitle {
  min-width: 0;
  max-width: calc(100% - 2px);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  flex: 1 1 auto;
  line-height: 1.2;
}

.UserRowStatus {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2B74D9;
  background-color: rgba(43, 116, 217, 0.33);
  padding: 4px 8px;
  font-size: 0.8rem;
  border-radius: 6px;
  min-width: 0;
  max-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 0 0 auto;
}

.EditIcon{
  width: 18px;
  display: flex;
}

.UsersSearchSlot {
  position: relative;
  flex: 1;
  min-height: 49px;
  z-index: 20;
  overflow: visible;
}

.UsersSearchFloatingHost {
  position: fixed;
  left: 0;
  top: 0;
  width: min(765px, calc(100vw - 48px));
  z-index: 1200000;
  opacity: 0;
  filter: blur(10px);
  pointer-events: none;
  transition:
    opacity 320ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.UsersSearchFloatingHost.hidden {
  display: none;
}

.UsersSearchFloatingHost.is-visible {
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
}

.searchbartop:has(.SearchBarInput:focus) {
  outline: 1px solid var(--blue-accent-dark);
  box-shadow: 0 0 4px 4px var(--highlight-bg);
  border-color: var(--background-color);
}

.searchbartop {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 auto;
  border-radius: 13px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  transition: outline 0.1s ease, outline-offset 0.1s ease;
}

.SearchAutofillTrap {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.SearchAutofillTrap input {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  padding: 0;
  margin: 0;
  opacity: 0;
}

.SearchBarExpanded {
  border-radius: 21px;
  border: 1px solid var(--border-color);
  background-color: var(--input-bg);
  box-sizing: border-box;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  transform-origin: top center;
  transform: scaleY(1);
  transition:
    border-radius 560ms cubic-bezier(0.22, 1.28, 0.32, 1),
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1.3, 0.3, 1);
  will-change: border-radius;
  backface-visibility: hidden;
}

.SearchBarForm {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.SearchBarExpanded.is-floating-search .SearchBarInput {
  font-size: 1.2rem; 
}

.SearchBarExpanded.is-floating-search {
  position: relative;
  left: 0;
  top: 0;
  right: auto;
  border-radius: 13px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.24), 0 3px 10px rgba(0, 0, 0, 0.12);
  --floating-search-collapsed-width: 400px;
  --floating-search-expanded-width: min(675px, 100%);
  width: var(--floating-search-collapsed-width);
  max-width: 100%;
  margin: 0 auto;
  transition:
    width 460ms cubic-bezier(0.22, 1, 0.36, 1),
    border-radius 0ms linear,
    box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 560ms cubic-bezier(0.22, 1.3, 0.3, 1);
}

.SearchBarExpanded.is-floating-search.is-wide {
  width: var(--floating-search-expanded-width);
  border-radius: 21px;
}

.SearchBarExpanded.is-floating-search .searchbartop {
  cursor: grab;
}

.searchbarBottom {
  display: flex;
  flex-direction: column;
  background-color: var(--input-bg);
  max-height: var(--searchbar-bottom-max-height, 360px);
  opacity: 1;
  overflow: hidden;
  transform-origin: top center;
  transform: translateY(0) scaleY(1);
  transition:
    height 560ms cubic-bezier(0.22, 1.2, 0.32, 1),
    max-height 560ms cubic-bezier(0.22, 1.2, 0.32, 1),
    opacity 260ms ease,
    transform 560ms cubic-bezier(0.22, 1.34, 0.3, 1);
  will-change: height, max-height, opacity, transform;
}

.SearchBarExpanded.is-collapsed{
  border-radius: 13px;
}

.SearchBarExpanded.is-collapsed .searchbartop {
  border-bottom-color: transparent;
}

.SearchBarExpanded.is-collapsed .searchbarBottom {
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px) scaleY(0.9);
  pointer-events: none;
}

.SearchBarExpanded:not(.is-collapsed) {
  animation: usersSearchShellSpringOpen 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes usersSearchShellSpringOpen {
  0% { transform: scaleY(0.968); }
  58% { transform: scaleY(1.018); }
  100% { transform: scaleY(1); }
}

.SearchBarInputWrap {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 6px;
  flex-wrap: wrap;
}

.SearchFilterTokens {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.SearchFilterTokens:empty {
  display: none;
}

.SearchFilterToken {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  padding-right: 4px;
  user-select: text;
  -webkit-user-select: text;
}

.SearchFilterTokenLabel {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.SearchFilterTokenIcon {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.SearchFilterTokenRemove {
  font-size: 12px;
  line-height: 1;
  opacity: 0.75;
}

.SearchFilterToken:hover .SearchFilterTokenRemove {
  opacity: 1;
}

.SearchFilterToken.is-text-selected {
  outline: 3px solid #82adfa;
  outline-offset: 1px;
  border-radius: 6px;
}

.SearchreslutCategories {
  padding: 8px 12px;
  display: grid;
  grid-template-columns: repeat(var(--search-category-columns, 2), minmax(0, 1fr));
  gap: 8px;
}

.SearchreslutCategory {
  border: none;
  cursor: pointer;
  border-radius: 8px;
  padding: 4px 0;
  color: var(--med-text);
  font-size: 0.9rem;
  background-color: var(--darker-hover-color);
  transition: all 0.2s;
}

.SearchreslutCategory:hover {
  color: var(--text-color);
  background-color: var(--hover-color);
}

.SearchreslutCategory.is-active {
  color: var(--background-color);
  background-color: var(--sidebar-controls);
}

.SearchreslutCategory:disabled {
  opacity: 0.45;
  cursor: default;
}

.searchresults {
  display: flex;
  flex-direction: column;
  padding: 0 8px 8px;
  overflow-y: hidden;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scroll-padding-bottom: 8px;
  --sb-size: 0px;
  max-height: var(--search-results-max-height, 300px);
  min-height: 52px;
  transition:
    height 560ms cubic-bezier(0.22, 1.2, 0.32, 1),
    max-height 560ms cubic-bezier(0.22, 1.2, 0.32, 1);
  scrollbar-width: none;
  scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  box-sizing: border-box;
}

.searchresults.chats {
  padding: 8px; 
}

.searchresults:not(.has-overflow) {
  overflow-y: hidden !important;
  overscroll-behavior: none;
  scrollbar-width: none !important;
}

.searchresults:not(.has-overflow)::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}

.SearchBarExpanded.is-scroll-ready .searchresults.has-overflow {
  overflow-y: auto;
  --sb-size: 8px;
  scrollbar-width: thin;
}

.searchresults.noresults {
  overflow-y: hidden;
  scrollbar-width: none;
}

.searchresults.noresults::after {
  display: none !important;
}

.searchresults.noresults::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.searchresults::-webkit-scrollbar {
  width: var(--sb-size);
}

.searchresults::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 11px;
  transition: background-color 220ms ease;
}

.searchresults::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  transition: background-color 220ms ease;
}

.searchresultsEmpty {
  padding: 4px 8px;
  color: #8e8e8e;
  font-size: 0.85rem;
}

.searchresultsNoState {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.searchresults.noresults {
  padding: 0;
}

.topneuralNetSearch,
.bottomneuralNetSearch {
  display: flex;
  justify-content: flex-start;
  pointer-events: none;
  user-select: none;
  position: absolute;
}

.bottomneuralNetSearch{
  bottom: -1px;
  left: 0;
  right: auto;
  justify-content: flex-start;
}

.bottomneuralNetSearch.top {
  top: 0;
}

.topneuralNetSearch {
  top: 0;
  right: 0;
  left: auto;
  justify-content: flex-end;
}

.topneuralNetSearch > svg,
.bottomneuralNetSearch > svg {
  width: auto;
  max-width: none;
  display: block;
}

.topneuralNetSearchSVG {
  display: block;
}

.NoResultsSearchText{
  max-width: 300px;
  text-align: center;
  font-size: 1.2rem;
  color: var(--text-color);
  font-weight: 500;
  display: flex;
  align-self: center;
  position: absolute;
}

.searchresults.noresults .searchresultsNoState .topneuralNetSearch {
  opacity: 0;
  transform: translateY(-8px);
  animation: searchNeuralInTop 0.6s ease forwards;
}

.searchresults.noresults .searchresultsNoState .bottomneuralNetSearch {
  opacity: 0;
  transform: translateY(8px);
  animation: searchNeuralInBottom 0.7s ease 0.08s forwards;
}

.searchresults.noresults .searchresultsNoState .NoResultsSearchText {
  opacity: 0;
  transform: translateY(5px);
  animation: searchNeuralTextIn 0.45s ease 0.12s forwards;
}

.neuralNeuron {
  opacity: 0.7;
  pointer-events: none;
}

@keyframes searchNeuralInTop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes searchNeuralInBottom {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes searchNeuralTextIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.searchResultSeparator {
  height: 1px;
  background-color: var(--border-color);
  width: calc(100% - 20px);
  margin: 0 10px;
  flex: 0 0 1px;
  transition: opacity 120ms ease;
  opacity: 1;
}

.searchResultSeparator.is-hidden-adjacent {
  opacity: 0;
}

.searchResultRow {
  border: none;
  background: var(--input-bg);
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  width: 100%;
  text-align: left;
  border-radius: 13px;
  padding: 8px 10px;
  transition: background-color 0.2s ease;
}

.searchresults .searchResultRow {
  flex-shrink: 0;
}

.searchResultRow:hover {
  background-color: var(--hover-color);
}

.searchresults.search-loading-skeleton .searchResultRowLoading {
  pointer-events: none;
  cursor: default;
}

.searchresults.search-loading-skeleton .searchResultRowLoading:hover {
  background-color: var(--input-bg);
}

.searchResultRow .userInfo {
  flex: 1;
}

.searchResultRow .UserIcon,
.searchResultRow .roleIcon {
  margin-right: 0;
}

.searchResultRow .UserIcon {
  font-size: 1rem;
  line-height: 1;
  width: 41px;
  height: 41px;
  padding: 0;
  flex: 0 0 41px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.searchResultRow .RoleRowUser {
  color: var(--med-text);
  max-width: 210px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.searchStatusRow .roleIcon .icon_rolerow.searchStatusRoleIcon {
  width: 100%;
  height: 100%;
}

.searchStatusRow .roleIcon .icon_rolerow.searchStatusRoleIcon path {
  stroke-width: 2;
}

.searchResultRow .searchResultUserEditBtn,
.searchResultRow .searchResultRoleEditBtn {
  display: flex;
  visibility: visible;
  opacity: 0;
  transition: opacity 180ms ease, color 180ms ease, background-color 180ms ease;
}

.searchResultRow:hover .searchResultUserEditBtn,
.searchResultRow:hover .searchResultRoleEditBtn {
  opacity: 1;
}

.searchResultRow .userRowEditBtn.searchResultUserEditBtn {
  visibility: visible;
  opacity: 0;
  margin-left: auto;
}

.searchResultRow:hover .userRowEditBtn.searchResultUserEditBtn {
  opacity: 1;
}

.searchResultRow .userRowEditBtn.searchResultUserEditBtn.Rect {
  padding: 6px 10px;
  font-size: 0.84rem;
  border-radius: 8px;
  aspect-ratio: unset;
}

.searchResultRow .userRowEditBtn.searchResultUserEditBtn.Black {
  background-color: #000000;
  color: #ffffff;
}

.searchResultRow .userRowEditBtn.searchResultUserEditBtn.Black:hover {
  background-color: #252525;
  color: #ffffff;
}

.searchResultRow .userRowEditBtn.searchResultUserEditBtn.Red {
  background-color: #FDE8E6;
  color: #E03E33;
}

.searchResultRow .userRowEditBtn.searchResultUserEditBtn.Red:hover {
  background-color: #E03E33;
  color: #ffffff;
}

.searchResultRow .userRowEditBtn.searchResultUserEditBtn.Disabled {
  background-color: #E3E3E3;
  color: #676767;
  cursor: not-allowed;
}

.searchResultRow .userRowEditBtn.searchResultUserEditBtn.Disabled:hover {
  background-color: #E3E3E3;
  color: #676767;
}

.searchResultMeta {
  color: #8e8e8e;
  font-size: 0.8rem;
}

.searchIcon {
  color: var(--text-color);
  width: 15px;
  opacity: 0.5;
  display: flex;
}

.SearchBarInput {
  color: var(--text-color);
  display: block;
  background-color: transparent;
  border: none;
  font-size: 1rem;
  min-width: 120px;
  width: auto;
  flex: 1;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.SearchBarInput::-webkit-search-decoration,
.SearchBarInput::-webkit-search-cancel-button,
.SearchBarInput::-webkit-search-results-button,
.SearchBarInput::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.NoStateBox {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 190px;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.topneuralNetData,
.bottomneuralNetData {
  position: absolute;
  display: flex;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.bottomneuralNetData{
  bottom: 0px;
  left: 0px;
}

.topneuralNetData{
  top: 0px;
  right: 0px;
}

.NoStateBox .NoResultsSearchText {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 420px;
  position: relative;
  z-index: 2;
}

.NoStateBox .NoResultsSearchText .settingsBtnBlack {
  margin-left: 0;
  align-self: center;
}

.noresults .searchresultsNoState .topneuralNetData,
.noresults .searchresultsNoState .topneuralNetSearch {
  animation: searchNeuralInTop 0.6s ease both;
}

.noresults .searchresultsNoState .bottomneuralNetData,
.noresults .searchresultsNoState .bottomneuralNetSearch {
  animation: searchNeuralInBottom 0.7s ease 0.08s both;
}

.noresults .searchresultsNoState .NoResultsSearchText {
  animation: searchNeuralTextIn 0.45s ease 0.12s both;
}

.ClearInputBar {
  width: 20px;
  height: 20px;
  background: transparent;
  border-radius: 4px;
  padding: 0;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--med-text);
  cursor: pointer;
  transition: color 0.2s ease;
}

.ClearInputBar:hover {
  color: var(--text-color);
}

.topbaricon{
  width: 18px;
  height: 18px;
}

.TopbarTabs {
  display: flex;
  align-items: flex-end;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  align-self: stretch;
  position: relative;
  z-index: 30;
  height: 50px;
}

.chat-topbar > .topbar-menu-btn {
  flex-shrink: 0;
}

.TopbarTabs::-webkit-scrollbar {
  display: none;
}

.TopbarTabs::after {
  content: none;
}

.TopbarTabsEndDivider {
  position: relative;
  flex: 0 0 1px;
  align-self: stretch;
  pointer-events: none;
  z-index: 7;
}

.TopbarTabsEndDivider::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border-color);
}

.TopbarTabsEndDivider.is-hidden::before {
  content: none;
}

.TopbarTabs::before {
  content: none;
}

.TopbarTabs.is-dragging-tabs {
  user-select: none;
  overflow-y: visible;
}

.Tab {
  --tab-girth: 13px;
  --tab-overlay-inset-x: 13px;
  --tab-overlay-top: 1px;
  --tab-overlay-bottom: 1px;
  --tab-overlay-border-bottom: 1.5px;
  padding: 0;
  margin: 0;
  width: 230px;
  display: flex;
  align-items: stretch;
  position: relative;
  height: 50px;
  cursor: pointer;
  z-index: 1;
  color: var(--med-text);
  flex: 0 0 auto;
}

.Tab.is-dragging {
  position: fixed;
  pointer-events: none;
  cursor: grabbing;
  z-index: 120300;
}

.Tab.is-dragging.is-detached {
  opacity: 0.95;
}

.Tab.is-dragging.is-detached::before,
.Tab.is-dragging.is-detached::after {
  content: none !important;
}

.Tab.is-dragging.is-detached .TabFace {
  margin-left: 0 !important;
  margin-right: 0 !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 13px !important;
  background: var(--background-color) !important;
  clip-path: none !important;
}

.Tab.drag-placeholder {
  visibility: hidden;
  pointer-events: none;
}

.Tab::before {
  content: none;
  position: absolute;
  inset: 0 0 1.5px 0;
  background: var(--border-color);
  z-index: 1;
  pointer-events: none;
  clip-path: shape(
    from bottom left,
    curve to var(--tab-girth) calc(100% - var(--tab-girth)) with var(--tab-girth) 100%,
    vline to var(--tab-girth),
    curve to calc(var(--tab-girth) * 2) 0 with var(--tab-girth) 0,
    hline to calc(100% - calc(var(--tab-girth) * 2)),
    curve to calc(100% - var(--tab-girth)) var(--tab-girth) with calc(100% - var(--tab-girth)) 0,
    vline to calc(100% - var(--tab-girth)),
    curve to 100% 100% with calc(100% - var(--tab-girth)) 100%
  );
}

.Tab + .Tab {
  margin-left: -1px;
}

.Tab:not([aria-selected="true"])::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border-color);
  pointer-events: none;
  z-index: 3;
}

.TopbarTabs .Tab:not([aria-selected="true"]) .TabFace {
  border: none;
}

.TopbarTabs .Tab:not([aria-selected="true"]):not(:first-child) .TabFace::after {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--border-color);
  pointer-events: none;
  z-index: 2;
  opacity: 1;
  transition: opacity 220ms var(--topbar-ease);
}

.TopbarTabs .Tab.is-before-active .TabFace::after,
.TopbarTabs .Tab.is-after-active .TabFace::after {
  opacity: 0;
}

.TopbarTabs .Tab[aria-selected="true"] + .Tab .TabFace::after,
.TopbarTabs .Tab.is-active + .Tab .TabFace::after {
  opacity: 0;
}

.TopbarTabs .Tab:not([aria-selected="true"])::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 8px;
  bottom: 8px;
  pointer-events: none;
  z-index: 9;
  clip-path: none;
  opacity: 0;
  transition: opacity 220ms var(--topbar-ease);
  background:
    linear-gradient(
      to right,
      var(--sidebar-color) 0 2px,
      transparent 2px calc(100% - 2px),
      var(--sidebar-color) calc(100% - 2px)
    );
}

.TopbarTabs.is-dragging-tabs .Tab:not([aria-selected="true"])::before {
  opacity: 1;
  background:
    linear-gradient(
      to right,
      var(--border-color) 0 1px,
      transparent 1px calc(100% - 1px),
      var(--border-color) calc(100% - 1px)
    );
}

.TabFace {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  padding-left: 18px;
  height: 100%;
  width: 100%;
  min-height: 50px;
  margin: 0;
  color: inherit;
  background: var(--sidebar-color);
  border: 1px solid var(--border-color);
  border-top-left-radius: var(--tab-girth);
  border-top-right-radius: var(--tab-girth);
  z-index: 2;
  clip-path: none;
  overflow: hidden;
}

.TabFace::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 8px;
  background: var(--hover-color);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}

.TabText,
.closebuttontab {
  position: relative;
  z-index: 1;
}

@supports not (clip-path: shape(from top left, hline to 0)) {
  .Tab::before {
    content: none;
  }

  .TabFace {
    clip-path: none;
    border: 1px solid var(--border-color);
    margin: 0;
    height: 100%;
    min-height: 50px;
    padding-inline: 22px;
    border-top-left-radius: var(--tab-girth);
    border-top-right-radius: var(--tab-girth);
  }
}

.TabText {
  user-select: none;
  display: block;
  color: inherit;
  font-size: 0.95rem;
  font-weight: 300;
  max-width: 165px;
  width: 165px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.TabText::before {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, var(--sidebar-color) 0%, transparent 100%);
  position: absolute;
  top: 0;
  left: 0;
  width: 25px;
  height: 100%;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.TabText::after {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--sidebar-color) 100%);
  position: absolute;
  top: 0;
  right: 0;
  width: 25px;
  height: 100%;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.Tab:hover .TabText::after {
  background: linear-gradient(90deg, transparent 0%, var(--sidebar-hover-not-trans) 100%);
}

.Tab:hover .TabText::before {
  background: linear-gradient(90deg, var(--sidebar-hover-not-trans) 0%, transparent 100%);
}


.Tab.is-active .TabText::before {
  background: linear-gradient(90deg, var(--background-color) 0%, transparent 100%);
}

.Tab.is-active .TabText::after {
  background: linear-gradient(90deg, transparent 0%, var(--background-color) 100%);
}

.TabText.tab-text-overflowing::after {
  opacity: 1;
}

.TabText.tab-text-overflowing.tab-text-scrolled-end::after {
  opacity: 0;
}

.TabText.tab-text-overflowing.tab-text-revealed-left::before {
  opacity: 1;
}

/* Suppresses the opacity fade-in for the very first time overflow state is
   established on a freshly-created row (e.g. the whole tab strip re-rendering
   on click) — otherwise every overflowing row replays the fade transition. */
.TabText.marquee-no-transition::after,
.TabText.marquee-no-transition::before,
.chat-item.marquee-no-transition::after,
.chat-item.marquee-no-transition::before,
.pinned-folder-row.marquee-no-transition::after,
.pinned-folder-row.marquee-no-transition::before,
.folder-row.marquee-no-transition::after,
.folder-row.marquee-no-transition::before {
  transition: none !important;
}

.TabToolTip{
  position: fixed;
  left: 0;
  top: 0;
  transform: translateY(-4px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none !important; /* SET TO FLEX ONCE FIX */
  flex-direction: column;
  background-color: var(--input-bg);
  border-radius: 13px;
  border: 1px solid var(--input-border);
  max-width: 240px;
  min-width: 220px;
  padding: 8px 11px;
  gap: 8px;
  z-index: 120100;
  box-shadow: 0 8px 20px var(--black-shadow);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  overflow: hidden;
}

.Tab.has-tab-tooltip:hover .TabToolTip{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.TabToolTip::before,
.TabToolTip::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 34px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms ease;
  z-index: 2;
}

.TabToolTip::before {
  left: calc(var(--tooltip-fade-left-offset, 0px) - 1px);
  background: linear-gradient(to right, var(--input-bg) 0%, transparent 100%);
}

.TabToolTip::after {
  right: calc(var(--tooltip-fade-right-offset, 0px) - 1px);
  background: linear-gradient(to left, var(--input-bg) 0%, transparent 100%);
}

.TabToolTip.is-clipped-left::before {
  opacity: 1;
}

.TabToolTip.is-clipped-right::after {
  opacity: 1;
}

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

.topbar-tab-dragging .TabToolTip,
.TopbarTabs.is-dragging-tabs .TabToolTip {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-4px) !important;
}

.TabToolTipTopRow{
  align-items: center;
  display: flex;
  gap: 8px;
}

.TabToolTipCenter{
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-color);
  line-height: 1.35;
}

.TabToolTipBottomRow{
  color: var(--med-text);
  font-size: 0.9rem;
  font-weight: 500;
}

.TabTooltipFolderIcon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
}

.TabTooltipFolderIcon .sidebarSVG.organize-icon {
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
  flex: 0 0 18px;
  display: block;
  align-self: center;
}

.TabTextFolderIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  min-width: 14px;
  vertical-align: middle;
  margin-right: 6px;
}

.TabTextFolderIcon .sidebarSVG.organize-icon {
  width: 14px;
  height: 14px;
  display: block;
}

.closebuttontab{
  margin-left: auto;
  padding: 4px 0 4px 8px;
  padding: 4px;
  width: 24px;
  max-width: 24px;
  height: 24px;
  min-width: 24px;
  aspect-ratio: 1;
  border: none;
  background-color: transparent;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.8;
  border-radius: 6px;
  transition:
    background-color 220ms var(--topbar-ease),
    color 220ms var(--topbar-ease),
    opacity 220ms var(--topbar-ease);
}

.closebuttontab.right{
  margin-left: 8px;
}

.closebuttontab:hover{
  background-color: var(--darker-hover-color);
}

.Tab:hover{
  background-color: transparent;
}

.Tab:hover .closebuttontab{
  color: var(--text-color);
}

.Tab:hover .TabText{
  color: var(--text-color);
}

.TopbarTabs .Tab:not([aria-selected="true"]):hover .TabFace::before {
  opacity: 1;
}

.TopbarTabs .Tab[aria-selected="true"] {
  color: var(--text-color);
  z-index: 40;
}

.TopbarTabs .Tab:not([aria-selected="true"]) {
  z-index: 1;
}

.TopbarTabs .Tab[aria-selected="true"]::before {
  content: "";
  inset: 0 -13px var(--tab-overlay-border-bottom) -13px;
  z-index: 3;
  bottom: 3px;
  transform: translateY(3px);
}

.TopbarTabs .Tab[aria-selected="true"] .TabFace {
  background: transparent;
  border: none;
  height: 100%;
  min-height: 50px;
  margin: 0;
  clip-path: none;
  z-index: 5;
}

.TopbarTabs .Tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  inset:
    var(--tab-overlay-top)
    -12px
    calc(var(--tab-overlay-bottom) + var(--tab-overlay-border-bottom))
    -12px;
  background: var(--background-color);
  pointer-events: none;
  z-index: 4;
  transform: translateY(3px);
  clip-path: shape(
    from bottom left,
    curve to var(--tab-girth) calc(100% - var(--tab-girth)) with var(--tab-girth) 100%,
    vline to var(--tab-girth),
    curve to calc(var(--tab-girth) * 2) 0 with var(--tab-girth) 0,
    hline to calc(100% - calc(var(--tab-girth) * 2)),
    curve to calc(100% - var(--tab-girth)) var(--tab-girth) with calc(100% - var(--tab-girth)) 0,
    vline to calc(100% - var(--tab-girth)),
    curve to 100% 100% with calc(100% - var(--tab-girth)) 100%
  );
}

@supports not (clip-path: shape(from top left, hline to 0)) {
  .TopbarTabs .Tab[aria-selected="true"]::before {
    content: none;
  }

  .TopbarTabs .Tab[aria-selected="true"]::after {
    content: none;
  }

  .TopbarTabs .Tab[aria-selected="true"] .TabFace {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    margin: 0;
    height: 100%;
    min-height: 50px;
    clip-path: none;
  }
}

body.auth-locked {
  overflow: hidden;
}

body.auth-locked #bootOverlay {
  display: none !important;
}

.auth-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
}

.auth-gate-overlay.hidden {
  display: none;
}

.LoginPopup.auth-gate-popup {
  position: relative;
  display: flex;
  width: min(360px, calc(100vw - 28px));
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 21px;
  padding: 16px;
  background: var(--input-bg);
  box-sizing: border-box;
  overflow: hidden;
}

.auth-gate-step.hidden {
  display: none;
}

.auth-gate-popup .divider {
  display: flex;
  align-items: center;
  color: var(--darker-hover-color);
  font-weight: 300;
  font-size: 0.9rem;
}

.auth-gate-popup .divider::before,
.auth-gate-popup .divider::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--darker-hover-color);
}

.auth-gate-popup .divider span {
  margin: 0 10px;
}

.auth-gate-popup .loginOptions {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.auth-gate-popup .LoginOption {
  min-height: 40px;
  position: relative;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 13px;
  border: 1px solid var(--darker-hover-color);
  background-color: var(--darker-box-bg);
  cursor: pointer;
  color: var(--text-color);
}

#authGateGoogleBtn,
#authGateMicrosoftBtn,
#authGateAppleBtn {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

#authGateGoogleBtn .socialicon,
#authGateGoogleBtn .ButtontextLogin,
#authGateMicrosoftBtn .socialicon,
#authGateMicrosoftBtn .ButtontextLogin,
#authGateAppleBtn .socialicon,
#authGateAppleBtn .ButtontextLogin {
  position: relative;
  z-index: 2;
}

#authGateGoogleBtn,
#authGateMicrosoftBtn,
#authGateAppleBtn {
  --auth-gradient-stops: 
    #ffffff 0%,
    #f1511b 26.9231%,
    #00adef 53.8462%,
    #80cc28 79.2691%,
    #fbbc09 100%;
}

#authGateMicrosoftBtn {
  --auth-gradient-stops:
    #ffffff 0%,
    #4285f4 26.9231%,
    #00ac47 53.8462%,
    #ffba00 79.2691%,
    #ea4435 100%;
}

#authGateAppleBtn {
  --auth-gradient-stops:
    #ffffff 0%,
    #d9d9d9 32%,
    #9c9c9c 64%,
    #f0f0f0 100%;
}

@property --auth-grad-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

#authGateGoogleBtn::before,
#authGateMicrosoftBtn::before,
#authGateAppleBtn::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  opacity: 0;
  border-radius: inherit;
  --auth-grad-x: calc(50% + 45% * cos(var(--auth-grad-angle)));
  --auth-grad-y: calc(50% + 45% * sin(var(--auth-grad-angle)));
  background: radial-gradient(
    136.371% 924.296% at var(--auth-grad-x) var(--auth-grad-y),
    var(--auth-gradient-stops)
  );
  filter: blur(0px);
  transition: opacity 0.18s ease, filter 0.18s ease;
  will-change: --auth-grad-angle, filter, opacity;
  pointer-events: none;
}

#authGateGoogleBtn::after,
#authGateMicrosoftBtn::after,
#authGateAppleBtn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--darker-box-bg);
  pointer-events: none;
}

#authGateGoogleBtn:hover::before,
#authGateMicrosoftBtn:hover::before,
#authGateAppleBtn:hover::before {
  opacity: 1;
  filter: blur(4px);
  animation: authGoogleGradientOrbit 2.1s linear infinite;
}

@keyframes authGoogleGradientOrbit {
  0% {
    --auth-grad-angle: 0deg;
  }
  100% {
    --auth-grad-angle: 360deg;
  }
}

.auth-gate-popup .socialicon {
  height: 20px;
  width: 20px;
  display: flex;
}

.auth-gate-popup .ButtontextLogin {
  font-size: 0.9rem;
  color: var(--text-color);
}

.auth-gate-popup .LoginContinue {
  position: relative;
  background: var(--contrast);
  color: var(--contrast-text);
  font-size: 1rem;
  min-height: 42px;
  border: none;
  border-radius: 13px;
  cursor: pointer;
}

.auth-gate-popup .LoginContinue:disabled {
  opacity: 0.72;
  cursor: default;
}

.auth-gate-popup .inputLogin {
  min-height: 24px;
  border: 1px solid var(--input-border);
  border-radius: 13px;
  font-size: 0.9rem;
  padding: 8px;
  outline: none;
  background: var(--input-box-bg);
  color: var(--text-color);
}

.auth-gate-popup .inputLogin.warning {
  border: 1px solid var(--red-text);
  background-color: var(--red-bg);
}

.auth-gate-popup .inputLogin:focus {
  outline: 2px solid var(--contrast);
}

.auth-gate-popup .inputLogin:-webkit-autofill,
.auth-gate-popup .inputLogin:-webkit-autofill:hover,
.auth-gate-popup .inputLogin:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-color);
  box-shadow: 0 0 0 1000px var(--input-box-bg) inset;
  -webkit-box-shadow: 0 0 0 1000px var(--input-box-bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}

.auth-gate-popup .inputField {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-gate-popup .inputField.disabled .inputLogin {
  background: var(--disabled-bg);
  color: var(--disabled-text);
  padding-right: 66px;
}

.auth-gate-popup .SmallFieldTitle {
  font-size: 0.9rem;
  color: var(--text-color);
}

.auth-gate-popup .UserTextLarge.Login {
  align-items: center;
  justify-self: center;
  display: flex;
  color: var(--text-color);
  font-size: 1.4rem;
  font-weight: 600;
  align-self: center;
  margin: 28px 0;
}

.auth-gate-popup .auth-gate-neural {
  position: absolute;
  top: -10px;
  right: 0;
  pointer-events: none;
}

.auth-gate-neural-host {
  background: transparent !important;
  width: 330px;
  min-height: 150px;
  border-radius: 0;
  padding: 0;
}

.auth-gate-neural-host .auth-gate-neural-state {
  min-height: 150px;
}

.auth-gate-neural-host .topneuralNetSearch {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

.auth-gate-neural-host .topneuralNetSearch > svg {
  width: 330px;
  height: 150px;
}

.auth-gate-popup .editbuttonemail {
  position: absolute;
  top: 31px;
  right: 5px;
  background-color: var(--blue-accent-light);
  color: var(--blue-accent);
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.auth-gate-popup .editbuttonemail:hover {
  position: absolute;
  top: 31px;
  right: 5px;
  background-color: var(--blue-accent);
  color: var(--contrast-colo);
  border: none;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
}

.auth-gate-popup .editbuttonpassword {
  position: absolute;
  align-items: center;
  height: 31.5px;
  aspect-ratio: 1;
  top: 31px;
  right: 5px;
  background-color: transparent;
  color: var(--med-text);
  border: none;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
}

.auth-gate-popup .editbuttonpassword:hover {
  background-color: var(--hover-color);
  color: var(--text-color);
}


.auth-gate-popup .forgotpassword {
  margin-top: 6px;
  color: var(--light-text);
  cursor: pointer;
  align-self: center;
  font-size: 0.9rem;
  transition: all 0.2s;
}

.auth-gate-popup .forgotpassword:hover {
  text-decoration: underline;
  color: var(--text-color);
}

.auth-gate-popup .inputLogin.warning ~ .forgotpassword {
  color: var(--text-color);
}

.auth-gate-link-btn {
  border: none;
  padding: 0;
  background: transparent;
}

.auth-gate-popup .WarningMessageLogin {
  display: flex;
  font-size: 0.8rem;
  color: var(--red-text);
  margin-left: auto;
  gap: 4px;
}

.auth-gate-popup .WarningMessageLogin.hidden {
  display: none;
}

.auth-gate-popup .inputFieldTopRow {
  display: flex;
  align-items: center;
}

.auth-gate-popup .warningIconLogin {
  width: 14px;
  aspect-ratio: 1;
  display: flex;
}

.auth-gate-popup .OptionalText {
  font-size: 0.7rem;
  color: var(--med-text);
}

.eyeIcon{
  width: 15.5px;
  height: 15.5px;
}

.auth-gate-popup .lastaccount {
  width: 100%;
  align-items: center;
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 13px;
  border: 1px solid var(--input-border);
  background-color: var(--darker-box-bg);
  cursor: pointer;
  text-align: left;
}

.auth-gate-popup .lastaccount:hover {
  background-color: var(--hover-color);
}

.auth-gate-popup .userTextSmall2 {
  font-size: 0.9rem;
  color: var(--text-color);
}

.auth-gate-popup .user-avatarLogin {
  display: flex;
  background-color: #6A2E8C;
  width: 30px;
  aspect-ratio: 1;
  padding: 8px;
  font-size: 1rem;
  font-weight: 300;
  color: var(--contrast-color);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
}

.auth-gate-popup .userInfo {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.control-input {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.control-input::-webkit-slider-runnable-track {
  background-color: #565656;
  height: 1.8px;
}

.control-input::-webkit-slider-thumb {
  background-color: #ccc;
  border: 1px solid #565656;
  height: 20px;
  border-radius: 50%;
  width: 20px;
  -webkit-appearance: none;
}

.switch.short{
    width: 43px;
    min-width: 43px;
    height: 19px;
}

.switchicon.short{
    width: 25px;
    height: 19px;
}

.switch.mobile{
    width: 55px;
    min-width: 55px;
    height: 23px;
}

.switchicon.mobile{
    width: 35px;
    height: 23px;
    left: 22px;
}

.switch{
    border: 1px solid var(--switch-border);
    margin-left: auto;
    width: 53px;
    border-radius: 25px;
    height: 22px;
    padding: 2px;
    cursor: pointer;
    background-color: var(--switch-bg);
    transition: background 0.2s ease;
    position: relative;
}

.switch.disabled{
  opacity: 0.6;
  cursor: not-allowed;
}

.switch.disabled:active .switchicon{
    scale: 1 !important;
    opacity: 1 !important;
}

.switch.black{
  border: 1px solid var(--black-border-color);
  background: var(--black-blue-accent);
}

.switchicon{
    background-color: var(--white);
    border-radius: 25px;
    width: 35px;
    height: 22px;
    box-sizing: border-box;
    position: absolute;
    left: 20px;
    top: 2px;
    transition: left 0.1s ease, scale 0.1s ease, border 0.1s ease, opacity 0.1s ease;
    border: none;
}
.switch:active .switchicon{
    scale: 1.4;
    opacity: 0.8;
}

.switch.mobile:active .switchicon{
    scale: 1.5;
    opacity: 0.8;
}


.switch.off{
  background: var(--switch-bg-off);
}

.switchicon.off{
    left: 2px;
}

.intext_weblink_wrap {
    display: inline-flex;
    position: relative;
    vertical-align: middle;
}

.intext_weblink {
    font-family: 'Slanter-Sans', sans-serif;
    font-weight: 300;
    transition: border 0.2s ease, background 0.2s ease;
    position: relative;
    background: var(--input-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 4px 4.5px;
    display: flex;
    gap: 6px;
    width: fit-content;
    align-items: center;
    height: 15px;
    overflow: hidden;
    cursor: pointer;
    text-decoration: none;
    user-select: none;
}

.intext_weblink::before {
  content: "";
  transition: opacity 0.2s ease, right 0.2s ease;
  opacity: 0;
  position: absolute;
  right: -30px;
  height: 30px;
  width: 35px;
  z-index: 1;
  background: var(--weblink-hover-grad);
}

.favicon_intext{
  background-color: white;
  border-radius: 4px;
  height: 14px;
  display: flex;
  width: 14px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  flex: 0 0 14px;
}

.intext_weblink_text{
  transition: color 0.2s ease;
  color: var(--light-text);
  font-size: 0.8rem;
  font-weight: 300;
}

.intext_arrow{
  transition: opacity 0.2s ease, right 0.2s ease;
  opacity: 0;
  position: absolute;
  right: -20px;
  z-index: 2;
  color: var(--blue-accent);
  height: 18px;
  width: 18px;
}

.intext_weblink:hover {
  border-color: var(--blue-accent-med);
  background-color: var(--blue-accent-light);
}

.intext_weblink:hover .intext_arrow{
  right: 2px;
  opacity: 1;

}

.intext_weblink:hover::before{
  right: 0;
  opacity: 1;
}

.intext_weblink:hover .intext_weblink_text{
color: var(--med-dark-text);
}

.intext_weblink_popup{
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 13px;
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 270px;
  position: fixed;
  top: -9999px;
  left: -9999px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
  z-index: 1200;
}

.intext_weblink_popup.is-visible{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.intext_weblink_popup_text{
  color: var(--text-color);
  font-size: 1rem;
}

.intext_weblink_popup_btm{
  display: flex;
  gap: 6px;
  align-items: center;
}

span.highlight {
    padding: 4px;
    border-radius: 6px;
    background: var(--blue-accent-light);
}

.Source_subtab_host {
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 2100;
}

/* Breathing room between the chat's scrollbar and any open side view. */
:root {
  --subtab-chat-gap: 12px;
}

body:not(.mobile-active).source-subtab-open .main-area {
  margin-right: calc(var(--source-subtab-panel-width, min(100vw, 420px)) + 1px + var(--subtab-chat-gap));
}

.Source_subtab_host.is-open {
  pointer-events: none;
  opacity: 1;
}

.Source_subtab_backdrop {
  display: none;
}

.Source_subtab {
  display: flex;
  flex-direction: column;
  width: var(--source-subtab-panel-width, min(100vw, 420px));
  height: 100dvh;
  background-color: var(--input-bg);
  border-left: 1px solid var(--border-color);
  transform: translateX(100%);
  transition: transform 0.24s ease;
  pointer-events: auto;
}

.Source_subtab_host.is-open .Source_subtab {
  transform: translateX(0);
}

.Source_subtab_header{
  display: flex;
  align-items: center;
  font-family: 'Slanter-Sans', sans-serif;
  font-weight: 300;
  gap: 6px;
  font-size: 0.98rem;
  color: var(--text-color);
  padding: 0 14px;
  height: 49px;
  min-height: 49px;
  border-bottom: 1px solid var(--border-color);
}

.Source_subtab_list{
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-height: 0;
  padding: 6px 10px 14px;
}

.Source_subtab_item{
  display: flex;
  flex-direction: column;
  border: none;
  max-height: 72px;
  border-radius: 13px;
  width: 100%;
  text-align: left;
  padding: 14px 12px;
  background-color: transparent;
  transition: background 0.2s ease, opacity 0.2s ease;
  gap: 6px;
  cursor: pointer;
}

.Source_subtab_item.file{
  flex-direction: row;
  align-items: center;
  gap: 12px;
}

.Source_subtab_list:has(.Source_subtab_item:hover) .Source_subtab_item{
  opacity: 0.7;
}

.Source_subtab_item:hover{
  background-color: var(--file-btn-mobile-bg-trans);
  opacity: 1 !important;
}

.Source_subtab_title{
  display: block;
  font-family: 'Slanter-Sans', sans-serif;
  font-weight: 300;
  font-size: 1rem;
  color: var(--text-color);
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

.Source_subtab_info{
  display: flex;
  align-items: center;
  gap: 8px;
}

.Source_subtab_icon{
  border-radius: 6px;
  height: 16px;
  min-width: 16px;
  width: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.Source_subtab_icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.Source_subtab_small_text{
  display: flex;
  color: var(--light-text);
  font-size: 0.9rem;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  align-items: center;
  gap: 0;
}

.Source_subtab_small_text_type {
  flex: 0 0 auto;
  margin-right: 4px;
}

.Source_subtab_small_text_site {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.Source_subtab_line{
  width: 100%;
  height: 1px;
  margin: 0 auto;
  background-color: var(--border-color);
  opacity: 1;
  transition: opacity 0.2s ease;
}

.Source_subtab_item:hover + .Source_subtab_line,
.Source_subtab_line:has(+ .Source_subtab_item:hover) {
  opacity: 0;
}

.Source_subtab_item_left{
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 4px;
}

.Source_subtab_item_right{
  display: flex;
  flex: 0 0 auto;
  margin-left: auto;
}

.Source_subtab_preview{
  height: 44px;
  width: 44px;
  min-width: 44px;
  border-radius: 8px;
  margin-right: 4px;
  background-color: #fff;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.Source_subtab_preview img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.Source_subtab_svg{
  height: 16px;
  width: 16px;
  min-width: 16px;
  display: flex;
  align-items: center;
  justify-self: center;
  overflow: hidden;
  color: var(--light-text);
}

/* ── Quiz subtab side panel ── */
.Quiz_subtab {
  width: var(--quiz-subtab-panel-width, min(100vw, 520px));
  max-width: calc(100vw - var(--quiz-sidebar-right, 0px));
  position: relative;
}

.Quiz_subtab::after{
    content: "";
    height: 70px;
    position: absolute;
    width: 4px;
    opacity: 0.3;
    top: 50%;
    transform: translateY(-50%);
    left: -8px;
    border-radius: 10px;
    background-color: var(--dark-text);
}

/* The handle is a CHILD of .Quiz_subtab, so the grip reacts via :has(). */
.Quiz_subtab:has(> .Quiz_subtab_resize_handle:hover)::after,
body.quiz-subtab-resizing .Quiz_subtab::after {
  opacity: 1;
}

/* In expanded mode CSS owns the width — never needs JS recompute */
.Quiz_subtab_host.is-expanded .Quiz_subtab {
  width: calc(100vw - var(--quiz-sidebar-right, 0px));
  max-width: calc(100vw - var(--quiz-sidebar-right, 0px));
}

/* Raise above the topbar (z-index 120000) so the panel header is visible */
.Quiz_subtab_host.is-expanded {
  z-index: 120001;
}

body:not(.mobile-active).quiz-subtab-open .main-area {
  margin-right: calc(var(--quiz-subtab-panel-width, min(100vw, 520px)) + 1px + var(--subtab-chat-gap));
}

/* In expanded mode the panel overlays the chat rather than pushing it,
   so margin-right stays 0 and the sidebar never sees a narrow viewport. */
body:not(.mobile-active).quiz-subtab-open.quiz-subtab-expanded .main-area {
  margin-right: 0 !important;
}

body.quiz-subtab-resizing .main-area {
  transition: none !important;
}

body.quiz-subtab-resizing .Source_subtab.Quiz_subtab {
  transition: none !important;
}

/* Iframes are a separate browsing context: once the cursor crosses into one
   mid-drag, mousemove/mouseup stop reaching the document listeners the
   Quiz_subtab resize handle relies on, silently killing the drag. Disabling
   pointer-events on any iframe for the resize's duration keeps every mouse
   event on the parent document. */
body.quiz-subtab-resizing .Quiz_subtab_list iframe {
  pointer-events: none;
}

/* Code file previews reuse the chat's enhanced code-block rendering, which
   adds a sticky copy button + language header. Those are redundant in the
   preview panel (it has its own header + download button), so hide them
   there — desktop side panel and mobile slideup both. */
#mdPreviewSubtabHost .slanter-codeblock-sticky-actions,
#mdPreviewSubtabHost .slanter-codeblock-header,
#mobileSourcesSlideupList .slanter-codeblock-sticky-actions,
#mobileSourcesSlideupList .slanter-codeblock-header {
  display: none;
}

#mdPreviewSubtabHost .slanter-codeblock {
  border: none;
  margin: none;
  cursor: default !important;
}

#mdPreviewSubtabHost .code-preview-line-code {
  cursor: default !important;
}

/* Line-numbered code file preview (renderCodePreviewInto). Each logical source
   line is one grid row: a right-aligned number gutter + the code, which wraps
   to the container width so there's no horizontal scroll. The number tracks
   the LOGICAL line, not each wrapped visual row (align-items:start pins it to
   the line's first row). Hovering a whole logical line tints it. */
.code-preview-lines {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.80rem;
  line-height: 1.55;
  font-weight: 300;
  tab-size: 4;
  -moz-tab-size: 4;
  padding: 0;
  overflow-x: hidden;
  --sidebar-scroll-gutter: calc(var(--sb-size) + 4px);
  --sb-track-color: var(--input-bg);
  --sb-thumb-color: var(--thumb-color);
  --sb-size: 9px;
}

.code-preview-lines::-webkit-scrollbar {
  width: var(--sb-size);
}

.code-preview-lines::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 11px;
}

.code-preview-lines::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 1px solid var(--sb-track-color);
}

@supports not selector(::-webkit-scrollbar) {
  .code-preview-lines {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}


.code-preview-line {
  gap: 12px;
  display: grid;
  grid-template-columns: var(--lineno-col, 3ch) minmax(0, 1fr);
  /* stretch (not start) so the number's border-right divider spans the full
     height of a wrapped line, not just its own first row */
  align-items: stretch;
}

.code-preview-line:hover {
  background: var(--hover-color);
}

.code-preview-line-no {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  box-sizing: border-box;
  padding: 0 14px 0 10px;
  margin-right: 14px;
  color: var(--light-text);
  opacity: 0.7;
  user-select: none;
  -webkit-user-select: none;
  border-right: 1px solid var(--border-color-sharper);
}

.code-preview-line-code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  padding-right: 14px;
  min-width: 0;
}

.Source_subtab_title_text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.Source_subtab_count {
  color: var(--med-text);
  white-space: nowrap;
}

/* File-preview "couldn't load" empty state (showMdPreviewFailure /
   mdPreviewFailureHtml): centers the damaged-file icon, message, and Try
   Again button as a column. The desktop list is already flex-column, so
   align-center alone centers it there — but mobileCollectionSlideupList is
   display:block, so this state needs its own flex declaration to match. */
#mobileSourcesSlideupList.align-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

/* Header title */
.Source_subtab_header .quiz-subtab-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The list hosts .tool-panel > .quizcontent directly */
.Quiz_subtab_list {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 0 !important;
  position: relative;
  display: flex;
  flex-direction: column;
}

.Quiz_subtab_list .tool-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.Quiz_subtab_list .quizcontent {
  flex: 1;
  min-height: 0;
  height: auto !important;
  border-radius: 0 !important;
  max-width: none !important;
}

.Quiz_subtab_list .md_render {
  flex: 1;
  min-height: 0;
}

.Quiz_subtab_list .backgroundimagequiz {
  border-radius: 0 !important;
}

/* File preview loading spinner (pdf/office load + Try Again retry) reuses
   .update_payment_loading, but that base rule's var(--background-color) is
   tuned for the billing UI it was built for — scope an override here so the
   preview's loading backdrop uses var(--input-color) instead, without
   touching the payment spinner elsewhere. */
.Quiz_subtab_list .update_payment_loading,
#mobileSourcesSlideupList .update_payment_loading {
  background-color: var(--input-color);
}

/* Drag-to-resize handle on left edge */
.Quiz_subtab_resize_handle {
  position: absolute;
  left: -8px;
  top: 0;
  bottom: 0;
  width: 15px;
  cursor: col-resize;
  z-index: 10;
  transition: background 0.15s;
}

.Source_subtab.Quiz_subtab:has(.Quiz_subtab_resize_handle:hover),
.Source_subtab.Quiz_subtab:has(.Quiz_subtab_resize_handle.is-resizing) {
  border-left: 1px solid var(--blue-accent);
}

/* Guest-mode viewers can't manage the chat — the quiz panel stays
   permanently expanded with no way to collapse or close it. */
#quizSubtabHost.is-guest-locked .quiz-subtab-expand-btn,
#quizSubtabHost.is-guest-locked .quiz-subtab-close-btn,
#quizSubtabHost.is-guest-locked .Quiz_subtab_resize_handle {
  display: none !important;
}

/* ── Overlay sidebar at ≤1020px ── */
/* Collapsed 60px icon bar stays in flow. Expanded sidebar lifts above content. */
@media (max-width: 1020px) {
  /* The collapsed 60px icon bar always reserves space in .main-area.
     Expanding never changes that reservation — it only overlays on top. */
  .app-layout {
    --sidebar-w: 60px;
  }

  /* .sidebar is taken out of flow below (always fixed), so .main-area itself
     must reserve the 60px icon-bar width — nothing else does it anymore.
     Excluded in true mobile mode, which has its own full-width .main-area rules. */
  body:not(.mobile-active) .main-area {
    margin-left: 54px !important;
    width: calc(100% - 60px) !important;
  }

  /* Lift the sidebar out of flow entirely (collapsed or expanded) so toggling
     it never resizes .main-area — only the fixed 60px above is reserved.
     Excluded in true mobile mode, which hides/positions .sidebar itself. */
  body:not(.mobile-active) .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: calc(100vh - 202px) !important;
    z-index: 130000;
  }

  .sidebar.collapsed {
    --sidebar-w: 54px;
    height: 100vh !important;
  }

  .sidebar:not(.collapsed) {
    --sidebar-w: 290px;
    width: var(--sidebar-w) !important;
  }

  /* Custom-property values only interpolate through transitions when the
     property is registered via @property with an animatable syntax — that
     registration may not be present/supported everywhere, so pin these
     descendants to literal widths here too (matching the --sidebar-w values
     above) to guarantee a smooth native `width` transition regardless. */
  .sidebar.collapsed .sidebar-logo-row {
    width: 53px !important;
  }

  .sidebar:not(.collapsed) .sidebar-logo-row,
  .sidebar:not(.collapsed) .sidebar-menu-list {
    width: 267px !important;
  }

  .sidebar.collapsed ~ .user-box {
    width: 54px !important;
  }

  .sidebar:not(.collapsed) ~ .user-box {
    width: 290px !important;
  }

  .sidebar::after {
    content: "";
    position: fixed;
    top: calc(100vh - 51px);
    left: 0;
    width: var(--sidebar-w);
    height: 67px;
    background: var(--sidebar-color);
    z-index: 0;
    pointer-events: none;
    transition: width 0.25s ease;
  }

  .sidebar.collapsed::after {
    width: 54px;
  }

  /* #sidebarLogoBtn is 110px wide (left:12px) and absolutely positioned
     against .sidebar-logo-row (not .sidebar), so its hover-slide reveal can
     extend past the 60px icon rail — harmless when the collapsed sidebar
     sits in flow with empty space beside it, but it leaks ~62px of
     hoverable/clickable area into .main-area now that the sidebar overlays
     directly on top of the chat with a very high z-index. Clip at the
     logo-row itself (its actual containing block), not the whole .sidebar —
     clipping the whole sidebar also clipped unrelated fixed-position
     overlays like the #userMenu dropdown that legitimately need to render
     outside the 60px collapsed width. */
  .sidebar.collapsed .sidebar-logo-row {
    overflow: hidden;
    clip-path: inset(0);
  }

  /* The sidebar overlay must always sit above the Quiz_subtab panel,
     collapsed or expanded, in either of its own states. */
  .Quiz_subtab_host {
    z-index: 2100;
  }

  .Quiz_subtab_host.is-expanded {
    z-index: 120001;
  }

  .sidebar {
    z-index: 130000 !important;
  }

  /* Below 735px of available chat width there's no room for the panel to
     sit alongside the chat at all — force it fully expanded and hide the
     now-meaningless expand/collapse toggle. */
  body.quiz-subtab-narrow-main #quizSubtabHost .quiz-subtab-expand-btn,
  body.quiz-subtab-narrow-main #mdPreviewSubtabHost .quiz-subtab-expand-btn {
    display: none !important;
  }

  .sidebar ~ .user-box {
    z-index: 130001;
  }

  body.mobile-active .sidebar ~ .user-box{
    display: none;
  }
}

.sidebar.collapsed ~ .user-box .user-inner {
  padding: 8px 6px !important;
  width: 38px;
  height: 38px;
}

#PinnedCollections{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#AllCollections {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.collectionList{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.collectionList.grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 16px;
}

.collection_box{
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 140px;
  position: relative;
  box-sizing: border-box;
  width: 100%;
  border-radius: 13px;
  border: 1px solid var(--border-color-lighter);
  background-color: var(--input-bg-50);
  padding: 16px;
  transition: border 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.collection_box:hover{
  box-shadow: 0px 0px 11.5px 0px var(--black-shadow);
  border-color: var(--border-color);
  background-color: var(--input-bg);
}

.collection_box_top{
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.collection_title_icon{
  stroke-width: 1.2;
  width: 18px;
  height: 18px;
  display: flex;
  margin-top: 2px;
}

.collection_title_icon [fill]{
  fill: none !important;
  fill-opacity: 0 !important;
}

.collection_title_text{
  display: flex;
  color: var(--text-color);
  font-size: 1rem;
}

.collection_box_threedot{
  cursor: pointer;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 3px;
  border-radius: 6px;
  background-color: transparent;
  color: var(--med-text);
  width: 25px;
  height: 25px;
  aspect-ratio: 1;
  opacity: 1;
  transition: background 0.2s ease ;
}

.collection_box_threedot svg {
    max-height: 19px;
    max-width: 23px;
}

.collection_box_threedot.refresh .refresh_svg{
  transform: rotate(0);
  transition: transform 0s;
}

.collection_box_threedot.refresh:active .refresh_svg{
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.collection_box_threedot.opacity{
  color: currentColor;
  opacity: 0.5;
}

.collection_box_threedot.small{
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-right: -9px;
}

.collection_box_threedot.able{
  color: var(--text-color) !important;
}


.collection_box_threedot.large{
  width: 28px;
  height: 28px;
  padding: 4px;
}

.collection_box_threedot.xlarge{
  width: 34px;
  height: 34px;
  padding: 7px;
}

.pad-6{
  padding: 6px !important;
}

.pad-7{
  padding: 7px !important;
}

.collection_box_threedot.large.disabled{
  opacity: 0.4 !important;
  cursor: default;
  background-color: transparent !important;
  color: var(--med-text) !important;
}

.collection_box_threedot.large:hover{
  background-color: var(--hover-color);
}

.collection_box_threedot.vis{
  visibility: visible;
}

.collection_box_threedot.white{
  color: var(--white-75);
}

.collection_box_threedot.strong{
  color: var(--text-color);
}

.collection_box_threedot.dark-bg:hover{
  background-color: var(--darker-hover-color);
}

.collection_box_threedot.top_right-06{
  z-index: 2;
  position: absolute;
  top: 6px;
  right: 6px;
}

.collection_box_threedot.is-dropdown-open{
  visibility: visible;
  background-color: var(--hover-color);
  color: var(--text-color);
}

.collection_box_threedot.vis.nm{
  margin-left: 0;
}

.collection_box:hover .collection_box_threedot {
  visibility: visible;
}

.collection_box_threedot:hover{
  background-color: var(--hover-color);
  color: var(--text-color);
}

.collection_box_threedot.opacity:hover{
  color: currentColor;
  opacity: 1;
}

.collection_box_threedot.white:hover{
  color: var(--white);
}

.collection_box_bottom{
  display: flex;
  margin-top: auto;

}

.collection_box_small_light{
  color: var(--med-light-text);
  font-size: 0.92rem;
}

.collection_box_chat_cards{
  display: flex;
  position: relative;
  right: 30px;
  bottom: -55px;
}

.collection_box_chat_cards.small{
  right: 20px;
}


.collection_box_chat_card{
  position: absolute;
  user-select: none;
  flex-direction: column;
  opacity: 0.8;
  display: flex;
  border: 1px solid var(--border-color);
  gap: 4px;
  background-color: var(--input-bg-50);
  padding: 12px;
  border-radius: 8px;
  width: 95px;
  height: 95px;
  cursor: pointer;
  transition: border 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease, bottom 0.2s ease;
  bottom: 0;
}

.collection_box_chat_card.first{
  right: 230px;
  transform: rotate(2deg);
}

.collection_box_chat_card.mid{
  right: 115px;
  transform: rotate(-6deg);
  z-index: 1;
}

.collection_box_chat_card.last{
  right: 0;
  transform: rotate(3deg);
}

.collection_box_chat_card.small{
  right: 0;
  transform: rotate(-6deg);
}

.collection_box_chat_card:hover{
  border-color: var(--border-color-darker);
  box-shadow: 0px 0px 11.5px 0px var(--black-shadow);
  opacity: 1;
  z-index: 3;
  bottom: 23px;
}

.collection_box_chat_card.small:hover .collection_box_threedot{
  visibility: hidden !important;
}

.collection_box_chat_scribble{
  display: flex;
  width: 95%;
  height: 50px;
  color: var(--med-light-text);
  opacity: 0.7;
}

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

.collection_btn{
  margin-left: auto;
  height: 34px;
  align-items: center;
  border: none;
  font-size: 0.9rem;
  display: flex;
  border-radius: 8px;
  background-color: var(--contrast);
  color: var(--contrast-text);
  gap: 8px;
  padding: 0 10px;
  cursor: pointer;
  transition: opacity 0.2s ease, width 0.2s ease, background 0.2s ease, border 0.2s ease;
}

.collection_btn.contrast {
  color: var(--black) !important;
  background-color: var(--white);
}

.collection_btn.outline.contrast {
  color: var(--white) !important;
  background: transparent !important;
  border-color: var(--white-50) !important;
}

.collection_btn.outline.contrast:hover {
  background: var(--black-hover-color) !important;

}

.collection_btn.link{
  height: 30px;
  right: 5px;
  z-index: 2;
  border-radius: 5px;
  display: flex;
  position: absolute;
}

.collection_btn.outline{
  margin-left: 0;
  border: 1px solid var(--border-color);
  background-color: transparent;
  color: var(--text-color);
}

.collection_btn.outline:hover{
  opacity: 1;
  border-color: transparent;
  background-color: var(--hover-color);
}

.collection_btn:hover{
  opacity: 0.8;
}

.collection_btn_icon{
  width: 18px;
  min-width: 18px;
  height: 18px;
}

.top_title_action{
  width: 100%;
  display: flex;
  align-items: center;
}

.Title_serif{
  font-family: 'Slanter-Serif', serif;
  color: var(--text-color);
  font-size: 1.5rem;
}

.Title_serif.contrast {
  color: var(--white);
}

.TopBarRoles{
  margin-bottom: 8px;
}

.top_collection{
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.top_collection_top{
  height: 28px;
  width: 100%;
  display: flex;
  gap: 8px;
}

.light_text_normal{
  width: calc(100% - 100px);
  color: var(--text-color);
  opacity: 50%;
  font-size: 1rem;
}

.light_text_small{
  color: var(--light-text);
  font-size: 1rem;
}

.collection_large_title_icon{
  display: flex;
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

.left_SavedRow{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.left_SavedRow.loading {
  height: 43.5px;
  justify-content: center;
}

.SavedRow:hover .collection_box_threedot.large{
  visibility: visible;
}

.input_block{
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: opacity 0.2s ease;
}

.input_bar{
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    font-family: 'Slanter-Sans', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    line-height: 1.3;
    height: 42px;
    padding: 10px 15px;
    width: 100%;
    box-sizing: border-box;
    transition: outline 0.1s ease, outline-offset 0.1s ease;
    outline: none;
    outline-color: var(--blue-accent);
    color: var(--text-color);
    outline-offset: 0;
}

.input_bar.light{
  background-color: var(--input-bg-lighter);
  border-color: var(--border-color-input);
}

.input_bar.large{
  height: 346px;
  padding: 0;
}

.input_bar.nofill{
  border: none !important;
  outline: none !important;
  background: none !important;
  width: 100%;
  padding-left: 8px;
  box-sizing: border-box;
}

.input_bar.link{
  margin-top: 5px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
}

.input_bar.link::before {
    content: "";
    position: absolute;
    right: 0;
    width: 150px;
    height: 100%;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0) 0%, var(--input-bg) 50%);
    z-index: 1;
}

.input_block_row {
  display: flex;
  gap: 12px;
}

.input_bar.mt{
  margin-top: 5px;
}

.input_bar.fh{
  height: 100px;
  resize: none;
}

.input_bar::placeholder{
    color: var(--text-color);
    opacity: 0.6;
}

.input_bar,
select,
.input_settings,
.customPrompt{
    outline: 0px solid var(--blue-accent);
    outline-offset: 0;
    transition: outline 0.1s ease, outline-offset 0.1s ease;
}

.input_bar:focus,
select:focus,
.input_settings:focus,
.customPrompt:focus{
    outline: 1px solid var(--blue-accent-dark);
  box-shadow: 0 0 4px 4px var(--highlight-bg);
  border-color: var(--background-color);
}

.input_icon_collection_block{
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--border-color-input);
  background-color: var(--input-bg-lighter);
  height: 42px;
  min-width: 42px;
  box-sizing: border-box;
  transition: outline 0.1s ease, outline-offset 0.1s ease;
  outline: none;
  outline-color: var(--blue-accent);
  outline-offset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input_icon_collection_block_update_icon{
  opacity: 0;
  transition: opacity 0.2s ease;
  display: flex;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
  align-items: center;
  color: var(--text-color);
  width: 20px;
  height: 20px;
}

.input_icon_collection_block_update_icon.settings{
  color: var(--white) !important;
}


.input_icon_collection_block:hover .input_icon_collection_block_update_icon{
  opacity: 1;
}

.input_icon_collection_block:hover .input_icon_collection{
  filter: blur(4px);
}

.input_icon_collection{
  width: 20px;
  height: 20px;
  transition: filter 0.2s ease;
}

.input_icon_collection svg{
  display: block;
  width: 100%;
  height: 100%;
}

#folderIconTrigger.input_icon_collection_block .roleEditIconDefault{
  opacity: 1 !important;
}

#folderIconTrigger.input_icon_collection_block:hover .roleEditIconDefault{
  opacity: 1 !important;
}

.collection_create_popup{
  justify-self: center;
  align-self: center;
  width: 600px;
  max-height: calc(100dvh - 128px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-radius: 21px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color-sharper);
  gap: 12px;
  --modal-scroll-gutter: calc(var(--sb-size) + 4px);
  --modal-track-color: var(--input-bg);
  --modal-thumb-color: var(--border-color);
  --modal-size: 9px;
  /* border-radius alone does not clip ::-webkit-scrollbar in Chromium/WebKit;
     isolating this box into its own compositing layer makes the rounded
     corners actually clip the scrollbar track instead of it poking past them. */
  isolation: isolate;
  transform: translateZ(0);
}

.collection_create_popup.thin-padding {
  width: 400px;
}

.collection_create_popup.thin{
  width: 400px;
  /* This variant scrolls via the nested .collection_create_popup_scroll
     instead, so the outer rounded frame can genuinely clip the scrollbar
     to its corners (a real fix, unlike the compositing hint above which
     doesn't clip ::-webkit-scrollbar reliably in every engine). */
  overflow: hidden;
  padding: 0;
  gap: 0;
}

.collection_create_popup.wide{
  width: 550px;
}

.collection_create_popup.thin .collection_create_popup_scroll{
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-height: 0;
  flex: 1 1 auto;
  /* Stays hidden until JS marks it scroll-ready (after the height-grow
     transition settles) so the scrollbar never flashes mid-animation. */
  overflow-y: hidden;
  padding: 24px;
}

.collection_create_popup.thin .collection_create_popup_scroll.scroll-ready{
  overflow-y: auto;
}

.collection_create_popup.thin .collection_create_popup_scroll::-webkit-scrollbar {
  width: var(--modal-size);
}

.collection_create_popup.thin .collection_create_popup_scroll::-webkit-scrollbar-track {
  background: var(--modal-track-color);
  border-radius: 11px;
}

.collection_create_popup.thin .collection_create_popup_scroll::-webkit-scrollbar-thumb {
  background: var(--modal-thumb-color);
  border-radius: 11px;
  border: 1px solid var(--input-bg);
}

@supports not selector(::-webkit-scrollbar) {
  .collection_create_popup.thin .collection_create_popup_scroll {
    scrollbar-color: var(--modal-thumb-color) var(--modal-track-color);
  }
}

.collection_create_popup::-webkit-scrollbar {
  width: var(--modal-size);
}

.collection_create_popup::-webkit-scrollbar-track {
  background: var(--modal-track-color);
  border-radius: 11px;
}

.collection_create_popup::-webkit-scrollbar-thumb {
  background: var(--modal-thumb-color);
  border-radius: 11px;
  border: 1px solid var(--background-color);
}

@supports not selector(::-webkit-scrollbar) {
  .collection_create_popup {
    scrollbar-color: var(--modal-thumb-color) var(--modal-track-color);
  }
}

.collection_create_popup_top{
  display: flex;
  gap: 8px;
  align-items: center;
}

.payment_details{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.update_payment_wrap{
  position: relative;
  height: 220px;
  overflow: visible;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}


.update_payment_content{
  display: flex;
  flex-direction: column;
  gap: 26px;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 8px;
  margin: 0 -8px;
}

.update_payment_content.is-ready{
  opacity: 1;
  transform: none;
}

.update_payment_loading{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--input-bg);
  opacity: 1;
  transition: opacity 0.25s ease;
}

.update_payment_loading.is-fading{
  opacity: 0;
  pointer-events: none;
}

.update_payment_loading.hidden{
  display: none;
}

.update_payment_spinner{
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--border-color-sharper);
  border-top-color: var(--light-text);
  border-radius: 999px;
  animation: authBtnSpinnerRotate 0.7s linear infinite;
}

.Payment_title{
  font-size: 1.1rem;
  color: var(--text-color);
}

.payment_details_content{
  overflow: visible;
}

/* #subscription-payment-form is the #auth_step_payment copy of this form. It has a
   separate id because the settings billing pane duplicates the same markup, and the
   duplicate ids broke Stripe's mount(selector) with "applies to 2 DOM elements". */
#payment-form,
[data-edit-address-form],
#subscription-payment-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#subscription-payment-form {
  padding: 0;
  border: none;
}

.payment_message{
  min-height: 1.2em;
  font-size: 0.9rem;
  color: var(--med-text);
  display: block;
}

.payment_message.hidden{
  display: none;
}

.file_preview_page{
  position: relative;
  margin: 0 auto;
  height: 280px;
  border-radius: 10px;
  width: 210px;
  object-fit: cover;
}

.file_preview_page.is-unavailable{
  display: none;
}

#preview_image_page{
  box-shadow: 0 0 15px var(--black-shadow);
  background-color: var(--white);
  z-index: 100;
  position: relative;
  border: 1px solid var(--border-color);
  overflow: hidden;
  border-radius: 10px;
  transition: transform 0.2s ease, border 0.2s ease;
}

.file_preview_page::before{
  left: 8px;
  top: 0;
  scale: 0.98;
  z-index: 1;
  content: "";
  background-color: var(--white);
  box-shadow: 0 0 15px var(--black-shadow);
  border-radius: 10px;
  border: 1px solid var(--border-color-sharper);
  width: 210px;
  height: 280px;
  opacity: 0.5;
  position: absolute;
  transition: transform 0.2s ease, border 0.2s ease, background 0.2s ease;
}

.file_preview_page::after{
  left: 16px;
  top: 0;
  scale: 0.96;
  z-index: 0;
  content: "";
  background-color: var(--white);
  box-shadow: 0 0 15px var(--black-shadow);
  border-radius: 10px;
  border: 1px solid var(--border-color-sharper);
  width: 210px;
  height: 280px;
  opacity: 0.5;
  position: absolute;
  transition: transform 0.2s ease, border 0.2s ease, background 0.2s ease;
}

.file_preview_page:hover #preview_image_page{
  transform: rotate(-3deg);
  border-color: var(--highlight-text);
}

.file_preview_page:hover::before{
  transform: rotate(1deg);
  border-color: var(--blue-accent);
}

.file_preview_page:hover::after{
  transform: rotate(3deg);
  border-color: var(--blue-accent);
}

.file_preview_page:hover ~ .input_block.preview #fileDownloadPagesMessage {
  color: var(--highlight-text) !important;
}

.input_block.preview{
  margin-top: -8px !important;
  gap: 24px;
}

.two_block_input_block{
  display: flex;
  gap: 12px;
  margin-top: 5px;
  align-items: center;
}

.input_block_row_left{
    display: flex;
    flex-direction: column;
    padding-top: 2px;
    gap: 4px;
}

.input_block_row_right{
    margin-left: auto;
}


.cta_btn{
    height: 34px;
    width: fit-content;
    display: flex;
    border: none;
    background: var(--contrast);
    color: var(--contrast-text);
    padding: 8px 25px;
    border-radius: 8px;
    font-size: 0.95rem;
    gap: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    align-items: center;
    transition: scale 0.15s ease, opacity 0.2s ease;
    z-index: 4;
}

.cta_btn.outline {
  border: 1px solid var(--border-color-sharper);
  background-color: transparent;
  color: var(--text-color);
  transition: background 0.2s ease, border 0.2s ease, scale 0.15s ease, opacity 0.2s ease;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1);
}

.cta_btn.outline:hover{
  border-color: transparent;
  background-color: var(--file-btn-mobile-bg);
}

.cta_btn.card{
  height: 42px;
}

.cta_btn.red{
  background-color: var(--red-text);
  color: var(--white);
}

.cta_btn.red:hover{
  background-color: var(--red-bg-light);
}

.cta_btn.default{
  background-color: var(--add-btn-mobile-bg);
  color: var(--text-color);
}

.cta_btn.default:hover{
  background-color: var(--border-color-sharper);
}

.cta_btn.fw{
    width: 100%;
    justify-content: center;
}


.cta_btn.fw:disabled{
    opacity: 0.6;
    cursor: not-allowed;
}

.cta_btn.fw:disabled:hover{
  opacity: 0.6;
  background: var(--contrast);
}

.cta_btn.fw:disabled:active{
    scale: 1;
}


.cta_btn.not_allowed{
    opacity: 0.6;
    cursor: not-allowed;
}

.cta_btn.not_allowed:hover{
    opacity: 0.6;
    background: var(--contrast);
}

.cta_btn.not_allowed:active{
    scale: 1;
}

.cta_btn:hover{
    background-color: var(--light-background-hover);
}

.cta_btn:active{
    scale: 0.97;
}

.dislexic{
  font-family: 'Open-Dyslexic', 'OpenDyslexic', sans-serif;
  font-style: normal;
  font-weight: normal;
}

.serif{
  font-family: 'Slanter-Serif', serif;
  color: var(--text-color);
  font-size: 1rem;
}

.serif_text.xxlarge{
    font-family: 'Slanter-Serif', serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--text-color);
}

.serif_text.large{
    font-family: 'Slanter-Serif', serif;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--text-color);
}

.sans_serif_text.much_smaller{
    font-family: 'Slanter-Sans', serif;
    font-size: 0.95rem;
    text-align: left;
    max-width: 600px;
    color: var(--med-text);
    line-height: 1.3;
}

.sans_serif_text.med.bold{
    display: flex;
    font-family: 'Slanter-Sans', serif;
    font-size: 1.2rem;
    text-align: left;
    max-width: 600px;
    font-weight: 600;
    color: var(--text-color);
    margin-top: 16px;
    margin-bottom: 6px;
    line-height: 1.3;
}

.sans_serif_text.large.black{
    font-family: 'Slanter-Sans', serif;
    font-size: 1.2rem;
    text-align: left;
    max-width: 600px;
    font-weight: 300;
    color: var(--text-color);
    margin-top: 8px;
    line-height: 1.3;
}

.monospace {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 0.8rem;
}

.monospace.med {
  color: var(--med-text);
}


.sans_serif {
    position: relative;
    font-family: 'Slanter-Sans', sans-serif;
    font-weight: 300;
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.3;
}

.sans_serif.semibold {
  font-weight: 600;
}

.sans_serif.bold {
  font-weight: 800;
}

.sans_serif.larger {
  font-size: 1.1rem;
}

.sans_serif.size2rem {
    font-size: 2rem;
}

.sans_serif.size15rem {
    font-size: 1.5rem;
}

.sans_serif.size09rem {
    font-size: 0.9rem;
    color: currentColor;
}

.sans_serif.size095rem {
    font-size: 0.95rem;
    color: currentColor;
}

.sans_serif.light_small {
  color: var(--light-text);
  font-size: 0.9rem;
}

.sans_serif.med {
  color: var(--med-text) !important;
}

.sans_serif.grey {
  color: var(--light-text) !important;
}

.sans_serif.size085rem {
    font-size: 0.85rem;
    color: currentColor;
}

.sans_serif.size08rem {
    font-size: 0.8rem;
    color: currentColor;
}

.sans_serif.size07rem {
    font-size: 0.7rem;
    color: currentColor;
}

.sans_serif.center {
  text-align: center;
  max-width: 360px;
  margin: 0 auto;
}

.light_sans-serif{
  color: var(--white-50);
  font-size: 0.85rem;
  transition: color 0.2s ease;
}

.light_sans-serif.link{
  text-underline-offset: 2px;
  cursor: pointer;
  text-decoration: underline;
}

.light_sans-serif.link:hover{
  color: var(--white);
}

.small-sans-serif{
  font-size: 0.7rem;
  color: var(--white);
}

.small-sans-serif.op-50{
  color: var(--white-50);
}

.QuizBtn{
  font-family: 'Slanter-Sans', sans-serif;
  font-weight: 300;
  cursor: pointer;
  overflow: hidden;
  padding-right: 16px;
  display: flex;
  border: 1px solid var(--border-color);
  border-radius: 13px;
  background-color: transparent;
  height: 83px;
  align-items: center;
  user-select: none;
  transition: background 0.2s ease !important;
    box-shadow: 0 0 15px var(--black-shadow);
}

/* .inline-tool-button (the word-document download card) has no explicit
   width of its own -- give it one so it lays out predictably. */
.QuizBtn.inline-tool-button {
  width: 100%;
  box-sizing: border-box;
}

/* download-label-squish-observer.js watches the filename for actual text
   truncation (not a fixed width breakpoint) and toggles this class the
   instant the label and filename can no longer both fit. */
.download-card-squished .collection_btn.outline.ml .collection_btn_label {
  display: none;
}

.download-card-squished .collection_btn.outline.ml {
  padding-left: 10px;
  padding-right: 10px;
}

body.mobile-active .QuizBtn{
  border-radius: 18px;
  background-color: var(--input-bg-50);
}

body.mobile-active .QuizBtntext{
  font-size: 1rem;
  color: var(--med-text);
}

body.mobile-active .QuizBtntext.small{
  font-size: 0.85rem;
  color: var(--light-text);
}

body.mobile-active .collection_btn.outline.ml{
  display: none;
}

.QuizBtn.warning.orange {
  pointer-events: none !important;
  background: var(--orange-bg);
  border-color: var(--orange-border);
  color: var(--orange-text);
}

.QuizBtn.warning {
  pointer-events: none;
  padding: 8px;
  padding-left: 20px;
  height: auto;
  margin-top: 24px;
  margin-bottom: 10px;
  background-color: var(--dark-light-bg);
}

.message.bot .QuizBtn.warning {
  width: 100%;
  gap: 0;
  cursor: default;
}

.message.bot[data-turn-status] {
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

.message.bot[data-turn-status] .bot-body {
  width: 100%;
}

.message.bot[data-turn-status] .turn-status-banner {
  width: 100%;
}

.message.bot[data-turn-status] .QuizBtn.warning {
  width: 100%;
  height: 52px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.message.bot .QuizBtn.warning .QuizBtnRight {
  flex: 1 1 auto;
  min-width: 0;
}

.message.bot .QuizBtn.warning .QuizBtntext {
  overflow-wrap: anywhere;
}

.QuizBtnlefticon {
    width: 20px;
    display: flex;
}

.message.bot .QuizBtn.warning .collection_btn {
  white-space: nowrap;
}

.QuizBtn:hover{
  background-color: var(--input-bg-50);
  border-color: var(--border-color-sharper);
}

.inline-quiz-share-btn{
  pointer-events: all !important;
}

.QuizBtn:hover .QuizBtnleft.file{
  transform: rotate(-3deg);
  scale: 1.03;
}

.QuizBtnleft{
  height: 50px;
  width: 80px;
  font-size: 1.7rem;
  display: flex;
  position: relative;
  left: -1px;
  background-color:  var(--input-bg-50);
  border: 1px solid var(--border-color);
  border-left: none;
  border-radius: 0 8px 8px 0;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s ease, scale 0.2s ease;
    box-shadow: 0 0 15px var(--black-shadow);
}

.QuizBtnleft.file{
  height: 78px;
  width: 53px;
  transform: rotate(-8deg);
  font-size: 2rem;
  bottom: -15px;
  display: flex;
  position: relative;
  left: 27px;
  color: var(--light-text);
  background-color: var(--input-bg-50);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 11.5px 0 rgba(0, 0, 0, 0.1);
}

.QuizBtnleftIcon{
  position: relative;
  top: -10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
}

.QuizBtnleftIcon.warn{
  top: 0;
  width: 18px;
  height: 18px;
}

.QuizBtnEmoji{
  mix-blend-mode: luminosity;
  filter: saturate(0);
}

.QuizBtnRight{
  pointer-events: all !important;
  display: flex;
  margin-left: 20px;
  flex-direction: column;
}

.QuizBtnRight.file{
  margin-left: 48px;
  flex: 1 1 auto;
  min-width: 0;
}

.QuizBtntext{
  font-size: 1.1rem;
  color: var(--text-color);
}

.QuizBtnRight.file .QuizBtntext{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.QuizBtntext.warn{
  font-size: 1rem;
  color: currentColor;
}


.QuizBtntext.small{
  font-size: 0.90rem;
  color: var(--light-text);
}

.collection_btn.outline.ml {
    text-decoration: none !important;
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
    border: 1px solid var(--border-color);
    background-color: transparent;
    color: var(--text-color);
    transition: border 0.2s ease,background 0.2s ease;
}

.collection_btn.outline.ml.grey {
    border: none;
    background-color: var(--lighter-hover-color);
}

.collection_btn.outline.ml:hover {
    border: 1px solid transparent;
    background-color: var(--hover-color);
    color: var(--text-color);
}

.collection_btn.outline.ml.grey:hover {
    border: none;
    background-color: var(--hover-color);
    color: var(--text-color);
}

/* ---- Share-quiz guest mode (visited /share/:id without auth) ---- */
html.share-guest .sidebar-menu-list .sidebarMenuButton:not([data-view="usage"]),
html.share-guest .sidebar-menu-item[data-view="roles"],
html.share-guest .sidebar-menu-item[data-view="collections"],
html.share-guest .sidebar-menu-item[data-view="users"],
html.share-guest .sidebar-menu-item[data-view="training"],
html.share-guest .sidebar-folder-list,
html.share-guest .sidebar-folder-list.is-collapsed,
html.share-guest .sidebar-chat-list,
html.share-guest .sidebar-chat-list.is-collapsed,
html.share-guest .sidebarsectionheader,
html.share-guest .empty-chat-composer-stack,
html.share-guest .input-container-centered,
html.share-guest #inputCentered,
html.share-guest .input-container-stack,
html.share-guest .input-container,
html.share-guest .tool-chatbar,
html.share-guest .inputbar,
html.share-guest .chat-input,
html.share-guest .chat-input-wrap,
html.share-guest .composer,
html.share-guest .composer-wrap,
html.share-guest .bottom-bar,
html.share-guest #getPlusBtn,
html.share-guest #quizGenerateMore,
html.share-guest #quizClose,
html.share-guest .tool-chatpad,
html.share-guest .tool-chat,
html.share-guest .topbar-menu-btn,
html.share-guest .closebuttontab,
html.share-guest #authGateOverlay {
  display: none !important;
}

.user-avatar-shape{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #969640;
}

.collection_box_loading{
  background: linear-gradient(
    96deg,
    var(--invite-skeleton-base) 0%,
    var(--invite-skeleton-highlight) 50%,
    var(--invite-skeleton-base) 100%
  );
  background-size: 260% 100%;
  display: flex;
  height: 11px;
  border-radius: 8px;
  animation: skeletonShimmer 3s linear infinite;
  max-width: 80%;
}

.collection_box_loading.xxsmall{
  max-width: 100%;
  width: 40px;
}

.collection_box_loading.xsmall{
  max-width: 100%;
  width: 72px;
}

.collection_box_loading.top{
  width: 230px;
}

.collection_box_loading.long{
  width: 450px;
}

.collection_box_loading.med{
  width: 300px;
}

.collection_box_loading.bottom{
  width: 140px;
}

.collection_box_loading.thick{
  border-radius: 6px;
  height: 20px;
}

.collection_box_loading.mt{
  margin: auto 0;
}

#AllCollections.is-loading .sidebarsectionheader,
#AllCollections.is-loading .collection_box {
  pointer-events: none;
}
#AllCollections.is-loading .sidebarchevron {
  display: none;
}
#CollectionView .saved-body:has(#AllCollections.is-loading) {
  overflow: hidden !important;
}
#CollectionItemView.is-loading .saved-body {
  overflow: hidden !important;
}

.top_collection_description_loading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 21.5px;
}

.pin_hint.hidden{
  display: none;
}
.pin_hint{
  width: 100%;
  height: 30px;
  border: none;
  background: none;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--light-text);
  text-align: left;
  box-sizing: border-box;
  white-space: nowrap;
}

.pin_hint_svg{
  display: flex;
  width: 14px;
  height: 14px;
}

body:not(.mobile-active) .input-container-centered.limit,
body:not(.mobile-active) .input-container.limit {
  box-shadow: 0px -50px 0px 0px var(--user-bubble), 0 2px 5px rgba(0,0,0,0.04);
}

body:not(.mobile-active) .input-container-centered.limit:has(#inputCenteredBox:focus),
body:not(.mobile-active) .input-container.limit:has(#inputbox:focus) {
  box-shadow: 0px -50px 0px 0px var(--user-bubble), 0 2px 5px rgba(0,0,0,0.04);
}

body:not(.mobile-active) #chatView > .input-limit-banner {
  display: none;
}

body:not(.mobile-active) .main-area:not(.empty-chat) #chatView > .input-limit-banner {
  display: flex;
  position: absolute;
  bottom: calc(var(--chat-input-cover-h, 0px));
  left: 50%;
  transform: translateX(calc(-50% + (var(--chat-scrollbar-shift, 0px) * -0.5)));
  width: min(calc(100% - 24px), 765px);
  z-index: 130;
}

/* Two banners can be stacked above the composer at once — the usage-limit
   banner (plain, gray) always sits nearest the composer at the bottom of the
   stack, and the academic-honesty banner (.warn, red) sits above it. The
   upper banner is pushed up by the bottom banner's own height (50px, the
   usage-banner's fixed height) so the two don't overlap. It also sits at a
   lower z-index than the bottom banner and bleeds its background 20px
   further down (via box-shadow, since a real background can't be clipped
   past the element's own box) so any seam/gap between them is hidden
   behind the opaque bottom banner instead of showing a hairline of the
   page background through.  */
body:not(.mobile-active) .main-area:not(.empty-chat) #chatView > .input-limit-banner.stack-upper {
  bottom: calc(var(--chat-input-cover-h, 0px) + 50px);
  z-index: 129;
  box-shadow: 0 20px 0 0 var(--red-bg-not-transp);
}

body:not(.mobile-active) #chatView:has(.input-container.limit) > .chat-scroll {
  padding-bottom: calc(var(--chat-input-cover-h) + 50px);
}

/* Lift the scroll-to-bottom button by the same amount the limit banner adds
   to .chat-scroll's padding-bottom above, so it doesn't end up sitting
   underneath/overlapping the banner once it's shown. */
body:not(.mobile-active) #chatView:has(.input-container.limit) > #scrollDownBtn {
  bottom: calc(var(--chat-input-cover-h, 90px) + 50px + 15px);
}

/* Both banners stacked at once — reserve room for the combined height
   (50px usage + 55px warn) instead of just one. Higher specificity than the
   single-banner rules above, so it wins whenever .stacked is present. */
body:not(.mobile-active) #chatView:has(.input-container.limit.stacked) > .chat-scroll {
  padding-bottom: calc(var(--chat-input-cover-h) + 105px);
}

body:not(.mobile-active) #chatView:has(.input-container.limit.stacked) > #scrollDownBtn {
  bottom: calc(var(--chat-input-cover-h, 90px) + 105px + 15px);
}

body:not(.mobile-active) .input-limit-banner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  color: var(--med-text);
  background-color: var(--user-bubble);
  font-size: 1rem !important;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  animation: limitBannerOpen 0.25s ease forwards;
  border-top-left-radius: 21px;
  border-top-right-radius: 21px;
  /* When the bottom banner in a stack is dismissed, the upper banner loses
     its .stack-upper class and needs to slide down into the vacated bottom
     slot instead of snapping there instantly. */
  transition: bottom 0.25s ease;
}

body:not(.mobile-active) .input-limit-banner.hiding {
  animation: limitBannerClose 0.25s ease forwards;
}

@keyframes limitBannerOpen {
  from { height: 0; opacity: 0; }
  to { height: 50px; opacity: 1; }
}

@keyframes limitBannerClose {
  from { height: 50px; opacity: 1; }
  to { height: 0; opacity: 0; }
}

/* Academic-honesty "warn" banner — same component as the usage-limit banner
   above (container gets the shared .limit class, same box-shadow/padding/
   animation mechanics), with .warn layered on top only to override the color
   and the slightly taller 55px height. */
body:not(.mobile-active) .input-container-centered.limit.warn,
body:not(.mobile-active) .input-container.limit.warn {
  box-shadow: 0px -55px 0px 0px var(--red-bg-not-transp), 0 2px 5px rgba(0,0,0,0.04);
}

body:not(.mobile-active) .input-container-centered.limit.warn:has(#inputCenteredBox:focus),
body:not(.mobile-active) .input-container.limit.warn:has(#inputbox:focus) {
  box-shadow: 0px -55px 0px 0px var(--red-bg-not-transp), 0 2px 5px rgba(0,0,0,0.04);
}

body:not(.mobile-active) #chatView:has(.input-container.limit.warn) > .chat-scroll {
  padding-bottom: calc(var(--chat-input-cover-h) + 55px);
}

body:not(.mobile-active) #chatView:has(.input-container.limit.warn) > #scrollDownBtn {
  bottom: calc(var(--chat-input-cover-h, 90px) + 55px + 15px);
}

/* The base usage-limit banner is positioned via `#chatView > .input-limit-banner`
   absolute placement above the *bottom* composer — that math doesn't apply
   when the warn banner fires on a chat's first message, because
   .empty-chat-composer-stack (the centered composer's parent) is itself
   absolutely positioned around the vertical middle of the viewport, not the
   bottom. In that case the banner is inserted as a normal flex child right
   above .input-container-centered instead, so it just stacks in flow. */
body:not(.mobile-active) .empty-chat-composer-stack > .input-limit-banner.warn.centered {
  position: relative;
  width: 100%;
  max-width: 765px;
}

body:not(.mobile-active) .input-limit-banner.warn {
  color: var(--red-text-light);
  background-color: var(--red-bg-not-transp);
  font-size: 0.85rem !important;
  border-top-left-radius: 21px;
  border-top-right-radius: 21px;
}

body:not(.mobile-active) .input-limit-banner.warn {
  animation: warnBannerOpen 0.25s ease forwards;
}

body:not(.mobile-active) .input-limit-banner.warn.hiding {
  animation: warnBannerClose 0.25s ease forwards;
}

@keyframes warnBannerOpen {
  from { height: 0; opacity: 0; }
  to { height: 55px; opacity: 1; }
}

@keyframes warnBannerClose {
  from { height: 55px; opacity: 1; }
  to { height: 0; opacity: 0; }
}

/* Trailing control of the academic-honesty banner — the dismiss X for a hard
   stop ("Enabled"), the "Continue anyways" button for a warning. Pushed to the
   banner's trailing edge; shared by the desktop banner and its mobile
   counterpart. */
.warn-banner-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

body:not(.mobile-active) .warn-banner-actions {
  margin-left: auto;
}

/* The message has to yield to the buttons rather than run underneath them:
   clamped to the two lines that fit the banner's fixed 55px height. */
body:not(.mobile-active) .input-limit-banner.warn > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Mobile has no room for text and a labelled button side by side — stack them,
   button right-aligned underneath. Only for the warning variant: a hard stop's
   lone X fits inline, exactly as it did before. */
.mobile_chat_banner.warn.has-continue {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

body:not(.mobile-active) .input-limit-banner.warn .collection_btn{
  height: 30px;
  margin-left: 0;
  padding: 0 12px;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--red-text-light);
  background-color: transparent;
  border: 1px solid color-mix(in srgb, var(--red-text-light) 35%, transparent);
}

.mobile_chat_banner.warn .collection_btn{
  height: 37px;
  margin-left: 0;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  padding: 0 12px;
  font-size: 0.85rem;
  white-space: nowrap;
  color: var(--red-text-light);
  background-color: color-mix(in srgb, var(--red-text-light) 5%, transparent);
  border: none;
  border-radius: 15px;
}

body:not(.mobile-active) .input-limit-banner.warn .collection_btn:hover,
.mobile_chat_banner.warn .collection_btn:hover {
  opacity: 1;
  border-color: transparent;
  background-color: color-mix(in srgb, var(--red-text-light) 15%, transparent);
}

.hover_link{
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: color-mix(in srgb, currentColor 50%, transparent);
  cursor: pointer;
  transition: text-decoration-color 0.2s ease;
}

.hover_link:hover{
text-decoration-color: color-mix(in srgb, currentColor 100%, transparent);
}

/* .hover_link colours itself from currentColor, so an <a> carrying it must not
   fall back to the UA link colour. .hover_link.blue still wins (!important). */
a.hover_link{
  color: inherit;
}

.hover_link.blue{
  color: var(--highlight-text) !important;
}

.sidebarMenuButton:hover .shortcut-text{
  opacity: 0.5;
}

.ChatDropdownOption:hover .shortcut-text{
  opacity: 0.5 !important;
  max-width: initial !important;
}


.shortcut-text{
  font-family: -apple-system-body, "ui-sans-serif", -apple-system, "system-ui", Segoe UI, Helvetica, Apple Color Emoji, Arial, "sans-serif", Segoe UI Emoji, Segoe UI Symbol;
  transition: opacity 0.2s ease;
  overflow: hidden;
}

.shortcut-text.ask{
  visibility: hidden;
  opacity: 0.5;
}

.shortcut-text.key{
  user-select: none;
  background-color: var(--file-btn-mobile-bg-trans);
  color: var(--text-color);
  border-radius: 5px;
  height: 30px;
  display: flex;
  width: 30px;
  align-items: center;
  justify-content: center;
}

.shortcut-text.key.large{
  width: fit-content;
  padding: 0 8px;
}

.shortcut-text.ml{
  opacity: 0;
  margin-left: auto;
}

.shortcut-text.tt{
  opacity: 0.5;
  margin-left: 4px;
}

.margin-left-5{
  margin-left: 5px;
}

.margin-left-8{
  margin-left: 8px;
}

.margin-left-12{
  margin-left: 12px;
}

.margin-left{
  margin-left: auto;
}

.margin-right{
  margin-right: auto !important;
}

.margin-right-0{
  margin-right: 0 !important;
}


.margin-bottom{
  margin-bottom: auto;
}

.margin-btm-9{
  margin-bottom: 9px;
}

.margin-top{
  margin-top: auto;
}

.margin-top--16{
  margin-top: -10px;
}

.margin-top--10{
  margin-top: -10px;
}

.margin-top-3{
  margin-top: 4px;
}

.margin-top-6{
  margin-top: 6px;
}

.margin-top-12{
  margin-top: 12px;
}

.margin-top-24{
  margin-top: 24px;
}

.margin-left-0{
  margin-left: 0 !important;
}

.padding-x-12{
  padding-left: 12px;
  padding-right: 12px;
}

.padding-y-12{
  padding-top: 12px;
  padding-bottom: 12px;
}

.padding-y-48{
  padding-top: 48px;
  padding-bottom: 48px;
}

.flex {
  display: flex;
}

.block {
  display: block !important;
}

.gap0 {
  gap: 0 !important;
}

.gap3 {
  gap: 3px !important;
}

.gap5 {
  gap: 5px !important;
}

.gap8 {
  gap: 8px !important;
}

.gap12 {
  gap: 12px !important;
}

.gap14 {
  gap: 14px !important;
}

.gap20 {
  gap: 20px !important;
}

.gap24 {
  gap: 24px !important;
}

.gap28 {
  gap: 28px !important;
}

.gap40 {
  gap: 40px !important;
}

.padding-btm-8{
  padding-bottom: 8px;
}

.padding-btm-12{
  padding-bottom: 12px;
}


.flex-direction-column{
  flex-direction: column;
}

.overflow-wrap{
  overflow-wrap: break-word;
  word-break: break-word;
}

.pointer-events-none {
  pointer-events: none;
}

.shortcut_row{
  display: flex;
  align-items: center;
  color: var(--med-text);
  padding: 8px 0;
  border-bottom: 1px solid var(--border-color-lighter);
}

.shortcut_row.last{
  border: none;
}

.anim-svg-input{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
}

#voiceLottieContainer svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
  overflow: visible;
}

#voiceLottieContainerBottom svg {
  width: 100% !important;
  height: 100% !important;
  display: block;
  overflow: visible;
}

#voiceLottieContainer svg path[stroke] {
  stroke: currentColor !important;
  stroke-width: 28px !important;
}

#voiceLottieContainerBottom svg path[stroke] {
  stroke: currentColor !important;
  stroke-width: 28px !important;
}

textarea.voice-live-overlay-active,
input.voice-live-overlay-active,
#inputbox.voice-live-overlay-active,
#inputCenteredBox.voice-live-overlay-active,
#mobileTextbox.voice-live-overlay-active,
#toolChatInput.voice-live-overlay-active {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: var(--text-color) !important;
}

.opacity-05 {
  opacity: 0.5 !important;
}

.opacity-08 {
  opacity: 0.8 !important;
}

.align-center{
  align-items: center;
}

.align-baseline{
  align-items: baseline;
}

.align-flex-start{
  align-items: flex-start;
}

.justify-center{
  justify-content: center;
}

.align-baseline{
  align-items: baseline;
}

.text-center{
  text-align: center;
}

.border-bottom{
  border-bottom: 1px solid var(--border-color);
}

.border-none{
  border: none !important;
}

.border-box{
  box-sizing: border-box;
}


.pad-x-24 {
  padding-left: 24px;
  padding-right: 24px;
}

.pad-x-15{
  padding-left: 15px;
  padding-right: 15px;
}

.pad-x-10{
  padding-left: 10px;
  padding-right: 10px;
}

.pad-y-2{
  padding-top: 2px;
  padding-bottom: 2px;
}

.pad-y-4{
  padding-top: 4px;
  padding-bottom: 4px;
}

.pad-y-12{
  padding-top: 12px;
  padding-bottom: 12px;
}

.pad-btm-8{
  padding-bottom: 8px;
}

.pad-left-12{
  padding-left: 12px;
}

.pad-top-0{
  padding-top: 0 !important;
}

.pad-top-5{
  padding-top: 5px;
}

.margin-0{
  margin: 0 !important;
}

.padding-0{
  padding: 0 !important;
}

.line-height-1_5-rem {
  line-height: 1.5rem;
}

.collection_move_list_folder_svg{
  width: 18px;
  height: 18px;
  display: flex;
  justify-content: center;
  padding: 0 2px;
}

.collection_move_list{
  --sb-track-color: transparent;
  --sb-thumb-color: var(--thumb-color);
  --sb-size: 9px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 5px 2px 5px 5px;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 293px;
  scrollbar-width: 9px;
  scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  scrollbar-gutter: stable;
}

.collection_move_list::-webkit-scrollbar {
  width: var(--sb-size);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.collection_move_list::-webkit-scrollbar-track {
  background: var(--sb-track-color) !important;
  border-radius: 8px;
  border: none;
  box-shadow: none;
}

.collection_move_list::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color) !important;
  border-radius: 8px;
  border: 1px solid #282825 !important;
  box-shadow: none;
}

@supports not selector(::-webkit-scrollbar) {
  .collection_move_list {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color) !important;
  }
}

.collection_move_list_item{
  display: flex;
  width: 100%;
  padding: 5px 10px;
  min-height: 40px;
  align-items: center;
  box-sizing: border-box;
  border-radius: 8px;
  cursor: pointer;
  gap: 8px;
}

.collection_move_list_item:hover{
  background-color: var(--hover-color);
}

.collection_move_list_item.added{
  color: var(--highlight-text);
}

.collection_move_list_item.added:hover{
  background-color: var(--highlight-bg);
}

.settings-masked-input {
  -webkit-text-security: disc;
}

.cookies_modal{
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 999999999;
  border: 1px solid var(--black-border-color);
  display: flex;
  flex-direction: column;
  gap: 18px;
  background-color: var(--black);
  color: var(--white);
  width: 350px;
  border-radius: 21px;
  padding: 24px;
}

.cookies_modal.hidden{
  display: none;
}

.cookies_modal_buttons{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cookies_modal_buttons_row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  width: 100%;
}

.cookies_modal_settings_box{
  padding: 14px 14px;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--black-light);
}

.justify-content{
  justify-content: center;
}

.width-fit-content{
  width: fit-content;
}

.width100{
  width: 100% !important;
}

.width400px{
  width: 400px !important;
}

.width300px{
  width: 300px !important;
}

.width120px{
  width: 120px;
}

.height16{
  height: 16px;
}

.input_settings{
  width: 200px;
  margin-left: auto;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 0.9rem;
  border: 1px solid var(--border-color);
  background-color: var(--input-bg);
  color: var(--text-color);
}

.input_settings:hover{
  border-color: var(--border-color-sharper);
}

.Avatar_switch_wrapper{
  position: relative;
  display: inline-flex;
  margin-left: auto;
}

.Avatar_switch{
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: none;
  align-items: center;
  justify-content: center;
  background: var(--file-btn-mobile-bg);
  color: var(--white);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
  overflow: hidden;
}

.Avatar_switch_remove{
  width: 17px;
  display: flex;
  height: 17px;
  padding: 2px;
  color: var(--text-color);
  border: none;
  border-radius: 6px;
  position: absolute;
  top: -6px;
  left: -6px;
  background-color: var(--file-btn-mobile-bg);
  cursor: pointer;
  z-index: 100;
}

.Avatar_switch_remove:hover{
  background-color: var(--border-color-sharper);
}

.initials{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: filter 0.2s ease;
  background-color: inherit;
}

.Avatar_switch::before{
  content: "";
  position: absolute;
  inset: 0;
  background-color: #000;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  z-index: 1;
}

.Avatar_switch:hover::before{
  opacity: 0.4;
}

.Avatar_switch:hover .input_icon_collection_block_update_icon{
  opacity: 1;
  z-index: 2;
}

.Avatar_switch:hover .initials{
  filter: blur(4px);
}


a:-webkit-any-link {
  color: var(--text-color) !important;
}

::-moz-selection {
  background: var(--highlight-bg);
  color: var(--highlight-text);
}

::selection {
  background: var(--highlight-bg);
  color: var(--highlight-text);
}

.slanter-codeblock::selection,
.slanter-codeblock ::selection {
  background: var(--blue-accent);
  color: var(--white);
}

.slanter-codeblock:has(code) code{
  background-color: var(--input-bg);
  border: none;
}

.upgrade_small{
  margin-top: 5px;
  display: flex;
  font-size: 0.8rem;
  color: var(--highlight-text);
  background-color: var(--highlight-bg);
  border-radius: 6px;
  padding: 4px 8px;
  transition: color 0.2s ease, background 0.2s ease;
}

/* Mobile model-switch "Eidos 1" row badge — inline next to the model name
   rather than .upgrade_small's own margin-top/block layout meant for the
   desktop dropdown's stacked text. Hidden via setModelUpgradeOptionVisibility
   (search-inline-tools-and-streaming.js) once the user is Plus. */
.upgrade_badge_mobile{
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  font-size: 0.75rem;
  color: var(--blue-accent);
  background-color: transparent;
  border-radius: 8px;
  padding: 2px 6px;
}

.upgrade_badge_mobile.hidden{
  display: none;
}

.ask_user_panel{
  box-sizing: border-box;
  padding: 10px;
  border-radius: 21px;
  border: 1px solid var(--border-color);
  background-color: var(--input-lighter-bg);
  position: fixed;
  z-index: 8;
  box-shadow: 0 2px 5px rgba(0,0,0,0.04);
}

.ask_user_panel.hidden{
  display: none;
}

.ask_user_option.dimmed{
  opacity: 0.5;
}

.ask_user_option{
  width: 100%;
  display: flex;
  align-items: center;
  background: transparent;
  border-radius: 13px;
  text-align: left;
  height: 42px;
  padding: 6px;
  padding-right: 18px;
  color: var(--light-text);
  border: none;
  font-size: 1rem;
  gap: 8px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.ask_user_option.div{
  padding-right: 6px;
}

.ask_user_option:focus,
.ask_user_option:hover{
  outline: none;
  color: var(--text-color);
  background-color: var(--lighter-hover-color);
}

.ask_user_option:focus .shortcut-text.ask,
.ask_user_option:hover .shortcut-text.ask{
  visibility: visible;
}

.ask_user_option_icon{
  width: 30px;
  height: 30px;
  min-width: 30px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--light-box-question);
  border-radius: 8px;
}

.input_ask_user{
  width: 100%;
  font-size: 1rem;
  color: var(--text-color);
  background-color: transparent;
  border: none;
  outline: none;
}

.input_ask_user::placeholder{
  opacity: 0.5;
}

.btn_light_small{
  height: 30px;
  padding: 4px 12px;
  background-color: var(--lighter-hover-color);
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-color);
  border-radius: 8px;
  transition: background 0.2s ease;
}

.btn_light_small.send{
  height: 30px;
  min-width: 30px;
  width: 30px;
  padding: 6px;
  background-color: var(--contrast);
  color: var(--contrast-text);
}

.btn_light_small.send:hover{
  background-color: var(--light-background-hover);
}

.btn_light_small:hover{
  background-color: var(--light-box-question);
}

.question_cycle_text{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  font-size: 0.9rem;
  color: var(--med-text);
}

.themeImg {
  border-radius: 8px;
}

.themeBtn {
  opacity: 0.7;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  outline-offset: 0;
  transition: transform 0.2s ease, outline  0.2s ease, opacity 0.2s ease;
}
.themeBtn.active,
.themeBtn:hover{
  opacity: 1;
}

.themeBtn.active .themeImg {
  outline: 1px solid var(--blue-accent-dark);
  box-shadow: 0 0 4px 4px var(--highlight-bg);
  border-color: var(--background-color);
}

.usage_left{
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 240px;
}

.usage_left.non_usage{
  max-width: fit-content;
}

.usage_right{
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.usage_right.non_usage{
  width: 100px !important;
}


.bar{
  max-width: 500px;
  margin-left: auto;
  width: 100%;
  background-color: var(--file-btn-mobile-bg-trans);
  border-radius: 10px;
  height: 10px;
  overflow: hidden;
}

.bar.mobile{
  width: 100%;
  height: 8px;
}

.bar_level.mobile{
  height: 8px;
}

.bar_level{
  background-color: var(--blue-accent);
  height: 10px;
  border-radius: 10px;
}

.bar_level.low{
  background-color: var(--red-text);
  height: 10px;
  border-radius: 10px;
}

.chat_skeleton{
  display: none;
  position: absolute;
  top: calc(50px + 28px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 31;
  max-width: 765px;
  flex-direction: column;
  gap: 8px;
  width: min(calc(100% - 48px), 765px);
  pointer-events: none;
}

body:not(.mobile-active) #chatView.is-chat-loading > .chat_skeleton{
  display: flex;
}

body:not(.mobile-active) #chatView.is-chat-loading > .chat-scroll,
body:not(.mobile-active) #chatView.is-chat-switching > .chat-scroll{
  opacity: 0;
}

body:not(.mobile-active) #chatView > .chat-scroll{
  opacity: 1;
}

body:not(.mobile-active) #chatContainer > .skeleton_chat,
body:not(.mobile-active) #chatContainer > .rate-limit-skeleton-message{
  display: none !important;
}

body:not(.mobile-active) #chatView.is-chat-loading > .input-container,
body:not(.mobile-active) #chatView.is-chat-loading > .input-disclaimer,
body:not(.mobile-active) #chatView.is-chat-loading > .file-preview-stack,
body:not(.mobile-active) #chatView.is-chat-loading > .empty-chat-composer-stack,
body:not(.mobile-active) #chatView.is-chat-loading > #chatBottomMask,
body:not(.mobile-active) #chatView.is-chat-loading > #scrollDownBtn{
  display: none !important;
}

body.mobile-active #chatView > .chat_skeleton{
  display: none !important;
}

.user_message_skeleton{
  margin-left: auto;
  margin-bottom: 22px;
  width: 200px;
  border-radius: 13px;
  height: 54.5px;
  background-color: var(--user-bubble);
}

.bot_message_skeleton{
  height: 15px;
  border-radius: 4px;
  background-color: var(--user-bubble);
  width: 100%;
}

.bot_message_skeleton.light{
  background-color: var(--invite-skeleton-base);
}

.bot_message_skeleton.l{
  max-width: 650px;
  width: 80%;
}

.bot_message_skeleton.m{
  max-width: 520px;
  width: 65%;
}

.bot_message_skeleton.s{
  max-width: 400px;
  width: 55%;
}

.bot_message_skeleton.xs{
  max-width: 330px;
  width: 38%;
}

.bot_message_skeleton.xxs{
  max-width: 170px;
  width: 28%;
}

.bot_message_skeleton.xxxs{
  max-width: 70px;
  width: 10%;
}

.toast-container-new-right{
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  z-index: 9999999999;
  pointer-events: none;
}

.toast-container-new-right .toast_new{
  pointer-events: auto;
}

.toast_new{
  display: flex;
  gap: 16px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color);
  border-radius: 13px;
  padding: 8px;
  color: var(--text-color);
  align-items: center;
  width: fit-content;
  max-width: 360px;
  padding-left: 16px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast_new.show{
  opacity: 1;
  transform: none;
}

.toast_new.warning{
  background-color: var(--orange-bg);
  color: var(--orange-text);
  border-color: var(--orange-border);
}

.toast_new.error{
  background-color: var(--red-bg-not-transp);
  color: var(--red-text-light);
  border-color: var(--red-border);
}

.toast_new_icon{
  padding: 6px 0;
  width: 16px;
  height: 16px;
  min-width: 16px;
  min-height: 16px;
}

.toast-chat-complete-content{
  min-width: 0;
  flex: 1;
}

.toast-chat-complete-title,
.toast-chat-complete-preview{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.decor_special{
  position: absolute;
  top: 50px;
  left: 16px;
  right: 16px;
  overflow: hidden;
  pointer-events: none;
  display: flex;
}

.decor_special img{
  display: block;
  width: 100%;
  height: 41px;
  object-fit: none; 
  object-position: right;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.input-container-centered.collection .decor_special{
  visibility: hidden;
  display: none;
}

.file_upload_chip_row_overflow_wrapper{
  position: relative;
}

.file_upload_chip_row_overflow_wrapper::before{
  content: "";
  position: absolute;
  background: linear-gradient(90deg,var(--input-bg) 0%, transparent 100%);
  height: 98px;
  z-index: 1000;
  width: 40px;
  left: 16px;
  bottom: 0;
  visibility: hidden;
}

body.mobile-active .file_upload_chip_row_overflow_wrapper::before{
  left: 0;
  height: 83px;
}

.file_upload_chip_row_overflow_wrapper::after{
  content: "";
  position: absolute;
  background: linear-gradient(90deg,transparent 0%, var(--input-bg) 100%);
  height: 98px;
  width: 40px;
  right: 16px;
  bottom: 0;
  visibility: hidden;
}

body.mobile-active .file_upload_chip_row_overflow_wrapper::after{
  right: 0;
  height: 83px;
}

/* On mobile, reveal whichever edge fade matches what's actually overflowing —
   can-scroll-left/right are the same classes updateScrollablePreviewFade()
   already toggles on the scrollable row itself (#mobileFileRow). */
body.mobile-active .file_upload_chip_row_overflow_wrapper:has(.can-scroll-left)::before {
  visibility: visible;
}

body.mobile-active .file_upload_chip_row_overflow_wrapper:has(.can-scroll-right)::after {
  visibility: visible;
}

/* The wrapper around #mobileFileRow is itself a permanent flex item of
   #mobileInputMorphBar — #mobileFileRow being display:none while empty
   doesn't help if ITS wrapper still sits there taking up a `gap` slot.
   Plain instant display:none <-> display:flex on the wrapper too. */
body.mobile-active .file_upload_chip_row_overflow_wrapper:has(#mobileFileRow) {
  display: none;
}

body.mobile-active .file_upload_chip_row_overflow_wrapper:has(#mobileFileRow:not(:empty)) {
  display: flex;
}

.file_upload_chip_row{
  position: relative;
  margin: 0 16px;
  display: flex;
  gap: 16px;
  align-items: start;
  overflow-y: hidden;
  overflow-x: scroll;
  scrollbar-width: none;
}

.file_upload_chip{
  position: relative;
  width: 80px;
  height: 80px;
  min-width: 80px;
  min-height: 80px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: var(--file-btn-mobile-bg-trans);
  display: flex;
  flex-direction: column;
  padding: 8px;
  overflow: hidden;
}

.file_upload_chip.mobile{
  width: 65px;
  height: 65px;
  min-width: 65px;
  min-height: 65px;
  border-radius: 15px;
}

.file_upload_chip_preview{
  left: 0;
  top: 0;
  position: absolute;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file_upload_chip.skeleton{
  justify-content: center;
  gap: 6px;
}

.file_upload_chip .file_upload_chip_close{
  flex-shrink: 0;
}

.file_upload_chip_close.mobile{
  background: var(--hover-color-50);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 3px;
  transition: transform 0.2s ease;
}

.file_upload_chip_close.search_clear{
  background-color: var(--file-btn-mobile-bg-trans);
  margin-right: 3px;
}

.file_upload_chip_close.mobile:active{
  transform: scale(1.3);
}

.file_upload_chip[data-is-image="true"].doc .file_upload_chip_preview{
  cursor: pointer;
}

.file_upload_chip .sans_serif.margin-top.size09rem{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  user-select: none;
}

button:focus{
  outline: none;
}

button:focus-visible{
  outline: 1px solid var(--blue-accent-dark) !important;
  box-shadow: 0 0 4px 4px var(--highlight-bg) !important;
  border-color: var(--background-color) !important;
}

.file_dropdown_overlay{
  z-index: 999999999999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--text-color);
  justify-content: center;
}

.file_dropdown_svg{
  height: 142px;
  width: 129px;
}

.file_dropdown_svg.mobile_switch {
  width: 129px;
  height: 71px;
}

#mobileModeSwitchOverlay span {
  margin-top: 12px;
  font-size: 1.05rem;
  text-align: center;
  padding: 0 24px;
}

.file_dropdown_overlay::before{
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  height: 100%;
  z-index: -1;
  width: 100%;
  background-color: var(--background-color);
  opacity: 0.90;
}

/* Only the payment overlay fades — the drag/mode-switch overlays it shares
   .file_dropdown_overlay with are still meant to snap instantly via .hidden. */
#paymentConfirmOverlay{
  opacity: 1;
  transition: opacity 600ms ease;
}

#paymentConfirmOverlay.payment-overlay-fading-out{
  opacity: 0;
}

#globalSearchModal{
  background: transparent;
  backdrop-filter: blur(0);
}

.search_modal{
  width: 600px;
  max-height: 500px;
  background-color: var(--input-bg);
  border: 1px solid var(--border-color-sharper);
  border-radius: 21px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

#globalSearchModal {
  align-items: flex-start;
  padding-top: 18vh;
}

.search_row{
  cursor: pointer;
  width: 100%;
  background-color: transparent;
  display: flex;
  align-items: center;
  color: var(--light-text);
  border-radius: 8px;
  height: 38px;
  gap: 16px;
  padding: 8px 12px;
  box-sizing: border-box;
}

.search_row:focus{
  outline: none;
}

.search_row:focus-visible .searchIcon,
.search_row:hover .searchIcon{
  opacity: 1;
}

.search_row:focus-visible,
.search_row:hover{
  background-color: var(--hover-color);
  color: var(--text-color);
}

.search_row.search_row_deep{
  height: auto;
}

.search_row.search_row_deep .flex-direction-column{
  min-width: 0;
  flex: 1;
}

.global-search-shimmer-text{
  position: relative;
  display: block;
}

.global-search-shimmer-text::after{
  content: attr(data-text);
  position: absolute;
  inset: 0;
  padding: inherit;
  box-sizing: border-box;
  background: linear-gradient(90deg, transparent 30%, var(--thinking-shimmer) 50%, transparent 70%);
  background-size: 230% 100%;
  background-repeat: no-repeat;
  background-position: var(--shimmer-pos) 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  mix-blend-mode: normal;
  pointer-events: none;
  animation: textSweepVar 3s linear infinite;
}

.search_row.search_row_deep .flex-direction-column > span{
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search_modal_input{
  padding: 20px 24px;
  display: flex;
  gap: 12px;
  border-bottom: 1px solid var(--border-color);
}

.search_list{
  transition: max-height 0.3s ease;
  width: 100%;
  overflow-y: auto;
  padding: 8px;
  flex: 1;
  box-sizing: border-box;
}

.search_list::-webkit-scrollbar {
  width: var(--sb-size);
}

.search_list::-webkit-scrollbar-track {
  background: var(--input-bg);
  border-radius: 11px;
}

.search_list::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 1px solid var(--input-bg);
}

@supports not selector(::-webkit-scrollbar) {
  .search_list {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

.user-avatar-icon {
  mix-blend-mode: color-burn;
  filter: contrast(0.5) !important;
  width: 19px;
  height: 19px;
}

#userAvatar .user-avatar-icon {
  width: 12px;
  height: 12px;
}

/* #mobileSidebarUserAvatar is 40px vs desktop's 32px .user-avatar, so scale
   the icon up proportionally instead of the generic 19px default. */
#mobileSidebarUserAvatar .user-avatar-icon {
  width: 20px;
  height: 20px;
}

.mobile_chat_banner{
  display: none;
  background: var(--user-bubble);
  border-radius: 15px;
  align-items: center;
  align-self: stretch;
  box-sizing: border-box;
  overflow: hidden;
  pointer-events: none;
  padding: 14px 14px;
  font-size: 0.9rem;
  color: var(--banner-text);
}

/* Plain instant display:none <-> display:flex — no animation. */
.mobile_chat_banner.visible {
  display: flex;
  pointer-events: auto;
}

.mobile_chat_banner .mobile_chat_banner_close,
.mobile_chat_banner #mobile_chat_banner_text{
  opacity: 1;
}

.mobile_chat_banner.warn{
  background: var(--red-bg-not-transp);
  color: var(--red-text-light);
}

.mobile_chat_banner_close{
  width: 26px;
  min-width: 26px;
  height: 26px;
  margin-right: 3px;
  align-self: flex-start;
}

.upgrade_badge_mobile{
  background: var(--highlight-bg);
  padding: 2px 8px;
  font-size: 0.75rem;
  border-radius: 6px;
  color: var(--highlight-text);
}

.Source_subtab_list.Quiz_subtab_list{
  overflow-y: auto;
}

.md_render {
  padding: 34px;
  width: 100%;
  box-sizing: border-box;
  max-width: 675px;
  margin: 0 auto;
  font-family: 'Slanter-serif', serif;
  font-weight: 100;
}

body.mobile-active .md_render{
  padding: 0;
}

.md_render table {
  width: 100%;
  border-collapse: collapse;
  margin: 10px 0;
}

.md_render th,
.md_render td {
  border-top: 1px solid var(--border-color);
  padding: 12px 8px;
  text-align: left;
}

#slanterDebugPanel {
  display: none;
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 130700;
  font-family: "Slanter-Sans", sans-serif;
  font-size: 0.78rem;
  color: var(--text-color, #e5e5e5);
}

#slanterDebugPanelToggle {
  background: var(--input-bg, #1e1e1e);
  border: 1px solid var(--border-color, #333);
  color: inherit;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px var(--black-shadow, rgba(0, 0, 0, 0.35));
}

#slanterDebugPanelBody {
  margin-top: 8px;
  width: 380px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--input-bg, #1e1e1e);
  border: 1px solid var(--border-color, #333);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 12px 28px var(--black-shadow, rgba(0, 0, 0, 0.35));
  box-sizing: border-box;
}

#slanterDebugPanelBody.hidden {
  display: none;
}

.slanter-debug-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 8px;
}

#slanterDebugPanelRefresh {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.95rem;
}

.slanter-debug-balance {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.slanter-debug-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  opacity: 0.9;
}

.slanter-debug-expenses-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 6px;
}

#slanterDebugPanelClear {
  background: none;
  border: 1px solid var(--border-color, #333);
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  font-weight: 400;
  font-size: 0.68rem;
  padding: 2px 8px;
  opacity: 0.85;
}

#slanterDebugPanelClear:hover {
  opacity: 1;
}

.slanter-debug-expenses-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.slanter-debug-expense-empty {
  opacity: 0.7;
}

.slanter-debug-expense-row {
  border: 1px solid var(--border-color, #333);
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.72rem;
}

.slanter-debug-expense-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 4px;
}

.slanter-debug-expense-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  opacity: 0.9;
}

#fileDownloadMessage{
  margin: 0 auto;
}

.settings_table_fade_wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.settings_table_fade_wrapper::before {
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, var(--background-color) 0%, transparent 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 100%;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.settings_table_fade_wrapper.can-scroll-left::before {
    opacity: 1;
}
.settings_table_fade_wrapper::after {
    content: "";
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, var(--background-color) 100%);
    position: absolute;
    top: 0;
    right: 0;
    width: 25px;
    height: 100%;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.15s ease;
}
.settings_table_fade_wrapper.can-scroll-right::after {
    opacity: 1;
}

.settings_table_scroll {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.settings_table_scroll::-webkit-scrollbar {
    display: none;
}
.settings_table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 0.3fr;
    column-gap: 45px;
    width: max(100%, 760px);
    min-width: 760px;
    box-sizing: border-box;
}

.settings_table.payment {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.settings_table > .settings_table_row {
    display: grid;
    grid-template-columns: subgrid;
    grid-column: 1 / -1;
    border-top: 1px solid var(--border-color);
    padding: 12px 0;
}

.settings_table > .settings_table_row > div {
    white-space: nowrap;
    text-overflow: ellipsis;
    min-width: fit-content;
    font-size: 0.95rem;
    color: var(--text-color);
}

.settings_table_ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

#settingsInstitutionNameBlock .usage_right {
    min-width: 0;
}

.settings_table > .settings_table_row.top {
    border: none;
    padding: 8px 0;
    font-weight: 600;
}

.settings_table > .settings_table_row.top > div {
    font-size: 0.85rem;
    color: var(--light-text);
}

.settings_table_row:hover .collection_box_threedot.large{
  visibility: visible;
}

.blue_active{
  color: var(--highlight-text);
  background-color: var(--highlight-bg);
  border-radius: 4px;
  padding: 3px 8px;
}

.switch_appearance_wrapper{
  position: relative;
  margin-left: auto;
  width: 100px;
  border: 1px solid var(--border-color);
  background-color: var(--add-btn-mobile-bg);
  border-radius: 10px;
  max-height: 36px;
  width: fit-content;
  display: flex;
}

.switch_appearance_wrapper::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 34px;
  width: 34px;
  min-height: 34px;
  min-width: 34px;
  border-radius: 9px;
  background-color: var(--switch-active-hover-color);
  transition: left 0.2s ease;
}

.switch_appearance_wrapper[data-active="light"]::before{
  left: 34px;
}

.switch_appearance_wrapper[data-active="dark"]::before{
  left: 68px;
}

.switch_appearance{
  z-index: 3;
  color: var(--light-text);
  border: none;
  background-color: transparent;
  height: 34px;
  width: 34px;
  min-height: 34px;
  min-width: 34px;
  padding: 7px;
}

.switch_appearance:hover{
  color: var(--text-color);
}

.switch_appearance.active{
  color: var(--text-color);
}

.dropdown_btn{
  font-size: 0.9rem !important;
  background-color: transparent;
  border: none;
  border-radius: 8px;
  padding: 0 10px;
  padding-right: 8px;
  display: flex;
  gap: 8px;
  color: var(--text-color);
  height: 34px;
  align-items: center;
}

#settingsChatFontDropdownLabel{
  font-size: 0.9rem !important;
}

.dropdown_btn:hover,
.dropdown_btn.dropdown-open,
.dropdown_btn.is-dropdown-open {
  background-color: var(--hover-color);
}

.dropdown_chevron{
  opacity: 0.5;
  width: 18px;
  height: 18px;
}

.plan_icon{
  height: 75px;
  width: 75px;
}

.feature_checkmark{
  width: 19px;
  height: 19px;
  opacity: 0.5;
  color: var(--text-color);
}

.options_setup_item{
    display: flex;
    flex-direction: column;
    cursor: pointer;
    padding: 24px;
    background-color: var(--input-bg-50);
    border: 1px solid var(--border-color-sharper);
    border-radius: 21px;
    max-width: 330px;
    box-shadow: 0 0 15px var(--black-shadow);
}

#paymentPlusCard{
  box-shadow: 0 0 15px color-mix(in srgb, var(--color-green-slanter) 20%, transparent);
}

.options_setup_item.pricing{
    gap: 6px;
    min-width: 330px;
}


.options_setup_item_features{
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border-color);
    margin-top: 10px;
    padding-top: 22px;
    gap: 5px;
    width: calc(100% + 48px);
    left: -24px;
    position: relative;
}

.options_setup_item_features.free{
  margin-top: 32.6px;
}

.options_setup_item_feature_item{
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Slanter-Sans', serif;
    font-size: 1.05rem;
    text-align: left;
    max-width: 400px;
    color: var(--med-text);
}

.pricing_icon{
    width: 75px;
    margin-bottom: 16px;
}

.cta_btn.fw.nm{
    overflow: hidden;
    width: 100%;
    justify-content: center;
    display: flex;
    margin-top: 16px;
    border: none;
    background: var(--contrast);
    color: var(--contrast-text);
    padding: 8px 25px;
    height: 40px;
    border-radius: 8px;
    font-size: 1rem;
    gap: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    align-items: center;
    transition: scale 0.15s ease;
    z-index: 4;
    transition: background 0.2s ease;
}

.cta_btn.fw.nm.outline{
  background-color: transparent;
  border: 1px solid var(--border-color-sharper);
  color: var(--text-color);
}

.cta_btn.fw.nm.outline:hover{
  background-color: var(--file-btn-mobile-bg-trans);
  border: transparent;
}

.payment_monthly_reminder{
  margin-top: 16px;
  display: flex;
  width: 100%;
  gap: 10px;
  align-items: center;
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 12px;
  box-sizing: border-box;
}

.PaymentButtonPlus::after {
  position: absolute;
  content: "";
  width: 400px;
  z-index: -1;
  height: 100px;
  top: 70px;
  background-color: var(--border-color);
  opacity: 0.4;
  border-radius: 50%;
  filter: blur(20px);
  transition: top 0.2s ease;
}

.PaymentButtonPlus:hover::after {
  top: 30px;
}

.billing_option_grid_mobile{
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  width: 100%;
  box-sizing: border-box;
}

.radial_indicator_billing{
  border: 1px solid var(--border-color);
  border-radius: 50%;
  height: 20px;
  width: 20px;
  margin-bottom: 10px;
}

.radial_indicator_billing.on{
  border-color: transparent;
  -webkit-box-shadow: inset 0px 0px 0px 6px var(--highlight-text); 
  box-shadow: inset 0px 0px 0px 6px var(--highlight-text);
}

.billing_option_selector_mobile{
  width: 100%;
  border-radius: 18px;
  color: var(--text-color);
  border: 1px solid var(--border-color);
  background-color: var(--input-bg-50);
  padding: 16px;
  align-items: flex-start;
  text-align: left;
  gap: 2px;
}

.billing_option_selector_mobile.on{
  border: 1px solid color-mix(in srgb, var(--highlight-text) 50%, transparent);
  background-color: color-mix(in srgb, var(--highlight-bg) 30%, transparent);
}

.get_btn_mobile{
  margin-top: 12px;
  width: 100%;
  border: none;
  border-radius: 18px;
  font-size: 1rem;
  height: 50px;
  background-color: var(--contrast);
  color: var(--contrast-text);
}

.full-layout{
  overflow-y: auto;
  position: absolute;
  display: flex;
  width: 100dvw;
  height: 100dvh;
  background-color: var(--background-color);
  z-index: 10000000;
  align-items: flex-start;
  justify-content: center;
}

/*PAYMENT*/

.login_block{
    text-align: center;
    z-index: 2;
    margin: 0 16px;
    width: 100%;
    max-width: 490px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login_block.hidden{
    display: none;
}

.login_block.payment{
  max-width: 530px;
}

.acknowledge_block{
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 15px;
    gap: 15px;
}

.checkbox {
    width: 20px;
    height: 20px;
    aspect-ratio: 1;
    border-radius: 6px;
    border: 1px solid var(--border-color-sharper);
    background-color: var(--white-bg);
    color: transparent;
    padding: 0;
    cursor: pointer;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.can_focus, div, button{
    transition: outline 0.1s ease, outline-offset 0.1s ease ;
    outline: none ;
    outline-offset: 0 ;
}

/* Blanket keyboard-focus ring for the app's div/button-based controls.
   Text-editing surfaces are deliberately excluded: a contenteditable already
   indicates focus with its caret, and Chrome switches :focus-visible ON as soon
   as you start typing (a mouse click alone does not match it). So the main chat
   composer -- #inputbox / #inputCenteredBox, both contenteditable DIVS -- grew a
   2px blue ring mid-sentence, which read as the box "randomly highlighting
   blue". .editable-chat-input's own `outline: none` could never win here: this
   rule is !important and that one is not. */
.can_focus:focus-visible,
div:not([contenteditable]):focus-visible,
button:focus-visible{
  outline: 1px solid var(--blue-accent-dark) !important;
  box-shadow: 0 0 4px 4px var(--highlight-bg) !important;
  border-color: var(--background-color) !important;
}

.checkmark{
  color: var(--white);
    width: 14px;
    height: 14px;
    aspect-ratio: 1;
    display: flex;
}

.checkbox.active{
    background-color: var(--blue-accent);
    color: var(--input-bg) !important;
    border-color: var(--blue-accent);
}

.selector{
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg);
    font-size: 1rem;
    max-height: 42px;
    height: 26px;
    display: flex;
    align-items: center;
    padding: 7px 15px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.selector:hover{
    background-color: var(--input-bg);  
}

.selector_placeholder{
    color: var(--text-color);
    opacity: 0.3;
}

.chevron_icon{
    width: 20px;
    height: 20px;
    color: var(--text-color);
    opacity: 0.3;
    margin-left: auto;
}

.payment_left{
    margin: 66px 0;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 24px;
    text-align: left;
}

.Plan_options{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    height: 120px;
}

.Plan_option{
    max-height: 120px;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 16px;
    width: 100%;
    gap: 4px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    background-color: transparent;
    cursor: pointer;
    box-sizing: border-box;
    transition: opacity 0.2s ease;
}

.save_panel{
  background-color: var(--highlight-bg);
  margin-left: auto;
  border-radius: 6px;
  font-size: 0.8rem;
  padding: 4px 8px;
  color: var(--highlight-text);
}

.info_panel{
  background-color: var(--file-btn-mobile-bg-trans);
  border-radius: 6px;
  font-size: 0.8rem;
  padding: 4px 8px;
  width: fit-content;
  color: var(--light-text);
}

.Plan_option.blue{
  border-color: var(--blue-accent);
  background-color: var(--highlight-bg);
}

.Plan_option_title{
    margin-top: auto;
    text-align: left;
    font-size: 1rem;
    color: var(--text-color);
}

.Plan_option_number{
    font-size: 0.95rem;
    color: var(--med-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.Plan_option_small{
    font-size: 0.8rem;
    width: 90px;
    text-align: left;
    opacity: 0.5;
}

.Plan_option_title.grey{
    position: absolute;
    bottom: -27px;
    color: var(--text-color);
    opacity: 0.5;
}

.Plan_option_title.blue{
    position: absolute;
    bottom: -27px;
    color: var(--highlight-text);
}

.line_fw{
    border-top: 1px solid var(--border-color);
    width: 100%;
}

.payment_details{
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: gap 0.28s ease;
}

.payment_details.is-collapsed{
    gap: 0;
}

.payment_details_content{
    overflow: visible;
    height: auto;
    opacity: 1;
    transition: height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

.payment_details.is-collapsed .payment_details_content{
    pointer-events: none;
    overflow: hidden;
}

.payment_details[hidden]{
    display: none !important;
}

.payment_details.btm{
    gap: 0;
}

.Payment_title{
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    user-select: none;
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

.Payment_title:hover{
    opacity: 1;
}

.Payment_title .chevron_icon.large{
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.payment_details.is-collapsed .Payment_title .chevron_icon.large{
    transform: rotate(-90deg);
}

.chevron_icon.large{
    width: 22px;
    height: 22px;
    opacity: 1;
}

.bold {
    font-weight: 600;
}

.payment_right{
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--border-color);
    background-color: var(--input-bg-50);
    border-radius: 10px;
    padding: 24px;
    height: fit-content;
    text-align: left;
    width: 100%;
    box-sizing: border-box;
}

.payment_right.info {
  background-color: transparent;
}

.payment_right.card {
  padding: 16px;
  margin-top: -18px;
}

.right_text_title{
    margin-bottom: 8px;
    font-size: 1.1rem;
    color: var(--text-color);
    font-weight: 500;
}

.right_text{
    font-size: 0.9rem;
    color: var(--text-color);
    display: flex;
    align-content: center;
}

.right_text_bold{
    font-size: 1.1rem;
    color: var(--text-color);
    display: flex;
    font-weight: 600;
}

.radial {
  border-radius: 50%;
  border: 1px solid var(--med-text);
  background-color: var(--input-bg);
  width: 20px;
  height: 20px;
  max-width: 20px;
  max-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radial.on {
  border-color: var(--blue-accent);
}

.radial .radial_switch{
  display: none;
}

.radial.on .radial_switch{
  display: flex;
}

.radial_switch {
  border-radius: 50%;
  background-color: var(--blue-accent);
  width: 100%;
  height: 100%;
  max-width: 13px;
  max-height: 13px;
}
/* =========================================
   BOOT REVEAL
   None on the dashboard: the sidebar and its user box show straight away.
   (The chat app's shell-booting gate waited on scripts the dashboard does
   not load, so it hid the user box until its 8s safety timer.)
========================================= */
.centered-bottom-bar {
    transition: opacity 0.35s ease;
}

/* The user box sits OUTSIDE #sidebar (it is a sibling), so it needs its own
   boot handling: its top border would otherwise be a lone line under an empty
   sidebar. Border colour rather than `border-top: none` so the box keeps its
   height and nothing shifts when it fades in. */
.user-box {
    transition: width 0.25s ease, padding 0.25s ease, border-top-color 0.35s ease;
}

.user-inner {
    transition: padding 0.2s ease, opacity 0.35s ease;
}

.panel_left_unsub{
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border-color-darker);
  width: 167px;
  min-width: 167px;
  height: 99px;
  position: relative;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.1);
}

.panel_left_unsub svg{
  position: absolute;
  left: -5px;
  width: 176px;
  height: 102px;
}

.plan_header {
    border: 1px solid var(--border-color-lighter);
    padding: 12px;
    border-radius: 10px;
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.plan_item.completed {
    text-decoration: line-through;
    color: var(--dark-text);
    text-decoration-color: var(--light-text);
}

.plan_item {
    display: flex;
    gap: 10px;
    color: var(--light-text);
    align-items: center;
}

.plan_status.completed {
    background-color: var(--blue-accent);
    color: white;
    border-color: transparent;
}

.plan_status {
    background-color: var(--add-btn-mobile-bg);
    display: flex;
    width: 25px;
    height: 25px;
    min-width: 25px;
    min-height: 25px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    color: var(--dark-text);
}

.plan_stream_icon {
    height: 16px;
    width: 16px;
}

.plan_top {
    color: var(--text-color);
    font-size: 0.9rem;
    padding-bottom: 8px;
}


.key-bind {
    border: 1px solid var(--border-color);
    color: var(--med-text);
    font-size: 0.8rem;
    max-height: 21px;
    height: 19px;
    max-height: 19px;
    width: 20px;
    min-width: 20px;
    display: grid;
    text-box: trim-both cap alphabetic;
    place-content: center;
    padding-bottom: 1px;
    border-radius: 5px;
}

.sidebar-chevron {
    margin-left: auto;
    width: 14px;
    height: 14px;
    color: var(--med-text) !important;
    flex: 0 0 14px;
}

/* ---- Collapsible nav group (e.g. Manage) ----------------------------- */

/* Chevron points right when closed, down when open. */
.nav-group-toggle .sidebar-chevron {
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}

.nav-group-toggle[aria-expanded="true"] .sidebar-chevron {
    transform: rotate(90deg);
}

/* The panel itself never moves or shrinks. dashboard-sidebar.js animates its
   margin-bottom negative while clipping it from the bottom edge by the same
   distance, so the items BELOW slide up over it -- the same motion (and the
   same 320ms / cubic-bezier(0.22, 1, 0.36, 1)) as collapsing a tool run in the
   chat. No max-height ceiling and no transition here: the margin/clip pair is
   driven by the Web Animations API so a mid-flight toggle reverses from
   wherever the panel currently is. The 6px top margin is the panel's own, so
   it travels with it. */
.sidebar-nav-subitems {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

/* Instant state only (first paint, and once a collapse has finished). */
.sidebar-nav-group:not([data-nav-open="true"]) .sidebar-nav-subitems.is-hidden {
    display: none;
}

/* Indent the children so they read as children of the toggle above. */
.sidebar-nav-subitems .sidebarMenuButton {
    padding-left: 28px;
}

/* No room for a flyout in the 54px rail: the group never opens while
   collapsed, and dashboard-sidebar.js closes it on collapse. */
.sidebar.compact .sidebar-nav-subitems {
    display: none;
}

.sidebar.compact .nav-group-toggle .sidebar-chevron {
    display: none;
}

.action-btn {
  border-radius: 10px;
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  background: none;
  color: var(--text-color);
  font-size: 0.9rem;
  height: 34px;
  padding: 0 13px;
  border: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  width: fit-content;
}

.action-btn.disabled{
  opacity: 0.5;
  pointer-events: none;
}

.action-btn.monospace{
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
}

.action-btn.square {
  height: 34px;
  width: 34px;
  padding: 7px;
  align-items: center;
}

.action-btn.square.thin {
  height: 30px;
  width: 30px;
}

.action-btn.thin {
  height: 30px;
}

.action-btn.centered {
  justify-content: center;
}

.action-btn.round-8::before {
  border-radius: 8px;
}

.action-btn.wide {
  width: 100%;
  box-sizing: border-box;
}

.action-btn svg {
    max-height: 19px;
    max-width: 23px;
}

.action-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--btn-default);
  border-radius: 10px;
  transition: scale 0.1s ease;
}

.action-btn.transparent::before {
  background-color: transparent;
}

.action-btn.transparent:hover::before {
  background-color: var(--hover-color);
}

.action-btn:hover::before {
  background-color: var(--btn-default-hover);
}

.action-btn.sharp::before{
  border: 1px solid var(--border-color-input);
  background-color: var(--input-bg-lighter);
}

.action-btn.sharp:hover::before{
  border: 1px solid var(--border-color-darker);
}

.action-btn.contrast {
  color: var(--contrast-text);
}

.action-btn.contrast::before {
  background-color: var(--contrast);
}

.action-btn.contrast:hover::before {
  opacity: 0.8;
}

.action-btn.red {
  color: var(--white);
}

.action-btn.red::before {
  background-color: var(--red-text);
}

.action-btn.red:hover::before {
  background-color: var(--red-text-light);
}

.action-btn:active::before {
  scale: 0.96;
}

.dropdown-btn {
  border-radius: 10px;
  white-space: nowrap;
  background-color: var(--input-bg);
  color: var(--light-text);
  font-size: 0.9rem;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border-color-input);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  width: fit-content;
}

/* A picked tax ID type reads as a value, not the button's grey; only the
   placeholder keeps the muted look (.med). */
.dropdown-btn [data-credits-taxid-type-label]:not(.med) {
  color: var(--text-color);
}

.dropdown-btn.light {
  background-color: var(--input-bg-lighter);
  border: 1px solid var(--border-color-input);
}

.dropdown-btn:hover{
  background-color: var(--input-bg-lighter);
  border-color: var(--border-color-darker);
}

.dropdown-chevron{
  margin-left: auto;
  opacity: 0.5;
  width: 17px;
  height: 17px;
}

.btn-icon {
  width: 17px;
  height: 17px;
}

.input-date {
  border-radius: 8px;
  white-space: nowrap;
  background-color: var(--input-bg-lighter);
  color: var(--light-text);
  font-size: 0.9rem;
  height: 34px;
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--border-color-input);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: text;
  width: 100%;
  box-sizing: border-box;
}

.input-date.search{
  background-color: var(--input-bg);
}

.input-date:hover{
  background-color: var(--input-bg-lighter);
  border-color: var(--border-color-darker);
}

.input-date:has(.input-transparent:focus),
.input-date:has(.input-transparent-date:focus) {
  outline: 1px solid var(--blue-accent-dark);
  box-shadow: 0 0 4px 4px var(--highlight-bg);
  border-color: var(--background-color);
}

/* Focused while invalid (red): the same ring in red. */
.input-date.is-invalid:has(.input-transparent:focus),
.input-date.is-invalid:has(.input-transparent-date:focus) {
  box-shadow: 0 0 4px 4px var(--red-bg);
  outline: 1px solid var(--red-text);
  border-color: var(--background-color);
}

.DashboardDash{
    margin: 0 auto;
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 50px 40px;
    max-width: 1000px;
    box-sizing: border-box;
}

.UsageDash,
.CostDash,
.LogsDash,
.RoleDash,
.UsersDash,
.InstitutionDash,
.SpendLimitsDash,
.CachingDash,
.BillingDash,
.AdminDash,
.NotificationsDash,
.AuditLogsDash,
.DataRetentionDash,
.IdentityDash {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: center;
    padding: 30px;
    box-sizing: border-box;
}

.card-grid, 
.model-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  width: 100%;
}

.card-grid > * {
  flex: 1 1 220px;   /* grow, shrink, 220px minimum */
}

.card-grid.thin > * {
  flex: 1 1 150px;   /* grow, shrink, 220px minimum */
}

.model-grid > * {
  flex: 1 1 180px;   /* grow, shrink, 220px minimum */
}

.dashboard-card{
  gap: 16px;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  padding-top: 18px;
  border: 1px solid var(--border-color);
  cursor: pointer;
}

.dashboard-card.chart:hover{
  background-color: transparent !important;
  cursor: default;
}

.dashboard-card:hover{
  background-color: var(--input-bg-50);
}

.card-title{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1rem;
  color: var(--light-text);
}

.text-color{
  color: var(--text-color) !important;
}

.med-color{
  color: var(--med-text);
}

.card-btm{
  display: flex;
}

.card-details{
  display: flex;
  gap: 4px;
  min-width: fit-content;
  flex-direction: column;
}

.card-large-val{
  font-size: 2rem;
}

.card-action{
  margin-left: auto;
}

.tooltip-icon{
  width: 17px;
  height: 17px;
  min-width: 17px;
  min-height: 17px;
  color: var(--med-text);
}

.tooltip-icon.small {
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
}

.tooltip-icon:hover{
  color: var(--text-color);
}

.model-card {
  gap: 16px;
  overflow: hidden;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  padding-top: 0;
  border: 1px solid var(--border-color);
  cursor: pointer;
}

.bg-image-model-card {
  width: 100%;
  height: 145px;
  box-sizing: border-box;
  position: absolute;
  object-fit: cover;
  border-bottom: 1px solid var(--border-color-input);
  left: 0;
  opacity: 0.5;
  z-index: -1;
  top: 0;
}

.model-card-img{
  position: relative;
  top: 0;
  left: -14px;
  width: calc(100% + 28px);
}

.model-card:hover{
  background-color: var(--input-bg-50);
}

.model-card-info{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.model-card-info span{
  background-color: var(--file-btn-mobile-bg-trans);
  color: var(--light-text);
  padding: 3px 8px;
  font-size: 0.8rem;
  border-radius: 5px;
}

.blue-tag{
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.85rem;
  background-color: var(--highlight-bg);
  color: var(--highlight-text);
} 

.grey-tag.thin{
  padding: 2px 9px;
  font-size: 0.8rem;
} 

.grey-tag{
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.85rem;
  background-color: var(--file-btn-mobile-bg-trans);
  color: var(--light-text);
} 

.blue-tag.thin{
  padding: 2px 9px;
  font-size: 0.8rem;
} 

.orange-tag{
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.85rem;
  background-color: var(--file-btn-mobile-bg-trans);
  color: var(--light-text);
} 

.orange-tag.thin{
  padding: 2px 9px;
  font-size: 0.8rem;
} 

.doughnut_diagram{
  display: flex;
  position: relative;
  border-radius: 50%;
  height: 56px;
  width: 56px;
  background-color: var(--file-btn-mobile-bg);
}

.doughnut_diagram::after{
  content: "";
  top: 5px;
  left: 5px;
  position: absolute;
  border-radius: 50%;
  height: 46px;
  width: 46px;
  background-color: var(--background-color);
}

.resource-card {
  gap: 16px;
  overflow: hidden;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
  border: 1px solid var(--border-color);
}

.main-area{
  overflow-y: auto;

  /* Same scrollbar as .sidebar. Those rules read --sb-* custom properties that
     are declared on .sidebar itself, so they have to be restated here -- the
     two elements are siblings, nothing inherits. Width and thumb colour are
     identical; the track and the thumb's inset border follow THIS surface
     (--background-color) instead of --sidebar-color, since that border exists
     to inset the thumb against whatever it sits on. */
  --sb-size: 10px;
  --sb-track-color: var(--background-color);
  --sb-thumb-color: var(--thumb-color);
  overscroll-behavior-y: contain;
}

.main-area::-webkit-scrollbar {
  width: var(--sb-size);
}

.main-area::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 11px;
}

.main-area::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 2px solid var(--background-color);
}

/* Firefox / anything without the -webkit- pseudo-elements, mirroring the
   equivalent @supports block next to the sidebar's rules. */
@supports not selector(::-webkit-scrollbar) {
  .main-area {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

.no-data-svg{
  max-width: 20px;
  max-height: 20px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--file-btn-mobile-bg-trans);
  color: var(--med-text);
  padding: 14px;
}

.vertical-bar{
  border-right: 1px solid var(--border-color);
  height: 17px;
  width: 1px;
}

/* =========================================
   DASHBOARD CHARTS (dashboard-charts.js)
   Chart tokens mirror the reference UI's --cds-* names so the SVG markup reads
   the same; values map onto this project's palette.
========================================= */
:root {
  --cds-chart-grid: var(--border-color);
  --cds-chart-axis: var(--border-color-darker);
  --cds-chart-categorical-1: var(--blue-400);
  --cds-chart-categorical-2: var(--orange-400);
  --cds-chart-categorical-3: var(--turquois-400);
  --cds-chart-categorical-4: var(--yellow-400);
  --cds-chart-categorical-5: var(--magenta-400);
  --cds-chart-categorical-6: var(--green-400);
  --cds-chart-categorical-7: var(--violet-400);
  --cds-chart-categorical-8: var(--red-400);
}

.dash-chart-host {
  width: 100%;
  /* Same box in all three states -- chart, table and the "No data" block.
     The variable is the measured plot + legend height (set in
     dashboard-charts.js); no feedback loop, since it is measured from the
     children's own natural heights, not from this min-height. */
  min-height: var(--dash-chart-view-h, 330px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* The enclosing .dashboard-card carries .pointer-events-none, which every
     descendant inherits -- without this the chart never receives pointermove
     and neither the tooltip nor the hover band can ever fire. */
  pointer-events: auto;
  /* .dashboard-card sets cursor:pointer for its click affordance; the chart is
     not clickable, so it must not inherit that. */
  cursor: default;
}

.dash-chart-mount {
  width: 100%;
  /* The svg is measured against THIS box, so it must not be shrink-wrapped by
     the flex parent or the first render reads a width of 0. */
  min-width: 0;
}

.dash-chart-svg {
  display: block;
  /* Nothing may escape the card: axis labels sit at the very edges of the
     viewBox, so a stray half-label would otherwise paint over the card border. */
  overflow: hidden;
  touch-action: pan-y;
}

.dash-chart-host,
.dash-chart-mount {
  overflow: hidden;
}

.dash-chart-axis-text {
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  fill: var(--med-text);
}

/* --hover-color is tuned for solid sidebar rows and nearly vanishes over the
   chart's own background, so the band gets its own slightly stronger tint. */
/* Deliberately NOT transitioned: the band marks which bar the pointer is on,
   so it has to snap. The tooltip glides instead (see below). */
.dash-chart-hoverband {
  fill: var(--lighter-hover-color);
  fill-opacity: 1;
  pointer-events: none;
}

:root[data-theme="light"] .dash-chart-hoverband {
  fill: rgba(27, 27, 24, 0.055);
}

/* Tooltip lives on <body> and is positioned with transform, so no ancestor
   overflow or transform can clip or re-anchor it. */
.dash-chart-tooltip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 140000;
  width: max-content;
  max-width: 280px;
  padding: 8px 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--input-bg);
  box-shadow: 0 4px 16px var(--black-shadow);
  pointer-events: none;
  opacity: 0;
  /* transform is transitioned so the box slides between bars rather than
     teleporting; the band under it stays instant. */
  transition: opacity 0.12s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

.dash-chart-tooltip.is-visible {
  opacity: 1;
}

/* While the pointer is over the chart the card must not read as hovered.
   .dash-chart-host re-enables pointer events inside a .pointer-events-none
   card, which also makes :hover start matching on the card again. */
.dashboard-card.is-chart-hovered:hover {
  background-color: transparent;
}

.dash-chart-tooltip-date {
  font-size: 0.8rem;
  color: var(--med-text);
  padding-bottom: 2px;
}

/* ONE grid for every row, so the swatch / value / label columns are shared and
   the labels line up no matter how wide each number is. */
.dash-chart-tooltip-body {
  display: grid;
  grid-template-columns: 10px auto 1fr;
  align-items: center;
  column-gap: 8px;
  row-gap: 6px;
  padding-top: 6px;
}

.dash-chart-tooltip-divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border-color);
  margin: 2px 0;
}

/* Holds the swatch column open for the total row so its number starts at the
   same x as the ones above it. */
.dash-chart-swatch.is-placeholder {
  visibility: hidden;
}

.dash-chart-swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.dash-chart-tooltip-value {
  font-size: 0.9rem;
  /* 300 is the only NON-bold weight in this stack: the Slanter-Sans @font-face
     maps 400/500/600/700 all to the Bold face, so font-weight:400 still
     renders bold. */
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  color: var(--text-color);
  justify-self: start;
}

.dash-chart-tooltip-label {
  font-size: 0.85rem;
  color: var(--med-text);
  justify-self: start;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Group-by control: the menu is absolutely positioned against the wrapper, so
   the wrapper is the positioning context (.dropdown-btn itself is a flex row
   and setting position on it would move its chevron). */
.dropdown-wrap {
  position: relative;
  display: inline-flex;
}

.dropdown-wrap .SettingDropDown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 60;
}

/* Flipped above the button when there is no room below (placeWrapMenu). */
.dropdown-wrap .SettingDropDown.opens-up {
  top: auto;
  bottom: calc(100% + 6px);
}

/* .ChatDropdownOnCheckmark is display:none by default and normally revealed by
   an .on class; these options track state with .is-active instead. */
.dropdown-wrap .SettingDropDownOption.is-active .ChatDropdownOnCheckmark {
  display: flex;
}

.dropdown-wrap .SettingDropDownOption.is-active {
  color: var(--text-color);
}

.slider-switch{
  padding: 1px;
  background-color: var(--input-bg);
  display: flex;
  height: 26px;
  align-items: center;
  border-radius: 7px;
  /* Positioning context for the sliding thumb below. */
  position: relative;
}

.slider-switch.wide{
  background-color: var(--input-bg-lighter);
  width: fit-content;
}

/* The moving highlight. Sized in PERCENT of the track rather than a fixed
   25px: the buttons are content-box (no global border-box reset here), so
   their painted width is 25 + padding + border, not 25. Assumes two
   equal-width options. */
.slider-switch::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc((100% - 2px) / 2);
  height: calc(100% - 2px);
  box-sizing: border-box;
  border-radius: 5px;
  background-color: var(--hover-color);
  border: 1px solid var(--border-color-sharper);
  transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.slider-switch.wide::before {
  width: 110px;
}

.slider-switch:has(.slider-switch-btn:nth-of-type(2).active)::before {
  transform: translateX(100%);
}

/* A third option (the academic-honesty switch). The thumb is exactly one
   button wide, so each step is a full 100% of itself. */
.slider-switch:has(.slider-switch-btn:nth-of-type(3).active)::before {
  transform: translateX(200%);
}

/* With three options the two-up default would leave the thumb half a track
   wide; .wide pins it to the button width, so only the plain track needs this. */
.slider-switch:not(.wide):has(.slider-switch-btn:nth-of-type(3))::before {
  width: calc((100% - 2px) / 3);
}

.slider-switch-btn{
  /* Above the thumb, which paints behind both options. */
  position: relative;
  z-index: 1;
  height: 25px;
  width: 25px;
  max-height: 25px;
  max-width: 25px;
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--med-text);
  padding: 4px;
  border-radius: 5px;
  cursor: pointer;
}

.slider-switch-btn.wide{
  width: 110px;
  max-width: 110px;
}

.slider-switch-btn:hover{
  color: var(--text-color);
}

/* No background of its own any more -- the sliding thumb provides it. */
.slider-switch-btn.active{
  background-color: transparent;
  border-color: transparent;
  color: var(--text-color);
}
/* ---- Chart table view (the .slider-switch's second option) --------------- */

/* Outer box: holds the bottom fade. Does NOT scroll -- a pseudo-element on the
   scroller would travel up with the rows instead of staying on the edge. */
.dash-chart-table-wrap {
  position: relative;
  width: 100%;
}

.dash-chart-table-wrap::after {
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--background-color) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 25px;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Set by dashboard-charts.js while rows remain below the fold. */
.dash-chart-table-wrap.has-overflow::after {
  opacity: 1;
}

.dash-chart-table-scroll {
  /* Takes the chart's box AND the legend's, since the legend is not shown in
     table view -- so the card is exactly as tall either way. The variable is
     measured in dashboard-charts.js; the fallback is the 300px plot plus a
     one-line legend. */
  max-height: var(--dash-chart-view-h, 330px);
  overflow-y: auto;
  overflow-x: auto;
  width: 100%;
  --sb-size: 9px;
  --sb-track-color: var(--background-color);
  --sb-thumb-color: var(--thumb-color);
  overscroll-behavior-y: contain;
}

.dash-chart-table-scroll::-webkit-scrollbar { width: var(--sb-size); height: var(--sb-size); }
.dash-chart-table-scroll::-webkit-scrollbar-track { background: var(--sb-track-color); border-radius: 11px; }
.dash-chart-table-scroll::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 1px solid var(--background-color);
}

.dash-chart-table {
  width: 100%;
  /* separate, not collapse: collapsed borders make the cells share edges and
     border-radius on them is ignored, so the hover row could not be rounded.
     border-spacing 0 keeps the same tight layout. */
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.85rem;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
}

.dash-chart-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  /* Opaque: rows scroll underneath the header. */
  background: var(--background-color);
  border-bottom: 1px solid var(--border-color);
}

.dash-chart-table th,
.dash-chart-table td {
  padding: 7px 10px;
  text-align: right;
  white-space: nowrap;
  font-weight: 300;
  color: var(--text-color);
}

.dash-chart-table thead th {
  color: var(--med-text);
}

/* Date column stays left and keeps its own edge. */
.dash-chart-table th:first-child,
.dash-chart-table td:first-child {
  text-align: left;
  color: var(--light-text);
}

.dash-chart-table tbody tr + tr td,
.dash-chart-table tbody tr + tr th {
  border-top: 1px solid var(--border-color);
}

.dash-chart-table:not(.billing-table) tbody tr:hover td,
.dash-chart-table:not(.billing-table) tbody tr:hover th {
  background: var(--lighter-hover-color);
}

/* A <tr> cannot carry a border-radius, so the row's outer corners are rounded
   on its first and last CELLS instead. */
.dash-chart-table:not(.billing-table) tbody tr:hover > *:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.dash-chart-table:not(.billing-table) tbody tr:hover > *:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}



/* Body rows: full contrast, one step larger than the header row, which keeps
   its own muted colour. The date cell is a <th scope="row"> and the first
   column has its own colour rule at (0,2,1), so these selectors name both
   element types and restate :first-child to land at (0,2,2) and win. */
.dash-chart-table tbody th,
.dash-chart-table tbody td,
.dash-chart-table tbody th:first-child,
.dash-chart-table tbody td:first-child {
  color: var(--text-color);
  font-size: 0.9rem;
}

/* ---- Billing page ------------------------------------------------------ */

/* Billing tables are read-only lists: no row hover (excluded above). */

/* (0,2,1) beats the table's own `.dash-chart-table td` padding. */
/* Add payment method + Buy credits popups: the outer frame clips (rounded corners) and the
   inner .collection_create_popup_scroll scrolls, as in the .thin variant, so
   the scrollbar never pokes outside the popup. Same scrollbar as the
   dashboard's dropdowns and lists; the track's margin keeps it off the
   rounded corners. */
#updatePaymentModal .collection_create_popup,
#editBillingAddressModal .collection_create_popup,
#autoReloadModal .collection_create_popup,
#buyCreditsModal .collection_create_popup {
  width: 450px;
  overflow: hidden;
  padding: 0;
}

#buyCreditsModal .collection_create_popup {
  width: 550px;
}

#updatePaymentModal .collection_create_popup_scroll, #editBillingAddressModal .collection_create_popup_scroll, #autoReloadModal .collection_create_popup_scroll, #buyCreditsModal .collection_create_popup_scroll {
  min-height: 0;
  flex: 1 1 auto;
  padding: 24px;
  /* Always scrollable when the content is taller than the popup (capped by
     .collection_create_popup's max-height), not only once scroll-ready. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Rows keep their own height and the area scrolls instead: a flex item that
   clips its overflow (the buttons do, for their spinner) may otherwise shrink
   below its content, which squished the Buy button. */
#updatePaymentModal .collection_create_popup_scroll > *,
#editBillingAddressModal .collection_create_popup_scroll > *,
#autoReloadModal .collection_create_popup_scroll > *,
#buyCreditsModal .collection_create_popup_scroll > * {
  flex-shrink: 0;
}

#updatePaymentModal .collection_create_popup_scroll::-webkit-scrollbar, #editBillingAddressModal .collection_create_popup_scroll::-webkit-scrollbar, #autoReloadModal .collection_create_popup_scroll::-webkit-scrollbar, #buyCreditsModal .collection_create_popup_scroll::-webkit-scrollbar {
  width: var(--sb-size);
}

#updatePaymentModal .collection_create_popup_scroll::-webkit-scrollbar-track, #editBillingAddressModal .collection_create_popup_scroll::-webkit-scrollbar-track, #autoReloadModal .collection_create_popup_scroll::-webkit-scrollbar-track, #buyCreditsModal .collection_create_popup_scroll::-webkit-scrollbar-track {
  background: var(--input-bg);
  border-radius: 11px;
  margin: 16px 0;
}

#updatePaymentModal .collection_create_popup_scroll::-webkit-scrollbar-thumb, #editBillingAddressModal .collection_create_popup_scroll::-webkit-scrollbar-thumb, #autoReloadModal .collection_create_popup_scroll::-webkit-scrollbar-thumb, #buyCreditsModal .collection_create_popup_scroll::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 2px solid var(--input-bg);
}

@supports not selector(::-webkit-scrollbar) {
  #updatePaymentModal .collection_create_popup_scroll, #editBillingAddressModal .collection_create_popup_scroll, #autoReloadModal .collection_create_popup_scroll, #buyCreditsModal .collection_create_popup_scroll {
    scrollbar-color: var(--sb-thumb-color) var(--input-bg);
  }
}

/* Buy credits: the four amount tiles, and the price summary under them. */
.credits-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.credits-preset {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 12px;
  border-radius: 12px;
  background: var(--background-color);
  border: 1px solid var(--border-color-lighter);
  color: var(--text-color);
  font-size: 1rem;
  cursor: pointer;
}

.credits-preset.is-selected {
  border-color: var(--blue-accent-med-bg);
}

/* First purchase: the card form inside the popup (as #payment-form's). */
.credits-pay-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* The auto-reload card: the summary box split into stacked sections. */
.credits-summary.is-sectioned {
  padding: 0;
  gap: 0;
}

/* Lies over the Stripe form's box (which holds the height) until Stripe's own
   loader or the form shows (initBuyCredits). */
[data-credits-payment-element] {
  position: relative;
}

.logs-skeleton.credits-pay-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: auto;
  max-width: none;
  height: auto;
  border-radius: 12px;
}

.credits-summary-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
}

/* A divider only between sections, so none dangles when the details hide. */
.credits-summary-section + .credits-summary-section {
  border-top: 1px solid var(--border-color-lighter);
}

.credits-reload-icon {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}

/* These set display themselves, which beats the UA's [hidden]. */
.dropdown-btn.credits-method-btn[hidden],
.credits-pay-form[hidden],
.credits-summary[hidden],
.credits-summary-section[hidden],
[data-billing-invoice-search-clear][hidden],
#buyCreditsModal .input-date[hidden] {
  display: none;
}

/* "Pays with" picker under the summary. */
.credits-method-btn {
  height: 38px;
}

/* The options wrapper must not break the menu's own column and gap. */
[data-credits-method-list] {
  display: contents;
}

/* The chosen method's tick (.ChatDropdownOnCheckmark is display:none until
   revealed; the .dropdown-wrap reveal rule does not reach this menu). */
[data-credits-method-menu] .SettingDropDownOption.is-active .ChatDropdownOnCheckmark {
  display: flex;
}

.credits-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--background-color);
  border: 1px solid var(--border-color-lighter);
  border-radius: 12px;
}

/* Billing before any payment: one tall card, its content centred. */
.billing-empty-card {
  height: 400px;
  justify-content: center;
}

/* width/height 100% would stretch the icon to the card; keep its ratio. */
.billing-empty-icon {
  height: auto;
}

/* Identity and access's empty-card icons are wider artwork than the
   default 60px allows. */
.identity-empty-icon-domains {
  max-width: 80px;
}

.identity-empty-icon-scim {
  max-width: 90px;
}

/* The domain row's globe, tilted like the rest of the set. */
.domain-strip-globe {
  transform: rotate(15deg);
}

/* A section's empty card goes once it has a connection. */
.resource-card[data-identity-empty][hidden],
[data-identity-setup-side][hidden] {
  display: none;
}

/* An unticked .checkbox shows no tick. Its colour alone did not hide it
   here (the popup's own button colour won), so the mark itself goes. */
.checkbox:not(.active) .checkmark {
  visibility: hidden;
}

/* Billing tables while /billing is out: placeholder rows with the logs
   table's shimmering bars, sized per column. */
/* Searching: column widths pinned (set from JS) so hiding rows can't reflow. */
.billing-table.is-width-locked { table-layout: fixed; }
.billing-table[hidden] { display: none; }
.billing-table tr.is-loading td .logs-skeleton { width: 70px; }
.billing-table[data-billing-methods-table] tr.is-loading td:nth-child(1) .logs-skeleton { width: 160px; }
.billing-table[data-billing-methods-table] tr.is-loading td:nth-child(2) .logs-skeleton { width: 54px; }
.billing-table[data-billing-invoices-table] tr.is-loading td:nth-child(1) .logs-skeleton { width: 90px; }
.billing-table[data-billing-invoices-table] tr.is-loading td:nth-child(2) .logs-skeleton { width: 110px; }
.billing-table[data-billing-invoices-table] tr.is-loading td:nth-child(3) .logs-skeleton { width: 120px; }
.billing-table[data-billing-invoices-table] tr.is-loading td:nth-child(4) .logs-skeleton { width: 130px; }
.billing-table[data-billing-invoices-table] tr.is-loading td:nth-child(5) .logs-skeleton { width: 60px; }
.billing-table[data-billing-invoices-table] tr.is-loading td:nth-child(6) .logs-skeleton { width: 60px; }

/* Card brand we have no logo for (copied icon set, billing JS). */
.billing-card-generic {
  color: var(--text-color);
  opacity: 0.5;
}

/* Billing page tables only: roomier rows than the chart tables. Before the
   action-cell rule below, which has the same specificity and keeps its 0. */
.dash-chart-table.billing-table th,
.dash-chart-table.billing-table td {
  padding: 11px 10px;
  /* Every column reads from the left here (the chart tables right-align
     their numbers). */
  text-align: left;
}

/* A 1% width in an auto table shrinks the column to its content: just the
   27px button, on the right. */
.dash-chart-table td.billing-action-cell,
.dash-chart-table th.billing-action-cell {
  padding: 0;
  width: 1%;
}

.billing-row-menu {
  width: 27px !important;
  height: 27px !important;
  padding: 5px !important;
}

.billing-spend-note {
  background: transparent;
  border: 1px solid var(--border-color-sharper);
  border-radius: 12px;
  padding: 5px 5px 5px 16px;
  color: var(--text-color);
}

/* ---- Chart legend (below the plot) -------------------------------------- */

.dash-chart-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
  row-gap: 6px;
  padding-top: 20px;
  padding-left: 24px;
}

.dash-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dash-chart-legend-label {
  font-size: 0.85rem;
  font-weight: 300;
  color: var(--med-text);
}

.dropdown-role {
    height: 14px;
    margin-right: -6px;
    width: 14px;
    margin-left: 6px;
}

.dropdown-role.wide {
  margin-left: 3px;
  margin-right: 2px;
}

.dropdown-role.inline{
    margin-left: 0;
    margin-right: 0;
}
/* ---- Role filter dropdown ----------------------------------------------- */

/* Trigger and its clear button sit side by side; the menu hangs off the wrap. */
[data-chart-role-wrap] {
  align-items: center;
  gap: 2px;
}

/* The cube glyph. Its path uses currentColor, so tinting it is just `color`,
   set per role from roleIconStrokeColor(). */
.dropdown-role {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--med-text);
}

.dropdown-role.inline {
  margin-left: 2px;
  margin-right: -4px;
}

/* Role names are longer than "Model"/"Task", so this menu is wider. Height is
   not capped here -- the viewport fit script sizes every menu to the space
   below it, and a fixed max-height plus overflow-y here would override that
   and leave a permanent scrollbar. */
.SettingDropDown.wide {
  min-width: 190px;
}

[data-chart-role-clear] {
  flex-shrink: 0;
}

/* Dropdown loading state: shown while a menu is open but the data that fills
   it has not arrived yet (e.g. the chart's role filter before the roles/users
   bundle lands). The spinner is a single off-centre radial gradient, so the
   rotation reads as a comet sweeping the ring. */
.SettingDropDownLoading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    width: 100%;
}

.SettingDropDownSpinner {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    /* Angular (conic) sweep for the colour; a radial-gradient mask punches the
       hole, cutting everything inside 74% of the radius to leave a thin ring.
       The ramp runs the full 0->360deg with no flat head: a held segment makes
       the seam read as a jump once per revolution. */
    background: conic-gradient(from 0deg, rgba(127, 127, 127, 0.16), var(--text-color));
    -webkit-mask: radial-gradient(closest-side, transparent 74%, #000 75%);
    mask: radial-gradient(closest-side, transparent 74%, #000 75%);
    animation: setting-dropdown-spin 0.8s linear infinite;
}

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

.input-transparent-date {
  font-size: 0.9rem;
  font-family: 'JetBrains Mono', monospace;
  font-weight: 300;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  color: var(--text-color);
  width: 100%;
  box-sizing: border-box;
}

.input-transparent {
  font-size: 0.9rem;
  font-weight: 300;
  padding: 0;
  background-color: transparent;
  border: none;
  outline: none;
  color: var(--text-color);
  width: 100%;
  box-sizing: border-box;
}

.input-date svg {
  width: 15px;
  height: 15px;
  color: var(--med-text);
}

.dropdown-date-box{
  padding: 4px 9px;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input-date-selector{
  width: 100%;
  box-sizing: border-box;
  background-color: var(--background-color);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  padding: 8px;
}
/* Month grid inside .input-date-selector. Seven equal columns so the weekday
   header and the day cells stay aligned regardless of digit width. */
.date-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 8px;
    width: 100%;
    box-sizing: border-box;
}

.date-grid-weekdays,
.date-grid-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.date-grid-weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    font-size: 0.85rem;
    color: var(--light-text);
}

.date-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-color);
    font-family: inherit;
    font-weight: 300;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.date-cell:hover,
.date-cell.is-hovered {
    background-color: var(--hover-color);
}

/* Days spilling in from the neighbouring months stay readable but recede. */
.date-cell.is-outside {
    color: var(--med-text);
}

.date-cell.is-selected,
.date-cell.is-selected:hover {
    background-color: var(--contrast);
    color: var(--contrast-text);
}

.date-cell:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Days after today: no usage data exists for them, so they are dimmed and
   inert. .pointer-events-none on the element blocks the click; this is the
   matching visual state. */
.date-cell.is-future {
    opacity: 0.5;
}

/* The custom-range panel is revealed by the "Custom range" option, with the
   same motion as collapsing a sidebar nav group: the panel's content keeps its
   natural size and is clipped from the bottom edge while the rows below slide
   over it. The inner .dropdown-date-box-clip is what shrinks, so the flex box
   holding the content is never resized and nothing squeezes. */
.dropdown-date-box-reveal {
    display: grid;
    grid-template-rows: 0fr;
    /* Cancels the parent's 4px gap so a collapsed panel leaves no dead space. */
    margin-bottom: -4px;
    transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                margin-bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    width: 100%;
}

.dropdown-date-box-clip {
    overflow: hidden;
    min-height: 0;
    width: 100%;
}

/* The content keeps its own height inside the clip, so it is revealed rather
   than compressed. */
.dropdown-date-box-clip > .dropdown-date-box {
    height: auto;
}

.dropdown-date-box-reveal.is-open {
    grid-template-rows: 1fr;
    margin-bottom: 0;
}

/* A dropdown grows with its content until it would run off the bottom of the
   window; past that it scrolls, stopping 8px short of the edge. */
.SettingDropDown {
    /* The cap itself is written inline by JS, which is the only place that can
       read the menu's own viewport offset. Hidden (not auto) by default so a
       menu that fits shows no scrollbar at all.
       border-box is required: max-height caps the CONTENT box, so without it
       the 4px padding and 1px borders push the menu 10px past the ceiling and
       the 8px window gap comes out negative. */
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: contain;
}

.SettingDropDown.is-scrollable {
    overflow-y: auto;
}

/* Same scrollbar as the sidebar and main view. The thumb's border blends into
   the menu's own background, not the page's, since the menu sits on
   --input-bg. */
.SettingDropDown.is-scrollable::-webkit-scrollbar {
  width: var(--sb-size);
}

.SettingDropDown.is-scrollable::-webkit-scrollbar-track {
  background: var(--input-bg);
  border-radius: 11px;
}

.SettingDropDown.is-scrollable::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 2px solid var(--input-bg);
}

@supports not selector(::-webkit-scrollbar) {
  .SettingDropDown.is-scrollable {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

/* Loading placeholders for the Dashboard chart and stat cards, using the same
   sweep as the Eikon host: the block is a flat fill and a ::before gradient
   travels across it. The sweep needs a positioned, clipped parent, which none
   of these elements has on its own.
   The value and its note are shimmered separately, so a card reads as two bars
   rather than one slab the width of the whole card. Applies to every bundle-fed
   card in both sections -- credits, spend, academic honesty and token volume
   all come from the same payload, so they must fill in together. */
.UsageDash.is-chart-loading .dash-chart-host,
.CachingDash.is-chart-loading .dash-chart-host,
.CostDash.is-chart-loading .dash-chart-host,
.LogsDash.is-chart-loading .dash-chart-host,
.CostDash.is-chart-loading .card-details > .card-large-val,
.LogsDash.is-chart-loading .card-details > .card-large-val,
.CostDash.is-chart-loading .card-details > .sans_serif,
.LogsDash.is-chart-loading .card-details > .sans_serif,
.UsageDash.is-chart-loading .card-details > .card-large-val,
.CachingDash.is-chart-loading .card-details > .card-large-val,
.UsageDash.is-chart-loading .card-details > .sans_serif,
.CachingDash.is-chart-loading .card-details > .sans_serif,
.DashboardDash.is-chart-loading .card-details > .card-large-val,
.DashboardDash.is-chart-loading .card-details > .sans_serif {
    position: relative;
    overflow: hidden;
    background: var(--file-btn-mobile-bg);
    border-radius: 13px;
}

/* The text stays in the flow so the card keeps its height; it is just not
   painted. user-select is what stops a drag-select from revealing it through
   the selection highlight, which repaints text in the UA's own colours and
   ignores `color: transparent`; the ::selection rules cover a select-all made
   from outside the element, which user-select alone does not block. */
.UsageDash.is-chart-loading .card-details > .card-large-val::selection,
.CachingDash.is-chart-loading .card-details > .card-large-val::selection,
.CostDash.is-chart-loading .card-details > .card-large-val::selection,
.LogsDash.is-chart-loading .card-details > .card-large-val::selection,
.CostDash.is-chart-loading .card-details > .sans_serif::selection,
.LogsDash.is-chart-loading .card-details > .sans_serif::selection,
.UsageDash.is-chart-loading .card-details > .sans_serif::selection,
.CachingDash.is-chart-loading .card-details > .sans_serif::selection,
.DashboardDash.is-chart-loading .card-details > .card-large-val::selection,
.DashboardDash.is-chart-loading .card-details > .sans_serif::selection {
    color: transparent;
    background: transparent;
}

.UsageDash.is-chart-loading .card-details > .card-large-val::-moz-selection,
.CachingDash.is-chart-loading .card-details > .card-large-val::-moz-selection,
.CostDash.is-chart-loading .card-details > .card-large-val::-moz-selection,
.LogsDash.is-chart-loading .card-details > .card-large-val::-moz-selection,
.CostDash.is-chart-loading .card-details > .sans_serif::-moz-selection,
.LogsDash.is-chart-loading .card-details > .sans_serif::-moz-selection,
.UsageDash.is-chart-loading .card-details > .sans_serif::-moz-selection,
.CachingDash.is-chart-loading .card-details > .sans_serif::-moz-selection,
.DashboardDash.is-chart-loading .card-details > .card-large-val::-moz-selection,
.DashboardDash.is-chart-loading .card-details > .sans_serif::-moz-selection {
    color: transparent;
    background: transparent;
}

.UsageDash.is-chart-loading .card-details > .card-large-val,
.CachingDash.is-chart-loading .card-details > .card-large-val,
.CostDash.is-chart-loading .card-details > .card-large-val,
.LogsDash.is-chart-loading .card-details > .card-large-val,
.DashboardDash.is-chart-loading .card-details > .card-large-val {
    color: transparent !important;
    width: 100px;
    -webkit-user-select: none;
    user-select: none;
}

.UsageDash.is-chart-loading .card-details > .sans_serif,
.CachingDash.is-chart-loading .card-details > .sans_serif,
.CostDash.is-chart-loading .card-details > .sans_serif,
.LogsDash.is-chart-loading .card-details > .sans_serif,
.DashboardDash.is-chart-loading .card-details > .sans_serif {
    -webkit-user-select: none;
    user-select: none;
    color: transparent !important;
    width: 200px;
}

.UsageDash.is-chart-loading .dash-chart-host::before,
.CachingDash.is-chart-loading .dash-chart-host::before,
.CostDash.is-chart-loading .dash-chart-host::before,
.LogsDash.is-chart-loading .dash-chart-host::before,
.CostDash.is-chart-loading .card-details > .card-large-val::before,
.LogsDash.is-chart-loading .card-details > .card-large-val::before,
.CostDash.is-chart-loading .card-details > .sans_serif::before,
.LogsDash.is-chart-loading .card-details > .sans_serif::before,
.UsageDash.is-chart-loading .card-details > .card-large-val::before,
.CachingDash.is-chart-loading .card-details > .card-large-val::before,
.UsageDash.is-chart-loading .card-details > .sans_serif::before,
.CachingDash.is-chart-loading .card-details > .sans_serif::before,
.DashboardDash.is-chart-loading .card-details > .card-large-val::before,
.DashboardDash.is-chart-loading .card-details > .sans_serif::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, transparent 100%);
    transform: translateX(-100%);
    animation: slanterEikonShimmer 1.25s linear infinite;
    pointer-events: none;
}

/* Institution page, first load: every text field is the same shimmering
   block as the cards above, at its real size, until the profile arrives. */
.InstitutionDash.is-loading [data-inst-field],
.InstitutionDash.is-loading [data-inst-country],
.InstitutionDash.is-loading [data-inst-tax-type],
.InstitutionDash.is-loading [data-inst-icon] {
    position: relative;
    overflow: hidden;
    background: var(--file-btn-mobile-bg);
    border-color: transparent;
    pointer-events: none;
}

.InstitutionDash.is-loading [data-inst-field] input {
    color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.InstitutionDash.is-loading [data-inst-field] input::placeholder {
    color: transparent;
}

/* the buttons' label and chevron, and the tile's upload glyph, go too */
.InstitutionDash.is-loading [data-inst-country] > *,
.InstitutionDash.is-loading [data-inst-tax-type] > *,
.InstitutionDash.is-loading [data-inst-icon] > * {
    visibility: hidden;
}

.InstitutionDash.is-loading [data-inst-field]::before,
.InstitutionDash.is-loading [data-inst-country]::before,
.InstitutionDash.is-loading [data-inst-tax-type]::before,
.InstitutionDash.is-loading [data-inst-icon]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, transparent 100%);
    transform: translateX(-100%);
    animation: slanterEikonShimmer 1.25s linear infinite;
    pointer-events: none;
}

/* Billing page, first load: the balance and the address lines shimmer at
   roughly their real size until /billing answers. */
.BillingDash.is-loading [data-billing-balance-amount],
.BillingDash.is-loading [data-billing-address-name],
.BillingDash.is-loading [data-billing-address-line],
.BillingDash.is-loading [data-billing-autoreload-text] {
    position: relative;
    overflow: hidden;
    display: inline-block;
    /* !important: the address lines are .sans_serif.grey, whose colour is
       !important, so the placeholder text showed through the shimmer. */
    color: transparent !important;
    background: var(--file-btn-mobile-bg);
    border-radius: 6px;
    -webkit-user-select: none;
    user-select: none;
}

.BillingDash.is-loading [data-billing-balance-amount] { min-width: 96px; }
.BillingDash.is-loading [data-billing-address-name] { width: 160px; }
.BillingDash.is-loading [data-billing-address-line] { width: 280px; }
/* The auto-reload row: a text-high bar like the address lines; no icon. */
/* One line: the placeholder text wrapped to two inside 420px, doubling the bar. */
.BillingDash.is-loading [data-billing-autoreload-text] { width: 420px; max-width: 100%; white-space: nowrap; }
.BillingDash.is-loading [data-billing-autoreload-status] > svg { display: none; }

.BillingDash.is-loading [data-billing-balance-amount]::before,
.BillingDash.is-loading [data-billing-address-name]::before,
.BillingDash.is-loading [data-billing-address-line]::before,
.BillingDash.is-loading [data-billing-autoreload-text]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, transparent 100%);
    transform: translateX(-100%);
    animation: slanterEikonShimmer 1.25s linear infinite;
    pointer-events: none;
}

/* Whatever the chart last drew must not show through the placeholder. */
.UsageDash.is-chart-loading .dash-chart-host > *,
.CachingDash.is-chart-loading .dash-chart-host > *,
.LogsDash.is-chart-loading .dash-chart-host > *,
.CostDash.is-chart-loading .dash-chart-host > * {
    visibility: hidden;
}

/* A card that acts as a link to another view. */
.dashboard-card.is-linked {
    cursor: pointer;
}

/* Align every card's value on one line, even when a neighbour's title wraps to
   two. The row stays flex -- each card sizes itself, so the only way to line
   the values up is to reserve the same title height in every card. Two lines
   is the observed maximum for these titles. */
.card-grid > .dashboard-card > .card-title {
  min-height: calc(2 * 1.4em);
  align-items: flex-start;
}

/* Toolbar rows (Roles / Model / Range / Group by, plus Clear and Download):
   wrap onto a second line instead of squeezing the controls when the card
   gets narrow. */
.flex.flex-wrap {
  flex-wrap: wrap;
}

/* row-gap matches the existing column gap so wrapped lines are evenly spaced
   (the gap shorthand in these rows only reads as column-gap while nowrap). */
.flex.flex-wrap.gap12 {
  row-gap: 12px;
}

/* Model cards open the playground popup. */
.model-card[data-playground-model] {
    cursor: pointer;
}

/* One content block per model inside the shared popup shell; the shell owns
   the padding and the column flow, so each block just stacks its own rows. */
.model-playground-content {
    display: flex;
    flex-direction: column;
    gap: 26px;
    width: 100%;
}


.model-panel-stats-grid{
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}

.model-panel-stats-row{
  display: flex;
  padding: 16px 0;
  color: var(--med-text);
  border-top: 1px solid var(--border-color-input);
  font-size: 0.9rem;
  align-items: center;
}

.model-panel-stats-row.thin{
  display: flex;
  padding: 4px 0;
  color: var(--med-text);
  font-size: 0.85rem;
  border: none;
}

.model-panel-stats-column{
  display: flex;
  flex-direction: column;
}

.model-stat-icon{
  height: 16px;
  width: 16px;
  color: var(--text-color);
}

.model-stat-icon.med{
  color: var(--med-text);
}
/* Copy button icon: scales out, swaps, scales back in. No size is set here --
   .action-btn svg already sizes it, and overriding that changed the icon. */
.copy-btn-icon {
    transform: scale(1);
    transition: transform 0.13s cubic-bezier(0.22, 1, 0.36, 1);
}

.copy-btn-icon.is-swapping {
    transform: scale(0);
}

[data-playground-content="quark"] .bg-image-model-card {
    opacity: 0.2;
}

[data-playground-content="opsis"] .bg-image-model-card {
    opacity: 0.3;
}

.status-dot{
  display: flex;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background-color: var(--green-400);
}

/* OK keeps the default green. The other three are separated by WHO caused
   them, not by severity: FAILED is the system's fault, BLOCKED is a policy
   decision, ABORTED is the user's own choice and so is neutral grey rather
   than a warning colour competing with the other two. */
.status-dot.status-failed,
.status-dot.status-error {
  background-color: var(--red-400);
}

.status-dot.status-blocked {
  background-color: var(--orange-400);
}

.status-dot.status-aborted {
  background-color: var(--med-text);
}

.logs-table{
  width: 100%;
}

.logs-table th{
  font-size: 0.85rem;
  color: var(--light-text);
  font-weight: 300;
  padding: 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-color);
}

.logs-table td{
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-color);
  font-weight: 300;
  padding: 14px 12px;
  border-bottom: 1px solid var(--border-color);
}

.logs-table td.light{
  color: color-mix(in srgb, var(--text-color) 80%, transparent 20%);
}

.logs-table td.med{
  color: var(--med-text);
}

.logs-table td.monospace{
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
}
/* Row hover. The highlight reaches 8px PAST the table on both sides: a
   background on the <tr> is clipped to the table box, so the end cells extend
   theirs with an offset box-shadow instead. The shadow inherits the cell's
   border-radius, so the overhang is rounded too, and because it paints outside
   the box nothing shifts -- padding would move the text on hover.
   border-collapse must be separate or the radii are ignored. */
.logs-table {
  border-collapse: separate;
  border-spacing: 0;
}

.logs-table tr:hover td {
  background-color: var(--hover-color-50);
  /* Transparent, not a colour: a border always paints ON TOP of its own
     background, so any colour here draws a line across the highlight. Made
     transparent, the row's background shows through the border band instead --
     the hover sits in front of the divider. */
  border-bottom-color: transparent;
}

.logs-table tr:hover td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: -8px 0 0 var(--hover-color-50);
}

.logs-table tr:hover td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 8px 0 0 var(--hover-color-50);
}

/* Label columns stay left: ID, Status, Time, Model (1-4) and Reasoning (8),
   which is a word rather than a measurement. The measured columns between them
   -- Input tokens, Output tokens, Latency (5-7) -- align right so their digits
   line up down the column. */
.logs-table th:nth-child(-n+4),
.logs-table td:nth-child(-n+4),
.logs-table th:nth-child(8),
.logs-table td:nth-child(8) {
  text-align: left;
}

.logs-table th:nth-child(n+5):nth-child(-n+7),
.logs-table td:nth-child(n+5):nth-child(-n+7) {
  text-align: right;
}

/* A cell whose content is a flex row needs the alignment applied to the flex
   axis too -- text-align does not move flex items. */
.logs-table td:nth-child(n+5):nth-child(-n+7) > .flex {
  justify-content: flex-end;
}

/* The outer edges of the table sit flush with the panel: only the gaps BETWEEN
   columns need the 12px. */
.logs-table th:first-child,
.logs-table td:first-child {
  padding-left: 0;
}

.logs-table th:last-child,
.logs-table td:last-child {
  padding-right: 0;
}

/* Logs table: below 1100px the columns would crush together, so the table
   keeps that width and the wrapper scrolls sideways instead. */
.logs-table-wrap {
  position: relative;
  /* Pulled out by the scroller's gutter below, so the table still lines up
     with the rest of the panel. */
  width: calc(100% + 16px);
  margin: 0 -8px;
}

.logs-table-scroll {
  overflow-x: auto;
  width: 100%;
  box-sizing: border-box;
  /* An 8px gutter so the row hover, which sticks out 8px on each side, is not
     clipped by this scroll box -- overflow clips at the PADDING edge, so the
     overhang lives inside the padding and stays visible. */
  padding: 0 8px;
  --sb-size: 9px;
  --sb-track-color: var(--background-color);
  --sb-thumb-color: var(--thumb-color);
  overscroll-behavior-x: contain;
}

.logs-table-scroll::-webkit-scrollbar { height: var(--sb-size); }
.logs-table-scroll::-webkit-scrollbar-track { background: var(--sb-track-color); border-radius: 11px; }
.logs-table-scroll::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 1px solid var(--background-color);
}

.logs-table {
  min-width: 1100px;
}

/* Same fade as the chart table's bottom edge, turned on its side and mirrored:
   ::before marks content hidden to the LEFT, ::after to the right. Each is
   toggled independently, so only the overflowing side is marked. */
.logs-table-wrap::before,
.logs-table-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25px;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.logs-table-wrap::before {
  /* Flush with the wrap: the scroller spans it gutter and all, so that -- not
     the padding edge -- is where content is actually cut off. */
  left: 0;
  background: linear-gradient(270deg, transparent 0%, var(--background-color) 100%);
}

.logs-table-wrap::after {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--background-color) 100%);
}

/* Set from JS while content remains off that edge. */
.logs-table-wrap.has-overflow-left::before,
.logs-table-wrap.has-overflow-right::after {
  opacity: 1;
}

/* Refresh spinner. Sized to the box .action-btn svg gives the icon it replaces,
   so the swap does not change the button's metrics. Same thin ring as the
   dropdown spinner: an angular sweep with a radial-gradient mask for the hole. */
.logs-refresh-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  /* The button is a flex row with align-items:center but no justify-content;
     the icon it replaces is width:100% so it filled the box. A fixed 16px
     element would sit at flex-start, so it centres itself. */
  margin: auto;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(127, 127, 127, 0.16), currentColor);
  /* 1.5px ring: 100% is the closest-side radius, so the hole stops 1.5px short
     of the edge. Stated in px, not a percentage, so the thickness stays 1.5px
     if the spinner is ever resized. Both stops share a position for a hard
     edge rather than a feathered one. */
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  animation: setting-dropdown-spin 0.8s linear infinite;
}

.logs_slideout{
  display: flex;
  width: 578px;
  /* Fixed, not absolute: the panel must stay put while the page scrolls, and
     it is sized against the viewport rather than whatever happens to be the
     nearest positioned ancestor. */
  position: fixed;
  right: 8px;
  top: 8px;
  bottom: 8px;
  /* Never crosses the sidebar: --sidebar-w tracks its collapsed/expanded
     width, so the 8px gap survives both states and any window width. */
  max-width: calc(100vw - var(--sidebar-w, 290px) - 16px);
  background-color: var(--input-bg);
  border: 1px solid var(--border-color-input);
  border-radius: 12px;
  z-index: 10;
  padding: 15px;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0px 0px 15px 5px var(--black-shadow);
  box-sizing: border-box;
  overflow-y: auto;
  /* Slides in from the right edge. Only opening and closing animate --
     cycling between rows just swaps the contents, and the panel does not
     move, so there is nothing to animate there. */
  transform: translateX(0);
  transition: transform 0.26s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.26s ease;
  opacity: 1;
}

.logs_slideout[hidden] {
  /* [hidden] would remove it from the layout before the transition could run,
     so the panel is taken out of reach with transform/visibility instead. */
  display: flex;
  transform: translateX(calc(100% + 16px));
  opacity: 0;
  pointer-events: none;
}

.logs-table tbody tr,
.logs-table tr:not(:first-child) {
  cursor: pointer;
}

.logs-stats{
  display: grid;
  width: 100%;
  column-gap: 16px;
  grid-template-columns: 145px 1fr;
}
/* Middle ellipsis. text-overflow can only clip at the END of a line, so the
   value is split: the head shrinks and gets the ellipsis, the tail never
   shrinks, and the two sit flush -- "req_abc…x9f2". */
.truncate-middle {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.truncate-middle-head {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.truncate-middle-tail {
  flex: none;
  white-space: nowrap;
}

/* The row has to be allowed to shrink, or the id never reaches its own
   max-width and the line wraps instead. */
.logs_slideout .flex > .sans_serif.light_small {
  min-width: 0;
}

/* Detail values clip at the end rather than wrapping, so each label keeps its
   own single line and the two columns stay aligned. */
.logs-stats > div {
  min-width: 0;
}

.logs-stats > div > div {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The row whose details are open. Same 8px overhang as the hover state, so the
   selection reads as the same shape rather than a narrower band. */
.logs-table tr.is-selected td {
  background-color: var(--lighter-hover-color);
  border-bottom-color: transparent;
}

.logs-table tr.is-selected td:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: -8px 0 0 var(--lighter-hover-color);
}

.logs-table tr.is-selected td:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  box-shadow: 8px 0 0 var(--lighter-hover-color);
}

.large-icon-no-data {
  max-width: 60px;
  opacity: 0.8;
  color: var(--contrast);
  fill: var(--darker-box-bg);
}
/* Outline icons (no-match states): their paths carry their own fills. */
.large-icon-no-data.is-outline {
  fill: none;
  height: fit-content;
}
/* Same fill as the Billing empty card's icon; at 0.25 opacity it vanished
   into the page. */
.large-icon-no-data .no-data-fill {
  fill: var(--darker-box-bg);
}
.large-icon-no-data .no-data-stroke {
  stroke: currentColor;
}
/* Placeholder rows while the logs request is out. Same sweep as the dashboard
   cards: a flat fill with a gradient travelling across it. */
.logs-table tr.is-loading td {
  padding-top: 14px;
  padding-bottom: 14px;
}

/* A placeholder is not a row you can open: no highlight, no overhang, no
   pointer, and the divider stays as it is. */
.logs-table tr.is-loading td {
  cursor: default;
}

.logs-table tr.is-loading:hover td,
.logs-table tr.is-loading:hover td:first-child,
.logs-table tr.is-loading:hover td:last-child {
  background-color: transparent;
  box-shadow: none;
  border-bottom-color: var(--border-color);
}

.logs-skeleton {
  /* inline-block, not block: an inline formatting context gives the cell its
     normal text strut, so a placeholder row is exactly as tall as a row of
     real text. As a block the 12px bar set the height on its own and the
     skeleton rows came out ~5px shorter than the rest. */
  display: inline-block;
  vertical-align: middle;
  position: relative;
  overflow: hidden;
  height: 12px;
  /* A real width, not 100% + max-width: under auto table layout a cell whose
     only content is a percentage-width box has no intrinsic width, so the
     column collapses to its header and the placeholder looks short however
     high the cap is. max-width keeps it shrinkable in a narrow column.
     Short by default -- status, the counts, latency and reasoning all hold a
     word or a number. */
  width: 64px;
  max-width: 100%;
  border-radius: 6px;
  background: var(--file-btn-mobile-bg);
}

/* ID (1) and Model (4) carry long strings. */
.logs-table tr.is-loading td:nth-child(1) .logs-skeleton {
  width: 280px;
}

.logs-table tr.is-loading td:nth-child(4) .logs-skeleton {
  width: 130px;
}

.logs-skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, transparent 100%);
  transform: translateX(-100%);
  animation: slanterEikonShimmer 1.25s linear infinite;
  pointer-events: none;
}

/* Right-aligned columns keep their placeholder on the right edge -- the
   column's own text-align does this now that the bar is inline. */

/* Fixed column widths so the table has the same geometry whether it is showing
   placeholders or real rows -- with auto layout the columns resize when the
   data lands and everything shifts sideways. Widths total 1090px, just under
   the table's 1100px min-width, so the last column takes up the remainder. */
.logs-table {
  table-layout: fixed;
}

.logs-table th:nth-child(1) { width: 300px; }   /* req_ + 24 chars */
.logs-table th:nth-child(2) { width: 90px; }    /* OK / ERROR / ABORTED / BLOCKED */
.logs-table th:nth-child(3) { width: 130px; }   /* "12 minutes ago" */
.logs-table th:nth-child(4) { width: 140px; }   /* slanter-quark-1 */
.logs-table th:nth-child(5) { width: 110px; }
.logs-table th:nth-child(6) { width: 120px; }
.logs-table th:nth-child(7) { width: 90px; }
.logs-table th:nth-child(8) { width: 110px; }

/* Fixed layout will not grow a column for long content, so cells clip rather
   than spilling into their neighbour. */
.logs-table td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Any utility that sets `display` beats the UA's [hidden] rule, which has the
   lowest possible specificity -- .flex and .logs-stats both did, so a hidden
   element stayed on screen. This covers the utilities used here rather than
   every element on the page. */
.flex[hidden],
.logs-stats[hidden],
.logs_slideout [hidden] {
  display: none !important;
}

/* The user id is monospaced, but JetBrains Mono at its own 0.8rem would make
   this row shorter than its label and break the two columns' alignment. The
   line box is pinned to the label's instead, so only the glyphs change. */
.logs_slideout [data-detail="userId"] {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.8rem;
  line-height: calc(0.85rem * 1.2);
}

/* The tooltip centres on its target's box. These value cells are full-width
   flex items, so a short value (the time) sat far left of its own box centre
   and the tooltip appeared pushed to the right. Time is never clipped, so its
   box can shrink to the text; the other cells must stay full width to keep
   their end-ellipsis. */
/* A tooltip centres on its element's box. These values sit in a 1fr grid
   column, so a full-width box puts the tooltip under the middle of the COLUMN
   rather than under the text -- it has to shrink to its content. Keyed on the
   tooltip being present, so it covers every detail value that has one. */
.logs_slideout [data-detail="time"],
.logs_slideout [data-detail][data-tooltip] {
  width: fit-content;
  max-width: 100%;
}

.slide-out-icon{
  width: 20px;
  height: 20px;
}
/* Created by / Last modified by carry an avatar plus a two-line name-and-email
   stack, so those rows stand taller than the plain text ones. The labels live
   in their own flex column rather than in a grid row, so nothing lines the two
   sides up on its own -- the height is pinned on BOTH columns, and only on
   these rows so the rest stay thin. */
.logs-stats .logs-stat-tall {
  min-height: 32px;
  display: flex;
  align-items: center;
}

/* Two 16px lines, so the stack measures exactly the pinned 32px. */
.logs-stats .logs-stat-tall .flex-direction-column > span {
  line-height: 16px;
}

.number-circle {
    font-size: 0.85rem;
    color: var(--light-text);
    border-radius: 25px;
    padding: 4px 5px;
    min-width: 17px;
    height: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--file-btn-mobile-bg);
}

.number-circle.red {
    color: var(--white);
    background-color: var(--red-text);
}
/* Roles table: seven columns, not the logs table's eight, so both the widths
   and the alignment rules above have to be restated -- they key on nth-child
   and would otherwise right-align Last used and Created. Widths total 1090px,
   just under the shared 1100px min-width. */
.logs-table.roles-table th:nth-child(1) { width: 170px; }   /* role name + icon */
.logs-table.roles-table th:nth-child(2) { width: 300px; }   /* role_ id */
.logs-table.roles-table th:nth-child(3) { width: 180px; }   /* supervisor name */

/* Linked supervisor is hidden until a role supervisor actually carries
   permissions. display: none does NOT renumber nth-child, so every width,
   alignment and skeleton rule keyed on an index still lands on its own
   column; its 180px went to the id column so the widths still total 1090px. */
.logs-table.roles-table th:nth-child(3),
.logs-table.roles-table td:nth-child(3) {
  display: none;
}
.logs-table.roles-table th:nth-child(4) { width: 90px; }    /* member count */
.logs-table.roles-table th:nth-child(5) { width: 130px; }   /* "12 hours ago" */
.logs-table.roles-table th:nth-child(6) { width: 130px; }   /* "Nov 28, 2025" */
.logs-table.roles-table th:nth-child(7) { width: 100px; }   /* money */
.logs-table.roles-table th:nth-child(8) { width: 40px; }    /* actions */

/* Every column reads as a label here, so all seven align left -- unlike the
   logs table, which right-aligns its measured ones. The :nth-child pair is
   carried over from that rule on purpose: a pseudo-class counts as a class for
   specificity, so `.logs-table.roles-table th` alone scores (0,2,1) and LOSES
   to `.logs-table th:nth-child(n+5):nth-child(-n+7)` at (0,3,1). */
.logs-table.roles-table th:nth-child(n+1):nth-child(-n+7),
.logs-table.roles-table td:nth-child(n+1):nth-child(-n+7) {
  text-align: left;
}

/* The actions column is a control, not data: it sits at the right edge, flush
   with the table, since td:last-child drops its padding there. */
.logs-table.roles-table th:nth-child(8),
.logs-table.roles-table td:nth-child(8) {
  text-align: right;
  overflow: visible;
}

/* text-align does not move flex items, so a cell whose content is a flex row
   needs the axis set too -- the inherited rule flex-ends columns 5-7, and it
   outscores a plainer selector for the same reason as above. */
.logs-table.roles-table td:nth-child(n+1):nth-child(-n+7) > .flex {
  justify-content: flex-start;
}

/* Hover state for the account boxes -- the avatar + name stacks, both in the
   slide-out (Created by / Last modified by) and in a table cell. The highlight
   reaches past the text on all four sides, so it is painted by an ::after
   rather than by a background: padding would shift the avatar and the name on
   hover. */
.account-box {
  position: relative;
  /* Same height in both places, so the highlight is the same shape whether the
     box is in the slide-out or in a table cell. */
  min-height: 32px;
  display: flex;
  align-items: center;
  /* Establishes a stacking context, so the z-index below drops the highlight
     behind the avatar and text without escaping behind the panel itself. */
  isolation: isolate;
}

.account-box::after {
  content: "";
  position: absolute;
  inset: -4px -8px;
  border-radius: 8px;
  background-color: var(--hover-color-50);
  opacity: 0;
  transition: opacity 0.12s ease;
  pointer-events: none;
  z-index: -1;
}

.account-box:hover::after {
  opacity: 1;
}

/* The ::after hangs outside the box, so every rule that clips this element has
   to be beaten -- and each one outscores a bare `.account-box`. In the panel
   that is `.logs-stats > div > div` (0,1,2), which is why scoping this to
   `.logs-stats` matters rather than relying on source order. */
.logs-stats .account-box {
  overflow: visible;
  width: fit-content;
  cursor: pointer;
}

/* The search's role rows: a square one size down to sit in the row's icon
   slot. */
.role-square.search-role-square {
  width: 13px;
  height: 13px;
  min-width: 13px;
  min-height: 13px;
}

.role-square{
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  background-color: var(--blue-400);
}
/* The box is a child of the cell, never the cell itself: a <td> set to
   display:flex stops being a table-cell, so it no longer stretches to the row
   height and comes out shorter than its neighbours. Nothing else is needed
   here -- the cell's 14px/12px padding is wider than the highlight's 4px/8px
   overhang, so `.logs-table td`'s clip (which cuts at the PADDING edge) leaves
   it alone. */

/* Two 16px lines, so the stack measures exactly the 32px pinned above. */
.account-box .flex-direction-column > span {
  line-height: 16px;
}

.dropdown-icon {
    height: 16px;
    width: 16px;
    scale: 1.1;
    margin-right: -5px !important;
}

.color-select-grid{
  display: grid;
  /* Five per row, two rows: the 200s above their matching 400s. */
  grid-template-columns: repeat(5, 32px);
  grid-template-rows: repeat(2, 32px);
  gap: 8px;
  width: 100%;
  max-width: 192px;
  max-height: 72px;
}

.color-select{
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: var(--red-400);
  cursor: pointer;
  outline: 0 solid var(--blue-accent);
  transition: outline 0.1s ease;
}

.color-select:hover{
  opacity: 0.8;
}

.color-select.active{
  outline: 1px solid var(--blue-accent-dark) !important;
  box-shadow: 0 0 4px 4px var(--highlight-bg) !important;
  border-color: var(--background-color) !important;
}


/* The swatch palette. The name is on the element, so the picked colour can
   be read back as a token rather than as a resolved rgb value. */
.color-select[data-color="violet-200"] { background-color: var(--violet-200); }
.color-select[data-color="magenta-200"] { background-color: var(--magenta-200); }
.color-select[data-color="orange-200"] { background-color: var(--orange-200); }
.color-select[data-color="yellow-200"] { background-color: var(--yellow-200); }
.color-select[data-color="green-200"] { background-color: var(--green-200); }
.color-select[data-color="violet-400"] { background-color: var(--violet-400); }
.color-select[data-color="magenta-400"] { background-color: var(--magenta-400); }
.color-select[data-color="orange-400"] { background-color: var(--orange-400); }
.color-select[data-color="yellow-400"] { background-color: var(--yellow-400); }
.color-select[data-color="green-400"] { background-color: var(--green-400); }

/* The create popup, its safety controls and the model allowlist are three
   panels inside ONE .modal, so the backdrop is painted once and is never
   toggled while stepping between them. The "Add users" popup (source picker ->
   invite form) is built the same way.

   .collection_create_popup sets display, which beats the UA's [hidden] rule at
   its zero specificity, so the hidden panels need this to actually go away --
   without it every panel paints at once, side by side. */
.modal > .collection_create_popup[hidden] {
  display: none !important;
}


/* Panels animate in on a swap. A transition cannot do this: a panel goes from
   display:none to display:flex, and with no starting style there is nothing to
   transition from -- which is why the shell's .modal > * scale never ran
   between panels. An animation restarts every time the element is displayed,
   so it covers both the modal opening and each step between panels. */
@keyframes rolePanelIn {
  /* Deliberately slight. The panels are the same size and sit in the same
     place, so a full 0.95 scale reads as a jolt rather than as a step. */
  from { transform: scale(0.99); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

.modal > .collection_create_popup:not([hidden]) {
  animation: rolePanelIn 0.14s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .modal > .collection_create_popup:not([hidden]) {
    animation: none;
  }
}

/* While open the supervisor menu is re-parented to the modal so it can overflow
   the create popup, which sets overflow-y:auto AND transform -- a transform
   makes that box the containing block for fixed descendants, so position:fixed
   alone would still be trapped inside it. As a sibling of the popup it only has
   to out-rank that popup inside the modal's own stacking context, so this
   z-index is local and does not compete with the rest of the page. */
.SettingDropDown.is-portaled {
  position: fixed;
  z-index: 50;
}

/* Spinner for a button that is waiting on a request. Same ring as the logs
   refresh spinner, sized for a text button and inheriting its colour. */
.action-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  flex: none;
  margin: auto;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(127, 127, 127, 0.16), currentColor);
  -webkit-mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  mask: radial-gradient(closest-side, transparent calc(100% - 1.5px), #000 calc(100% - 1.5px));
  animation: setting-dropdown-spin 0.8s linear infinite;
}

/* Keeps the pressed/hover affordance off while the request is out, without the
   dimming that .disabled applies -- the spinner already says it is busy. */
.action-btn.is-busy {
  pointer-events: none;
}

/* A long email must ellipse rather than widen the cell -- the roles table is
   table-layout: fixed, so the column cannot grow anyway and the text would just
   be cut mid-character. min-width:0 on both the box and the text column because
   a flex item's default min-width is auto, which refuses to shrink below its
   content and defeats the ellipsis. */
.account-box {
  min-width: 0;
}

.account-box .flex-direction-column {
  min-width: 0;
}

.account-box .flex-direction-column > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Role name: ellipse rather than widen the column. The cell's content is a flex
   row, whose items default to min-width:auto and refuse to shrink below their
   text -- so both the row and the name need it cleared before text-overflow
   can apply. */
.roles-table td > .flex {
  min-width: 0;
}

.roles-table [data-role-name] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Placeholder widths for the roles table. The logs rules above key on
   nth-child and .logs-table, which this table also carries -- so without these
   its Name column would get the 280px bar meant for a request id. Each is sized
   to its own column. */
.logs-table.roles-table tr.is-loading td:nth-child(1) .logs-skeleton { width: 120px; }
.logs-table.roles-table tr.is-loading td:nth-child(2) .logs-skeleton { width: 400px; }
.logs-table.roles-table tr.is-loading td:nth-child(3) .logs-skeleton { width: 140px; }
.logs-table.roles-table tr.is-loading td:nth-child(4) .logs-skeleton { width: 40px; }
.logs-table.roles-table tr.is-loading td:nth-child(5) .logs-skeleton { width: 100px; }
.logs-table.roles-table tr.is-loading td:nth-child(6) .logs-skeleton { width: 110px; }
.logs-table.roles-table tr.is-loading td:nth-child(7) .logs-skeleton { width: 60px; }
.logs-table.roles-table tr.is-loading td:nth-child(8) .logs-skeleton { width: 16px; }

/* Utilities that set display beat the UA's [hidden] rule, which has the lowest
   possible specificity -- both of these clear controls do. */
.input-date [data-role-search-clear][hidden],
.action-btn[data-role-search-clear][hidden],
.input-date [data-user-search-clear][hidden],
.action-btn[data-user-search-clear][hidden],
.input-date [data-connector-search-clear][hidden],
.action-btn[data-connector-search-reset][hidden] {
  display: none !important;
}

/* The clear X inside a search field. `.input-date svg` pins every icon in the
   box to 15px and recolours it, and it sits LATER in this file than
   `.collection_box_threedot svg` at equal specificity -- so it was winning and
   rendering this X smaller and in a different colour than the identical one on
   the chart toolbar. Restated here at a higher specificity.
   margin-left:auto pushes it to the far end, past the input. */
.input-date [data-role-search-clear],
.input-date [data-user-search-clear],
.input-date [data-connector-search-clear] {
  margin-left: auto;
  flex: none;
}

.input-date [data-role-search-clear] svg,
.input-date [data-user-search-clear] svg,
.input-date [data-connector-search-clear] svg {
  width: 100%;
  height: 100%;
  max-height: 19px;
  max-width: 23px;
  /* Follows the button's own colour, so the hover state reaches the icon. */
  color: inherit;
}

/* .number-circle sets display:flex, which beats the UA's zero-specificity
   [hidden] rule -- the badge stays out of the layout until there is a real
   count to put in it. */
.number-circle[hidden] {
  display: none !important;
}

.usage_bar{
  box-sizing: border-box;
  position: relative;
  display: flex;
  width: 100%;
  height: 6px;
  background-color: var(--highlight-bg);
  border: 1px solid var(--blue-accent-med-bg);
  border-radius: 10px;
}

.usage_bar::after{
  content: "";
  position: absolute;
  /* Set per bar from JS; 50% is the markup's own placeholder. */
  width: var(--usage-fill, 50%);
  height: 100%;
  border-radius: 10px;
  background-color: var(--highlight-text);
  left: 0;
  top: 0;
}

.usage_bar.no_usage{
  background-color: var(--file-btn-mobile-bg);
  border: 1px solid var(--border-color-sharper);
}

/* Nothing spent, or nothing measurable to spend against. */
.usage_bar.no_usage::after{
  width: 0;
}

.usage_bar.full{
  background-color: var(--red-bg-not-transp);
  border: 1px solid color-mix(in srgb, var(--red-bg-transp) 80%, transparent 20%);
}

.usage_bar.full::after{
  background-color: var(--red-text);
}
/* .flex sets display, which outranks the UA [hidden] rule, so hiding this
   field needs its own statement. */
[data-role-supervisor-field][hidden] {
  display: none !important;
}

/* A dropdown trigger holds its hover state for as long as its menu is open, so
   the control the menu belongs to stays obvious once the pointer moves into
   the list. aria-expanded is the one thing every opener already sets. */
.dropdown-btn[aria-expanded="true"] {
  background-color: var(--input-bg-lighter);
  border-color: var(--border-color-darker);
}

.collection_box_threedot[aria-expanded="true"] {
  background-color: var(--hover-color);
  color: var(--text-color);
}

.collection_box_threedot.opacity[aria-expanded="true"] {
  color: currentColor;
  opacity: 1;
}

/* An underline is ink overflow -- it never grows the box it is painted in --
   and `.logs-stats > div > div` clips to its line box for the ellipsis beside
   it, which cuts the underline off entirely. Only the rows that actually hold
   a link give that up; the rest keep truncating. */
.logs-stats > div > div:has(.hover_link) {
  overflow: visible;
}

/* The role name is a flex ITEM, so it is blockified and its own
   overflow: hidden (there for the ellipsis) clips tight to its line box,
   eating the underline. The td is not the culprit -- overflow clips at the
   PADDING edge and the td has 14px of it. Room is added below the text and
   taken straight back off the outer height, so the ellipsis still works and
   align-center does not shift the row. */
.roles-table [data-role-name].hover_link {
  padding-bottom: 6px;
  margin-bottom: -6px;
}

/* The arrow-key selection in the platform search reads the same as a hover --
   the keyboard and the pointer point at the same thing. */
.search_row.is-active {
  background-color: var(--hover-color);
  color: var(--text-color);
}

/* The platform search rows have their own icon box, NOT .searchIcon -- that
   one belongs to the search field and is 15px. */
.search-row-icon {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--med-text);
}

.search-row-icon svg {
  width: 100%;
  height: 100%;
}

/* The Enter hint belongs to the selected row only, so it is in every row's
   markup and revealed by the selection rather than moved between them. */
.search_row .search-enter-hint {
  display: none;
}

.search_row.is-active .search-enter-hint {
  display: inline;
}

/* The two-line rows put the subtitle under the title, so the Enter hint has
   to sit against the row rather than the column it would otherwise stretch. */
.search_row.search_row_deep .search-enter-hint {
  align-self: center;
}

/* The row's hover and selected states set `color` on the row itself, which the
   hint would inherit. It is a static affordance, not part of what lights up,
   so its colour is pinned at a specificity both of those lose to. */
.search_row .search-enter-hint,
.search_row:hover .search-enter-hint,
.search_row:focus-visible .search-enter-hint,
.search_row.is-active .search-enter-hint {
  color: var(--med-text);
}

/* A fixed 13px box so the glyph does not resize with the row's font, and so a
   row that swaps it for an SVG lands on the same footprint. */
.search_row .search-enter-hint {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  line-height: 13px;
  font-size: 13px;
}

.search_row.is-active .search-enter-hint {
  display: flex;
  align-items: center;
  justify-content: center;
}

.search_row .search-enter-hint svg {
  width: 100%;
  height: 100%;
}

/* Fixed height, not max-height: the panel keeps one shape whether it is
   showing two recents or every role, so typing never resizes it under the
   cursor. Still bounded by the viewport on a short window. */
#dashboardSearchModal .search_modal {
  height: min(500px, calc(100vh - 96px));
  max-height: none;
}

/* Same scrollbar as the main area: the vars are declared per scroller, and the
   track takes the panel's own background rather than the page's. */
#dashboardSearchModal .search_list {
  --sb-size: 10px;
  --sb-track-color: var(--input-bg);
  --sb-thumb-color: var(--thumb-color);
}

#dashboardSearchModal .search_list::-webkit-scrollbar {
  width: var(--sb-size);
}

#dashboardSearchModal .search_list::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 11px;
}

#dashboardSearchModal .search_list::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  /* The border is the inset: it paints in the track colour, so the thumb
     reads as a thin bar inside a 10px gutter. background-clip keeps the
     thumb's own colour out from under it. */
  border: 2px solid var(--sb-track-color);
  background-clip: padding-box;
}

@supports not selector(::-webkit-scrollbar) {
  #dashboardSearchModal .search_list {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

/* The footer reuses .search_modal_input's row shell, so it only has to flip
   the divider to the top edge and sit tighter than the field above. */
#dashboardSearchModal .search_modal_footer {
  border-top: 1px solid var(--border-color);
  border-bottom: none;
  padding: 10px 24px;
  gap: 24px;
  flex: 0 0 auto;
}

/* Hover and the keyboard selection are ONE state here: pointing at a row
   selects it (see the mousemove handler), so the hover rules would only ever
   paint a second row the same as the selected one. .is-active is the only
   thing that paints. */
#dashboardSearchModal .search_row:hover,
#dashboardSearchModal .search_row:focus-visible {
  background-color: transparent;
  color: inherit;
}

#dashboardSearchModal .search_row:hover .search-row-icon,
#dashboardSearchModal .search_row:focus-visible .search-row-icon {
  opacity: 0.5;
}

#dashboardSearchModal .search_row.is-active,
#dashboardSearchModal .search_row.is-active:hover {
  background-color: var(--hover-color);
  color: var(--text-color);
}

#dashboardSearchModal .search_row.is-active .search-row-icon {
  opacity: 1;
}

.text-align-center {
  text-align: center;
}
/* Users table: five columns. The widths and the alignment have to be restated
   rather than inherited from .roles-table -- those rules key on nth-child, so
   an eight-column set lands on the wrong columns here. Widths total 1090px,
   just under the shared 1100px min-width. */
.logs-table.users-table th:nth-child(1) { width: 34px; }    /* select */
.logs-table.users-table th:nth-child(2) { width: 240px; }   /* avatar + name */
.logs-table.users-table th:nth-child(3) { width: 320px; }   /* user uuid */
.logs-table.users-table th:nth-child(4) { width: 286px; }   /* email */
.logs-table.users-table th:nth-child(5) { width: 170px; }   /* role */
.logs-table.users-table th:nth-child(6) { width: 40px; }    /* actions */

/* Every column reads as a label, so all four align left. The :nth-child pair
   is carried on purpose -- a pseudo-class counts as a class, so a bare
   `.logs-table.users-table th` loses to the logs table's own right-aligning
   rule at (0,3,1). */
.logs-table.users-table th:nth-child(n+1):nth-child(-n+5),
.logs-table.users-table td:nth-child(n+1):nth-child(-n+5) {
  text-align: left;
}

.logs-table.users-table th:nth-child(6),
.logs-table.users-table td:nth-child(6) {
  text-align: right;
  overflow: visible;
}

/* A flex item defaults to min-width: auto and refuses to shrink below its
   text, which defeats the ellipsis on the name beside it. */
.users-table td > .flex {
  min-width: 0;
}

.users-table [data-user-name],
.users-table [data-user-role] {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.logs-table.users-table tr.is-loading td:nth-child(1) .logs-skeleton { width: 16px; }
.logs-table.users-table tr.is-loading td:nth-child(2) .logs-skeleton { width: 160px; }
.logs-table.users-table tr.is-loading td:nth-child(3) .logs-skeleton { width: 300px; }
.logs-table.users-table tr.is-loading td:nth-child(4) .logs-skeleton { width: 220px; }
.logs-table.users-table tr.is-loading td:nth-child(5) .logs-skeleton { width: 90px; }
.logs-table.users-table tr.is-loading td:nth-child(6) .logs-skeleton { width: 16px; }

/* Tighter rows than the logs/roles tables: these carry one line, not an
   account box. */
.logs-table.users-table td {
  padding: 8px 12px;
}

.users-table [data-user-avatar] {
  margin-left: 6px;
}

/* The design fills a 21px .small avatar; the shared .user-avatar-icon is
   sized for the 26px one, so it has to be scaled down here. */
.users-table [data-user-avatar] .user-avatar-icon,
.user-avatar-icon {
  width: 11px;
  height: 11px;
}

/* A two-line option: the swatch and the checkmark stay on the first line
   rather than centring against the whole block. */
.SettingDropDownOption.align-start {
  align-items: flex-start;
}

.SettingDropDownOption.align-start .role-square,
.SettingDropDownOption.align-start .ChatDropdownOnCheckmark {
  margin-top: 2px;
}

.rolepick-note {
  white-space: normal;
  text-align: left;
}


/* Row selection. A 16px box that fills with the accent when checked; the
   header's shows a dash while only some rows are selected. */
.user-check {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color-input);
  border-radius: 5px;
  color: transparent;
  background-color: transparent;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}

.user-check:hover {
  border-color: var(--border-color-darker);
}

.user-check.is-checked,
.user-check.is-indeterminate {
  background-color: var(--highlight-text);
  border-color: var(--highlight-text);
  color: var(--white);
}

/* Both glyphs ship in the header's box, so the state picks one rather than
   the markup being rewritten. */
.user-check .user-check-tick,
.user-check .user-check-dash {
  display: none;
  width: 11px;
  height: 11px;
}

.user-check.is-checked .user-check-tick,
.user-check.is-indeterminate .user-check-dash {
  display: block;
}

/* The select column is a control, not data. .logs-table's first-child rule
   strips its left padding, so the box is inset by hand -- the same 12px the
   other cells carry, which is what lines the header's box up with the rows'. */
.logs-table.users-table th:nth-child(1),
.logs-table.users-table td:nth-child(1) {
  padding-right: 0;
  padding-left: 12px;
}

/* Usage by product: the four rows share one budget, so their bars have to be
   the same length to be comparable. The percentage is what varies in width
   ("—" vs "100%"), so it is fixed and the bar takes the rest. */
.logs-stats [data-detail="productChatsBar"] + div,
.logs-stats [data-detail="productSearchBar"] + div,
.logs-stats [data-detail="productCodeBar"] + div,
.logs-stats [data-detail="productFilesBar"] + div {
  flex: 0 0 44px;
  text-align: right;
}

/* Shift-clicking a range selects text as a side effect, which makes the rows
   flash blue mid-drag. The boxes are controls, not content. */
.users-table .user-check,
.users-table th .user-check {
  user-select: none;
  -webkit-user-select: none;
}

/* The delete popup's confirm is live only once the name has been typed back. */
/* The confirm popup sits above other popups by DOM order, not z-index:
   every .modal is clamped to the same maximum (see openDashboardDeletePopup). */

/* Over another popup: no backdrop of its own -- the one already on screen is
   used, and the popup underneath darkens instead. brightness(0.4) is exactly
   what the .modal backdrop's 60% black does to what is behind it, and the
   blur matches its backdrop-filter, so the dim looks like that same backdrop
   having moved in front of the panel. */
.modal.is-over-modal {
  background: transparent;
  backdrop-filter: none;
}

.modal > * {
  transition: transform 0.2s ease, filter 0.2s ease;
}

.modal.is-covered > * {
  filter: brightness(0.4) blur(2px);
  pointer-events: none;
}

#dashboardDeletePopup .cta_btn.red:disabled {
  opacity: 0.45;
  pointer-events: none;
}

#dashboardDeletePopup [data-delete-retype][hidden] {
  display: none !important;
}

#dashboardDeletePopup .modal-input {
  background-color: var(--input-bg);
  color: var(--text-color);
  outline: none;
}

/* The confirm button keeps its measured width while the spinner is up, so
   swapping the label for it does not resize the row. */
#dashboardDeletePopup .cta_btn.is-busy {
  pointer-events: none;
  justify-content: center;
}

#dashboardDeletePopup .cta_btn [hidden] {
  display: none !important;
}

/* A field whose value was rejected. The message sits under it and grows into
   place rather than appearing: the row is in a gap: 8px column, so the
   negative margin cancels that gap while it is collapsed and animates away
   with the height. */
/* Invalid looks the same focused or not: the red ring. */
.input-date.is-invalid {
  box-shadow: 0 0 4px 4px var(--red-bg);
  outline: 1px solid var(--red-text);
  border-color: var(--background-color);
}

.input-date {
  transition: border-color 0.16s ease;
}

[data-role-create-name-error] {
  color: var(--red-text);
  overflow: hidden;
  max-height: 0;
  margin-top: -8px;
  opacity: 0;
  transform: translateY(-2px);
  transition: max-height 0.18s ease, margin-top 0.18s ease,
              opacity 0.14s ease, transform 0.18s ease;
}

[data-role-create-name-error].is-visible {
  max-height: 48px;
  margin-top: 0;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-role-create-name-error],
  .input-date {
    transition: none;
  }
}

/* "Add users" source picker cards (#userAddNewModal). One row per import
   source: icon, label pair, Continue on the right. */
.user_add_card {
  cursor: pointer;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: transparent;
  border: 1px solid var(--border-color-lighter);
  border-radius: 12px;
}

.user_add_card:hover {
    background: var(--file-btn-mobile-bg);
    border-color: var(--border-color-darker);
}

.user_add_icon {
    width: 19px;
    min-width: 19px;
    height: 19px;
    min-height: 19px;
    border: 1px solid var(--border-color-sharper);
    background: var(--background-color);
    opacity: 0.7;
    padding: 12px;
    border-radius: 9px;
    color: var(--light-text);
}

/* A brand logo, not a stroke icon: bigger, tighter padding, and the logo
   itself at full strength while the tile behind it stays at 0.7.
   The 0.7 cannot stay on this element: opacity composites it with its whole
   subtree as one layer, so it would wash the brand colours out and no rule on
   the <svg> could climb back out of it. The frame is therefore painted by a
   ::before at 0.7 and the logo sits above it at full opacity.
   A logo pasted into one of the remaining placeholders needs this class. */
.user_add_icon.is-logo {
    width: 27px;
    min-width: 27px;
    height: 27px;
    min-height: 27px;
    padding: 8px;
    opacity: 1;
    position: relative;
    background: transparent;
    border-color: transparent;
}

.user_add_icon.is-logo::before {
    content: "";
    position: absolute;
    /* Out over where the real border sits, so the tile keeps its exact size. */
    inset: -1px;
    border: 1px solid var(--border-color-sharper);
    background: var(--background-color);
    border-radius: 9px;
    opacity: 0.7;
}

/* Every child, not just an <svg>: the logo may be an <img>, and anything left
   static would paint UNDER the ::before frame rather than on it. */
.user_add_icon.is-logo > * {
    position: relative;
}

.user_add_icon.is-logo > img {
    display: block;
    /* A logo file is rarely square; contain fits it without stretching. */
    object-fit: contain;
}

/* A multi-line .input-date: the frame grows and the caret starts at the top
   left instead of being centred on a single 34px line. */
.input-date.multiline {
  height: 150px;
  align-items: start;
  padding: 9px 13px;
  white-space: normal;
}

.input-date.multiline .input-transparent {
  height: 100%;
  resize: none;
  line-height: 1.45;
  /* A textarea does not inherit the page font on its own, and the mirror div
     does -- without this they measure differently and the underline drifts. */
  font-family: inherit;
  /* A long list scrolls inside the fixed frame instead of overflowing it. The
     gutter is reserved so the text does not reflow the moment the bar appears
     -- the mirror behind would otherwise wrap differently and the error
     underline would land on the wrong word. */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.input-date.multiline .input-transparent::-webkit-scrollbar {
  width: 9px;
}

.input-date.multiline .input-transparent::-webkit-scrollbar-track {
  background: transparent;
}

.input-date.multiline .input-transparent::-webkit-scrollbar-thumb {
  background: var(--thumb-color);
  border-radius: 11px;
  border: 2px solid var(--input-bg-lighter);
}

@supports not selector(::-webkit-scrollbar) {
  .input-date.multiline .input-transparent {
    scrollbar-width: thin;
    scrollbar-color: var(--thumb-color) transparent;
  }
}

/* The mirror sits under the textarea and carries the error underline, which
   cannot be drawn inside a textarea itself. Every metric that affects where a
   character lands must match .input-transparent exactly, or the mark drifts
   off the word it is pointing at. */
.input-date.multiline {
  position: relative;
}

.input-date.multiline .input-mirror {
  position: absolute;
  inset: 9px 13px;
  box-sizing: border-box;
  /* Matches the textarea's reserved scrollbar gutter, so both layers wrap at
     the same column. */
  padding-right: 9px;
  overflow: hidden;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  color: transparent;
  font-size: 0.9rem;
  font-weight: 300;
  line-height: 1.45;
}

.input-date.multiline .input-transparent {
  position: relative;
  background-color: transparent;
}

/* The domain suggestion after the last address: the mirror's text is
   transparent, this part is not. */
.input-mirror-ghost {
  color: var(--med-text);
  word-break: break-all;
}

.input-mirror-bad {
  text-decoration: underline wavy var(--red-text);
  text-decoration-skip-ink: none;
  text-underline-offset: 2px;
}

/* Same grow-into-place row as the role form's name error. */
[data-user-invite-error],
[data-credits-amount-error],
[data-credits-taxid-error],
[data-credits-reload-amount-error],
[data-autoreload-amount-error],
[data-spendlimit-amount-error],
[data-support-error],
[data-feedback-error] {
  color: var(--red-text) !important;
  overflow: hidden;
  max-height: 0;
  margin-top: -8px;
  opacity: 0;
  transform: translateY(-2px);
  transition: max-height 0.18s ease, margin-top 0.18s ease,
              opacity 0.14s ease, transform 0.18s ease;
}

[data-user-invite-error].is-visible,
[data-credits-amount-error].is-visible,
[data-credits-taxid-error].is-visible,
[data-credits-reload-amount-error].is-visible,
[data-autoreload-amount-error].is-visible,
[data-spendlimit-amount-error].is-visible,
[data-support-error].is-visible,
[data-feedback-error].is-visible {
  max-height: 48px;
  margin-top: 0;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-user-invite-error],
  [data-credits-amount-error],
  [data-credits-taxid-error],
  [data-credits-reload-amount-error],
  [data-autoreload-amount-error],
  [data-spendlimit-amount-error],
  [data-support-error],
  [data-feedback-error] {
    transition: none;
  }
}

/* A suspended member's row. The fade is on the cells' CONTENTS, never on the
   <tr> or the <td>: the hover highlight is the cell's own background, and
   opacity applies to an element's background along with everything else, so
   fading either one would wash the highlight out to half strength too. Every
   cell therefore keeps its text inside an element -- see the row template. */
.logs-table.users-table tr.is-suspended td > * {
  opacity: 0.5;
}

/* The connectors panel is a two-column grid of provider cards, so it needs
   more room than the 400px forms it shares the modal with. */
.collection_create_popup.extra-wide {
  width: 800px;
  /* Fixed, and the same for every panel that uses it: the connectors grid and
     a connector's own page are two views of one popup, so the frame must not
     jump when you step between them. Each panel's body scrolls instead. */
  height: 584px;
  /* The grid reaches out past this box's padding; without this, the popup's
     own overflow-y:auto (which computes overflow-x to auto too) answers that
     with a horizontal scrollbar. */
  overflow-x: hidden;
  overflow-y: hidden;
}

/* The two wrappers between the popup and its body carry no styling of their
   own, so they have to be told to pass the height through. */
.collection_create_popup.extra-wide > .flex,
.collection_create_popup.extra-wide > .flex > .flex-direction-column {
  flex: 1 1 auto;
  min-height: 0;
}

/* Stepping between the grid and a connector's page is a VIEW change inside one
   popup, not a new popup: the shared enter animation would re-scale the whole
   frame and read as a redraw. */
.modal > [data-user-add-panel="sso"]:not([hidden]),
.modal > [data-user-add-panel="connector"]:not([hidden]) {
  animation: none;
}

/* A fixed height, not a min-height: the panel must not resize as the search
   narrows the list, and 17 cards are taller than the modal anyway -- so the
   grid is its own scroller and the popup around it never moves. align-content
   keeps a short result at the top instead of stretching the rows to fill it. */
.connector-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 12px;
  /* Fills the popup's fixed height instead of setting its own, so stepping to
     the connector page and back cannot resize the frame. min-height:0 is what
     lets a flex child actually scroll rather than growing to fit. */
  flex: 1 1 auto;
  min-height: 0;
  /* scroll, not auto: the bar is always there, so narrowing the search to two
     results cannot shift the cards sideways. */
  overflow-y: scroll;
  /* Out through the popup's own 24px padding so the bar sits on the panel's
     right EDGE, with 24px - 9px of padding left behind -- the bar then fills
     that last 9px and the cards still line up with every other row. */
  margin-right: -24px;
  padding-right: 15px;
}

.connector-grid::-webkit-scrollbar {
  width: 9px;
}

.connector-grid::-webkit-scrollbar-track {
  background: transparent;
}

.connector-grid::-webkit-scrollbar-thumb {
  background: var(--thumb-color);
  border-radius: 11px;
  border: 2px solid var(--input-bg);
}

@supports not selector(::-webkit-scrollbar) {
  .connector-grid {
    scrollbar-width: thin;
    scrollbar-color: var(--thumb-color) transparent;
  }
}

/* The Add button is the last thing in the row, so its menu hangs off the right
   edge with it rather than running back under the search box. */
[data-connector-add-wrap] .SettingDropDown,
[data-connector-detail-actions] .SettingDropDown {
  right: 0;
  left: auto;
}

/* A card hidden by the search must leave the grid, not just go invisible --
   [hidden] alone loses to any rule that sets display. */
.connector-grid [data-connector-provider][hidden] {
  display: none;
}

.connector-grid [data-connector-empty] {
  grid-column: 1 / -1;
}

@media (max-width: 860px) {
  .collection_create_popup.extra-wide {
    width: 100%;
    height: min(584px, calc(100dvh - 128px));
  }
  .connector-grid {
    grid-template-columns: 1fr;
  }
}

/* A .UserIcon (the users search results, and the legacy list behind them)
   paints a single letter with no inline colour now, so the grey has to come
   from here: unlike the archive, dashboard.css has no .UserIcon base rule, and
   without this the letter would sit on nothing. Geometry is left to the rules
   that already size each context. */
.UserIcon {
  background-color: var(--no-avatar);
  color: var(--white);
}

.emphasis_box{
    background: var(--file-btn-mobile-bg-trans);
    padding: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
    border-radius: 10px;
}
/* --- a connector's own page (#userAddNewModal, panel "connector") --- */

/* Body and sidebar, split by a rule the panel's own padding does not cross. */
.connector-detail-grid {
  display: grid;
  grid-template-columns: 1fr 270px;
  gap: 24px;
  padding-top: 24px;
  /* Takes the rest of the popup's fixed height and scrolls inside it, so a
     long feature list cannot stretch the frame past the grid view's. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  /* Same as .connector-grid: out through the popup's 24px padding so the bar
     sits on the panel's right EDGE, and the gutter is always reserved so the
     columns don't jump when the content grows long enough to scroll. */
  margin-right: -24px;
  padding-right: 15px;
  scrollbar-gutter: stable;
  /* The top rule, drawn as a background so it stops at the content edge
     instead of running out under the scrollbar to the panel's edge. A
     background on a scroller stays put, like a border would. */
  background: linear-gradient(var(--border-color-lighter), var(--border-color-lighter)) top left / calc(100% - 15px) 1px no-repeat;
  scrollbar-width: thin;
  scrollbar-color: var(--thumb-color) transparent;
}

.connector-detail-grid::-webkit-scrollbar {
  width: 9px;
}

.connector-detail-grid::-webkit-scrollbar-track {
  background: transparent;
}

.connector-detail-grid::-webkit-scrollbar-thumb {
  background: var(--thumb-color);
  border-radius: 11px;
  border: 2px solid var(--input-bg);
}

/* A chevron that is only there once connected: .dropdown-chevron sets width
   and margin, and any display utility beats the UA's [hidden] rule, so this
   has to be spelled out like every other hidden control in this file. */
[data-connector-connect-chevron][hidden] {
  display: none !important;
}

/* A paragraph, not a label: it reads at a looser line height and sits back a
   little from the headings around it. */
[data-connector-detail-long],
.connector-grid .user_add_card .size09rem.grey {
  line-height: 1.7;
  opacity: 0.9;
}

.connector-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 24px;
  row-gap: 12px;
}

/* A feature chip reads as a label rather than as a count, so it gets the
   roomier padding -- .thin is the opposite variant on the same tag. */
.grey-tag.tall {
  padding: 7px 11px;
  width: fit-content;
}

/* The header logo is larger here than in the grid: this is the page about that
   provider, not a row in a list. */
.user_add_icon.connector-detail-logo {
  width: 45px;
  min-width: 45px;
  height: 45px;
  min-height: 45px;
  padding: 16px;
}

/* The back arrow sits at the popup's left edge, so its own padding has to come
   off rather than indenting it from the title line above. */
.action-btn.connector-back {
  margin-left: -7px;
}

/* Same grow-into-place row as the role form's name error. */
[data-connector-connect-error] {
  color: var(--red-text);
  overflow: hidden;
  max-height: 0;
  margin-top: -8px;
  opacity: 0;
  transform: translateY(-2px);
  transition: max-height 0.18s ease, margin-top 0.18s ease,
              opacity 0.14s ease, transform 0.18s ease;
}

[data-connector-connect-error].is-visible {
  max-height: 48px;
  margin-top: 0;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-connector-connect-error] {
    transition: none;
  }
}

@media (max-width: 860px) {
  .connector-detail-grid {
    grid-template-columns: 1fr;
  }
  .connector-feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- connect wizard (#userAddNewModal, panel "connect") --- */

/* Wider than the 400px forms it shares the modal with: the instructions are
   the point of this panel, and they wrap badly in a narrow column. The height
   is fixed for the same reason the connectors popup is -- three steps of
   different lengths must not resize the frame as you walk through them. */
.collection_create_popup.wizard {
  width: 800px;
  height: 530px;
  overflow: hidden;
  /* The primary button is positioned against this box. */
  position: relative;
  /* How much room the pinned button needs: its own 34px plus 12px of air.
     The body stops here rather than scrolling on underneath it. */
  --wizard-footer: 46px;
}

.collection_create_popup.wizard > .flex,
.collection_create_popup.wizard > .flex > .flex-direction-column {
  flex: 1 1 auto;
  min-height: 0;
}

.wizard-grid {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 24px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

/* Scrolls on its own when a step is longer than the frame, and is the ONLY
   thing that stops short of the button: a margin on the body, not padding on
   the grid, so the rail and its divider still run the full height. Padding
   inside the body would not do either -- it keeps the content clear but lets
   the scrollbar run on behind the button. */
.wizard-body {
  overflow-y: auto;
  margin-bottom: var(--wizard-footer);
  scrollbar-width: thin;
  scrollbar-color: var(--thumb-color) transparent;
}

.wizard-body::-webkit-scrollbar {
  width: 9px;
}

.wizard-body::-webkit-scrollbar-track {
  background: transparent;
}

.wizard-body::-webkit-scrollbar-thumb {
  background: var(--thumb-color);
  border-radius: 11px;
  border: 2px solid var(--input-bg);
}

.wizard-primary {
  position: absolute;
  right: 24px;
  bottom: 24px;
}

/* Sits at the foot of the rail, so the provider stays on screen through all
   three steps. */
.wizard-rail-provider {
  margin-top: auto;
  padding-top: 16px;
}

.wizard-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--border-color-lighter);
  padding-right: 16px;
  /* The rail is a column of its own, so it keeps its height when a step's
     body is shorter than the list. */
  align-self: stretch;
}

.wizard-rail-step {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: start;
  text-align: left;
  padding: 8px;
  border: none;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: default;
}

/* Any step already visited this run can be returned to -- forwards as well
   as back -- so those, and only those, advertise themselves as pressable. */
.wizard-rail-step.is-navigable {
  cursor: pointer;
}

.wizard-rail-step.is-navigable:hover {
  background: var(--file-btn-mobile-bg-trans);
}

/* --- the thread --------------------------------------------------------
   Two layers on every step that has another step below it: a grey TRACK
   (::before) that is always there, and a FILL (::after) that grows down it.

   Geometry, all derived rather than guessed:
     --rail-x   19px = the step's 8px padding + half the 22px circle. The line
                is 2px wide and pulled back by half its width, so it is centred
                on the circle to the pixel.
     top        30px = 8px padding + 22px circle: starts at the circle's edge.
     bottom    -12px = the 4px flex gap + the next step's 8px top padding: ends
                at the next circle's edge. Connected, no hole.
   Because both ends are relative to the step, the line stretches by itself
   when progress rows open up underneath it. */
@property --rail-from {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

@property --rail-to {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}

.wizard-rail {
  --rail-x: 19px;
  /* --border-color-lighter was ~2 shades off the panel background, so the
     track, and the grey half of every gradient, could not actually be seen. */
  --rail-track: var(--border-color-darker);
  --rail-done: #0a8135;
  --rail-active: var(--blue-accent);
  --rail-error: var(--red-text);
}

.wizard-rail-step:has(+ .wizard-rail-step)::before,
.wizard-rail-step:has(+ .wizard-rail-step)::after {
  content: "";
  position: absolute;
  left: var(--rail-x);
  top: 30px;
  bottom: -12px;
  width: 2px;
  border-radius: 1px;
  transform: translateX(-50%);
  pointer-events: none;
}

.wizard-rail-step:has(+ .wizard-rail-step)::before {
  background: var(--rail-track);
}

/* The fill. Registered custom properties are what make a GRADIENT animate:
   a plain gradient swaps instantly, but its two colours can each transition. */
.wizard-rail-step:has(+ .wizard-rail-step)::after {
  --rail-from: var(--rail-done);
  --rail-to: var(--rail-track);
  background: linear-gradient(to bottom, var(--rail-from), var(--rail-to));
  transform: translateX(-50%) scaleY(0);
  transform-origin: top;
  transition: transform 0.55s cubic-bezier(0.22, 0.75, 0.2, 1),
              --rail-from 0.45s ease,
              --rail-to 0.45s ease;
}

/* Finished: the fill runs down. While this step still has work in flight
   (a spinner below it), it fades from green into the plain track colour. */
.wizard-rail-step.is-done:has(+ .wizard-rail-step)::after {
  transform: translateX(-50%) scaleY(1);
}

/* ...and once that work is done and the next step is the one you are on, it
   becomes green into blue: from where you were to where you are. */
.wizard-rail-step.is-done:not(.is-pending):has(+ .wizard-rail-step.is-active)::after {
  --rail-to: var(--rail-active);
}

.wizard-rail-step.is-done:not(.is-pending):has(+ .wizard-rail-step.is-done)::after {
  --rail-to: var(--rail-done);
}

.wizard-rail-step.is-done:has(+ .wizard-rail-step.is-error)::after {
  --rail-to: var(--rail-error);
}

/* A step that failed runs red down into the plain track: the path stops here. */
.wizard-rail-step.is-error:has(+ .wizard-rail-step)::after {
  --rail-from: var(--rail-error);
  --rail-to: var(--rail-track);
  transform: translateX(-50%) scaleY(1);
}

/* --- the circle -------------------------------------------------------
   border-box with an INSET ring rather than a border: a border made the done
   circle 25px and walked its centre off the line. The ring is drawn inside
   the 22px, so the circle never changes size, and box-shadow can animate. */
.wizard-rail-step .wizard-rail-num {
  box-sizing: border-box;
  position: relative;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.8rem;
  background: var(--file-btn-mobile-bg-trans);
  color: var(--med-text);
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* Three faces stacked in the one circle, cross-faded rather than swapped. */
.wizard-rail-num > .wizard-rail-digit,
.wizard-rail-num > .wizard-rail-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.22, 0.75, 0.2, 1);
}

.wizard-rail-num > .wizard-rail-digit {
  display: grid;
  place-content: center;
}

.wizard-rail-num > .wizard-rail-icon {
  width: 12px;
  height: 12px;
  opacity: 0;
  transform: scale(0.5);
}

.wizard-rail-step.is-done .wizard-rail-digit,
.wizard-rail-step.is-error .wizard-rail-digit {
  opacity: 0;
  transform: scale(0.5);
}

.wizard-rail-step.is-done .wizard-rail-icon:first-of-type,
.wizard-rail-step.is-error .wizard-rail-icon:last-of-type {
  opacity: 1;
  transform: scale(1);
}

.wizard-rail-step.is-active .wizard-rail-num {
  color: white;
  background: var(--blue-accent);
}

/* Filled, not a ring, so the tick sits white on green. */
.wizard-rail-step.is-done .wizard-rail-num {
  color: white;
  background: #0a8135;
  box-shadow: inset 0 0 0 1.5px #0a8135 !important;
}

/* Filled like a done step, with the warning triangle white on red. */
.wizard-rail-step.is-error .wizard-rail-num {
  background: var(--rail-error);
  color: white;
  box-shadow: inset 0 0 0 1.5px var(--rail-error) !important;
}

.wizard-rail-title {
  transition: color 0.3s ease;
}

.wizard-rail-step.is-error .wizard-rail-title {
  color: var(--rail-error);
}

/* --- progress rows under a step ---------------------------------------
   Three layers, because each does one job:
     .wizard-rail-line          the grid whose single row goes 0fr -> 1fr. That
                                is the only way to animate to an auto height.
     .wizard-rail-line-inner    overflow hidden, min-height 0, NO padding -- a
                                box cannot shrink below its own padding, so the
                                old 8px here meant "collapsed" was 8px tall and
                                the row jumped instead of unfolding.
     .wizard-rail-line-content  carries the spacing, and rises into place a
                                beat after the room has opened for it.
   The thread is tied to the step's height, so it lengthens with the row. */
.wizard-rail-sub {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}

.wizard-rail-line {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.34s cubic-bezier(0.32, 0.72, 0, 1);
}

.wizard-rail-line.is-entering {
  grid-template-rows: 0fr;
}

.wizard-rail-line-inner {
  min-height: 0;
  overflow: hidden;
}

.wizard-rail-line-content {
  display: flex;
  gap: 8px;
  align-items: start;
  /* 4px under as well as over, and the gap above the list taken up by
     .wizard-rail-sub instead: the inner box clips (it has to, to unfold),
     and a hover_link underline sits 4px below the text -- on the row's last
     line that was past the clip edge, so "Check again" lost its underline.
     The rows are still 8px apart. */
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 1.5;
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.3s ease 0.1s,
              transform 0.42s cubic-bezier(0.32, 0.72, 0, 1) 0.06s,
              filter 0.3s ease 0.1s;
}

/* Up from below and out of a slight blur, so it reads as unfolding into the
   list rather than dropping onto it. */
.wizard-rail-line.is-entering .wizard-rail-line-content {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(2px);
}

/* Muted for every state but done. A failure is not shouted here: the step's
   own ring and title already turned red, and the row's job is to say what
   happened and offer the way out, like the rest of the copy around it. */
.wizard-rail-line .wizard-rail-text {
  color: var(--med-text);
  transition: color 0.3s ease;
}

.wizard-rail-line.is-done .wizard-rail-text {
  color: var(--light-text);
}

.wizard-rail-bullet {
  position: relative;
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  margin-top: 3px;
}

/* Each mark sits in its own FACE, and it is the face that fades and scales.
   Never put a transform on the spinner itself: its keyframes are only
   `to { rotate(360deg) }`, so they start from whatever transform the element
   already has -- and a scale(1) there is the identity matrix, exactly like
   rotate(360deg), so it "animated" from nothing to nothing and never turned. */
.wizard-rail-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease,
              transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.wizard-rail-face .action-btn-spinner {
  width: 11px;
  height: 11px;
  margin: 0;
}

.wizard-rail-face .wizard-rail-tick {
  width: 11px;
  height: 11px;
  color: var(--rail-done);
}

.wizard-rail-face.is-dot::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border-color-darker);
}

/* Warning and error: one triangle, coloured by the row. */
.wizard-rail-face .wizard-rail-alert {
  width: 12px;
  height: 12px;
}

.wizard-rail-line.is-warn .wizard-rail-alert {
  color: var(--red-text);
}

.wizard-rail-line.is-error .wizard-rail-alert {
  color: var(--orange-text);
}

.wizard-rail-line.is-wait .wizard-rail-face.is-spin,
.wizard-rail-line.is-done .wizard-rail-face.is-tick,
.wizard-rail-line.is-idle .wizard-rail-face.is-dot,
.wizard-rail-line.is-error .wizard-rail-face.is-alert,
.wizard-rail-line.is-warn .wizard-rail-face.is-alert {
  opacity: 1;
  transform: scale(1);
}

/* A step's body arrives rather than appears. */
.wizard-body [data-connect-step]:not([hidden]) {
  animation: wizardStepIn 0.26s cubic-bezier(0.22, 0.75, 0.2, 1);
}

@keyframes wizardStepIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wizard-rail-step::after,
  .wizard-rail-num,
  .wizard-rail-num > *,
  .wizard-rail-title,
  .wizard-rail-line,
  .wizard-rail-line-content,
  .wizard-rail-line .wizard-rail-text,
  .wizard-rail-face {
    transition: none !important;
  }
  .wizard-body [data-connect-step]:not([hidden]) {
    animation: none;
  }
}

.wizard-rail-action {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

/* A step that is neither current nor finished is not where the reader is. */
.wizard-rail-step:not(.is-active):not(.is-done) {
  opacity: 0.55;
}

/* ...unless it can be gone back to: then it reads at full strength, its
   circle drawn as a thin ring. */
.wizard-rail-step.is-navigable:not(.is-active):not(.is-done),
.wizard-rail-step.is-error {
  opacity: 1;
}
/* an error outranks done: the triangle, never the tick, and never both */
.wizard-rail-step.is-done.is-error .wizard-rail-icon:first-of-type {
  opacity: 0;
  transform: scale(0.5);
}
.wizard-rail-step.is-navigable:not(.is-active):not(.is-done):not(.is-error) .wizard-rail-num {
  border: 1px solid var(--border-color-darker);
}

.wizard-body {
  min-width: 0;
}

/* Focus rings (1px outline + 4px glow) reach 5px outside a field. Scrolling
   boxes clip at their own edge, so the ring was cut off where a field sits
   flush with one. 5px of room inside, cancelled by -5px outside: the content
   stays exactly where it was and the ring fits. */
.wizard-body,
.support-collapse-inner {
  padding-left: 5px;
  padding-right: 5px;
  margin-left: -5px;
  margin-right: -5px;
}

/* The wizard body scrolls vertically too, so its top and bottom field need
   the same room. (Not the collapsed support rows: padding there would keep a
   sliver of them showing while closed.) */
.wizard-body {
  padding-top: 5px;
  padding-bottom: 5px;
  margin-top: -5px;
}

/* The provider's own instructions: numbered, roomy enough to read, and the
   numbers stay aligned when a line wraps. */
ol.wizard-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

ol.wizard-steps li {
  line-height: 1.7;
  opacity: 0.9;
  padding-left: 4px;
}

ol.wizard-steps li::marker {
  color: var(--med-text);
  font-size: 0.85rem;
}

.connector-verify-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border-color-input);
  border-radius: 12px;
}

/* Step 3's waiting box: the status sits in its own card. The spinner is
   nudged to line up with the title's first line, not the box's centre. */
.connector-verify-waiting {
  padding: 11px;
  background: var(--background-color);
  border-radius: 10px;
  border: 1px solid var(--border-color-lighter);
}

.connector-verify-waiting [data-connect-waiting-spinner],
.connector-verify-waiting [data-connect-domain-spinner] {
  margin: 4px 6px 6px !important;
  flex: none;
}

/* Step 3's counts, with a rule between each column. */
.connector-verify-grid.divided > :not(:last-child) {
  border-right: 1px solid var(--border-color-lighter);
}

/* The spinner is a span with no content, so it needs the [hidden] rule
   spelled out like every other display-set element here. */
[data-connect-waiting-spinner][hidden],
[data-connect-verify-status][hidden],
[data-connect-verify-text][hidden] {
  display: none !important;
}

[data-connect-console][hidden] {
  display: none !important;
}

@media (max-width: 760px) {
  .collection_create_popup.wizard {
    width: 100%;
  }
  .wizard-grid {
    grid-template-columns: 1fr;
  }
  .wizard-rail {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--border-color-lighter);
    padding-right: 0;
    padding-bottom: 12px;
    overflow-x: auto;
  }
  /* The thread is vertical; stacked sideways there is nothing for it to join. */
  .wizard-rail-step:has(+ .wizard-rail-step)::before,
  .wizard-rail-step:has(+ .wizard-rail-step)::after {
    display: none;
  }
  .wizard-rail-sub {
    display: none;
  }
  .wizard-rail-provider {
    display: none;
  }
  .collection_create_popup.wizard {
    height: min(530px, calc(100dvh - 128px));
  }
  .connector-verify-grid {
    grid-template-columns: 1fr;
  }
  /* Stacked, the column rules would hang down the right of each row. */
  .connector-verify-grid.divided > :not(:last-child) {
    border-right: none;
  }
}

/* --- split button -----------------------------------------------------
   Two real buttons joined, so each half hovers on its own and does its own
   thing. The background is each button's ::before (see .action-btn), so
   squaring the corners where they meet is all the joining takes. */
.split-btn {
  display: inline-flex;
  align-items: stretch;
  transition: scale 0.1s ease;
}

/* Pressing either half shrinks the WHOLE button. .action-btn shrinks its own
   ::before around its own centre, which here pulled the pressed half away
   from the other and opened a gap down the middle. */
.split-btn .action-btn:active::before {
  scale: 1;
}

.split-btn:has(> .action-btn:active) {
  scale: 0.96;
}

.split-btn.is-split .split-btn-main::before {
  border-radius: 10px 0 0 10px;
}

.split-btn.is-split .split-btn-main {
  padding-right: 11px;
}

.split-btn-menu {
  padding: 0 9px 0 0;
}

.split-btn-menu::before {
  border-radius: 0 10px 10px 0;
}

/* The divider is the chevron's own left edge: short and centred, so it reads
   as a seam inside one button rather than a gap between two. */
.split-btn-chevron {
  margin-left: 0;
  opacity: 0.6;
  border-left: 1px solid var(--med-text);
  padding-left: 9px;
  box-sizing: content-box;
}

.split-btn-menu[hidden],
[data-connector-menu-btn][hidden] {
  display: none !important;
}

/* --- directory sync strip (Users page) -------------------------------- */
.directory-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-color-lighter);
  border-radius: 12px;
}

.directory-strip:hover {
  background: var(--input-bg-50);
  border-color: var(--border-color-sharper);
}

.directory-strip[hidden] {
  display: none !important;
}

.directory-strip-copy {
  min-width: 0;
}

.directory-strip-copy [data-directory-strip-detail] {
  line-height: 1.5;
}

.directory-strip-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--med-text);
  font-size: 0.85rem;
}

.directory-strip-state .action-btn-spinner {
  width: 11px;
  height: 11px;
  margin: 0;
}

.directory-strip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-color-darker);
}

.directory-strip-state[data-tone="ok"] .directory-strip-dot {
  background: #0a8135;
}

.directory-strip-state[data-tone="error"] {
  color: var(--red-text);
}

.directory-strip-state[data-tone="error"] .directory-strip-dot {
  background: var(--red-text);
}

.directory-strip-state [hidden] {
  display: none !important;
}

[data-directory-strip-actions] .SettingDropDown {
  right: 0;
  left: auto;
}

@media (max-width: 640px) {
  .directory-strip {
    flex-wrap: wrap;
  }
}

/* --- connector page: live sync, while this provider is connected ---------
   The state line reuses .directory-strip-state, so the words and colours are
   the strip's -- one connection should never read two ways. */
.connector-sync-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.connector-sync-card[hidden],
[data-connector-detail-connected-only][hidden],
[data-connector-sync-hint][hidden],
[data-connector-sync-instruction][hidden],
[data-connector-sync-state][hidden],
[data-connector-sync-diff][hidden],
[data-connector-sync-added][hidden],
[data-connector-sync-removed][hidden] {
  display: none !important;
}

/* The state on its own boxed line under the heading. */
.connector-sync-state-box {
  background: var(--background-color);
  padding: 7px 15px;
  border-radius: 8px;
  border: 1px solid var(--border-color-lighter);
}

/* Under the members count: arrived (green, up) and switched off (red, down)
   over the last few days. */
.connector-sync-diff {
  display: flex;
  gap: 6px;
  margin-top: 5px;
}

.connector-sync-diff-up,
.connector-sync-diff-down {
  display: flex;
  align-items: center;
}

.connector-sync-diff-up {
  color: var(--green-400);
}

.connector-sync-diff-down {
  color: var(--red-text);
}

.connector-sync-diff svg {
  width: 12px;
  height: 12px;
  flex: none;
}

/* Indented to sit under the state's text rather than the box's edge. */
.connector-sync-instruction {
  margin: 0 14px;
}

.connector-sync-card [data-connector-sync-hint] {
  line-height: 1.6;
}

.connector-verify-grid.four {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 860px) {
  .connector-verify-grid.four {
    grid-template-columns: 1fr 1fr;
  }
  /* Two to a row: the right-hand column has nothing beside it to divide. */
  .connector-verify-grid.four.divided > :nth-child(2n) {
    border-right: none;
  }
}

/* The whole strip opens the connector's page, so it says so on hover -- but
   not while the pointer is on the split button, which has its own hover. */
.directory-strip {
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.directory-strip:hover:not(:has([data-directory-strip-actions]:hover)) {
  background: var(--input-bg-50);
  border-color: var(--border-color-sharper);
}

.directory-strip:focus-visible {
  outline: 1px solid var(--blue-accent-dark);
  box-shadow: 0 0 4px 4px var(--highlight-bg);
  border-color: var(--background-color);
}

/* SCIM/SAML halves of the connect wizard, and the menu item a SAML
   connection does not have. Several of these set display (grid, flex), which
   beats the UA's [hidden] rule, so it is spelled out. */
[data-connect-variant][hidden],
[data-connector-action][hidden],
.SettingDropDown .BreakLine[hidden],
[data-connector-sso-hint][hidden],
[data-connect-saml-domains-empty][hidden],
[data-connect-saml-spinner][hidden],
[data-connect-saml-dot][hidden],
[data-connect-hide-for][hidden],
[data-connect-domain-spinner][hidden],
[data-connect-domain-status][hidden],
[data-connect-domain-text][hidden] {
  display: none !important;
}

/* Field errors in the SAML and domain halves, the same grow-into-place row
   as the rest. !important: .sans_serif.size085rem sets color: currentColor. */
[data-connect-saml-domains-error],
[data-connect-saml-metadata-error],
[data-connect-domain-error] {
  color: var(--red-text) !important;
  overflow: hidden;
  max-height: 0;
  margin-top: -8px;
  opacity: 0;
  transition: max-height 0.18s ease, margin-top 0.18s ease, opacity 0.14s ease;
}

[data-connect-saml-domains-error].is-visible,
[data-connect-saml-metadata-error].is-visible,
[data-connect-domain-error].is-visible {
  max-height: 64px;
  margin-top: 0;
  opacity: 1;
}

/* A domain switch locked once the connection is registered. */
[data-connect-domain].disabled {
  opacity: 0.5;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-connect-saml-domains-error],
  [data-connect-saml-metadata-error] {
    transition: none;
  }
}

/* The stack of connection strips on the Users page: directory sync and
   single sign-on, either or both. */
.directory-strips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.directory-strips[hidden],
.directory-strip [data-directory-strip-action][hidden],
.directory-strip .BreakLine[hidden] {
  display: none !important;
}

.input-image{
  width: 50px;
  height: 50px;
  background: var(--input-bg-lighter);
  border: 1px solid var(--border-color-input);
  color: var(--light-text);
  border-radius: 8px;
  align-items: center;
  justify-content: center;
  display: flex;  
}

.input-image:hover{
  background: var(--input-bg-lighter);
  border: 1px solid var(--border-color-darker);
  color: var(--text-color);
}
/* Institution settings page: field errors, the same grow-into-place row as
   the role form's name error. */
.InstitutionDash [data-inst-error] {
  color: var(--red-text);
  overflow: hidden;
  max-height: 0;
  margin-top: -8px;
  opacity: 0;
  transition: max-height 0.18s ease, margin-top 0.18s ease, opacity 0.14s ease;
}

.InstitutionDash [data-inst-error].is-visible {
  max-height: 48px;
  margin-top: 0;
  opacity: 1;
}

/* City and state get two parts each, the postal code one -- it is the
   shortest value of the three. min-width:0 lets each input shrink to its
   column instead of pushing the row wider than the form. */
.InstitutionDash .inst-address-row {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 12px;
}

.InstitutionDash .inst-address-row > * {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  .InstitutionDash [data-inst-error] {
    transition: none;
  }
}

/* Institution page: things shown and hidden by state. .input-date and the
   action row set display, which beats the UA's [hidden] rule. */
.InstitutionDash [data-inst-field][hidden],
.InstitutionDash [data-inst-actions][hidden] {
  display: none !important;
}

/* The icon tile is a label for the file input: the whole tile opens the
   picker, and an uploaded icon fills it edge to edge. */
.InstitutionDash .input-image {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  flex: none;
}

.InstitutionDash .input-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.35s ease, opacity 0.35s ease;
}

/* One state at a time, from data-state on the tile: the upload glyph OR the
   picture, never both. */
.InstitutionDash .input-image[data-state="empty"] img {
  display: none;
}

.InstitutionDash .input-image:not([data-state="empty"]) [data-inst-icon-placeholder] {
  display: none;
}

/* Uploading: the chosen picture is already there, darkened and blurred under
   our spinner, and both ease away together once it is saved. */
.InstitutionDash .input-image[data-state="loading"] img {
  filter: brightness(0.45) blur(2px);
}

.InstitutionDash .inst-icon-spinner {
  position: absolute;
  inset: 0;
  color: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.InstitutionDash .input-image[data-state="loading"] .inst-icon-spinner {
  opacity: 1;
}

/* no pencil while it uploads, even under the cursor */
.InstitutionDash .input-image[data-state="loading"] .inst-icon-edit {
  opacity: 0 !important;
}

.InstitutionDash .input-image[data-state="loading"] {
  cursor: progress;
}

/* A set icon, hovered: the picture darkens and blurs and the pencil comes
   up over it -- the tile opens the update / remove menu. */
.InstitutionDash .inst-icon-edit {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  color: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.InstitutionDash .input-image[data-state="ready"]:hover img,
.InstitutionDash .inst-icon-wrap:has(.inst-icon-menu:not(.hidden)) .input-image img {
  filter: brightness(0.45) blur(2px);
}

.InstitutionDash .input-image[data-state="ready"]:hover .inst-icon-edit,
.InstitutionDash .inst-icon-wrap:has(.inst-icon-menu:not(.hidden)) .inst-icon-edit {
  opacity: 1;
}

.InstitutionDash .inst-icon-wrap {
  flex: none;
}

.InstitutionDash .inst-icon-menu {
  width: 180px;
}

@media (prefers-reduced-motion: reduce) {
  .InstitutionDash .input-image img,
  .InstitutionDash .inst-icon-edit {
    transition: none;
  }
}

/* 237 countries: the search stays at the top and only the list under it
   scrolls, so the field never scrolls away from what it is filtering. */
:is(.InstitutionDash, #contactSupportModal) .inst-country-menu {
  display: flex;
  flex-direction: column;
}

:is(.InstitutionDash, #contactSupportModal) .inst-country-menu.hidden {
  display: none;
}

:is(.InstitutionDash, #contactSupportModal) .inst-country-search {
  flex: none;
  padding: 4px 9px 11px;
  border-bottom: 1px solid var(--border-color-input);
  width: 100%;
  box-sizing: border-box;
}

/* The list is the ONLY scroller. When the shared fitter caps the menu at the
   window's bottom edge (inline max-height + .is-scrollable), the menu itself
   must not scroll too -- two nested scrollers fought over the wheel and
   scrolled the search away. Instead the list shrinks to the space left. */
:is(.InstitutionDash, #contactSupportModal) .inst-country-menu.is-scrollable {
  overflow: hidden;
}

:is(.InstitutionDash, #contactSupportModal) .inst-country-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

:is(.InstitutionDash, #contactSupportModal) .inst-country-list::-webkit-scrollbar {
  width: var(--sb-size);
}

:is(.InstitutionDash, #contactSupportModal) .inst-country-list::-webkit-scrollbar-track {
  background: var(--input-bg);
  border-radius: 11px;
}

:is(.InstitutionDash, #contactSupportModal) .inst-country-list::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 2px solid var(--input-bg);
}

@supports not selector(::-webkit-scrollbar) {
  :is(.InstitutionDash, #contactSupportModal) .inst-country-list {
    scrollbar-width: thin;
    scrollbar-color: var(--sb-thumb-color) transparent;
  }
}

:is(.InstitutionDash, #contactSupportModal) .inst-country-list :is([data-inst-country-option], [data-support-country-option])[hidden],
:is(.InstitutionDash, #contactSupportModal) .inst-country-empty[hidden] {
  display: none !important;
}

:is(.InstitutionDash, #contactSupportModal) .inst-country-empty {
  padding: 10px 8px;
}

/* --- CSV import (#userAddNewModal, panel "csv") ------------------------ */

/* The template: one row, the whole of it a download. */
.csv-template-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 9px;
  border-radius: 12px;
  border: 1px solid var(--border-color-lighter);
  color: var(--light-text);
  font-size: 0.9rem;
  cursor: pointer;
}

/* Dashed drop target; the whole box opens the file chooser. */
.csv-dropzone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 150px;
  box-sizing: border-box;
  padding: 0 13px;
  border-radius: 12px;
  border: 1px dashed var(--border-color-input);
  background: var(--file-btn-mobile-bg);
  color: var(--light-text);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.csv-dropzone:hover {
  border-color: var(--border-color-darker);
}

.csv-dropzone.is-dragover {
  border-color: var(--highlight-text);
  background: var(--highlight-bg);
}

.csv-dropzone.is-dragover .action-btn.csv-empty-only {
  background-color: transparent !important;
}

/* Empty: asks for a file. File: shows it, and opens its rows when pressed. */
.csv-dropzone[data-csv-state="empty"] .csv-file-only,
.csv-dropzone[data-csv-state="file"] .csv-empty-only {
  display: none !important;
}

.csv-dropzone .csv-drop-file-icon {
  width: 60px;
  height: 46px;
  flex: none;
  color: var(--light-text);
}

.csv-dropzone[data-csv-state="file"] {
  border-style: solid;
  border-color: var(--border-color-lighter);
  background-color: color-mix(in srgb, var(--background-color) 50%, transparent 50%);
}

.csv-dropzone[data-csv-state="file"]:hover {
  border-color: var(--border-color-input);
  background-color: color-mix(in srgb, var(--background-color) 20%, transparent 50%);
}

/* --- CSV row editor (panel "csv-table") --------------------------------- */
/* Row number | Email | Role | Status | remove. One grid for the header and
   every row, so the columns line up without a <table>. */
/* The grid fills the popup's remaining height. Inside it the sheet is one
   rounded box: the header row stays put and only the rows scroll, so the
   corners never scroll away and there is no sticky header to lag behind. */
.csv-table {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.csv-sheet {
  position: relative;
  /* As tall as its rows, up to the room there is -- a short file is a short
     table, not a tall empty box; a long one fills the space and scrolls. */
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color-lighter);
  border-radius: 10px;
  overflow: hidden;
}

.csv-table-body {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: none;
  /* The bar always takes its room, and the header row is padded by the same
     9px, so the columns line up above and below. */
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--thumb-color) transparent;
}

.csv-table-body::-webkit-scrollbar {
  width: 9px;
}

.csv-table-body::-webkit-scrollbar-thumb {
  background: var(--thumb-color);
  border-radius: 11px;
  border: 2px solid var(--input-bg);
}

/* Fades the last visible rows while more are below, like the logs table's
   edge fades -- in the popup's own colour so it blends into it. */
.csv-sheet::after {
  content: "";
  position: absolute;
  left: 0;
  right: 9px;
  bottom: 0;
  height: 32px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, var(--input-bg) 100%);
  opacity: 0;
  transition: opacity 0.15s ease;
}

.csv-sheet.has-more-below::after {
  opacity: 1;
}

/* While rows continue below, the box stays open at the bottom -- no bottom
   border, square corners -- and closes once the last row is in view. The
   border is made transparent, not removed, so nothing shifts by a pixel. */
.csv-sheet {
  transition: border-bottom-color 0.15s ease, border-radius 0.15s ease;
}

.csv-sheet.has-more-below {
  border-bottom-color: transparent;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* The selection box is the focus indicator here; the app's blanket
   div:focus-visible ring (!important, equal specificity) would box the whole
   grid, hence the attribute for the extra weight. */
div.csv-table[data-csv-grid]:focus,
div.csv-table[data-csv-grid]:focus-visible {
  outline: none !important;
}

[data-csv-search-clear][hidden] {
  display: none !important;
}

.csv-table-row {
  display: grid;
  grid-template-columns: 48px minmax(0, 1.6fr) minmax(0, 1fr);
}

.csv-cell {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 34px;
  box-sizing: border-box;
  border-right: 1px solid var(--border-color-lighter);
  border-bottom: 1px solid var(--border-color-lighter);
  user-select: none;
  -webkit-user-select: none;
}

.csv-table-row > .csv-cell:last-child {
  border-right: none;
}

.csv-rows > .csv-table-row:last-child > .csv-cell {
  border-bottom: none;
}

.csv-table-head {
  flex: none;
  padding-right: 9px;
  background: var(--file-btn-mobile-bg);
  border-bottom: 1px solid var(--border-color-lighter);
}

.csv-table-head .csv-cell {
  border-bottom: none;
}

.csv-table-head .csv-cell {
  padding: 0 10px;
  background: var(--file-btn-mobile-bg);
  cursor: default;
}

.csv-cell-num {
  justify-content: center;
  background: var(--file-btn-mobile-bg);
  font-variant-numeric: tabular-nums;
  cursor: default;
}

/* The row numbers and headers of what is selected, picked out like Excel's. */
.csv-cell-num.is-selected,
.csv-table-head .csv-cell.is-selected {
  background: color-mix(in srgb, var(--blue-accent) 22%, var(--file-btn-mobile-bg));
  color: var(--light-text);
}

.csv-cell-value {
  padding: 0 10px;
  cursor: cell;
  color: var(--light-text);
}

.csv-cell-value[data-col="1"] {
  gap: 8px;
}

.csv-cell-value .role-square {
  flex: none;
}

.csv-cell-value .role-square[hidden] {
  display: none !important;
}

.csv-cell-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.csv-cell-value[data-col="1"] {
  padding-right: 30px;
}

.csv-cell-chevron {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  padding: 4px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--med-text);
  cursor: pointer;
}

.csv-cell-chevron svg {
  display: block;
  width: 100%;
  height: 100%;
}

.csv-table-body {
  position: relative;
}

/* Over the rows area (placed from JS), clipped to it; only the fill handle
   and the editor take the pointer. */
.csv-overlay {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.csv-cell-editor {
  pointer-events: auto;
}

.csv-selection {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  border: 2px solid var(--blue-accent);
  background: color-mix(in srgb, var(--blue-accent) 9%, transparent);
  pointer-events: none;
}

.csv-fill-handle {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 8px;
  height: 8px;
  box-sizing: border-box;
  background: var(--blue-accent);
  border: 1.5px solid var(--input-bg);
  pointer-events: auto;
  cursor: crosshair;
}

.csv-fill-preview {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  border: 1.5px dashed var(--blue-accent);
  pointer-events: none;
}

.csv-selection[hidden],
.csv-fill-handle[hidden],
.csv-fill-preview[hidden],
.csv-cell-editor[hidden],
.csv-role-menu[hidden] {
  display: none !important;
}

.csv-cell-editor {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  margin: 0;
  padding: 0 10px;
  border: none;
  border-radius: 0;
  background: var(--input-bg);
  color: var(--light-text);
  box-shadow: inset 0 0 0 2px var(--blue-accent);
  outline: none;
}

/* The autocomplete ghost: the typed text, invisible, then the suggestion in
   med-text -- laid over the editor with the same padding and font. */
.csv-cell-ghost {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 0 10px;
  overflow: hidden;
  white-space: pre;
  pointer-events: none;
}

.csv-cell-ghost[hidden] {
  display: none !important;
}

.csv-cell-ghost-typed {
  color: transparent;
}

.csv-cell-ghost-rest {
  color: var(--med-text);
}

.csv-table.is-readonly .csv-fill-handle,
.csv-table.is-readonly .csv-cell-chevron {
  display: none;
}

/* A flagged cell: tinted, with the triangle at its right edge (left of the
   role chevron). Colours as on the progress rows: warnings red, errors orange. */
.csv-cell.is-error {
  background: color-mix(in srgb, var(--orange-text) 9%, transparent);
}

.csv-cell.is-warn {
  background: color-mix(in srgb, var(--red-text) 7%, transparent);
}

.csv-cell-value.is-error,
.csv-cell-value.is-warn {
  padding-right: 32px;
}

.csv-cell-value[data-col="1"].is-error,
.csv-cell-value[data-col="1"].is-warn {
  padding-right: 52px;
}

.csv-table-mark {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  padding: 3px;
  cursor: help;
}

.csv-cell-value[data-col="1"] .csv-table-mark {
  right: 28px;
}

.csv-table-mark:empty {
  display: none;
}

.csv-table-mark .wizard-rail-alert {
  width: 13px;
  height: 13px;
}

.csv-cell.is-error .csv-table-mark {
  color: var(--orange-text);
}

.csv-cell.is-warn .csv-table-mark {
  color: var(--red-text);
}

/* The role dropdown, opened from a cell's chevron (or Enter / Alt+Down). */
.collection_create_popup[data-user-add-panel="csv-table"] {
  position: relative;
}

.csv-role-menu {
  position: absolute;
  z-index: 10;
  max-height: 240px;
  overflow-y: auto;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid var(--border-color-lighter);
  background: var(--input-bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.csv-role-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--light-text);
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
}

.csv-role-option.is-active {
  background: var(--hover-color);
}

.csv-role-option .ChatDropdownOnCheckmark {
  margin-left: auto;
  padding-left: 12px;
  box-sizing: content-box;
}

.csv-role-option .role-square {
  flex: none;
}

/* Empty cells say what goes in them. */
.csv-cell-text:empty::before {
  content: attr(data-placeholder);
  color: var(--med-text);
  opacity: 0.55;
}

.csv-table-row[hidden] {
  display: none !important;
}

/* The bar under the grid. flex: none, or a long file squeezes it (and Done)
   flat: the panel's height is fixed and everything in it shrinks together. */
.collection_create_popup.extra-wide > .csv-table-footer {
  /* Beats ".extra-wide > .flex" (flex: 1 1 auto), which this bar would
     otherwise match too -- it then grew into spare height with the filter on
     and shrank under a long file. */
  flex: none;
}

.csv-table-summary {
  color: var(--med-text);
}

.csv-table-summary[data-tone="error"] {
  color: var(--orange-text);
}

.csv-table-summary[data-tone="warn"] {
  color: var(--red-text);
}

.csv-table-summary-icon {
  display: flex;
}

.csv-table-summary-icon .wizard-rail-alert {
  width: 15px;
  height: 15px;
}

.csv-table-summary[data-tone="ok"] .csv-table-summary-icon {
  display: none;
}

[data-csv-table-filter].is-active {
  color: var(--blue-accent);
}

.csv-import-progress[hidden] {
  display: none !important;
}

/* The wizard hides its rail rows on a narrow screen (they live in a sideways
   step bar there); these are the panel's only progress, so they stay. */
@media (max-width: 760px) {
  .wizard-rail-sub.csv-import-progress {
    display: flex;
  }
}

/* A middle ellipsis, fitted from JS (paintFileName / fitFileName): the box
   only has to clip and report its width. */
.middle-ellipsis {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: pre;
}

/* The table title shares its row with the search; it is the part that
   gives way. */
.csv-table-title {
  flex: 1 1 auto;
  min-width: 0;
}

/* The card's info icon, level with the first line of text. */
.connect-empty-info {
  width: 16px;
  height: 16px;
  flex: none;
  margin-top: 2px;
  color: var(--light-text);
}

/* SAML wizard, no verified domain yet: an amber warning banner. The light
   theme gets its own pair, since a near-black amber would read as a hole
   on a white popup. */
.connect-empty-banner {
  background: #2c1b00;
  border: 1px solid var(--orange-border);
  border-radius: 12px;
  padding: 10px 16px;
  color: #d08309;
}

:root[data-theme="light"] .connect-empty-banner {
  background: #fff4e0;
  color: #9a5b00;
}

.connect-empty-alert {
  width: 16px;
  height: 16px;
  flex: none;
  color: currentColor;
}

[data-connect-saml-domains-empty][hidden] {
  display: none !important;
}

.connect-empty-alert.red {
  color: var(--red-text);
}

.connect-empty-alert.green {
  color: #0a8135;
}

/* Billing's auto-reload status shows one of its two icons. */
.connect-empty-alert[hidden] {
  display: none;
}

/* The card holding the steps and the way to Setup. */
.connect-empty-card {
  background: var(--background-color);
  border: 1px solid var(--border-color-lighter);
  border-radius: 12px;
  padding: 16px;
}


/* A tag never splits across lines ("Setup /" | "Domains"). */
.connect-empty-card .grey-tag {
  white-space: nowrap;
}

/* The page's global list spacing (meant for chat answers) pushed these steps
   far apart; here they are one tight list. */
[data-connect-saml-domains-empty] ol.wizard-steps,
ol.wizard-steps[data-connect-instructions] {
  gap: 8px;
}

[data-connect-saml-domains-empty] ol.wizard-steps li,
ol.wizard-steps[data-connect-instructions] li {
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
}


/* Admin members view: the Users page, admins only -- no select column, role
   column, role filter or directory strips (setUserDashAdminView). */
.UsersDash.is-admin-view [data-user-role-col],
.UsersDash.is-admin-view [data-user-check-col],
.UsersDash.is-admin-view [data-user-rolefilter-wrap],
.UsersDash.is-admin-view [data-directory-strips],
.UsersDash.is-admin-view [data-users-identity-note],
.UsersDash.is-admin-view [data-user-statusfilter-wrap],
.UsersDash:not(.is-admin-view) [data-admin-scope-switch] {
  display: none;
}

/* A row whose three-dot button was removed (owner, former admins) keeps the
   height the button gives every other row. */
.UsersDash .users-table tr.is-menuless {
  height: 51px;
}

/* Admin members' Active / Former switch: toolbar height. */
.slider-switch.admin-scope-switch {
  height: 34px;
  border-radius: 10px;
}
.admin-scope-switch .slider-switch-btn {
  font-size: 0.9rem;
  width: 90px;
  max-width: 90px;
}
/* The thumb is one option wide. */
.slider-switch.wide.admin-scope-switch::before {
  width: 90px;
  border-radius: 9px;
}

/* The hidden select cell is still the row's first child, so the hover and
   selected highlight's rounded left end (and its 8px overhang) move to the
   Name cell, which is the first one showing. */
.UsersDash.is-admin-view .logs-table tr:hover td:nth-child(2) {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: -8px 0 0 var(--hover-color-50);
}

.UsersDash.is-admin-view .logs-table tr.is-selected td:nth-child(2) {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: -8px 0 0 var(--lighter-hover-color);
}

.UsersDash.is-admin-view .logs-table tr.is-loading:hover td:nth-child(2) {
  border-radius: 0;
  box-shadow: none;
}


/* ---- Notifications page ---------------------------------------------- */

/* The hover pad is always there, cancelled by an equal negative margin, so
   hovering paints a 12px surround without moving anything. */
.notification-row {
  margin: -12px;
  padding: 12px;
  width: calc(100% + 24px);
  border-radius: 12px;
  box-sizing: border-box;
  transition: background-color 0.15s ease;
}

.notification-row:hover {
  background-color: var(--hover-color-50);
}

.notification-row[hidden],
[data-notification-empty][hidden],
[data-notification-action][hidden] {
  display: none;
}

.notification-icon {
  display: flex;
  width: 15px;
  height: 15px;
  min-width: 10px;
  min-height: 10px;
  padding: 8px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Date and hide button share one grid cell (the wider sets the width), so
   swapping them on hover shifts nothing. */
.notification-trailing {
  display: grid;
  justify-items: end;
  align-items: center;
}

.notification-trailing > * {
  grid-area: 1 / 1;
}

.notification-trailing .notification-dismiss {
  visibility: hidden;
}

.notification-row:hover .notification-trailing .notification-date {
  visibility: hidden;
}

.notification-row:hover .notification-trailing .notification-dismiss {
  visibility: visible;
}

/* Admin members > an admin's panel and the change panel (View details) that
   opens over it. */
.logs_slideout.audit-slideout {
  z-index: 11;
}

/* Transparent throughout, header included: the shared header rule
   (.dash-chart-table thead th) is opaque so rows can scroll under it. */
.dash-chart-table.audit-table,
.dash-chart-table.audit-table thead th,
.dash-chart-table.audit-table td,
.dash-chart-table.audit-table th {
  background: transparent;
}

.audit-table tbody tr.is-loading {
  cursor: default;
}

.audit-table tbody tr:not([data-audit-empty]) {
  cursor: pointer;
}

.number-circle.is-small {
  height: 15px;
  width: 15px;
  min-width: 15px;
}

/* Event type: the category's glyph beside its name. */
.audit-type-icon {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: none;
}

.audit-type-icon svg {
  width: 14px;
  height: 14px;
}

/* A changed value: the old one struck through, the new one green. */
.audit-old {
  text-decoration: line-through;
  color: var(--red-text);
  opacity: 0.7;
}

.audit-new {
  color: var(--green-400);
}

/* View details / Revert are hidden per change; the options set display. */
[data-audit-menu-list] [hidden] {
  display: none;
}

/* Every slide-out scrolls with the sidebar's scrollbar. Its --sb-* values are
   declared on .sidebar, so they are restated here; the track and the thumb's
   inset border follow the panel's own surface (--input-bg). */
.logs_slideout {
  /* Vertical scrolling only. */
  overflow-x: hidden;
  --sb-size: 10px;
  --sb-track-color: var(--input-bg);
  --sb-thumb-color: var(--thumb-color);
}

.logs_slideout::-webkit-scrollbar {
  width: var(--sb-size);
}

.logs_slideout::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 11px;
}

.logs_slideout::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 1px solid var(--input-bg);
}

@supports not selector(::-webkit-scrollbar) {
  .logs_slideout {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

/* Audit log rows: the chart tables' hover (rounded at the row's ends). Real
   rows only -- not the placeholders or the empty row. Above the table's
   transparent cells in specificity. */
.dash-chart-table.audit-table tbody tr:not(.is-loading):not([data-audit-empty]):hover td,
.dash-chart-table.audit-table tbody tr:not(.is-loading):not([data-audit-empty]):hover th {
  background: var(--lighter-hover-color);
}

.dash-chart-table.audit-table tbody tr:not(.is-loading):not([data-audit-empty]):hover > *:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

.dash-chart-table.audit-table tbody tr:not(.is-loading):not([data-audit-empty]):hover > *:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* The audit table scrolls sideways inside the panel (which only scrolls
   down), with the panel's scrollbar turned on its side. */
.audit-table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}

.audit-table-scroll::-webkit-scrollbar {
  height: var(--sb-size);
}

.audit-table-scroll::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 11px;
}

.audit-table-scroll::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 1px solid var(--input-bg);
}

@supports not selector(::-webkit-scrollbar) {
  .audit-table-scroll {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

/* The Logs table's edge fades, over the panel's own surface: ::before marks
   content hidden to the left, ::after to the right (toggled from JS). */
.audit-table-wrap {
  position: relative;
}

.audit-table-wrap::before,
.audit-table-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 25px;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.audit-table-wrap::before {
  left: 0;
  background: linear-gradient(270deg, transparent 0%, var(--input-bg) 100%);
}

.audit-table-wrap::after {
  right: 0;
  background: linear-gradient(90deg, transparent 0%, var(--input-bg) 100%);
}

.audit-table-wrap.has-overflow-left::before,
.audit-table-wrap.has-overflow-right::after {
  opacity: 1;
}

/* Admin + change panels: the head (first two rows) stays put and only the
   body scrolls -- one scrollbar, below the head. The body spans the panel's
   bottom/side padding so its scrollbar sits at the panel's edge. */
.logs_slideout.has-fixed-head {
  overflow: hidden;
}

.logs_slideout .slideout-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: none;
}

.logs_slideout .slideout-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 -15px -15px;
  padding: 0 15px 15px;
  overscroll-behavior: contain;
}

.logs_slideout .slideout-body::-webkit-scrollbar {
  width: var(--sb-size);
}

.logs_slideout .slideout-body::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 11px;
}

.logs_slideout .slideout-body::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 1px solid var(--input-bg);
}

@supports not selector(::-webkit-scrollbar) {
  .logs_slideout .slideout-body {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

/* Admin permissions editor. "High risk" beside a row set to a risky level. */
.orange-tag.thin.admin-perm-risk {
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 0.85rem;
  background-color: var(--orange-bg);
  color: var(--orange-text);
}

.orange-tag.admin-perm-risk[hidden] {
  display: none;
}

/* A level that cannot be picked: above the editor's own, or a switch whose
   page is closed. */
[data-admin-perm] .slider-switch-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* Permission switches: icon-only options, so each option (and the thumb that
   slides between them) is 28px rather than .wide's 110px. */
.slider-switch.wide[data-admin-perm]::before {
  width: 28px;
}

[data-admin-perm] .slider-switch-btn.wide {
  width: 28px;
  max-width: 28px;
}

/* A locked row (its page is closed): dimmed as a whole, so its options keep
   their own colour, take no hover, and let the row's tooltip through. */
[data-admin-perm-locked] .slider-switch-btn {
  pointer-events: none;
}

[data-admin-perm-locked] .slider-switch-btn:disabled {
  opacity: 1;
}

/* Editing an admin's permissions: only the close button stays in the head --
   no Edit, menu or stepping to another admin mid-edit. The change panel never
   steps (it is one change). Close keeps its place at the right edge. */
.logs_slideout.is-editing .slideout-head [data-detail-prev],
.logs_slideout.is-editing .slideout-head [data-detail-next],
[data-audit-detail] .slideout-head [data-detail-prev],
[data-audit-detail] .slideout-head [data-detail-next] {
  display: none !important;
}

/* Edit and the menu keep their space so the name row keeps its height. */
.logs_slideout.is-editing .slideout-head [data-admin-detail-edit],
.logs_slideout.is-editing .slideout-head [data-user-menu] {
  visibility: hidden;
}

.logs_slideout.is-editing .slideout-head [data-detail-close],
[data-audit-detail] .slideout-head [data-detail-close] {
  margin-left: auto;
}

/* Admin panel > Permission rules: one row per rule, its level as a tag.
   Shares the audit table's look but its rows open nothing. */
.audit-table.admin-perm-table tbody tr {
  cursor: default;
}

.dash-chart-table.audit-table.admin-perm-table tbody tr:not(.is-loading):not([data-audit-empty]):hover td,
.dash-chart-table.audit-table.admin-perm-table tbody tr:not(.is-loading):not([data-audit-empty]):hover th {
  background: transparent;
}

.admin-perm-tag {
  width: fit-content;
}

.admin-perm-tag svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* Spend limits page: one table per role. Only the first shows its header. */
.spend-limits-list > .logs-table-wrap:not(:first-child) thead {
  display: none;
}

.spend-limits-table td {
  cursor: default;
}

.spend-limits-table .spend-col-value {
  height: 31px;
}

.spend-limits-table tbody tr:last-child td {
  border-bottom: none;
}

/* Column widths, on every row (only the first table shows its header).
   .logs-table.users-table carries its own widths, alignment and a 1100px
   min-width, hence the extra class. The table is full width, so fixed layout
   grows all three in proportion to these. */
.logs-table.users-table.spend-limits-table {
  min-width: 335px;
}

/* Border-box, or the flush column-3 cells (no right padding) set a narrower
   column than the header cell does: fixed layout reads the FIRST row, which
   is the header in the first table and a body row in the others. */
.logs-table.users-table.spend-limits-table th,
.logs-table.users-table.spend-limits-table td {
  box-sizing: border-box;
}

.logs-table.users-table.spend-limits-table th:nth-child(1),
.logs-table.users-table.spend-limits-table td:nth-child(1) {
  width: 94px;
}

.logs-table.users-table.spend-limits-table th:nth-child(2),
.logs-table.users-table.spend-limits-table td:nth-child(2) {
  width: 170px;
}

.logs-table.users-table.spend-limits-table th:nth-child(3),
.logs-table.users-table.spend-limits-table td:nth-child(3) {
  width: 71px;
  text-align: right;
  padding-right: 0;
}

/* Only the role-name row is hoverable: it opens the role's panel. The two
   limit lines under it are not. */
.logs-table.spend-limits-table tbody tr.spend-role-row td {
  cursor: pointer;
}

.logs-table.spend-limits-table tbody tr:not(.spend-role-row):hover td,
.logs-table.spend-limits-table tbody tr:not(.spend-role-row):hover td:first-child,
.logs-table.spend-limits-table tbody tr:not(.spend-role-row):hover td:last-child {
  background-color: transparent;
  box-shadow: none;
}

.logs-table.spend-limits-table tbody tr:not(.spend-role-row):not(:last-child):hover td {
  border-bottom-color: var(--border-color);
}

/* Shown only while a search or filter is set; their display rules outrank
   the UA [hidden] rule. */
.SpendLimitsDash [data-spend-clear][hidden],
.SpendLimitsDash [data-spend-search-x][hidden] {
  display: none !important;
}


/* Spend limit panel. */
.spend-detail-bar {
  height: 9px;
}

.spend-chart-view-switch {
  background-color: var(--input-bg-lighter);
}

/* Breakdown: figures right, the two ratios and the total row muted. Rows
   open nothing, unlike the audit table it borrows its look from. */
.audit-table.spend-breakdown-table tbody tr {
  cursor: default;
}

.dash-chart-table.audit-table.spend-breakdown-table tbody tr:not(.is-loading):not([data-audit-empty]):hover td,
.dash-chart-table.audit-table.spend-breakdown-table tbody tr:not(.is-loading):not([data-audit-empty]):hover th {
  background: transparent;
}

.spend-breakdown-table th:nth-child(n+2),
.spend-breakdown-table td:nth-child(n+2) {
  text-align: right;
}

.spend-breakdown-table td.light {
  color: color-mix(in srgb, var(--text-color) 80%, transparent 20%);
}

.spend-breakdown-table tbody th:nth-child(n+3),
.spend-breakdown-table tbody tr.is-total td,
.spend-breakdown-table tbody tr.is-total th {
  color: var(--light-text);
}

/* The chart's limit line in the legend: a short rule, not a square. */
.dash-chart-swatch.is-line {
  background: var(--light-text);
  height: 2px;
}


/* Edit spend limit popup: label and field side by side, the error under the
   field (its hidden state's -8px margin cancels the row gap). */
.spendlimit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  row-gap: 8px;
}

.spendlimit-grid .spendlimit-error-cell {
  grid-column: 2;
}

/* The spend limit panel's chart table sits on the panel's surface
   (--input-bg), header included, and so do its scrollbar's track and the
   thumb's border. The bottom fade blends into the same colour. */
[data-spend-chart-host] .dash-chart-table,
[data-spend-chart-host] .dash-chart-table thead th,
[data-spend-chart-host] .dash-chart-table td,
[data-spend-chart-host] .dash-chart-table th {
  background: var(--input-bg);
}

[data-spend-chart-host] .dash-chart-table-scroll {
  --sb-track-color: var(--input-bg);
}

[data-spend-chart-host] .dash-chart-table-scroll::-webkit-scrollbar-thumb {
  border-color: var(--input-bg);
}

[data-spend-chart-host] .dash-chart-table-wrap::after {
  background: linear-gradient(180deg, transparent 0%, var(--input-bg) 100%);
}

/* .flex / .audit-table-wrap set display, which outranks [hidden]. */
[data-spend-breakdown-empty][hidden],
[data-spend-breakdown-wrap][hidden] {
  display: none;
}

/* The panel's spend bar, in sections: the bar's own single fill is off and
   each product/model is a coloured child. */
.usage_bar.spend-detail-bar.is-segmented {
  overflow: hidden;
  gap: 1px;
}

.usage_bar.spend-detail-bar.is-segmented::after {
  display: none;
}

/* The bar is 9px with a 1px border, so a section is 7px tall. A browser
   scales ALL of a box's corners down once two on one side add up to more than
   that side, so the radii are given at their real size: 3.5px (half the
   height) for the outer ends, 1.4px for the corners where sections meet. */
.spend-bar-seg {
  height: 100%;
  flex: none;
  border-radius: 1.4px;
}

.spend-bar-seg:first-child {
  border-top-left-radius: 3.5px;
  border-bottom-left-radius: 3.5px;
}

.spend-bar-seg:last-child {
  border-top-right-radius: 3.5px;
  border-bottom-right-radius: 3.5px;
}

/* Its hover box: one row (swatch + name) over the cost. */
.dash-chart-tooltip.spend-bar-tip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border: 1px solid var(--border-color-input);
  border-radius: 6px;
  background: var(--input-bg);
  color: var(--text-color);
  font-size: 0.8rem;
  font-weight: 300;
  /* No glide between sections: it appears where it belongs. */
  transition: opacity 0.12s ease;
}

/* A taller hover strip around the spend bar, without moving anything: the
   padding is given back by the negative margin. */
.spend-bar-hit {
  padding: 8px 0;
  margin: -8px 0;
}

/* Spend limits page placeholders, sized like what they stand in for. The
   .users-table skeleton widths key on the same column numbers, hence the
   doubled class. */
.logs-table.users-table.spend-limits-table tr.is-loading .logs-skeleton.spend-skel-role {
  width: 120px;
}

.logs-table.users-table.spend-limits-table tr.is-loading .logs-skeleton.spend-skel-bar {
  width: 100%;
  height: 6px;
  flex: 1 1 auto;
}

.logs-table.users-table.spend-limits-table tr.is-loading .logs-skeleton.spend-skel-pct {
  width: 28px;
}

.logs-table.users-table.spend-limits-table tr.is-loading .logs-skeleton.spend-skel-amount {
  width: 70px;
}

/* A placeholder role row opens nothing, so it takes no hover either. */
.logs-table.spend-limits-table tbody tr.spend-role-row.is-loading td {
  cursor: default;
}

.logs-table.spend-limits-table tbody tr.spend-role-row.is-loading:hover td,
.logs-table.spend-limits-table tbody tr.spend-role-row.is-loading:hover td:first-child,
.logs-table.spend-limits-table tbody tr.spend-role-row.is-loading:hover td:last-child {
  background-color: transparent;
  border-bottom-color: var(--border-color);
  box-shadow: none;
}

/* Where the two scrollbars meet: the browser's default corner is a white
   square. It takes the track's colour instead. */
.dash-chart-table-scroll::-webkit-scrollbar-corner {
  background: var(--sb-track-color);
}

/* Placeholder role row: Edit is invisible but still holds the row's height. */
.logs-table.spend-limits-table tr.spend-role-row.is-loading [data-spend-edit] {
  visibility: hidden;
}

/* Placeholder rows keep the loaded rows' 8px padding (.users-table): the
   shared skeleton rule gives every loading row 14px, which made them taller. */
.logs-table.users-table.spend-limits-table tr.is-loading td {
  padding-top: 8px;
  padding-bottom: 8px;
}


/* Prompt caching: the breakdown table. Five columns, so the logs table's
   eight fixed widths and its right-aligned 5-7 are reset; its rows open
   nothing. */
.logs-table.cache-breakdown-table {
  min-width: 640px;
}

/* :nth-child(n) to outrank the logs table's own nth-child widths/alignment. */
.logs-table.cache-breakdown-table th:nth-child(n),
.logs-table.cache-breakdown-table td:nth-child(n) {
  width: auto;
  text-align: left;
  cursor: default;
}

.logs-table.cache-breakdown-table th:nth-child(3):nth-child(n) {
  width: 35%;
}

.logs-table.cache-breakdown-table tbody tr:hover td,
.logs-table.cache-breakdown-table tbody tr:hover td:first-child,
.logs-table.cache-breakdown-table tbody tr:hover td:last-child {
  background-color: transparent;
  border-bottom-color: var(--border-color);
  box-shadow: none;
}

.logs-table.cache-breakdown-table tbody tr:last-child td {
  border-bottom: none;
}

.cache-breakdown-legend {
  padding-left: 0;
}

/* Read / write / uncached in the chart colours: the breakdown bars' sections
   (the spend limit bar, .spend-detail-bar) and the legend. */
.cache-swatch-read,
.spend-bar-seg.cache-seg-read { background: var(--cds-chart-categorical-1); }
.cache-swatch-write,
.spend-bar-seg.cache-seg-write { background: var(--cds-chart-categorical-2); }
.cache-swatch-uncached,
.spend-bar-seg.cache-seg-uncached { background: var(--cds-chart-categorical-3); }

/* Cache usage breakdown placeholders (doubled class: the logs table's own
   skeleton widths key on the same column numbers). */
.logs-table.cache-breakdown-table tr.is-loading .logs-skeleton.cache-skel-name { width: 90px; }
.logs-table.cache-breakdown-table tr.is-loading .logs-skeleton.cache-skel-num { width: 56px; }
.logs-table.cache-breakdown-table tr.is-loading .logs-skeleton.cache-skel-bar {
  width: 100%;
  height: 9px;
}

/* The user box's chevron has no room in the collapsed rail. The box is the
   sidebar's sibling, as the other collapsed rules for it read. */
.sidebar.collapsed ~ .user-box .user-inner > .model-stat-icon {
  display: none;
}

/* Dashboard "Spend this month" ring: the share of the summed role limits used,
   drawn as a conic fill behind the card's inner disc (::after). Red from 90%. */
.doughnut_diagram.has-fill {
  background: conic-gradient(var(--highlight-text) var(--ring-fill, 0%), var(--file-btn-mobile-bg) 0);
}

.doughnut_diagram.has-fill.is-full {
  background: conic-gradient(var(--red-text) var(--ring-fill, 0%), var(--file-btn-mobile-bg) 0);
}

/* Collapsing the sidebar must not move the user box's rows up or down: keep
   the expanded box's 9px top/bottom padding, and centre the 38px collapsed
   avatar row where the 51px expanded one was ((51 - 38) / 2 each side). */
.sidebar.collapsed ~ .user-box {
  padding-top: 9px;
  padding-bottom: 9px;
}

.sidebar.collapsed ~ .user-box .user-inner {
  margin-top: 6.5px;
  margin-bottom: 6.5px;
}

/* The ring's inner disc follows the card's hover background. That background
   is half-transparent (--input-bg-50), and the disc must stay opaque or the
   ring would show through it, so it is the same colour mixed solid. */
.dashboard-card:hover .doughnut_diagram::after {
  background-color: color-mix(in srgb, var(--input-bg) 50%, var(--background-color));
}

/* A card that opens nothing (Dashboard > Academic honesty): no hover, no hand. */
.dashboard-card.no-hover {
  cursor: default;
}

.dashboard-card.no-hover:hover {
  background-color: transparent;
}

/* Dashboard card tags (% used, flag rate): .grey-tag sets display, which
   outranks [hidden]. */
.card-title .grey-tag[hidden] {
  display: none;
}

/* The tooltip wraps past a readable width instead of running on one line
   (it was white-space: pre), left-aligned. Line breaks in the text still
   break (pre-line). */
#globalTooltip {
  white-space: pre-line;
  max-width: 260px;
  width: max-content;
  text-align: left;
}

/* User panel: every bar row's value gets the same fixed width, so the bars
   line up whatever the value reads ("No limit", "€24.74", "3%"). */
[data-user-detail] .logs-stats .flex.gap24 > .size085rem.grey {
  flex: none;
  min-width: 64px;
  text-align: right;
}

/* User panel usage placeholders: a figure is a short shimmer bar, and a bar
   shimmers in place of its fill (same sweep as .logs-skeleton). */
[data-user-detail] .logs-skeleton.user-usage-skeleton {
  width: 48px;
}

.usage_bar.is-skeleton {
  overflow: hidden;
  background-color: var(--file-btn-mobile-bg);
  border-color: transparent;
}

.usage_bar.is-skeleton::after {
  display: none;
}

.usage_bar.is-skeleton::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.08) 45%, transparent 100%);
  transform: translateX(-100%);
  animation: slanterEikonShimmer 1.25s linear infinite;
  pointer-events: none;
}

/* Credit balance below zero: a turn that started above zero overran it. */
.credits-negative {
  color: var(--red-text) !important;
}

/* Audit logs page: its own six columns over the Logs table's styling (whose
   widths and right-aligned 5-7 are the Logs columns'). Item affected takes the
   remainder. */
.AuditLogsDash .logs-table th:nth-child(1) { width: 140px; }   /* "14 hours ago" */
.AuditLogsDash .logs-table th:nth-child(2) { width: 260px; }   /* avatar, name, email */
.AuditLogsDash .logs-table th:nth-child(3) { width: 170px; }   /* Identity and access */
.AuditLogsDash .logs-table th:nth-child(4) { width: 220px; }   /* Default payment method changed */
.AuditLogsDash .logs-table th:nth-child(5) { width: auto; }
.AuditLogsDash .logs-table th:nth-child(6) { width: 40px; }

.AuditLogsDash .logs-table th:nth-child(5),
.AuditLogsDash .logs-table td:nth-child(5) {
  text-align: left;
}


/* Audit logs page: its change panel steps through the log, so its arrows show
   (the rule above hides them on Admin members' change panel). Previous takes
   the margin again, so Close sits after Next. */
.AuditLogsDash [data-audit-detail] .slideout-head [data-detail-prev],
.AuditLogsDash [data-audit-detail] .slideout-head [data-detail-next] {
  display: flex !important;
}

.AuditLogsDash [data-audit-detail] .slideout-head [data-detail-close] {
  margin-left: 0;
}

/* Both set display, which beats the UA's [hidden]. */
.AuditLogsDash [data-audit-logs-search-x][hidden],
.AuditLogsDash [data-audit-logs-clear][hidden] {
  display: none !important;
}

/* Platform documentation popup (#docsModal). */
.collection_create_popup.docs-popup {
  gap: 0;
  padding: 0;
  width: 1100px;
  height: 100dvh;
  overflow: hidden;
}

.docs-popup-top {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-color-sharper);
}

.docs-popup-logo {
  height: 18px;
  width: fit-content;
  color: var(--text-color);
}

.docs-popup-body {
  flex: 1 1 auto;
  min-height: 0;
}

.docs-nav {
  width: 240px;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--background-color);
  border-right: 1px solid var(--border-color-sharper);
}

.input-date.search.docs-search {
  width: 100% !important;
}

.docs-search [data-docs-search-x][hidden],
.docs-nav-group[hidden],
.docs-nav-item[hidden] {
  display: none !important;
}

.docs-nav-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.docs-nav-title {
  padding-left: 11px;
}

.docs-nav-item.sidebar-menu-item {
  margin: 0;
  width: 100%;
  height: 34px;
}

.docs-nav-item .new-chat-text {
  margin: 0;
}

.docs-content {
  /* The offset parent of the page's headings (section scroll measures it). */
  position: relative;
  padding: 24px;
  box-sizing: border-box;
  overflow-y: auto;
  align-items: flex-start;
  gap: 32px;
}

.docs-article {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 680px;
}

.docs-article-title {
  font-size: 1.7rem;
  font-weight: 300;
}

/* Sticks while the page scrolls; the marker slides to the section in view. */
.docs-outline {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-left: auto;
  width: 180px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
}

.docs-outline:not(:has(.docs-outline-item)) {
  visibility: hidden;
}

/* Too narrow for both: the outline (180px + the 32px gap) goes before the
   article drops much below 480px. .docs-content is the size container. */
.docs-content {
  container-type: inline-size;
  container-name: docs-content;
}

@container docs-content (max-width: 760px) {
  .docs-outline {
    display: none;
  }
}

.docs-outline-marker {
  width: 2px;
  height: 21px;
  left: -12px;
  top: 0;
  background: var(--text-color);
  position: absolute;
  /* Eases out on a curve, straight to the new section. */
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.docs-outline-item {
  background: none;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
  line-height: 21px;
}

/* Template page elements (Intro to Platform). */
/* Tighter than the browser's heading and paragraph margins. */
.docs-article h1 {
  margin: 0 0 8px;
}

.docs-article h2[data-docs-section] {
  margin: 28px 0 6px;
  scroll-margin-top: 24px;
}

.docs-article p {
  margin: 0 0 10px;
}

/* Docs tables: the chat's table, but weight is left to whoever writes the
   page (no forced bold header), on the page's surface with a tinted header. */
.docs-article table {
  background: var(--input-bg);
}

.docs-article th {
  background-color: var(--file-btn-mobile-bg-trans);
  font-weight: inherit;
}

.docs-outline-item:hover {
  color: var(--text-color) !important;
}

.docs-article .docs-h3 {
  font-size: 1rem;
  font-weight: 400;
  margin: 20px 0 0;
}

.docs-article p,
.docs-article .docs-list {
  line-height: 1.6;
}

.docs-article .docs-list {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
  line-height: 1.5;
}

.docs-article .docs-list > li {
  margin: 7px 0;
}

.docs-article strong {
  color: var(--text-color);
  font-weight: 500;
}

/* Inline code: any <code> outside a code block. */
.docs-article :not(pre) > code {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.88rem;
  padding: 2px;
  font-weight: 300;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  background: var(--file-btn-mobile-bg);
  color: var(--dark-red-text);
}

.docs-article .docs-kbd {
  font-family: monospace;
  font-size: 0.85em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--background-color);
  border: 1px solid var(--border-color-sharper);
  color: var(--text-color);
}

.docs-article .docs-pre {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--background-color);
  border: 1px solid var(--border-color-sharper);
  overflow-x: auto;
  font-size: 0.85rem;
  color: var(--text-color);
}

.docs-article .docs-quote {
  margin: 10px 0;
  padding-left: 14px;
  border-left: 2px solid var(--border-color-darker);
}

.docs-article .docs-figure {
  margin: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.docs-article .docs-figure img {
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--border-color-sharper);
}

.docs-article .docs-figure figcaption {
  font-size: 0.85rem;
}

.docs-article .docs-rule {
  border: none;
  border-top: 1px solid var(--border-color-sharper);
  margin: 32px 0 16px;
  width: 100%;
}

/* Scrollbars: the detail panels' (.logs_slideout), each with its own surface
   for the track and the thumb's inset border. */
.docs-nav,
.docs-content,
.docs-article .docs-pre {
  --sb-size: 10px;
  --sb-track-color: var(--docs-sb-surface);
  --sb-thumb-color: var(--thumb-color);
}

/* The docs sidebar takes the dashboard sidebar's scrollbar (.sidebar): 9px,
   track and thumb border in the sidebar's own surface. */
.docs-nav {
  --docs-sb-surface: var(--background-color);
  --sb-size: 9px;
}
.docs-content { --docs-sb-surface: var(--input-bg); }
.docs-article .docs-pre { --docs-sb-surface: var(--background-color); }

.docs-nav::-webkit-scrollbar,
.docs-content::-webkit-scrollbar {
  width: var(--sb-size);
}

.docs-article .docs-pre::-webkit-scrollbar {
  height: var(--sb-size);
}

.docs-nav::-webkit-scrollbar-track,
.docs-content::-webkit-scrollbar-track,
.docs-article .docs-pre::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 11px;
}

.docs-nav::-webkit-scrollbar-thumb,
.docs-content::-webkit-scrollbar-thumb,
.docs-article .docs-pre::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 1px solid var(--docs-sb-surface);
}

@supports not selector(::-webkit-scrollbar) {
  .docs-nav,
  .docs-content,
  .docs-article .docs-pre {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

/* The sidebar's moving highlight lives only in the sidebar, so the docs nav
   paints its own hover and current-article background. */
.docs-nav-item.sidebar-menu-item:hover,
.docs-nav-item.sidebar-menu-item.is-active {
  background: var(--hover-color);
}

/* Numbered steps in the docs: a 28px numbered dot per step, joined to the
   next by a 2px line (drawn like the connect wizard's rail). The space between
   steps is the step's own bottom padding, not a gap or margin, so the line --
   from this dot's bottom edge to the step's bottom -- always reaches the next
   dot, however much text a step has. */
.docs-article .docs-steps {
  list-style: none;
  margin: 10px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.docs-article .docs-step {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: start;
  margin: 0;
}

.docs-article .docs-step:not(:last-child) {
  padding-bottom: 20px;
}

.docs-article .docs-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 28px;
  bottom: 0;
  width: 2px;
  border-radius: 1px;
  transform: translateX(-50%);
  background: var(--border-color-darker);
}

.docs-article .docs-step-num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-content: center;
  font-size: 0.9rem;
  background: var(--file-btn-mobile-bg-trans);
  color: var(--light-text);
}

.docs-article .docs-step-title {
  font-size: 1.1rem;
  line-height: 28px;
}

/* A docs page title with its Copy page split button at the far end; the menu
   opens under the button, right-aligned so it stays inside the page. */
.docs-article .docs-article-title {
  gap: 12px;
}

.docs-page-actions .SettingDropDown {
  left: auto;
  right: 0;
}

/* Docs search results: under the search box (placed by initDocsModal), above
   the popup, scrolling once there are more than fit. */
.SettingDropDown.docs-search-results {
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  --docs-sb-surface: var(--input-bg);
  --sb-size: 10px;
  --sb-track-color: var(--docs-sb-surface);
  --sb-thumb-color: var(--thumb-color);
}

.docs-search-results::-webkit-scrollbar {
  width: var(--sb-size);
}

.docs-search-results::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 11px;
}

.docs-search-results::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 11px;
  border: 1px solid var(--docs-sb-surface);
}

@supports not selector(::-webkit-scrollbar) {
  .docs-search-results {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}

/* The keyboard's current result looks hovered. */
.docs-search-results .SettingDropDownOption.is-active {
  background-color: var(--hover-color);
  color: var(--contrast);
}

.docs-search-results .rolepick-note {
  overflow-wrap: anywhere;
}

.docs-search-hit {
  color: var(--highlight-text);
}

.docs-search-none {
  padding: 8px 10px;
}

/* The note card (.connect-empty-card) keeps the spacing of the page's other
   blocks. */
.docs-article .docs-callout {
  margin: 12px 0;
}

/* A one-line code block with a copy button at its end (the button sets the
   row's height, so the code sits a little tighter). */
.docs-article .docs-pre.docs-pre-copy {
  padding: 5px 5px 5px 14px;
}

.docs-article .docs-pre.docs-pre-copy.is-multiline {
  padding-top: 10px;
  padding-bottom: 10px;
}

/* Docs warning banners and note cards: text at 0.9rem. One with a title line
   has the title at 1rem, and its icon drops 4px to sit level with it. */
.docs-article :is(.docs-warning, .docs-callout) .sans_serif {
  font-size: 0.9rem;
}

.docs-article :is(.docs-warning, .docs-callout) .sans_serif:is(.docs-warning-title, .docs-callout-title) {
  font-size: 1rem;
}

.docs-article :is(.docs-warning, .docs-callout):has(:is(.docs-warning-title, .docs-callout-title)) > svg {
  margin-top: 4px;
}

/* Link cards at the end of a docs page: .resource-card, two to a row, with
   the dashboard cards' hover. The page sits on --input-bg, so the hover is the
   tint the rest of the docs use rather than --input-bg-50, which would not
   show on it. */
.docs-article .docs-link-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 24px 0 8px;
}

.docs-article .docs-link-card {
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.docs-article .docs-link-card:hover {
  background-color: var(--file-btn-mobile-bg);
  border-color: var(--border-color-lighter);
}

.docs-article .docs-link-icon {
  width: 22px;
  height: 22px;
  color: var(--text-color);
}

/* Data retention page: the default retention's tag and button keep their width. */
.retention-actions {
  min-width: fit-content;
}

.retention-tag {
  display: flex;
  align-items: center;
  min-width: fit-content;
  height: fit-content;
  padding: 5px 11px;
}

/* Contact support popup: required marks, clickable topics, the institution's icon. */
.support-required {
  color: var(--red-text);
}

.support-topic {
  cursor: pointer;
}

.support-inst-icon {
  width: 20px;
  height: 20px;
}

/* Contact support's inquiry: a real textarea with the resize handle; the
   field around it follows its height instead of the inputs' fixed 34px. */
.support-message-field {
  height: auto;
  align-items: stretch;
  padding: 9px 4px 4px 13px;
  white-space: normal;
}

.support-message {
  resize: vertical;
  overflow: auto;
  width: 100%;
  min-height: 80px;
  max-height: 500px;
  line-height: 1.45;
  font-family: inherit;
}

/* Contact support: the form and the Product support line are collapsed until
   a topic is picked, then expand. The negative margin cancels the popup's
   24px column gap while closed. */
.support-collapse {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  margin-top: -24px;
  transition: grid-template-rows 0.3s ease, opacity 0.3s ease, margin-top 0.3s ease;
}

.support-collapse.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 0;
}

.support-collapse-inner {
  min-height: 0;
  overflow: hidden;
}

.support-collapse.is-settled .support-collapse-inner {
  overflow: visible;
}

/* Submit feedback's rating: five emoji across the field. Hovering one pops it
   to 2rem with a transform, so the row never reflows; the picked one stays
   that size. */
/* No side padding or gap: the cells tile the whole field, so the indicator
   under the first and last emoji reaches the field's edges (1px inset, like
   the 1px left above and below the 30px indicator). */
.feedback-rating {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  padding: 0 1px;
  cursor: default;
}

/* Not a text field: no hover border. */
.input-date.feedback-rating:hover {
  border-color: var(--border-color-input);
}

/* Slides under the picked emoji (initFeedback sets its width and x). */
.feedback-rating-indicator {
  position: absolute;
  top: 16.5px;
  left: 0;
  height: 30px;
  box-sizing: border-box;
  background: var(--border-color-lighter);
  border: 1px solid var(--border-color-sharper);
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: transform 0.25s ease, width 0.25s ease, opacity 0.16s ease;
}

.feedback-rating-indicator.is-visible {
  opacity: 1;
}

/* The first pick appears in place instead of sliding in from the left. */
.feedback-rating-indicator.no-slide {
  transition: opacity 0.16s ease;
}

/* Only as wide as the glyph: scaling a full-width cell pushed the last one
   past the popup's edge and made it scroll sideways. */
.feedback-emoji {
  position: relative;
  justify-self: center;
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  transition: transform 0.16s ease;
}

.feedback-emoji:hover,
.feedback-emoji:focus-visible,
.feedback-emoji.is-selected {
  transform: scale(1.666);
}

.feedback-emoji:focus-visible {
  outline: none;
}

.support-message.feedback-message {
  max-height: 300px;
}

@media (prefers-reduced-motion: reduce) {
  .feedback-emoji,
  .feedback-rating-indicator {
    transition: none;
  }
}