/* MAX Osaurus-inspired chat presentation.
   Visual reference: compact dark workspace, soft indigo ambient light, centered welcome,
   understated cards and a low-profile composer. This stylesheet only changes presentation. */

:root {
  color-scheme: dark;
  --bg: #11162b;
  --sidebar: rgba(20, 24, 49, .96);
  --surface: rgba(255, 255, 255, .065);
  --surface-hover: rgba(255, 255, 255, .105);
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .15);
  --text: #f5f7ff;
  --muted: #a6aec6;
  --muted-2: #7f89a5;
  --accent: #9bbaff;
  --user-message: rgba(255, 255, 255, .09);
}

html, body {
  background: #11162b !important;
  color: #f5f7ff !important;
}

body {
  background:
    radial-gradient(ellipse at 50% -18%, rgba(88, 73, 210, .34), transparent 48%),
    radial-gradient(ellipse at 100% 50%, rgba(55, 91, 190, .13), transparent 40%),
    #11162b !important;
  color: #f5f7ff !important;
}

.app-shell, .main-content, .chat-container {
  background: transparent !important;
  color: #f5f7ff !important;
}

.sidebar {
  background: rgba(20, 24, 49, .93) !important;
  border-right: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: 8px 0 36px rgba(0,0,0,.12) !important;
  backdrop-filter: blur(24px) saturate(125%);
  -webkit-backdrop-filter: blur(24px) saturate(125%);
  color: #f5f7ff !important;
}

.sidebar-brand span, .section-label, .account-info span,
.sidebar-action, .account-menu-btn {
  color: #929bb7 !important;
}

.sidebar-brand img {
  box-shadow: 0 0 26px rgba(110, 147, 255, .15);
}

.new-chat-btn, .account-card {
  background: rgba(255,255,255,.045) !important;
  color: #eef2ff !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: none !important;
}

.new-chat-btn:hover, .sidebar-action:hover, .conversation:hover,
.account-card:hover, .model-selector:hover, .icon-btn:hover {
  background: rgba(255,255,255,.075) !important;
  box-shadow: none !important;
}

.conversation { color: #d7def4 !important; }
.conversation.active {
  background: rgba(119, 145, 228, .14) !important;
  border-color: rgba(151, 175, 255, .12) !important;
}
.conversation.active:before { background: #9bbaff !important; }

.topbar {
  height: 62px !important;
  padding: 0 22px !important;
  background: rgba(16, 20, 43, .38) !important;
  border-bottom: 1px solid rgba(255,255,255,.045) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.model-selector {
  background: rgba(255,255,255,.055) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  color: #f1f4ff !important;
  box-shadow: none !important;
}
.model-selector img { border-radius: 50% !important; }
.icon-btn { color: #aeb7d0 !important; }

.welcome-screen {
  width: min(760px, calc(100% - 36px)) !important;
  justify-content: center !important;
  padding: 24px 0 160px !important;
  gap: 0 !important;
}

.welcome-intro {
  text-align: center;
  padding-top: 0 !important;
  margin-bottom: 25px;
}

.welcome-logo {
  width: 220px !important;
  height: 220px !important;
  border-radius: 50% !important;
  margin: 0 auto 19px !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible;
}
.welcome-logo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  background: transparent;
}

.welcome-eyebrow {
  color: #9ba9d5 !important;
  font-size: 9px !important;
  font-weight: 750 !important;
  letter-spacing: .2em !important;
}

.welcome-screen h1 {
  color: #f4f6ff !important;
  font-size: clamp(29px, 3.5vw, 37px) !important;
  line-height: 1.15 !important;
  font-weight: 650 !important;
  letter-spacing: -1.25px !important;
  margin: 0 !important;
}

.welcome-intro p, .welcome-screen > p {
  color: #b0b8d0 !important;
  font-size: 14px !important;
  margin: 9px 0 0 !important;
}

.max-feature-card, .quick-actions-heading, .ask-max-card {
  display: none !important;
}

.suggestion-grid.max-quick-grid {
  width: min(510px, 100%) !important;
  max-width: 510px !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 auto !important;
}

.suggestion-grid.max-quick-grid .suggestion-card {
  min-height: 61px !important;
  padding: 15px 14px !important;
  display: grid !important;
  grid-template-columns: 24px minmax(0, 1fr) !important;
  align-items: center !important;
  column-gap: 9px !important;
  border: 1px solid rgba(255,255,255,.085) !important;
  border-radius: 13px !important;
  background: rgba(255,255,255,.065) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform: none !important;
  transition: background .18s ease, border-color .18s ease !important;
}

.suggestion-grid.max-quick-grid .suggestion-card:hover {
  background: rgba(255,255,255,.105) !important;
  border-color: rgba(163,185,255,.22) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.06) !important;
  transform: translateY(-1px) !important;
}

.suggestion-grid.max-quick-grid .suggestion-card:after { display: none !important; }
.suggestion-grid.max-quick-grid .suggestion-card span.quick-action-icon {
  width: 24px !important;
  height: 24px !important;
  border-radius: 7px !important;
  margin: 0 !important;
  font-size: 14px !important;
  background: rgba(153,181,255,.12) !important;
  color: #b9ccff !important;
  box-shadow: none !important;
}
.suggestion-grid.max-quick-grid .suggestion-card strong {
  color: #eef2ff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.suggestion-grid.max-quick-grid .suggestion-card small {
  grid-column: 2;
  color: #9da7c2 !important;
  font-size: 10px !important;
  line-height: 1.35 !important;
  margin-top: 3px !important;
}
.suggestion-grid.max-quick-grid .suggestion-card b { display: none !important; }
.suggestion-grid.max-quick-grid .suggestion-card[data-action-status="coming-soon"] em {
  display: none !important;
}

.messages {
  width: min(800px, calc(100% - 36px)) !important;
  padding: 22px 0 175px !important;
  color: #edf1ff !important;
}
.message { padding: 16px 0 !important; }
.message-avatar { border-radius: 10px !important; }
.user-bubble {
  background: rgba(255,255,255,.095) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  color: #f5f7ff !important;
  box-shadow: none !important;
}
.assistant-content { color: #edf1ff !important; }
.assistant-content a { color: #a9c4ff !important; }
.assistant-content blockquote { color: #bac3dc !important; border-left-color: #65749b !important; }
.code-block { background: #0d1124 !important; border-color: rgba(255,255,255,.09) !important; }
.code-header { background: rgba(255,255,255,.045) !important; border-color: rgba(255,255,255,.08) !important; color: #aeb8d1 !important; }
.link-preview { background: rgba(255,255,255,.055) !important; border-color: rgba(255,255,255,.09) !important; color: #f5f7ff !important; }
.link-preview-description, .link-preview-domain { color: #a7b0c9 !important; }

.composer-area {
  padding: 0 20px 17px !important;
  background: linear-gradient(to bottom, transparent, rgba(17,22,43,.88) 24%, #11162b 62%) !important;
}
.composer {
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 18px !important;
  background: rgba(38,43,68,.92) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,.17), inset 0 1px rgba(255,255,255,.035) !important;
  backdrop-filter: blur(20px) saturate(120%);
  -webkit-backdrop-filter: blur(20px) saturate(120%);
}
.composer:focus-within {
  border-color: rgba(151,180,255,.34) !important;
  box-shadow: 0 12px 38px rgba(0,0,0,.19), 0 0 0 3px rgba(120,151,255,.07), inset 0 1px rgba(255,255,255,.04) !important;
}
.composer textarea { color: #f5f7ff !important; }
.composer textarea::placeholder { color: #a0aac4 !important; }
.composer-icon { color: #b0bad3 !important; }
.composer-icon:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.send-btn:not(:disabled) {
  background: #a9c7ff !important;
  color: #16203b !important;
  box-shadow: 0 4px 15px rgba(103,145,255,.16) !important;
}
.composer-footer { color: #7f8aa7 !important; }
.scroll-bottom {
  color: #e5eaff !important;
  background: rgba(38,43,68,.92) !important;
  border-color: rgba(255,255,255,.12) !important;
}
.code-block pre { color: #e9edff; }
.toast { background: #262b44 !important; color: #f5f7ff !important; border-color: rgba(255,255,255,.12) !important; }
.overlay { background: rgba(4,7,18,.66) !important; }

@media (max-width: 760px) {
  .sidebar { background: #141831 !important; }
  .topbar { height: 58px !important; padding: 0 10px !important; }
  .welcome-screen { width: calc(100% - 24px) !important; padding: 22px 0 125px !important; }
  .welcome-logo { width: 170px !important; height: 170px !important; }
  .welcome-screen h1 { font-size: 28px !important; }
  .suggestion-grid.max-quick-grid { width: min(500px, 100%) !important; }
  .suggestion-grid.max-quick-grid .suggestion-card { padding: 12px 10px !important; min-height: 58px !important; }
  .messages { width: calc(100% - 24px) !important; }
  .composer-area { padding: 0 9px 9px !important; }
  .composer { border-radius: 16px !important; }
}
@media (max-width: 420px) {
  .suggestion-grid.max-quick-grid { grid-template-columns: 1fr !important; width: min(340px, 100%) !important; }
  .welcome-intro { margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Consistent rounded outline SVG icon system, matching the main MAX desktop navigation. */
.ui-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
.new-chat-icon,
.sidebar-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.new-chat-icon { width: 20px; height: 20px; }
.new-chat-icon .ui-icon { width: 19px; height: 19px; }
.sidebar-action-icon { width: 20px; height: 20px; color: #aab5d2; }
.sidebar-action-icon .ui-icon { width: 18px; height: 18px; }
.icon-btn,
.mobile-menu-btn,
.composer-icon,
.send-btn,
.account-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-btn .ui-icon,
.mobile-menu-btn .ui-icon { width: 19px; height: 19px; }
.account-menu-btn .ui-icon { width: 18px; height: 18px; }
.chevron { display: inline-flex; align-items: center; justify-content: center; }
.chevron .ui-icon { width: 15px; height: 15px; }
.suggestion-grid.max-quick-grid .quick-action-icon .ui-icon {
  width: 16px;
  height: 16px;
}
.suggestion-grid.max-quick-grid .suggestion-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.suggestion-grid.max-quick-grid .suggestion-arrow .ui-icon {
  width: 16px;
  height: 16px;
}
.composer-icon .ui-icon { width: 20px; height: 20px; }
.send-btn .ui-icon { width: 19px; height: 19px; }

/* MAX solid-dark visual system — intentionally no glass, blur, or translucent panels. */
:root {
  --bg: #090b10;
  --sidebar: #0d1017;
  --surface: #151a24;
  --surface-hover: #1d2431;
  --border: #252c39;
  --border-strong: #343e50;
  --text: #f3f6fc;
  --muted: #9aa6b8;
  --muted-2: #707d91;
  --accent: #5b8cff;
  --user-message: #1a202b;
}

html, body, body {
  background: #090b10 !important;
  color: #f3f6fc !important;
}

body {
  background: #090b10 !important;
}

.app-shell, .main-content, .chat-container {
  background: #090b10 !important;
}

.sidebar {
  background: #0d1017 !important;
  border-right: 1px solid #202633 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.topbar {
  background: #090b10 !important;
  border-bottom: 1px solid #1b202b !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.model-selector, .new-chat-btn, .account-card {
  background: #121721 !important;
  border: 1px solid #252d3b !important;
  box-shadow: none !important;
}

.new-chat-btn:hover, .sidebar-action:hover, .conversation:hover,
.account-card:hover, .model-selector:hover, .icon-btn:hover {
  background: #1a2130 !important;
  box-shadow: none !important;
}

.conversation.active {
  background: #172238 !important;
  border-color: #263b5f !important;
}

.suggestion-grid.max-quick-grid .suggestion-card {
  background: #111620 !important;
  border: 1px solid #242c3a !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.suggestion-grid.max-quick-grid .suggestion-card:hover {
  background: #171f2d !important;
  border-color: #354968 !important;
  box-shadow: none !important;
}

.suggestion-grid.max-quick-grid .suggestion-card span.quick-action-icon {
  background: #1a2942 !important;
  color: #8bb4ff !important;
}

.user-bubble {
  background: #171d28 !important;
  border: 1px solid #293243 !important;
  box-shadow: none !important;
}

.code-block, .link-preview {
  background: #0e121a !important;
  border-color: #252c39 !important;
  box-shadow: none !important;
}

.code-header {
  background: #151b26 !important;
  border-color: #252c39 !important;
}

.composer-area {
  background: linear-gradient(to bottom, transparent, #090b10 34%, #090b10 100%) !important;
}

.composer {
  background: #111620 !important;
  border: 1px solid #2a3342 !important;
  border-radius: 19px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.composer:focus-within {
  background: #121925 !important;
  border-color: #4a6fae !important;
  box-shadow: 0 0 0 2px rgba(75, 125, 220, .12) !important;
}

.composer-icon {
  color: #9aa9bf !important;
  border-radius: 12px !important;
  transition: background .16s ease, color .16s ease, transform .16s ease !important;
}

.composer-icon:hover {
  background: #202a39 !important;
  color: #eaf1ff !important;
}

.send-btn {
  position: relative;
  width: 43px !important;
  height: 43px !important;
  overflow: hidden;
  border: 1px solid #6794ff !important;
  border-radius: 13px !important;
  background: #263f72 !important;
  color: #c8dcff !important;
  box-shadow: none !important;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease !important;
}

.send-btn:not(:disabled) {
  background: #4f7fff !important;
  border-color: #78a0ff !important;
  color: #07101f !important;
  box-shadow: none !important;
}

.send-btn:not(:disabled):hover {
  background: #79a0ff !important;
  border-color: #a2bdff !important;
  color: #07101f !important;
  transform: translateY(-1px) !important;
}

.send-btn:not(:disabled):active {
  transform: scale(.94) !important;
}

.send-btn:disabled {
  background: #1a2230 !important;
  border-color: #2b3545 !important;
  color: #59677d !important;
  opacity: 1 !important;
}

.send-btn .ui-icon {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 2.3;
}

.scroll-bottom {
  background: #151b26 !important;
  border-color: #2b3443 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.toast {
  background: #171e2a !important;
  border-color: #2a3444 !important;
  box-shadow: none !important;
}

.overlay {
  background: rgba(0, 0, 0, .72) !important;
}

@media (max-width: 760px) {
  .sidebar { background: #0d1017 !important; }
  .composer { border-radius: 17px !important; }
}



/* MAX pure-black monochrome pass: remove all blue/navy accents. */
:root {
  --bg: #000000 !important;
  --sidebar: #000000 !important;
  --surface: #0a0a0a !important;
  --surface-hover: #151515 !important;
  --border: #242424 !important;
  --border-strong: #383838 !important;
  --text: #f5f5f5 !important;
  --muted: #a3a3a3 !important;
  --muted-2: #737373 !important;
  --accent: #ffffff !important;
  --user-message: #141414 !important;
}
html, body, .app-shell, .main-content, .chat-container, .topbar {
  background: #000000 !important;
  color: #f5f5f5 !important;
}
.sidebar, .model-selector, .new-chat-btn, .account-card,
.suggestion-grid.max-quick-grid .suggestion-card,
.composer, .composer:focus-within, .scroll-bottom, .toast,
.code-block, .link-preview, .code-header {
  background: #0a0a0a !important;
  border-color: #292929 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.new-chat-btn:hover, .sidebar-action:hover, .conversation:hover,
.account-card:hover, .model-selector:hover, .icon-btn:hover,
.suggestion-grid.max-quick-grid .suggestion-card:hover,
.composer-icon:hover {
  background: #171717 !important;
  border-color: #383838 !important;
  color: #ffffff !important;
}
.conversation.active {
  background: #191919 !important;
  border-color: #3a3a3a !important;
}
.suggestion-grid.max-quick-grid .suggestion-card span.quick-action-icon {
  background: #1a1a1a !important;
  color: #d4d4d4 !important;
}
.user-bubble {
  background: #151515 !important;
  border-color: #2c2c2c !important;
}
.assistant-content a { color: #e5e5e5 !important; }
.assistant-content blockquote { color: #bdbdbd !important; border-left-color: #525252 !important; }
.composer-area {
  background: linear-gradient(to bottom, transparent, #000000 34%, #000000 100%) !important;
}
.composer:focus-within {
  border-color: #555555 !important;
  box-shadow: 0 0 0 2px rgba(255,255,255,.04) !important;
}
.composer-icon, .sidebar-action-icon { color: #b3b3b3 !important; }
.send-btn, .send-btn:not(:disabled) {
  background: #ffffff !important;
  border: 1px solid #ffffff !important;
  color: #000000 !important;
  box-shadow: none !important;
}
.send-btn:not(:disabled):hover {
  background: #d9d9d9 !important;
  border-color: #d9d9d9 !important;
  color: #000000 !important;
}
.send-btn:disabled {
  background: #202020 !important;
  border-color: #383838 !important;
  color: #707070 !important;
}


/* Premium monochrome paper-plane send control (WhatsApp-inspired, not an up arrow). */
.send-btn,
.send-btn:not(:disabled) {
  width: 46px !important;
  min-width: 46px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  background: #f5f5f5 !important;
  border: 1px solid #f5f5f5 !important;
  color: #050505 !important;
  box-shadow: none !important;
  transform: none;
}
.send-btn:not(:disabled):hover {
  background: #d8d8d8 !important;
  border-color: #d8d8d8 !important;
  color: #000000 !important;
  transform: scale(1.045) !important;
}
.send-btn:not(:disabled):active { transform: scale(.96) !important; }
.send-btn:disabled {
  background: #242424 !important;
  border-color: #343434 !important;
  color: #777777 !important;
}
.send-btn .send-plane-icon {
  width: 21px !important;
  height: 21px !important;
  stroke-width: 1.9 !important;
  margin-left: -1px;
}


/* MAX chat workspace polish: searchable history, retractable sidebar, and restrained motion. */
.sidebar {
  flex: 0 0 auto !important;
  overflow: hidden !important;
  transition:
    width .34s cubic-bezier(.2,.75,.25,1),
    padding .34s cubic-bezier(.2,.75,.25,1),
    margin .34s cubic-bezier(.2,.75,.25,1),
    opacity .2s ease,
    transform .34s cubic-bezier(.2,.75,.25,1) !important;
}
body.sidebar-collapsed .sidebar {
  width: 0 !important;
  min-width: 0 !important;
  flex-basis: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-right-width: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.sidebar-toggle-btn {
  display: inline-flex !important;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, transform .24s cubic-bezier(.2,.75,.25,1) !important;
}
.sidebar-toggle-btn:hover { background: #171717 !important; color: #fff !important; }
.sidebar-toggle-btn:active { transform: scale(.92) !important; }
.sidebar-toggle-icon { transition: transform .3s cubic-bezier(.2,.75,.25,1) !important; }
body.sidebar-collapsed .sidebar-toggle-icon { transform: scaleX(-1); }

.chat-search-wrap {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  margin: -7px 0 20px;
  padding: 0 10px;
  background: #0a0a0a;
  border: 1px solid #292929;
  border-radius: 12px;
  color: #858585;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.chat-search-wrap:focus-within {
  background: #101010;
  border-color: #515151;
  box-shadow: 0 0 0 3px rgba(255,255,255,.035);
}
.chat-search-icon { width: 17px; height: 17px; color: #858585; flex: 0 0 auto; }
.chat-search-input {
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0;
  outline: none;
  border: 0;
  background: transparent;
  color: #f5f5f5;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: .005em;
}
.chat-search-input::placeholder { color: #777; opacity: 1; }
.chat-search-input::-webkit-search-cancel-button { display: none; }
.chat-search-shortcut {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 22px;
  flex: 0 0 auto;
  border: 1px solid #303030;
  border-radius: 5px;
  color: #777;
  font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.chat-search-clear {
  width: 23px;
  height: 23px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: #222;
  color: #eee;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background .16s ease, transform .16s ease;
}
.chat-search-clear:hover { background: #333; }
.chat-search-clear:active { transform: scale(.88); }
.chat-search-clear[hidden] { display: none !important; }

.sidebar-section { display: flex; flex-direction: column; }
#chatListHeading { flex: 0 0 auto; }
.conversation-list {
  height: auto !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 1px 8px;
  scrollbar-color: #363636 transparent;
  scrollbar-width: thin;
}
.conversation-group-label {
  padding: 12px 10px 7px;
  color: #747474;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .095em;
  line-height: 1.2;
  text-transform: uppercase;
}
.conversation-group-label:first-child { padding-top: 2px; }
.conversation {
  min-height: 40px !important;
  margin: 2px 0;
  padding: 9px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #c9c9c9 !important;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}
.conversation:hover {
  background: #151515 !important;
  border-color: #262626 !important;
  color: #fff !important;
  transform: translateX(2px);
}
.conversation.active {
  background: #1b1b1b !important;
  border-color: #303030 !important;
  color: #fff !important;
}
.conversation.active:before { display: none !important; }
.conversation-title {
  min-width: 0;
  color: inherit !important;
  font-size: 12.5px !important;
  line-height: 1.35;
}
.conversation-menu {
  color: #777 !important;
  font-size: 17px;
  letter-spacing: -.08em;
  transition: opacity .16s ease, color .16s ease;
}
.conversation:hover .conversation-menu,
.conversation.active .conversation-menu { color: #c7c7c7 !important; }
.conversation-empty {
  margin: 8px 6px;
  padding: 18px 12px;
  border: 1px dashed #292929;
  border-radius: 11px;
  color: #777;
  font-size: 12px;
  line-height: 1.55;
  text-align: center;
  animation: max-soft-enter .24s ease both;
}
#conversationList:not(.is-filtering) .conversation {
  animation: max-row-enter .28s cubic-bezier(.2,.75,.25,1) both;
  animation-delay: var(--row-delay, 0ms);
}

button, .suggestion-card, .settings-row, .account-card, .model-selector, .composer-icon {
  -webkit-tap-highlight-color: transparent;
}
button:not(:disabled) { transition-timing-function: cubic-bezier(.2,.75,.25,1); }
button:not(:disabled):active { transition-duration: .08s !important; }
.icon-btn:active, .sidebar-action:active, .new-chat-btn:active, .model-selector:active {
  transform: scale(.96);
}
.new-chat-btn, .sidebar-action, .icon-btn, .model-selector, .account-card {
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s cubic-bezier(.2,.75,.25,1) !important;
}
.new-chat-btn:hover { transform: translateY(-1px); }
.app-shell { transform-origin: center; }
html.max-motion-ready .app-shell { animation: max-workspace-enter .42s cubic-bezier(.2,.75,.25,1) both; }
.welcome-screen { animation: max-soft-enter .42s cubic-bezier(.2,.75,.25,1) both; }
.new-chat-btn .new-chat-icon { transition: transform .25s cubic-bezier(.2,.75,.25,1); }
.new-chat-btn:hover .new-chat-icon { transform: rotate(90deg); }
.composer { transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.2,.75,.25,1) !important; }
.composer:focus-within { transform: translateY(-1px); }
.send-btn { transition: background .18s ease, border-color .18s ease, transform .18s cubic-bezier(.2,.75,.25,1), color .18s ease !important; }
.overlay { transition: opacity .26s ease, visibility .26s ease !important; }

@keyframes max-workspace-enter {
  from { opacity: 0; transform: translateY(5px) scale(.997); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes max-row-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes max-soft-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  body.sidebar-collapsed .sidebar {
    width: var(--sidebar-width) !important;
    min-width: 0 !important;
    flex-basis: auto !important;
    padding: 14px !important;
    border-right-width: 1px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  .sidebar-toggle-btn { display: inline-flex !important; }
  .chat-search-wrap { margin-top: -7px; margin-bottom: 16px; }
  .conversation-list { padding-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  html.max-motion-ready .app-shell,
  .welcome-screen,
  .conversation-empty,
  #conversationList:not(.is-filtering) .conversation {
    animation: none !important;
  }
  .sidebar, .sidebar-toggle-btn, .sidebar-toggle-icon, .conversation,
  .chat-search-wrap, .new-chat-btn, .sidebar-action, .icon-btn,
  .model-selector, .account-card, .composer, .send-btn, .overlay {
    transition: none !important;
    transform: none !important;
  }
}


/* Expanded chat search — shares the settings modal's centered panel and motion language. */
body.chat-search-open { overflow: hidden !important; }
.chat-search-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: start center;
  padding: clamp(18px, 7vh, 72px) 20px 24px;
  background: rgba(0,0,0,.76);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.chat-search-overlay[hidden] { display: none !important; }
.chat-search-overlay.open { opacity: 1; visibility: visible; }
.chat-search-panel {
  width: min(760px, 100%); max-height: min(690px, calc(100vh - 96px));
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #303030; border-radius: 22px;
  background: #080808; color: #f5f5f5;
  box-shadow: 0 28px 90px rgba(0,0,0,.55);
  transform: translateY(12px) scale(.985);
  transition: transform .22s cubic-bezier(.2,.75,.25,1);
}
.chat-search-overlay.open .chat-search-panel { transform: translateY(0) scale(1); }
.chat-search-modal-header {
  min-height: 78px; display:flex; align-items:center; justify-content:space-between;
  padding: 18px 22px; border-bottom: 1px solid #242424;
}
.chat-search-modal-header h2 { margin:0; color:#f5f5f5; font-size:22px; letter-spacing:-.45px; }
.chat-search-modal-header .settings-eyebrow { color:#777; }
.chat-search-modal-header .settings-close {
  background:#171717; color:#d4d4d4; border:1px solid #292929;
  transition:background .16s ease, transform .16s ease;
}
.chat-search-modal-header .settings-close:hover { background:#242424; }
.chat-search-modal-header .settings-close:active { transform:scale(.93); }
.chat-search-modal-field {
  margin: 18px 20px 10px; min-height:54px; display:flex; align-items:center; gap:12px;
  padding:0 15px; border:1px solid #383838; border-radius:14px;
  background:#111; color:#8b8b8b;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.chat-search-modal-field:focus-within {
  background:#141414; border-color:#666; box-shadow:0 0 0 3px rgba(255,255,255,.045);
}
.chat-search-modal-field > .ui-icon { width:20px; height:20px; flex:0 0 auto; }
.chat-search-modal-field input {
  width:100%; min-width:0; height:50px; border:0; outline:0; padding:0;
  background:transparent; color:#f5f5f5; font:inherit; font-size:15px;
}
.chat-search-modal-field input::placeholder { color:#777; }
.chat-search-modal-field input::-webkit-search-cancel-button { display:none; }
.chat-search-modal-field kbd, .chat-search-modal-footer kbd {
  flex:0 0 auto; padding:4px 6px; border:1px solid #333; border-radius:6px;
  background:#171717; color:#888; font:10px/1.2 ui-monospace,monospace;
}
.chat-search-modal-results {
  min-height:100px; overflow-y:auto; overscroll-behavior:contain;
  padding:5px 12px 14px; scrollbar-color:#383838 transparent; scrollbar-width:thin;
}
.chat-search-result {
  width:100%; min-height:66px; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 13px; border:1px solid transparent; border-radius:12px;
  background:transparent; color:#f2f2f2; text-align:left; cursor:pointer;
  transition:background .16s ease, border-color .16s ease, transform .16s ease;
  animation:max-soft-enter .2s ease both;
}
.chat-search-result:hover, .chat-search-result:focus-visible {
  outline:none; background:#171717; border-color:#303030; transform:translateX(2px);
}
.chat-search-result-copy { min-width:0; display:flex; flex-direction:column; gap:5px; }
.chat-search-result-copy strong {
  overflow:hidden; color:#ededed; font-size:13px; font-weight:600;
  text-overflow:ellipsis; white-space:nowrap;
}
.chat-search-result-copy small {
  overflow:hidden; color:#777; font-size:11.5px; line-height:1.4;
  text-overflow:ellipsis; white-space:nowrap;
}
.chat-search-result-meta { flex:0 0 auto; color:#777; font-size:11px; }
.chat-search-empty {
  margin:8px; padding:30px 18px; border:1px dashed #303030; border-radius:13px;
  color:#858585; font-size:13px; line-height:1.5; text-align:center;
}
.chat-search-modal-footer {
  min-height:43px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:0 22px; border-top:1px solid #222; color:#737373; font-size:10.5px;
}
.chat-search-modal-footer span:last-child { display:flex; align-items:center; gap:6px; }
@media (max-width:720px) {
  .chat-search-overlay { padding:10px; place-items:start center; }
  .chat-search-panel { max-height:calc(100dvh - 20px); border-radius:18px; }
  .chat-search-modal-header { padding:15px 16px; }
  .chat-search-modal-field { margin:13px 12px 8px; min-height:50px; }
  .chat-search-modal-results { padding:4px 7px 10px; }
  .chat-search-result { min-height:62px; padding:11px 10px; }
  .chat-search-modal-footer { padding:0 14px; font-size:10px; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-search-overlay, .chat-search-panel, .chat-search-result, .chat-search-modal-header .settings-close { transition:none !important; animation:none !important; transform:none !important; }
}


/* Slower, more deliberate sidebar dismissal with a longer ease-out. */
.sidebar {
  transition:
    width .68s cubic-bezier(.16,1,.3,1),
    flex-basis .68s cubic-bezier(.16,1,.3,1),
    padding .58s cubic-bezier(.16,1,.3,1),
    margin .58s cubic-bezier(.16,1,.3,1),
    border-color .42s ease,
    opacity .38s ease,
    transform .68s cubic-bezier(.16,1,.3,1) !important;
}
.sidebar > * {
  opacity: 1;
  transform: translateX(0);
  transition:
    opacity .28s ease,
    transform .48s cubic-bezier(.16,1,.3,1);
  transition-delay: .1s;
}
body.sidebar-collapsed .sidebar > * {
  opacity: 0;
  transform: translateX(-11px);
  transition-delay: 0s;
}
.sidebar-toggle-icon {
  transition: transform .52s cubic-bezier(.16,1,.3,1) !important;
}
.overlay {
  display: block !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .46s cubic-bezier(.16,1,.3,1), visibility .46s ease !important;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
@media (max-width: 760px) {
  .sidebar {
    transition:
      transform .62s cubic-bezier(.16,1,.3,1),
      opacity .36s ease !important;
  }
  .sidebar > * {
    transition: opacity .26s ease, transform .46s cubic-bezier(.16,1,.3,1);
    transition-delay: 0s;
  }
  .sidebar.open > * {
    transition-delay: .09s;
  }
  .sidebar:not(.open) > * {
    opacity: 0;
    transform: translateX(-10px);
  }
  .overlay { transition: opacity .44s cubic-bezier(.16,1,.3,1), visibility .44s ease !important; }
}
@media (max-width: 760px) {
  body.sidebar-collapsed .sidebar > * {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar > *, .sidebar-toggle-icon, .overlay {
    transition: none !important;
  }
}


/* Small tactile bounce when the chat input is tapped. */
.composer.composer-tap-bounce {
  animation: max-composer-tap-bounce .48s cubic-bezier(.2,.85,.3,1) both;
}
@keyframes max-composer-tap-bounce {
  0% { transform: translateY(0) scale(1); }
  36% { transform: translateY(-5px) scale(1.004); }
  62% { transform: translateY(1px) scale(.999); }
  82% { transform: translateY(-1px) scale(1.001); }
  100% { transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .composer.composer-tap-bounce { animation: none !important; }
}


/* Premium hover response for the MAX Orb on the welcome screen. */
.welcome-logo {
  position: relative;
  isolation: isolate;
  cursor: default;
  transform: translateZ(0) scale(1);
  filter: drop-shadow(0 0 0 rgba(99,102,241,0));
  transition: transform .55s cubic-bezier(.16,1,.3,1), filter .55s ease;
}
.welcome-logo video {
  transform: scale(1) rotate(0deg);
  transition: transform .65s cubic-bezier(.16,1,.3,1), filter .55s ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .welcome-logo:hover {
    transform: translateY(-3px) scale(1.035);
    filter: drop-shadow(0 0 20px rgba(99,102,241,.24)) drop-shadow(0 0 38px rgba(34,211,238,.12));
  }
  .welcome-logo:hover video {
    transform: scale(1.045) rotate(1.5deg);
    filter: saturate(1.12) brightness(1.06);
  }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-logo, .welcome-logo video { transition: none !important; }
}


/* Chat composer refinement: clear focus, smooth multiline growth, and a deliberate stop state. */
.composer {
  transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .24s cubic-bezier(.16,1,.3,1) !important;
}
.composer textarea {
  transition: height .16s ease;
  overflow-y: auto;
  scrollbar-width: thin;
}
.composer:focus-within {
  border-color: #515151 !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,.045) !important;
}
.send-btn .stop-generation-icon {
  display: block;
  width: 20px !important;
  height: 20px !important;
  object-fit: contain;
  filter: none;
}
.send-btn[data-mode="stop"] {
  background: #f0f0f0 !important;
  border-color: #f0f0f0 !important;
  color: #080808 !important;
}
.send-btn[data-mode="stop"]:hover {
  background: #d8d8d8 !important;
  border-color: #d8d8d8 !important;
}

/* Welcome suggestions: four practical starting points, using MAX's monochrome system. */
.suggestion-grid.max-quick-grid .suggestion-card {
  min-height: 74px !important;
  grid-template-columns: 30px minmax(0,1fr) 12px !important;
  gap: 11px !important;
  padding: 14px 13px !important;
  text-align: left;
  cursor: pointer;
}
.suggestion-grid.max-quick-grid .suggestion-card .suggestion-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.suggestion-grid.max-quick-grid .suggestion-card .quick-action-icon {
  width: 30px !important;
  height: 30px !important;
  border-radius: 9px !important;
  background: #191919 !important;
  color: #d8d8d8 !important;
}
.suggestion-grid.max-quick-grid .suggestion-card strong {
  font-size: 12px !important;
  line-height: 1.25 !important;
}
.suggestion-grid.max-quick-grid .suggestion-card small {
  grid-column: auto !important;
  margin: 0 !important;
  font-size: 10.5px !important;
  line-height: 1.35 !important;
  color: #8e8e8e !important;
}
.suggestion-grid.max-quick-grid .suggestion-card .suggestion-arrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: #737373 !important;
  font-size: 14px;
  transition: transform .2s ease, color .2s ease;
}
.suggestion-grid.max-quick-grid .suggestion-card:hover .suggestion-arrow {
  transform: translate(2px,-2px);
  color: #f5f5f5 !important;
}
.suggestion-grid.max-quick-grid .suggestion-card:focus-visible,
.new-chat-btn:focus-visible,
.sidebar-action:focus-visible,
.conversation:focus-visible {
  outline: 2px solid #777 !important;
  outline-offset: 2px;
}
.new-chat-btn, .sidebar-action, .conversation, .icon-btn, .model-selector {
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .22s cubic-bezier(.16,1,.3,1) !important;
}
.new-chat-btn:active, .sidebar-action:active, .conversation:active {
  transform: scale(.985);
}
.welcome-screen.welcome-enter {
  animation: max-welcome-enter .38s cubic-bezier(.16,1,.3,1) both;
}
@keyframes max-welcome-enter {
  from { opacity: 0; transform: translateY(8px) scale(.995); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 420px) {
  .suggestion-grid.max-quick-grid .suggestion-card {
    min-height: 66px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .composer, .composer textarea, .send-btn, .suggestion-grid.max-quick-grid .suggestion-arrow,
  .new-chat-btn, .sidebar-action, .conversation, .icon-btn, .model-selector {
    transition: none !important;
  }
  .welcome-screen.welcome-enter { animation: none !important; }
}


/* Individual glyph entrance: each newly typed character gets its own restrained motion. */
.composer-row { position: relative; }
.composer textarea#messageInput {
  position: relative;
  z-index: 2;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  caret-color: #f5f5f5 !important;
  background: transparent !important;
}
.composer textarea#messageInput::placeholder {
  color: #858585 !important;
  -webkit-text-fill-color: #858585 !important;
}
.composer textarea#messageInput::selection {
  background: rgba(255,255,255,.18);
  -webkit-text-fill-color: transparent;
}
.typed-letter-overlay {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  color: #f5f5f5;
  line-height: inherit;
  scrollbar-width: none;
}
.typed-letter {
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 85%;
}
.typed-letter-enter {
  animation: max-letter-arrive .32s cubic-bezier(.16,1,.3,1) both;
  animation-delay: min(calc(var(--letter-index, 0) * 8ms), 72ms);
}
@keyframes max-letter-arrive {
  0% { opacity: .15; transform: translateY(5px) scale(.82); filter: blur(1.5px); }
  65% { opacity: 1; transform: translateY(-1px) scale(1.035); filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .typed-letter-enter { animation: none !important; }
}


/* Deleted glyphs leave individually, including bulk selection deletion. */
.typed-letter-exit-layer {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 3;
  pointer-events: none;
  overflow: visible;
  color: #f5f5f5;
}
.typed-letter-exit {
  position: absolute;
  display: inline-block;
  white-space: pre;
  transform-origin: 50% 50%;
  animation: max-letter-delete .22s cubic-bezier(.4,0,1,1) both;
  animation-delay: min(calc(var(--delete-index, 0) * 10ms), 100ms);
}
@keyframes max-letter-delete {
  0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-5px) scale(.58); filter: blur(2px); }
}
@media (prefers-reduced-motion: reduce) {
  .typed-letter-exit { animation: none !important; display: none !important; }
}


/* MAX response delivery: one-time entrance, then a calm live-streaming state. */
.message-send-enter {
  animation: max-message-send-in .48s cubic-bezier(.16,1,.3,1) both;
  transform-origin: 0 0;
}
.message.assistant.message-send-enter .message-avatar {
  animation: max-assistant-avatar-in .54s cubic-bezier(.16,1,.3,1) both;
}
.message.assistant .typing {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 22px;
  padding-top: 7px;
  animation: max-typing-arrive .24s ease both;
}
.message.assistant .typing span {
  animation: max-typing-pulse 1.05s ease-in-out infinite;
  transform-origin: center;
}
.message.assistant .typing span:nth-child(2) { animation-delay: .14s; }
.message.assistant .typing span:nth-child(3) { animation-delay: .28s; }
@keyframes max-message-send-in {
  from { opacity: 0; transform: translateY(10px) scale(.994); filter: blur(2px); }
  65% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: translateY(0) scale(1); filter: none; }
}
@keyframes max-assistant-avatar-in {
  from { opacity: 0; transform: translateY(5px) scale(.86); }
  70% { opacity: 1; transform: translateY(-1px) scale(1.035); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes max-typing-arrive {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes max-typing-pulse {
  0%, 60%, 100% { opacity: .38; transform: translateY(0) scale(.82); }
  30% { opacity: 1; transform: translateY(-3px) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .message-send-enter,
  .message.assistant.message-send-enter .message-avatar,
  .message.assistant .typing,
  .message.assistant .typing span {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }
}


/* MAX AI welcome experience — spacious, focused, and motion-led. */
.welcome-screen {
  width: min(820px, calc(100% - 36px)) !important;
  padding: 24px 0 150px !important;
  justify-content: center !important;
}
.welcome-intro {
  width: 100%;
  text-align: center;
  margin-bottom: 24px !important;
  animation: max-welcome-copy-in .72s cubic-bezier(.16,1,.3,1) both;
}
.welcome-eyebrow {
  margin-bottom: 13px !important;
  color: #8baeff !important;
  font-size: 10px !important;
  letter-spacing: .22em !important;
}
.welcome-screen h1 {
  font-size: clamp(30px, 4.4vw, 46px) !important;
  line-height: 1.08 !important;
  letter-spacing: -1.8px !important;
  font-weight: 650 !important;
}
.welcome-intro .welcome-rotating-line {
  min-height: 29px;
  margin: 14px 0 0 !important;
  color: #a9b3c8 !important;
  font-size: clamp(14px, 1.8vw, 16px) !important;
  line-height: 1.6 !important;
}
.welcome-rotating-text {
  display: inline-block;
  min-width: 120px;
  color: #82aaff;
  font-weight: 650;
  transition: opacity .22s ease, transform .22s ease, filter .22s ease;
}
.welcome-rotating-text.is-changing {
  opacity: 0;
  transform: translateY(7px);
  filter: blur(3px);
}
.welcome-rotating-caret {
  display: inline-block;
  height: 1em;
  width: 2px;
  margin-left: 2px;
  vertical-align: -2px;
  border-radius: 2px;
  background: #7ea5ff;
  animation: max-caret-blink 1.05s steps(2, start) infinite;
}

/* Make the rotating prompt a clear second line beneath the welcome heading. */
.welcome-intro .welcome-rotating-line {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 7px;
  min-height: 38px;
  margin-top: 13px !important;
  font-size: clamp(20px, 2.6vw, 27px) !important;
  line-height: 1.3 !important;
}
.welcome-intro .welcome-rotating-text {
  min-width: 0;
  max-width: 100%;
  color: #9dbbff !important;
  font-size: inherit !important;
  font-weight: 650 !important;
  letter-spacing: -.55px;
}
.welcome-intro .welcome-rotating-caret {
  height: .95em;
  margin-left: 0;
}
@media (max-width: 760px) {
  .welcome-intro .welcome-rotating-line {
    min-height: 34px;
    margin-top: 11px !important;
    font-size: clamp(18px, 5vw, 22px) !important;
  }
}
.welcome-logo {
  width: clamp(150px, 20vw, 218px) !important;
  height: clamp(150px, 20vw, 218px) !important;
  margin: 0 auto 8px !important;
  animation: max-orb-arrive .9s cubic-bezier(.16,1,.3,1) both, max-orb-float 6s ease-in-out 1s infinite;
  filter: drop-shadow(0 14px 34px rgba(59,130,246,.13));
}
.welcome-logo video {
  transform: scale(1.04);
}
.composer-area {
  z-index: 6;
  padding-bottom: 13px !important;
}
.composer {
  width: min(800px, 100%);
  margin-inline: auto;
  border-radius: 24px !important;
  transition: border-color .24s ease, box-shadow .24s ease, transform .24s cubic-bezier(.16,1,.3,1) !important;
}
.composer:focus-within {
  transform: translateY(-1px);
}
.composer-row {
  min-height: 62px;
  padding: 5px 6px 5px 8px;
}
.composer textarea#messageInput {
  min-height: 34px;
}
.welcome-auth-actions {
  display: flex;
  width: min(420px, 100%);
  gap: 12px;
  margin: 12px auto 0;
  justify-content: center;
  animation: max-welcome-copy-in .7s .12s cubic-bezier(.16,1,.3,1) both;
}
.welcome-auth-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -.01em;
  cursor: pointer;
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.welcome-login-btn {
  color: #fff !important;
  background: #2563eb !important;
  border: 1px solid #3674f5 !important;
  box-shadow: 0 7px 20px rgba(37,99,235,.19), inset 0 1px rgba(255,255,255,.16);
}
.welcome-login-btn:hover {
  background: #3474f4 !important;
  box-shadow: 0 10px 28px rgba(37,99,235,.28);
  transform: translateY(-2px);
}
.welcome-signup-btn {
  color: #111827 !important;
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 7px 20px rgba(0,0,0,.08), inset 0 1px rgba(255,255,255,.8);
}
.welcome-signup-btn:hover {
  background: #edf3ff !important;
  border-color: #dce7ff !important;
  box-shadow: 0 10px 28px rgba(255,255,255,.1);
  transform: translateY(-2px);
}
.welcome-auth-btn:active { transform: scale(.985); }
.welcome-auth-btn:focus-visible {
  outline: 3px solid rgba(105,151,255,.55);
  outline-offset: 3px;
}
body:not(.max-welcome-visible) .welcome-auth-actions,
body.max-authenticated .welcome-auth-actions {
  display: none !important;
}
body.max-welcome-visible .welcome-screen .max-feature-card,
body.max-welcome-visible .welcome-screen .quick-actions-heading,
body.max-welcome-visible .welcome-screen .suggestion-grid,
body.max-welcome-visible .welcome-screen .ask-max-card {
  display: none !important;
}
@keyframes max-welcome-copy-in {
  from { opacity: 0; transform: translateY(12px); filter: blur(3px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes max-orb-arrive {
  from { opacity: 0; transform: translateY(10px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes max-orb-float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes max-caret-blink { to { visibility: hidden; } }
@media (max-width: 760px) {
  .welcome-screen { padding: 16px 0 126px !important; }
  .welcome-intro { margin-bottom: 18px !important; }
  .welcome-logo { width: 156px !important; height: 156px !important; margin-bottom: 5px !important; }
  .welcome-screen h1 { font-size: clamp(28px, 7vw, 35px) !important; letter-spacing: -1.2px !important; }
  .welcome-intro .welcome-rotating-line { margin-top: 10px !important; font-size: 13px !important; }
  .composer-area { padding: 0 12px 10px !important; }
  .composer-row { min-height: 56px; }
  .welcome-auth-actions { width: min(420px, calc(100% - 8px)); gap: 10px; margin-top: 10px; }
  .welcome-auth-btn { min-height: 44px; border-radius: 13px; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .welcome-screen { padding-top: 8px !important; padding-bottom: 115px !important; }
  .welcome-logo { width: 145px !important; height: 145px !important; }
  .welcome-intro { margin-bottom: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-intro, .welcome-auth-actions, .welcome-logo { animation: none !important; }
  .welcome-rotating-caret { animation: none !important; }
  .welcome-rotating-text { transition: none !important; }
}


/* Refined Meta-inspired MAX landing layout and centered orb identity. */
.topbar .model-selector.max-centered-brand {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  width: max-content !important;
  max-width: 48vw !important;
  padding: 4px 8px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none;
}
.topbar .model-selector.max-centered-brand:hover,
.topbar .model-selector.max-centered-brand:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}
.topbar .max-centered-brand .topbar-orb {
  display: block;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  object-fit: contain;
  border-radius: 50%;
  background: transparent;
}
.topbar .max-centered-brand > span {
  color: #f5f7ff !important;
  font-size: 15px;
  font-weight: 680;
  letter-spacing: -.035em;
}
.welcome-rotating-text {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 1px 3px 2px;
  margin: 0;
  border-radius: 5px;
  font: inherit;
  font-weight: 650;
  line-height: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(130,170,255,.35);
  text-underline-offset: 4px;
}
.welcome-rotating-text:hover,
.welcome-rotating-text:focus-visible {
  color: #b6ccff !important;
  text-decoration-color: currentColor;
  outline: none;
}
.welcome-rotating-text:focus-visible {
  box-shadow: 0 0 0 3px rgba(94,143,255,.2);
}
.welcome-rotating-text.is-changing {
  pointer-events: none;
}
.welcome-rotating-caret { pointer-events: none; }
@media (max-width: 420px) {
  .topbar .model-selector.max-centered-brand { max-width: 44vw !important; gap: 6px !important; }
  .topbar .max-centered-brand .topbar-orb { width: 26px; height: 26px; flex-basis: 26px; }
  .topbar .max-centered-brand > span { font-size: 14px; }
}


/* Header layout: fixed controls at the edges, MAX identity truly centered, never transient. */
.topbar {
  position: relative !important;
  flex: 0 0 62px !important;
  overflow: visible !important;
}
.topbar .topbar-left {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 38px !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.topbar .topbar-right {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 76px !important;
  align-items: center !important;
  justify-content: flex-end !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.topbar .topbar-left .sidebar-toggle-btn,
.topbar .topbar-right .icon-btn {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex: 0 0 38px !important;
}
.topbar .model-selector.max-centered-brand {
  position: absolute !important;
  inset: 50% auto auto 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 2 !important;
  max-width: calc(100% - 170px) !important;
  gap: 7px !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.topbar .max-centered-brand .topbar-orb {
  width: 23px !important;
  height: 23px !important;
  flex-basis: 23px !important;
}
.topbar .max-centered-brand > span {
  font-size: 14px !important;
  white-space: nowrap !important;
}
@media (max-width: 760px) {
  .topbar { flex-basis: 58px !important; height: 58px !important; }
  .topbar .topbar-right { min-width: 76px !important; }
  .topbar .topbar-left .sidebar-toggle-btn,
  .topbar .topbar-right .icon-btn { flex-basis: 34px !important; }
  .topbar .model-selector.max-centered-brand {
    max-width: calc(100% - 150px) !important;
    gap: 5px !important;
  }
  .topbar .max-centered-brand .topbar-orb {
    width: 21px !important;
    height: 21px !important;
    flex-basis: 21px !important;
  }
  /* Keep Share chat available on mobile instead of hiding it during responsive layout. */
  .topbar-right .icon-btn:first-child { display: inline-flex !important; }
}
@media (prefers-reduced-motion: reduce) {
  .topbar .topbar-left .sidebar-toggle-btn,
  .topbar .topbar-right .icon-btn,
  .topbar .model-selector.max-centered-brand { transition: none !important; }
}


/* Experimental desktop-only time greeting card. */
.time-greeting-wrap {
  display: flex;
  flex: 0 0 auto;
  justify-content: center;
  width: 100%;
  padding: 13px 24px 0;
  position: relative;
  z-index: 1;
  animation: max-greeting-arrive .55s cubic-bezier(.16,1,.3,1) both;
}
.time-greeting-card {
  display: flex;
  align-items: center;
  gap: 15px;
  width: min(590px, 100%);
  min-height: 100px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 20px;
  background:
    radial-gradient(ellipse at 0% 0%, rgba(130,170,255,.11), transparent 60%),
    linear-gradient(135deg, rgba(22,22,24,.98), rgba(10,10,11,.98));
  box-shadow: 0 14px 40px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.035);
  transition: opacity .45s ease, transform .45s cubic-bezier(.16,1,.3,1), border-color .2s ease;
}
.time-greeting-wrap.is-leaving {
  pointer-events: none;
  animation: max-greeting-leave .55s cubic-bezier(.4,0,.2,1) forwards;
}
.time-greeting-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  color: #e8c98c;
  border: 1px solid rgba(232,201,140,.22);
  border-radius: 15px;
  background: rgba(232,201,140,.08);
}
.time-greeting-icon svg { width: 25px; height: 25px; display: block; }
.time-greeting-copy { min-width: 0; flex: 1; }
.time-greeting-kicker {
  display: block;
  margin-bottom: 5px;
  color: #929292;
  font-size: 9px;
  line-height: 1.3;
  letter-spacing: .17em;
  font-weight: 650;
}
.time-greeting-copy h2 {
  margin: 0;
  color: #f5f5f5;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.55px;
  font-weight: 620;
}
.time-greeting-copy p {
  margin: 5px 0 0;
  color: #a1a1aa;
  font-size: 12px;
  line-height: 1.45;
}
.time-greeting-heart {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  color: #a1a1aa;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 50%;
  background: rgba(255,255,255,.035);
  cursor: pointer;
  transition: color .2s ease, background .2s ease, border-color .2s ease, transform .25s cubic-bezier(.16,1,.3,1);
}
.time-greeting-heart:hover { color: #ff7f9a; border-color: rgba(255,127,154,.35); transform: translateY(-1px); }
.time-greeting-heart[aria-pressed="true"] {
  color: #ff6687;
  background: rgba(255,102,135,.12);
  border-color: rgba(255,102,135,.35);
  animation: max-heart-pop .38s cubic-bezier(.16,1,.3,1);
}
.time-greeting-heart[aria-pressed="true"] svg { fill: currentColor; }
.time-greeting-heart:focus-visible { outline: 2px solid #9bbaff; outline-offset: 3px; }
@keyframes max-greeting-arrive {
  from { opacity: 0; transform: translateY(-7px) scale(.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes max-greeting-leave {
  to { opacity: 0; transform: translateY(-8px) scale(.985); visibility: hidden; }
}
@keyframes max-heart-pop {
  0% { transform: scale(.85); }
  65% { transform: scale(1.13); }
  100% { transform: scale(1); }
}
@media (max-width: 760px) {
  .time-greeting-wrap { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .time-greeting-wrap, .time-greeting-heart[aria-pressed="true"] { animation: none !important; }
  .time-greeting-wrap.is-leaving { opacity: 0; visibility: hidden; }
}


/* Small inline pictograms travel with each clickable rotating prompt. */
.welcome-rotating-text {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  vertical-align: middle;
  white-space: nowrap;
}
.welcome-rotating-text > svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: .92;
}
.welcome-rotating-text > span { display: inline-block; }
@media (max-width: 760px) {
  .welcome-rotating-text { gap: 5px; white-space: normal; }
  .welcome-rotating-text > svg { width: 15px; height: 15px; flex-basis: 15px; }
}


/* Mobile drawer hit-testing fix: keep the drawer above its dimming backdrop. */
@media (max-width: 760px) {
  .app-shell {
    position: relative;
    isolation: auto !important;
  }
  .sidebar,
  .sidebar.open {
    position: fixed !important;
    inset: 0 auto 0 0 !important;
    z-index: 1001 !important;
    width: min(var(--sidebar-width, 290px), calc(100vw - 56px)) !important;
    max-width: calc(100vw - 56px) !important;
    height: 100dvh !important;
    height: 100vh !important;
    transform: translateX(-105%);
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  .sidebar.open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }
  .sidebar.open > *,
  .sidebar.open button,
  .sidebar.open input,
  .sidebar.open [role="button"] {
    pointer-events: auto !important;
    opacity: 1 !important;
  }
  .overlay,
  .overlay.open {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1000 !important;
  }
  .overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}


/* Composer layout pass: balanced input field and consistently aligned controls. */
.composer { overflow: visible; }
.composer-row {
  display: flex !important;
  align-items: flex-end !important;
  gap: 8px !important;
  min-width: 0;
}
.composer textarea#messageInput {
  display: block !important;
  flex: 1 1 auto !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 100%;
  min-height: 42px !important;
  max-height: 180px !important;
  align-self: flex-end;
  box-sizing: border-box !important;
  padding: 10px 4px !important;
  line-height: 1.45 !important;
}
.composer .composer-icon,
.composer .send-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: flex-end !important;
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border-radius: 14px !important;
}
.composer .composer-icon { color: #e8e8e8 !important; }
.composer-asset-icon {
  display: block;
  width: 21px;
  height: 21px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.composer-asset-icon.voice-asset-icon { width: 22px; height: 22px; }
.composer .send-btn {
  background: #f3f3f3 !important;
  color: #080808 !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: 0 2px 7px rgba(0,0,0,.18);
  transition: transform .16s ease, background .16s ease, opacity .16s ease !important;
}
.composer .send-btn:not(:disabled):hover {
  transform: translateY(-1px) scale(1.035);
  background: #fff !important;
}
.composer .send-btn:disabled {
  opacity: .38 !important;
  background: #454545 !important;
  color: #bdbdbd !important;
  box-shadow: none;
}
.composer .send-plane-icon {
  display: block;
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
}
.composer .voice-btn.is-listening {
  background: rgba(255,255,255,.13) !important;
  color: #fff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  animation: max-voice-listening 1.15s ease-in-out infinite;
}
@keyframes max-voice-listening {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.055); }
}
@media (max-width: 760px) {
  .composer-area { padding-left: 10px !important; padding-right: 10px !important; }
  .composer { border-radius: 21px !important; }
  .composer-row { gap: 5px !important; padding: 7px !important; min-height: 56px !important; }
  .composer .composer-icon,
  .composer .send-btn {
    flex-basis: 38px !important;
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
  }
  .composer-asset-icon { width: 20px; height: 20px; }
  .composer-asset-icon.voice-asset-icon { width: 21px; height: 21px; }
  .composer .send-plane-icon { width: 21px !important; height: 21px !important; flex-basis: 21px !important; }
  .composer textarea#messageInput { min-height: 38px !important; padding: 9px 2px !important; font-size: 16px !important; }
}


/* Uploaded MAX settings icon */
.sidebar-action-icon .settings-asset-icon {
  display: block;
  width: 19px;
  height: 19px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}


/* Mobile sidebar interaction fix: drawer and backdrop share the app-shell stacking context. */
@media (max-width: 760px) {
  .app-shell {
    position: relative !important;
    isolation: isolate !important;
  }
  .app-shell > .sidebar,
  .app-shell > .sidebar.open {
    z-index: 1002 !important;
  }
  .app-shell > .overlay,
  .app-shell > .overlay.open {
    z-index: 1001 !important;
  }
  .app-shell > .sidebar.open {
    pointer-events: auto !important;
  }
  .app-shell > .sidebar.open button,
  .app-shell > .sidebar.open input,
  .app-shell > .sidebar.open [role="button"] {
    position: relative;
    z-index: 1;
    pointer-events: auto !important;
    touch-action: manipulation;
  }
}


/* Ensure the welcome auth controls sit above nearby layout layers and receive taps. */
.welcome-auth-actions {
  position: relative !important;
  z-index: 30 !important;
  isolation: isolate;
  pointer-events: auto !important;
}
.welcome-auth-actions .welcome-auth-btn {
  position: relative !important;
  z-index: 31 !important;
  pointer-events: auto !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(120,160,255,.22);
}


/* Tactile feedback when a rotating welcome prompt is tapped. */
.welcome-rotating-text.is-tapped {
  animation: max-prompt-tap .42s cubic-bezier(.2,.85,.25,1);
  text-decoration-color: currentColor;
}
.welcome-rotating-text.is-tapped > svg {
  animation: max-prompt-icon-tap .42s cubic-bezier(.2,.85,.25,1);
}
@keyframes max-prompt-tap {
  0% { transform: scale(1); filter: brightness(1); text-shadow: 0 0 0 transparent; }
  35% { transform: scale(1.09); filter: brightness(1.3); text-shadow: 0 0 14px rgba(130,170,255,.42); }
  68% { transform: scale(.97); }
  100% { transform: scale(1); filter: brightness(1); text-shadow: 0 0 0 transparent; }
}
@keyframes max-prompt-icon-tap {
  0% { transform: scale(1) rotate(0deg); }
  45% { transform: scale(1.22) rotate(-10deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-rotating-text.is-tapped,
  .welcome-rotating-text.is-tapped > svg { animation: none !important; }
}


/* Dynamic Island music widget — interactive demo preview only. */
.max-more-menu [data-more-action="widget-preview"] { position:relative; }
.max-more-menu-beta { margin-left:auto; color:#a1a1aa; font-size:9px; font-weight:750; letter-spacing:.12em; }
.max-island-preview { position:fixed; z-index:12000; left:50%; top:76px; width:min(410px,calc(100vw - 28px)); padding:15px 17px 12px; color:#f7f7f8; background:rgba(20,20,22,.96); border:1px solid rgba(255,255,255,.12); border-radius:25px; box-shadow:0 24px 80px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.055); backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); transform:translate(-50%,-10px) scale(.96); opacity:0; animation:max-island-expand .46s cubic-bezier(.16,1,.3,1) forwards; }
.max-island-preview.is-youtube-player { width:min(560px,calc(100vw - 20px)); top:58px; max-height:calc(100vh - 72px); overflow-y:auto; }
.max-island-youtube-player { display:block; width:100%; min-height:200px; aspect-ratio:16/9; margin:12px 0 2px; overflow:hidden; border-radius:13px; background:#000; }
.max-island-youtube-player[hidden] { display:none; }
.max-island-youtube-player iframe { display:block; width:100%; height:220px; min-height:200px; border:0; border-radius:13px; }
.max-island-cover img { display:block; width:100%; height:100%; object-fit:cover; }
.max-island-preview.is-compacting { animation:max-island-collapse .34s cubic-bezier(.4,0,.2,1) forwards; pointer-events:none; }
.max-island-preview.is-returning { animation:max-island-expand .32s cubic-bezier(.16,1,.3,1) both; }
.max-island-preview-topline { display:flex; align-items:center; gap:7px; color:#a1a1aa; font-size:9px; font-weight:750; letter-spacing:.14em; }
.max-island-preview-dot { width:6px; height:6px; border-radius:50%; background:#1ed760; box-shadow:0 0 10px rgba(30,215,96,.5); }
.max-island-preview-demo { margin-left:auto; color:#b7b7bd; font-size:8px; letter-spacing:.1em; }
.max-island-close { display:grid; place-items:center; width:26px; height:26px; margin-left:3px; border:0; border-radius:50%; color:#c9c9cf; background:rgba(255,255,255,.08); font-size:19px; cursor:pointer; }
.max-island-close:hover { background:rgba(255,255,255,.15); color:white; }
.max-island-preview-track { display:flex; align-items:center; gap:12px; margin:17px 0 15px; min-width:0; }
.max-island-cover { position:relative; display:grid; place-items:center; flex:0 0 58px; width:58px; height:58px; overflow:hidden; border-radius:13px; color:white; font-size:31px; background:radial-gradient(circle at 30% 20%,#a1a1aa,#38383d 45%,#111113 80%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12); }
.max-island-cover span { z-index:1; text-shadow:0 2px 9px #000; }
.max-island-cover i { position:absolute; width:100px; height:1px; background:rgba(255,255,255,.15); transform:rotate(-42deg); }
.max-island-cover i:nth-of-type(2) { transform:rotate(42deg); }
.max-island-cover i:nth-of-type(3) { transform:rotate(90deg); }
.max-island-track-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
.max-island-track-copy strong { overflow:hidden; color:#fafafa; font-size:16px; font-weight:700; letter-spacing:-.025em; text-overflow:ellipsis; white-space:nowrap; }
.max-island-track-copy > span { color:#c0c0c7; font-size:12px; }
.max-island-track-copy small { overflow:hidden; color:#898991; font-size:10px; text-overflow:ellipsis; white-space:nowrap; }
.max-island-equalizer { display:flex; align-items:center; gap:3px; height:25px; padding:0 3px; }
.max-island-equalizer i { width:3px; height:9px; border-radius:4px; background:#1ed760; animation:max-island-bars .8s ease-in-out infinite alternate; }
.max-island-equalizer i:nth-child(2) { height:17px; animation-delay:-.35s; }
.max-island-equalizer i:nth-child(3) { height:12px; animation-delay:-.55s; }
.max-island-equalizer i:nth-child(4) { height:20px; animation-delay:-.15s; }
.max-island-preview.is-paused .max-island-equalizer i { animation-play-state:paused; opacity:.5; }
.max-island-progress { height:3px; overflow:hidden; border-radius:10px; background:rgba(255,255,255,.12); }
.max-island-progress span { display:block; width:0; height:100%; border-radius:inherit; background:#1ed760; transition:width .3s linear; }
.max-island-time { display:flex; justify-content:space-between; margin-top:6px; color:#85858d; font-size:9px; font-variant-numeric:tabular-nums; }
.max-island-controls { display:flex; justify-content:center; align-items:center; gap:20px; margin:12px 0 10px; }
.max-island-controls button,.max-island-mini button { display:grid; place-items:center; flex:0 0 auto; width:31px; height:31px; border:0; border-radius:50%; color:#e8e8eb; background:transparent; cursor:pointer; transition:transform .16s ease,background .16s ease; }
.max-island-controls button:hover,.max-island-mini button:hover { background:rgba(255,255,255,.1); transform:scale(1.07); }
.max-island-controls button svg,.max-island-mini button svg { width:17px; height:17px; fill:currentColor; }
.max-island-controls .max-island-play { width:39px; height:39px; color:#111; background:#f4f4f5; }
.max-island-controls .max-island-play:hover { background:#fff; }
.max-island-controls .max-island-play svg { width:18px; height:18px; }
.max-island-preview-footnote { padding-top:10px; border-top:1px solid rgba(255,255,255,.075); color:#85858d; font-size:10px; line-height:1.45; text-align:center; }
.max-island-mini { position:fixed; z-index:12000; right:18px; bottom:88px; display:flex; align-items:center; gap:3px; width:max-content; max-width:calc(100vw - 20px); padding:7px 9px 7px 7px; color:#f7f7f8; background:rgba(20,20,22,.96); border:1px solid rgba(255,255,255,.14); border-radius:19px; box-shadow:0 15px 45px rgba(0,0,0,.4),inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); opacity:0; transform:translateY(14px) scale(.94); touch-action:none; user-select:none; cursor:grab; }
.max-island-mini[hidden] { display:none; }
.max-island-mini.is-visible { animation:max-island-mini-in .4s cubic-bezier(.16,1,.3,1) forwards; }
.max-island-mini:active { cursor:grabbing; }
.max-island-mini-art { width:35px!important;height:35px!important;color:#fff!important;background:radial-gradient(circle at 30% 25%,#8d8d96,#28282d 70%)!important;font-size:22px; }
.max-island-mini-copy { display:flex; flex-direction:column; min-width:65px; max-width:125px; padding:0 5px; gap:3px; }
.max-island-mini-copy strong { overflow:hidden; color:#fafafa; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.max-island-mini-copy span { overflow:hidden; color:#a1a1aa; font-size:9px; text-overflow:ellipsis; white-space:nowrap; }
.max-island-mini button { width:27px;height:29px; }
.max-island-mini button svg { width:14px;height:14px; }
.max-island-mini .max-island-mini-play { width:29px;height:29px;color:#111;background:#f3f3f4; }
.max-island-mini .max-island-mini-dismiss { width:20px;height:26px;margin-left:1px;color:#9d9da4;font-size:17px; }
.max-island-mini.is-paused .max-island-mini-art { filter:saturate(.4); }
@keyframes max-island-expand { from { opacity:0; transform:translate(-50%,-10px) scale(.96); } to { opacity:1; transform:translate(-50%,0) scale(1); } }
@keyframes max-island-collapse { to { opacity:0; transform:translate(-50%,-7px) scale(.82); } }
@keyframes max-island-mini-in { to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes max-island-bars { from { transform:scaleY(.55); } to { transform:scaleY(1.1); } }
@media(max-width:520px) { .max-island-preview { top:65px; padding:13px 13px 11px; border-radius:22px; } .max-island-controls { gap:16px; } .max-island-mini { right:8px; bottom:78px; gap:1px; padding:6px; } .max-island-mini-copy { max-width:90px; min-width:48px; padding:0 3px; } .max-island-mini button { width:25px;height:27px; } .max-island-mini .max-island-mini-dismiss { width:18px; } }
@media(prefers-reduced-motion:reduce) { .max-island-preview,.max-island-mini.is-visible,.max-island-equalizer i { animation:none!important; } .max-island-preview { opacity:1; transform:translateX(-50%); } .max-island-mini.is-visible { opacity:1; transform:none; } }


/* Refined MAX Webchat-matched music widget preview. */
.max-island-preview {
  width:min(390px,calc(100vw - 32px)); padding:14px 15px 12px;
  color:var(--text-primary,#f5f5f5); background:var(--surface-primary,#171717);
  border:1px solid var(--border-subtle,rgba(255,255,255,.1)); border-radius:20px;
  box-shadow:0 18px 54px rgba(0,0,0,.32); backdrop-filter:blur(18px);
}
.max-island-preview-head { display:flex;align-items:center;gap:9px;min-height:25px; }
.max-island-preview-label { display:flex;align-items:center;gap:7px;color:var(--text-secondary,#a3a3a3);font-size:10px;font-weight:650;letter-spacing:.11em; }
.max-island-live-dot { width:6px;height:6px;border-radius:50%;background:#b7b7b7; }
.max-island-preview-tag { margin-left:auto;color:var(--text-tertiary,#858585);font-size:9px;letter-spacing:.09em; }
.max-island-close { display:grid;place-items:center;width:27px;height:27px;padding:5px;border:0;border-radius:8px;background:transparent;color:var(--text-secondary,#aaa);cursor:pointer; }
.max-island-close:hover { background:rgba(255,255,255,.07); }
.max-island-preview-track { gap:12px;margin:17px 0 15px; }
.max-island-cover { flex-basis:54px;width:54px;height:54px;border-radius:11px;background:linear-gradient(145deg,#373737,#171717);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09); }
.max-island-track-copy strong {font-size:15px;letter-spacing:-.02em;}
.max-island-track-copy>span {font-size:12px;color:var(--text-secondary,#b5b5b5);}
.max-island-track-copy small {font-size:10px;color:var(--text-tertiary,#858585);}
.max-island-equalizer i {background:#d4d4d4;}
.max-island-preview.is-paused .max-island-equalizer i {animation-play-state:paused;opacity:.35;}
.max-island-progress {background:rgba(255,255,255,.12);}
.max-island-progress span {background:#e5e5e5;}
.max-island-time {color:var(--text-tertiary,#858585);}
.max-island-controls {gap:25px;margin:13px 0 12px;}
.max-island-controls button {width:34px;height:34px;border-radius:10px;color:var(--text-primary,#f5f5f5);}
.max-island-controls button:hover {background:rgba(255,255,255,.075);}
.max-island-controls button svg {width:20px;height:20px;}
.max-island-controls .max-island-play {width:42px;height:42px;border-radius:13px;color:#111;background:#f1f1f1;}
.max-island-controls .max-island-play:hover {background:#fff;}
.max-island-controls .max-island-play img {width:20px;height:20px;}
.max-island-preview-footnote {border-top:1px solid rgba(255,255,255,.07);color:var(--text-tertiary,#858585);font-size:10px;padding-top:10px;}
.max-island-icon { display:block;width:19px;height:19px;object-fit:contain;filter:invert(1);pointer-events:none; }
.max-island-close .max-island-icon {width:17px;height:17px;opacity:.72;}
.max-island-mini {gap:2px;padding:6px 8px 6px 6px;background:var(--surface-primary,#171717);border-color:var(--border-subtle,rgba(255,255,255,.12));border-radius:16px;box-shadow:0 10px 34px rgba(0,0,0,.32);}
.max-island-mini-art {width:34px!important;height:34px!important;border-radius:10px!important;background:#292929!important;font-size:20px;}
.max-island-mini-copy {max-width:118px;gap:3px;}
.max-island-mini-copy strong {font-size:11px;}
.max-island-mini-copy span {font-size:9px;}
.max-island-mini button {width:29px;height:30px;border-radius:9px;}
.max-island-mini button:hover {background:rgba(255,255,255,.075);}
.max-island-mini button .max-island-icon {width:17px;height:17px;}
.max-island-mini .max-island-mini-play {width:30px;height:30px;color:#111;background:#eee;}
.max-island-mini .max-island-mini-play .max-island-icon {filter:none;}
.max-island-mini .max-island-mini-dismiss {width:24px;height:28px;margin-left:0;}
.max-island-mini .max-island-mini-dismiss .max-island-icon {width:16px;height:16px;filter:invert(1);opacity:.65;}
@media(max-width:520px){.max-island-preview{padding:12px;border-radius:17px}.max-island-controls{gap:21px}.max-island-mini-copy{max-width:85px;min-width:48px}}


/* Apple-inspired Dynamic Island minimize: the player condenses into a bubble,
   glides to the dock, then settles with a restrained spring bounce. */
.max-island-morph-bubble {
  position:fixed;z-index:12002;pointer-events:none;box-sizing:border-box;
  overflow:hidden;border:1px solid rgba(255,255,255,.2);
  background:
    radial-gradient(circle at 32% 24%,rgba(255,255,255,.3),transparent 34%),
    radial-gradient(circle at 50% 60%,#55555b 0%,#28282d 48%,#101012 100%);
  box-shadow:0 8px 30px rgba(0,0,0,.38),inset 0 1px 1px rgba(255,255,255,.18);
  will-change:left,top,width,height,border-radius,transform,opacity;
}
.max-island-morph-bubble::before {
  content:"♫";position:absolute;inset:0;display:grid;place-items:center;
  color:rgba(255,255,255,.94);font-size:28px;font-weight:500;
  text-shadow:0 2px 10px rgba(0,0,0,.4);
}
.max-island-preview.is-morphing-out {pointer-events:none;will-change:opacity,filter,transform,border-radius;}
.max-island-mini.is-landing {will-change:transform,opacity,filter;box-shadow:0 14px 38px rgba(0,0,0,.38),0 0 0 1px rgba(255,255,255,.035);}
@media(prefers-reduced-motion:reduce) {
  .max-island-morph-bubble {display:none!important;}
  .max-island-preview.is-morphing-out {animation:none!important;}
  .max-island-mini.is-landing {will-change:auto;}
}


/* Message actions: compact SVG controls consistent with the MAX chat surface. */
.message-actions {display:flex;align-items:center;gap:5px;margin-top:9px;opacity:.72;transition:opacity .18s ease;}
.message:hover .message-actions,.message:focus-within .message-actions {opacity:1;}
.message-action.message-icon-action {display:inline-grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted,#9b9ba5);cursor:pointer;transition:background .16s ease,border-color .16s ease,transform .16s ease;}
.message-action.message-icon-action img {display:block;width:17px;height:17px;object-fit:contain;opacity:.78;filter:invert(1);pointer-events:none;}
.message-action.message-icon-action:hover {background:var(--surface-hover,#202027);border-color:var(--border,rgba(255,255,255,.08));color:var(--text,#f5f5f7);transform:translateY(-1px);}
.message-action.message-icon-action:hover img {opacity:1;}
.message-action.message-icon-action:disabled {opacity:.3;cursor:not-allowed;transform:none;}
@media(hover:none){.message-actions{opacity:.9;}}

/* Voice readout stage: the existing MAX orb travels from the topbar to center. */
.max-voice-stage {position:fixed;inset:0;z-index:15000;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:24px;background:rgba(5,5,7,0);opacity:0;backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);transition:opacity .42s ease,background .42s ease,backdrop-filter .42s ease;-webkit-transition:opacity .42s ease,background .42s ease,backdrop-filter .42s ease;}
.max-voice-stage.is-visible {opacity:1;background:rgba(5,5,7,.88);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);}
.max-voice-stage.is-closing {opacity:0;background:rgba(5,5,7,0);backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);}
.max-voice-stage-glow {position:absolute;top:5%;left:50%;width:min(70vw,560px);aspect-ratio:1;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(59,130,246,.14),rgba(34,211,238,.07) 34%,transparent 68%);filter:blur(22px);pointer-events:none;opacity:0;transition:opacity .65s ease;}
.max-voice-stage.is-visible .max-voice-stage-glow {opacity:1;}
.max-voice-stage-orb {position:fixed;z-index:1;display:grid;place-items:center;aspect-ratio:1;pointer-events:none;will-change:left,top,width,height,transform,filter;transform-origin:center center;}
.max-voice-stage-orb video {display:block;width:100%;height:100%;object-fit:contain;border-radius:50%;background:transparent;transform:scale(var(--voice-pulse-scale,1));filter:drop-shadow(0 0 calc(16px * var(--voice-pulse-glow,.25)) rgba(80,150,255,.34));transition:filter .1s linear;will-change:transform,filter;}
.max-voice-stage-copy {position:relative;z-index:2;width:min(700px,100%);margin-top:min(45vh,310px);display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center;opacity:0;transform:translateY(12px);transition:opacity .5s ease .18s,transform .5s cubic-bezier(.16,1,.3,1) .18s;}
.max-voice-stage.is-visible .max-voice-stage-copy {opacity:1;transform:translateY(0);}
.max-voice-stage-label {display:inline-flex;align-items:center;gap:8px;color:rgba(235,239,247,.72);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.max-voice-stage-label i {display:block;width:6px;height:6px;border-radius:50%;background:#60a5fa;box-shadow:0 0 12px rgba(96,165,250,.8);animation:max-voice-dot 1.1s ease-in-out infinite;}
.max-voice-stage-copy p {max-height:22vh;max-width:100%;overflow:auto;margin:0;color:#f7f8fc;font-size:clamp(16px,2.25vw,23px);font-weight:450;line-height:1.55;letter-spacing:-.025em;text-wrap:pretty;white-space:pre-wrap;scrollbar-width:thin;}
.max-voice-word {display:inline-block;opacity:0;filter:blur(3px);transform:translateY(5px);transition:opacity .2s ease,filter .2s ease,transform .2s cubic-bezier(.16,1,.3,1);}
.max-voice-word.is-revealed {opacity:.82;filter:blur(0);transform:translateY(0);}
.max-voice-word.is-current {opacity:1;color:#fff;text-shadow:0 0 18px rgba(96,165,250,.18);}
.max-voice-stop {margin-top:3px;min-width:74px;padding:8px 16px;border:1px solid rgba(255,255,255,.13);border-radius:999px;background:rgba(255,255,255,.065);color:rgba(255,255,255,.78);font-size:12px;cursor:pointer;transition:background .18s ease,color .18s ease,transform .18s ease;}
.max-voice-stop:hover {background:rgba(255,255,255,.12);color:#fff;transform:translateY(-1px);}
@keyframes max-voice-dot {0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@media(max-width:600px){.max-voice-stage{padding:18px}.max-voice-stage-copy{margin-top:min(43vh,270px);gap:12px}.max-voice-stage-copy p{max-height:25vh;font-size:17px}.max-voice-stage-orb{max-width:72vw}}
@media(prefers-reduced-motion:reduce){.max-voice-stage,.max-voice-stage-glow,.max-voice-stage-copy,.max-voice-stage-label i,.message-action.message-icon-action{transition:none!important;animation:none!important}}

/* Domain-logo previews for links shared by either side of the conversation. */
.link-preview {
  display:flex;
  align-items:center;
  gap:12px;
  max-width:min(100%,560px);
  min-width:0;
  margin:10px 0 4px;
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.045);
  color:inherit;
  text-decoration:none!important;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
  overflow:hidden;
}
.link-preview:hover { background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.18);transform:translateY(-1px); }
.link-preview-logo-wrap {
  display:flex;align-items:center;justify-content:center;flex:0 0 42px;
  width:42px;height:42px;border-radius:11px;overflow:hidden;
  background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.08);
}
.link-preview-logo {display:block;width:26px;height:26px;object-fit:contain;}
.link-preview-logo-fallback::after {content:"↗";font-size:20px;color:rgba(255,255,255,.7);}
.link-preview-body {display:flex;flex:1;flex-direction:column;gap:4px;min-width:0;}
.link-preview-title {display:block;font-size:13px;font-weight:650;line-height:1.35;color:#f5f7ff;overflow-wrap:anywhere;}
.link-preview-description {display:block;font-size:12px;line-height:1.4;color:#a7b0c9;overflow-wrap:anywhere;}
.link-preview-domain {display:block;font-size:11px;color:#a7b0c9;overflow-wrap:anywhere;}
.link-preview-open {font-size:16px;color:rgba(255,255,255,.6);flex:0 0 auto;}
.link-preview-user {margin-top:9px;}
.link-preview-image {max-width:88px;max-height:68px;object-fit:cover;border-radius:8px;flex:0 0 auto;}
@media(max-width:600px){.link-preview{padding:10px 11px;gap:10px}.link-preview-logo-wrap{width:38px;height:38px;flex-basis:38px}}


/* Red orb and restrained alert styling for MAX speech failures. */
.max-voice-stage.is-error .max-voice-stage-glow {
  background: radial-gradient(circle, rgba(239, 68, 68, .20), rgba(220, 38, 38, .09) 36%, transparent 70%);
}
.max-voice-stage.is-error .max-voice-stage-orb video {
  filter: drop-shadow(0 0 22px rgba(239, 68, 68, .42));
}
.max-voice-stage.is-error .max-voice-stage-copy p {
  color: #fecaca;
}
.max-voice-stage.is-error .max-voice-stop {
  border-color: rgba(248, 113, 113, .38);
}


/* Match rotating-prompt SVG icons to the text size on desktop and mobile. */
.welcome-intro .welcome-rotating-text > svg {
  width: 1em !important;
  height: 1em !important;
  flex: 0 0 1em !important;
  align-self: center;
}
@media (max-width: 760px) {
  .welcome-intro .welcome-rotating-text > svg {
    width: 1em !important;
    height: 1em !important;
    flex-basis: 1em !important;
  }
}


/* MAX Home conversational setup card */
.max-home-setup-card{width:min(100%,540px);margin:12px 0 8px;padding:22px;border:1px solid rgba(255,255,255,.13);border-radius:22px;background:linear-gradient(145deg,rgba(24,24,28,.98),rgba(10,10,12,.98));color:#f7f7fa;box-shadow:0 18px 52px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.06);animation:max-home-card-in .28s cubic-bezier(.2,.8,.2,1) both}
.max-home-setup-brand{display:flex;align-items:center;gap:11px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.09)}
.max-home-setup-brand img{width:38px;height:38px;object-fit:contain;border-radius:11px;background:#fff}
.max-home-setup-brand div{display:flex;flex-direction:column;gap:3px}
.max-home-setup-brand strong{font-size:15px;font-weight:750;letter-spacing:-.02em}
.max-home-setup-brand span{font-size:11px;color:#9b9ba4}
.max-home-setup-card h3{margin:0 0 8px;font-size:clamp(19px,2.8vw,23px);line-height:1.25;font-weight:720;letter-spacing:-.035em}
.max-home-setup-card>p{margin:0 0 20px;max-width:440px;color:#a9a9b2;font-size:13px;line-height:1.65}
.max-home-setup-form{display:flex;flex-direction:column;gap:9px}
.max-home-setup-form label{color:#d8d8df;font-size:12px;font-weight:650}
.max-home-setup-form input{width:100%;min-height:48px;padding:0 14px;border:1px solid rgba(255,255,255,.14);border-radius:12px;outline:none;background:rgba(255,255,255,.055);color:#fff;font:inherit;font-size:14px;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.max-home-setup-form input::placeholder{color:#777782}
.max-home-setup-form input:focus{border-color:#a6b8ff;background:rgba(255,255,255,.075);box-shadow:0 0 0 3px rgba(166,184,255,.13)}
.max-home-setup-error{margin:2px 0 0;color:#ff9b9b;font-size:12px;line-height:1.45}
.max-home-setup-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:10px}
.max-home-setup-actions button,.max-home-open-link{min-height:41px;padding:0 16px;border-radius:11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;transition:transform .16s ease,background .16s ease,border-color .16s ease}
.max-home-setup-actions button:hover,.max-home-open-link:hover{transform:translateY(-1px)}
.max-home-setup-cancel{border:1px solid rgba(255,255,255,.12);background:transparent;color:#c6c6ce}
.max-home-setup-continue,.max-home-open-link{display:inline-flex;align-items:center;justify-content:center;border:1px solid #f4f4f6;background:#f4f4f6;color:#111114;text-decoration:none}
.max-home-setup-continue:disabled{opacity:.58;cursor:wait;transform:none}
.max-home-owner-pill{display:inline-flex;margin:0 0 16px;padding:6px 10px;border-radius:999px;background:rgba(78,205,142,.12);border:1px solid rgba(78,205,142,.24);color:#7ee0aa;font-size:11px;font-weight:700}
.max-home-open-link{width:100%}
@keyframes max-home-card-in{from{opacity:0;transform:translateY(7px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:520px){.max-home-setup-card{padding:17px;border-radius:18px}.max-home-setup-actions button{min-height:43px}}
@media(prefers-reduced-motion:reduce){.max-home-setup-card{animation:none}}