/* LinSumi · iOS 26-inspired Liquid Glass visual layer
   Glass is reserved for navigation + floating controls. Core content remains legible and solid. */
:root {
  --bg: #f6f8fd;
  --card: #fff;
  --ink: #132039;
  --muted: #7f8da4;
  --blue: #2373f8;
  --blue-dark: #135ceb;
  --blue-soft: #e8f1ff;
  --outline: #eaf0f8;
  --glass: rgba(255,255,255,.65);
  --glass-border: rgba(255,255,255,.90);
  --glass-shadow: 0 14px 38px rgba(41,80,147,.15), 0 2px 8px rgba(50,72,115,.06);
}
body { background: #e9f0fc; }
.environment {
  background:
    radial-gradient(ellipse 38% 34% at 23% 7%, rgba(207,221,255,.70),transparent 100%),
    radial-gradient(ellipse 43% 43% at 88% 87%, rgba(215,225,255,.7),transparent 100%),
    linear-gradient(145deg,#f9fbff,#eaf1fc);
}
.device {
  background:
    radial-gradient(ellipse 75% 24% at 97% 4%,rgba(189,216,255,.40),transparent 100%),
    radial-gradient(ellipse 75% 30% at -15% 64%,rgba(229,213,255,.30),transparent 100%),
    linear-gradient(165deg,#f8fbff 0%,#f5f8fe 50%,#f5f8fc 100%);
}
.device::before {
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
  width:410px;height:410px;
  top:-250px;right:-175px;
  border-radius:50%;
  background:radial-gradient(circle,#cbdcffb0,#c7e6ff15 65%,transparent 72%);
  filter:blur(6px);
}
.device::after {
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:310px;height:310px;bottom:-150px;left:-190px;border-radius:50%;
  background:radial-gradient(circle,#d1dcff80,#f4f8ff00 70%);
}
.app { position:relative; z-index:1; }
.page { background:transparent; animation:glass-enter .32s cubic-bezier(.2,.9,.25,1); }
@keyframes glass-enter { from {opacity:0; transform:translateY(7px) scale(.994)} to {opacity:1;transform:translateY(0) scale(1)} }
/* Floating upper functional layer — intentionally lighter than the solid content cards. */
.app-topbar {
  height:85px;
  padding:22px 22px 12px;
  position:relative;
  z-index:3;
  background:linear-gradient(180deg,rgba(251,253,255,.8) 0%,rgba(250,252,255,.47) 66%,rgba(250,252,255,.08) 100%);
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
}
.wordmark { letter-spacing:-1.25px; font-size:25px; color:#101f3a; font-weight:790; }
.brand-accent { color:#267cff; }
.brand-symbol {
  border-radius:12px;
  background:linear-gradient(140deg,#d3eaff 0%,#6eb3ff 42%,#2779f7 100%);
  box-shadow:inset 0 1.5px 2px #ffffffcf,0 3px 9px #3588ff35,0 0 0 1px #ffffffba;
}
.topbar-button,.topbar-avatar {
  border:1px solid rgba(255,255,255,.83);
  background:linear-gradient(130deg,rgba(255,255,255,.92),rgba(224,235,254,.62));
  box-shadow:0 4px 15px #577baf19,inset 0 1px 0 #fff;
  backdrop-filter:blur(17px) saturate(160%);
  -webkit-backdrop-filter:blur(17px) saturate(160%);
  border-radius:15px;
}
.topbar-button {color:#56769f}
.topbar-button:active {transform:scale(.95)}
.page-scroll {scrollbar-width:none}
.page-scroll::-webkit-scrollbar,.messages::-webkit-scrollbar{display:none}
.desktop-content {padding:10px 19px 125px}
.pc-dropdown-container{margin-bottom:16px;z-index:4}
.pc-dropdown {
  height:67px;
  border:1px solid rgba(255,255,255,.88);
  background:linear-gradient(132deg,rgba(255,255,255,.82),rgba(250,252,255,.65));
  box-shadow:0 8px 20px rgba(58,90,137,.055),inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-radius:22px;
}
.pc-icon {background:linear-gradient(145deg,#f5faff,#dfecff);color:#2778ee;border:1px solid #fff;border-radius:15px}
.pc-label strong{font-size:13px;letter-spacing:-.2px}
.pc-label small{font-size:10px}
.online-indicator{background:#e9faf3bd;color:#139b76;border:1px solid #dff9ef99}
.pc-options{
  background:#ffffffed; backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);border-color:#ffffff;
  border-radius:20px;
}
.desktop-card {
  border-radius:23px;
  border:3px solid rgba(255,255,255,.92);
  box-shadow:0 15px 30px rgba(53,92,160,.17),0 1px 3px rgba(47,68,122,.10);
}
.live-badge {
  top:12px;left:12px;
  border:1px solid rgba(255,255,255,.53);
  background:linear-gradient(130deg,rgba(27,51,86,.57),rgba(65,91,144,.40));
  box-shadow:inset 0 1px 0 #ffffff33,0 3px 12px #0c2e4a30;
  backdrop-filter:blur(14px) saturate(175%);
  -webkit-backdrop-filter:blur(14px) saturate(175%);
}
.fullscreen-control {
  right:11px;bottom:31px;width:39px;height:39px;
  border:1px solid rgba(255,255,255,.7);border-radius:14px;
  background:linear-gradient(140deg,rgba(255,255,255,.40),rgba(34,54,98,.34));
  box-shadow:inset 0 1px 0 #ffffff70,0 4px 15px #204e8035;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
}
.actions-card {
  margin-top:17px;
  border:1px solid rgba(233,238,248,.95);
  border-radius:23px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 24px rgba(39,77,131,.045),inset 0 1px 0 rgba(255,255,255,.95);
  padding:20px 17px 16px;
}
.actions-title h2{font-size:15px;letter-spacing:-.35px}
.section-symbol{background:#edf4ff;border-radius:11px;width:30px;height:30px;}
.actions-title{margin-bottom:18px}
.actions-count{background:#e9fbf5;color:#099773}
.timeline-line{min-height:44px}
.timeline-line.current .timeline-point {box-shadow:0 0 0 3px #dfeeff}
/* Chat: glass is on controls, not on the messages themselves. */
.messages{padding:8px 20px 18px;scrollbar-width:none}
.date-chip span{background:rgba(236,241,249,.84);font-size:11px;color:#8795ad}
.chat-row{margin-bottom:24px}
.message-bubble{font-size:13px;line-height:1.68;padding:16px 16px;border-radius:20px}
.user .message-bubble{
  background:linear-gradient(125deg,#e7f0ff 0%,#e2e9ff 56%,#e9e4ff 100%);
  color:#273a68; border:1px solid rgba(255,255,255,.7);border-bottom-right-radius:7px;
  box-shadow:0 4px 15px #637dcc0c;
}
.assistant .message-bubble{background:rgba(255,255,255,.94);border-color:rgba(233,238,246,.95);border-radius:20px 20px 20px 7px}
.assistant-icon{border-radius:13px;background:linear-gradient(145deg,#eef9ff,#d8e9ff);border:1px solid #fff;box-shadow:0 3px 11px #749ede28}
.chat-layout{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
.composer {
  margin:0 15px 12px;
  min-height:61px;
  background:linear-gradient(138deg,rgba(255,255,255,.87),rgba(248,251,255,.69));
  border:1px solid rgba(255,255,255,.98);
  border-radius:24px;
  box-shadow:0 11px 30px rgba(68,91,146,.12),inset 0 1px 0 rgba(255,255,255,1),0 0 0 1px rgba(189,208,233,.14);
  backdrop-filter:blur(25px) saturate(175%);
  -webkit-backdrop-filter:blur(25px) saturate(175%);
}
.attach-icon{border-radius:13px;color:#6482aa}
.submit-icon {
  background:linear-gradient(140deg,#53a5ff,#2675fa 65%,#2264ed);
  border-radius:16px;
  border:1px solid #ffffff66;
  box-shadow:0 6px 14px #297cfa3c,inset 0 1px 1px #ffffff8f;
}
/* Settings: content is intentionally matte — iOS 26 reserves Liquid Glass for controls. */
.settings-content{padding:8px 19px 126px}
.settings-title{margin-bottom:21px}
.settings-title h1{font-size:31px;letter-spacing:-1.15px}
.settings-title p{color:#8493ac}
.settings-group{gap:11px}
.setting-card{
  border:1px solid #edf0f8;
  border-radius:22px;
  box-shadow:0 5px 17px rgba(39,77,131,.045),inset 0 1px 0 rgba(255,255,255,.92);
  background:rgba(255,255,255,.95);
}
.setting-card summary{min-height:81px;padding:13px 15px;gap:13px}
.setting-icon{border-radius:16px;width:44px;height:44px;border:1px solid #ffffffaa}
.setting-copy strong{font-size:13px;letter-spacing:-.18px}
.setting-copy small{font-size:10.8px}
.setting-card:active{transform:scale(.996)}
.theme-switch button{border-radius:14px}
.theme-switch .selected{box-shadow:0 3px 9px #2d73ee17}
/* The glass dock is a floating functional layer, not a full-width opaque footer. */
.bottom-bar {
  position:absolute;
  z-index:8;
  left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  transform:translateX(-50%);
  width:min(336px,calc(100% - 32px));
  height:66px;
  padding:7px;
  display:flex;justify-content:space-between;align-items:center;
  border-radius:27px;
  border:1px solid rgba(255,255,255,.95);
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(233,242,255,.54) 70%,rgba(244,247,255,.78));
  backdrop-filter:blur(30px) saturate(180%);
  -webkit-backdrop-filter:blur(30px) saturate(180%);
  box-shadow:0 14px 42px rgba(64,87,138,.20),0 2px 8px rgba(51,80,125,.06),inset 0 2px 1px rgba(255,255,255,.95),inset 0 -1px 1px #ffffff90;
}
.bottom-bar::before{
  content:"";position:absolute;inset:2px 9px auto;height:26px;border-radius:26px;
  background:linear-gradient(180deg,rgba(255,255,255,.48),transparent);
  pointer-events:none;
}
.bottom-tab{
  height:51px;
  flex:1;min-width:0;max-width:none;
  border-radius:20px;
  color:#899bb8;
  z-index:1;
  transition:transform .26s cubic-bezier(.2,.8,.2,1),color .26s;
}
.bottom-tab.active{color:#1e69f2}
.tab-icon{
  width:72px;height:51px;border-radius:20px;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .25s,box-shadow .25s;
}
.bottom-tab.active .tab-icon{
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(213,230,255,.66));
  box-shadow:0 3px 13px #447bdf23,inset 0 1px 1px #fff,0 0 0 1px #ccddf723;
}
.bottom-tab:hover .tab-icon{background:#ffffff7a}
.bottom-tab.active:hover .tab-icon{background:linear-gradient(160deg,rgba(255,255,255,.94),rgba(213,230,255,.66))}
.tab-icon .icon{width:24px;height:24px;stroke-width:1.85}
.bottom-tab:active .tab-icon{transform:scale(.9)}
.toast{bottom:calc(104px + env(safe-area-inset-bottom,0px));border:1px solid #ffffff29;backdrop-filter:blur(15px)}
@media(min-width:560px){
  .device{border-radius:38px;box-shadow:0 28px 75px #27467230,0 3px 12px #27467212; border:1px solid #ffffffee;}
}
@media(max-width:350px){
  .bottom-bar{width:min(300px,calc(100% - 16px))}
  .tab-icon{width:65px}
}
@media(prefers-reduced-transparency:reduce){
  .app-topbar,.pc-dropdown,.bottom-bar,.composer{backdrop-filter:none;-webkit-backdrop-filter:none;background:#f9fbff}
}
/* Dark appearance keeps the same familiar geometry. */
body[data-theme="dark"]{
  --bg:#101b2d;--card:#1e2940;--ink:#edf3fd;--blue:#82b5ff;--blue-soft:#263d60;
}
body[data-theme="dark"] .device{background:radial-gradient(ellipse at 100% 0%,#304c6f66,transparent 52%),linear-gradient(155deg,#151f34,#0f192b)}
body[data-theme="dark"] .app-topbar{background:linear-gradient(180deg,#1a2841be,#14233a22)}
body[data-theme="dark"] .wordmark{color:#f2f7ff}
body[data-theme="dark"] .pc-dropdown{background:linear-gradient(130deg,#263855eb,#1b2a43ce);border-color:#4d628344}
body[data-theme="dark"] .actions-card,body[data-theme="dark"] .setting-card{background:#202d43ee;border-color:#31445e}
body[data-theme="dark"] .composer{background:linear-gradient(130deg,#243752ec,#1a2a44d9);border-color:#5a71995c}
body[data-theme="dark"] .bottom-bar{background:linear-gradient(140deg,#3c5270ce,#24344ecb);border-color:#8aa2c65a;box-shadow:0 14px 40px #0006,inset 0 1px 0 #ffffff38}
body[data-theme="dark"] .bottom-tab{color:#9eafc7}
body[data-theme="dark"] .bottom-tab.active{color:#d9eaff}
body[data-theme="dark"] .bottom-tab.active .tab-icon{background:linear-gradient(140deg,#50719e,#334d77);border-color:#c8dcff47;box-shadow:inset 0 1px 0 #ffffff36}
body[data-theme="dark"] .topbar-button,body[data-theme="dark"] .topbar-avatar{background:linear-gradient(145deg,#344b6f,#1d2e4b);border-color:#ffffff29}
body[data-theme="dark"] .assistant .message-bubble{background:#23334b;border-color:#354a68}
body[data-theme="dark"] .user .message-bubble{background:linear-gradient(130deg,#31496f,#3d416f);border-color:#ffffff18;color:#f0f5ff}
body[data-theme="dark"] .setting-expand{border-color:#354a68}

/* Pill navigation + restrained iOS-style content transition. */
.app { position: relative; isolation: isolate; }
.page { animation: none !important; backface-visibility: hidden; }
.page.is-current { position: relative; z-index: 1; }
.page.is-leaving {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  will-change: opacity, transform;
}
.bottom-bar {
  border-radius: 9999px;
  isolation: isolate;
}
.bottom-bar::after {
  content: "";
  position: absolute;
  top: 7px;
  left: var(--pill-left, 25px);
  width: 50px;
  height: 50px;
  border-radius: 9999px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,.99);
  background: linear-gradient(155deg,rgba(255,255,255,.98),rgba(213,232,255,.89));
  box-shadow: 0 3px 13px rgba(52,112,227,.16), inset 0 1px 1px #fff, 0 0 0 1px rgba(146,191,250,.26);
  transition: left .42s cubic-bezier(.2,.85,.2,1);
}
.bottom-tab {
  position: relative;
  z-index: 1;
  height: 52px;
  border-radius: 9999px;
  transition: color .28s ease;
}
.tab-icon {
  width: 50px;
  height: 50px;
  border-radius: 9999px;
  background: transparent;
  transition: transform .33s cubic-bezier(.2,.85,.2,1), color .28s ease;
}
.bottom-tab.active { color: #1767f2; }
.bottom-tab.active .tab-icon,
.bottom-tab.active:hover .tab-icon,
.bottom-tab:hover .tab-icon {
  background: transparent;
  border: 0;
  box-shadow: none;
}
.bottom-tab.active .tab-icon { transform: scale(1.06); }
.bottom-tab:active .tab-icon { transform: scale(.90); }
body[data-theme="dark"] .bottom-bar::after {
  background: linear-gradient(145deg,rgba(96,130,184,.91),rgba(50,80,132,.87));
  border-color: rgba(222,237,255,.46);
  box-shadow: 0 4px 18px rgba(7,20,56,.48),inset 0 1px 0 rgba(255,255,255,.26);
}
@media (prefers-reduced-motion: reduce) {
  .bottom-bar::after,
  .tab-icon { transition: none !important; }
}

/* Responsive mobile shell: fixed dock + independent content scrolling. */
html,body {width:100%;height:100%;overflow:hidden;overscroll-behavior:none;}
.environment {height:100dvh;min-height:0;overflow:hidden;}
.device {min-width:0;min-height:0;max-height:100%;overflow:hidden;}
.app {flex:1 1 auto;min-height:0;min-width:0;width:100%;height:100%;overflow:hidden;}
.page,.page.is-leaving {min-width:0;min-height:0;height:100%;max-height:100%;overflow:hidden;}
.page-scroll,.messages {min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.chat-layout {min-height:0;min-width:0;flex:1 1 auto;overflow:hidden;padding-bottom:calc(86px + env(safe-area-inset-bottom,0px));}
.messages {flex:1 1 auto;}
.desktop-content,.settings-content {padding-bottom:calc(112px + env(safe-area-inset-bottom,0px));}
.app-topbar {height:64px;min-height:64px;flex:0 0 64px;padding:10px 19px 7px;}
.wordmark {font-size:22px;gap:9px;}
.brand-symbol {width:28px;height:28px;border-radius:10px;}
.brand-inner {font-size:17px;}
.topbar-button {width:36px;height:36px;min-width:36px;border-radius:9999px;}
.composer {border-radius:9999px;min-width:0;width:auto;min-height:60px;flex:0 0 auto;align-items:center;padding:8px;margin:0 16px 10px;}
.composer textarea {min-width:0;width:100%;flex:1 1 auto;}
.attach-icon,.submit-icon {flex:0 0 auto;width:42px;height:42px;border-radius:9999px;}
.attach-icon {width:38px;height:38px;}
.bottom-bar {position:absolute;bottom:calc(12px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);width:min(336px,calc(100% - 32px));height:66px;padding:7px;border-radius:9999px;}
.bottom-bar::after {top:50%;transform:translateY(-50%);border-radius:9999px;}
.bottom-tab {flex:1 1 0;min-width:0;height:50px;display:flex;align-items:center;justify-content:center;}
.tab-icon {width:50px;height:50px;display:flex;align-items:center;justify-content:center;flex:0 0 50px;border-radius:9999px;padding:0;}
.tab-icon .icon,.tab-icon svg {display:block;flex:0 0 24px;width:24px;height:24px;margin:0;}
.bottom-tab.active .tab-icon {transform:none;}
.bottom-tab:active .tab-icon {transform:scale(.94);}
@media(max-width:559px) {
  .environment {padding:0;width:100%;height:100dvh;}
  .device {width:100%;height:100%;max-height:none;border-radius:0;}
}
@media(min-width:560px) {
  .environment {padding:10px 12px;}
  .device {width:min(100%,560px);height:min(844px,calc(100dvh - 58px));min-height:0;}
}
@media(prefers-reduced-motion:reduce) {.bottom-bar::after{transition:none!important;}}


/* Active ring and icon share ONE box. No independently positioned ::after pill. */
.bottom-bar::after { content: none !important; display: none !important; }
.bottom-tab {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  overflow: visible;
}
.bottom-tab .tab-icon {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  flex: none;
  padding: 0;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: transparent;
  box-shadow: none;
  transform: scale(1);
  transition: background .28s ease, border-color .28s ease,
              box-shadow .28s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.bottom-tab .tab-icon svg,
.bottom-tab .tab-icon .icon {
  grid-area: 1 / 1;
  display: block;
  width: 24px;
  height: 24px;
  flex: none;
  margin: 0;
  padding: 0;
  transform: none;
}
.bottom-bar .bottom-tab.active .tab-icon,
.bottom-bar .bottom-tab.active:hover .tab-icon {
  border: 1px solid rgba(255,255,255,.96);
  border-radius: 9999px;
  background: linear-gradient(155deg,#f9fcff,#dcecff);
  box-shadow: 0 3px 13px rgba(52,112,227,.16),
              inset 0 1px 1px #fff,
              0 0 0 1px rgba(146,191,250,.26);
  transform: scale(1);
}
.bottom-bar .bottom-tab:not(.active):hover .tab-icon {
  background: rgba(255,255,255,.4);
}
.bottom-tab:active .tab-icon { transform: scale(.94); }
body[data-theme="dark"] .bottom-bar .bottom-tab.active .tab-icon {
  color: #e5f1ff;
  background: linear-gradient(145deg,rgba(96,130,184,.91),rgba(50,80,132,.87));
  border-color: rgba(222,237,255,.46);
  box-shadow: 0 4px 18px rgba(7,20,56,.48),inset 0 1px 0 rgba(255,255,255,.26);
}
@media (prefers-reduced-motion: reduce) {
  .bottom-tab .tab-icon { transition: none !important; }
}

/* Live viewport: PC selector replaces the old Live badge inside the screenshot. */
.desktop-content { padding-top: 7px; }
.desktop-card { overflow: hidden; }
.desktop-card .pc-dropdown-container {
  position: absolute;
  z-index: 9;
  top: 11px;
  left: 11px;
  width: auto;
  max-width: calc(100% - 22px);
  margin: 0;
}
.desktop-card .pc-dropdown {
  width: auto;
  min-width: 0;
  height: 36px;
  min-height: 36px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg,rgba(23,46,85,.68),rgba(47,85,139,.57));
  border: 1px solid rgba(255,255,255,.52);
  color: #fff;
  border-radius: 9999px;
  box-shadow: 0 3px 14px rgba(9,36,78,.19),inset 0 1px 0 rgba(255,255,255,.16);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  white-space: nowrap;
}
.desktop-card .pc-dropdown strong {
  font-size: 12px;
  font-weight: 660;
  max-width: 130px;
  text-overflow: ellipsis;
  overflow: hidden;
}
.desktop-card .pc-dropdown .pc-chevron {width:14px;height:14px;color:#fff;order:initial;}
.pc-status-dot {
  width:8px;
  height:8px;
  flex:0 0 8px;
  border-radius:50%;
  background:#36e2a2;
  box-shadow:0 0 0 3px rgba(54,226,162,.2);
}
.pc-status-dot.offline {background:#c2cbdb;box-shadow:0 0 0 3px rgba(255,255,255,.16);}
.desktop-card .pc-options {
  top: calc(100% + 7px);
  left: 0;
  right: auto;
  width: 208px;
  max-width: calc(100vw - 50px);
  padding: 6px;
  box-shadow: 0 16px 35px rgba(14,35,72,.22);
}
.desktop-card .pc-option {border-radius:12px;padding:10px 11px;gap:10px;min-height:42px;}
.desktop-card .pc-option .small-state {flex:0 0 7px;}
.desktop-card .pc-option span:nth-child(2) {font-weight:600;}
.desktop-card .offline-mask {z-index:4;pointer-events:none;}
.desktop-card .fullscreen-control {z-index:7;}
/* Conversation tabs: horizontally scrollable, with new chat pinned at the right. */
.conversation-strip {
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  height:62px;
  flex:0 0 62px;
  padding:5px 18px 9px;
  position:relative;
  z-index:2;
  border-bottom:1px solid rgba(198,215,240,.32);
  background:linear-gradient(180deg,rgba(250,252,255,.55),rgba(246,250,255,.2));
}
.conversation-list {
  flex:1 1 0;
  display:flex;
  gap:8px;
  min-width:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  padding:3px 2px 5px;
  -webkit-overflow-scrolling:touch;
}
.conversation-list::-webkit-scrollbar {display:none;}
.conversation-tab {
  flex:0 0 159px;
  position:relative;
  height:43px;
  min-width:0;
  border:1px solid rgba(221,230,244,.75);
  border-radius:15px;
  background:rgba(255,255,255,.61);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
  scroll-snap-align:start;
  transition:background .24s,border-color .24s,box-shadow .24s;
}
.conversation-tab.active {
  background:linear-gradient(140deg,rgba(241,248,255,.98),rgba(227,238,255,.93));
  border-color:rgba(154,196,255,.74);
  box-shadow:0 4px 12px rgba(42,108,231,.09),inset 0 1px 0 #fff;
}
.conversation-tab-select {
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  min-width:0;
  padding:0 30px 0 12px;
  border:0;
  color:#7888a3;
  background:transparent;
  border-radius:inherit;
  text-align:left;
}
.conversation-tab.active .conversation-tab-select {color:#276de8;}
.conversation-tab-title {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;font-weight:650;}
.conversation-tab-close {
  position:absolute;
  top:3px;
  right:4px;
  width:22px;
  height:22px;
  padding:0;
  display:grid;
  place-items:center;
  background:rgba(237,242,251,.75);
  border:0;
  color:#8394b2;
  border-radius:9999px;
}
.conversation-tab-close .icon {width:13px;height:13px;}
.conversation-tab-close:hover {color:#df5373;background:#ffe9f0;}
.conversation-add {
  height:42px;
  width:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  color:#2373f8;
  border:none;
  #border:1px solid rgba(255,255,255,.93);
  border-radius:9999px;
  background: transparent;
  #background:linear-gradient(135deg,#fff,#e7f1ff);
  #box-shadow:0 5px 16px rgba(55,102,187,.13),inset 0 1px 0 #fff;
}
.conversation-add .icon {width:19px;height:19px;}
.conversation-add:active {transform:scale(.94);}
body[data-theme="dark"] .conversation-tab {background:rgba(35,52,78,.78);border-color:#405673;}
body[data-theme="dark"] .conversation-tab.active {background:linear-gradient(145deg,#375684,#273d63);border-color:#729bd4;}
body[data-theme="dark"] .conversation-tab-select {color:#a7bddb;}
body[data-theme="dark"] .conversation-tab.active .conversation-tab-select {color:#eef6ff;}
body[data-theme="dark"] .conversation-tab-close {background:#354862;color:#c0cee3;}
body[data-theme="dark"] .conversation-add {background:linear-gradient(145deg,#344e77,#273d64);color:#e2eeff;border-color:#577199;}
@media(max-width:400px) {
 .conversation-strip {gap:7px;padding-left:13px;padding-right:13px;}
 .conversation-tab {flex-basis:148px;}
 .conversation-add {width:40px;height:40px;flex-basis:40px;}
}

/* Mobile-first conversation tabs: flush left, adjacent, squared, 35px high. */
#page-chat .conversation-strip {
  height:35px; min-height:35px; flex:0 0 35px;
  display:flex; align-items:stretch; gap:0;
  padding:0; margin:0;
  border-bottom:1px solid rgba(205,219,239,.78);
  background:transparent;
}
#page-chat .conversation-list {
  flex:1 1 0; min-width:0; display:flex; align-items:stretch; gap:0;
  padding:0; margin:0; overflow-x:auto; overflow-y:hidden;
}
#page-chat .conversation-tab {
  position:relative; flex:0 0 124px; width:124px;
  height:35px; min-height:35px; margin:0;
  border:1px solid rgba(205,219,239,.78);
  border-bottom:0; border-radius:0;
  box-shadow:none; background:rgba(255,255,255,.36);
}
#page-chat .conversation-tab + .conversation-tab {margin-left:-1px}
#page-chat .conversation-tab.active {
  z-index:1; border-radius:0; border-color:rgba(150,192,250,.9);
  border-bottom:0; background:rgba(240,247,255,.94);
  box-shadow:inset 0 2px 0 rgba(79,145,253,.45);
}
#page-chat .conversation-tab-select {
  border-radius:0; height:100%; padding:0 27px 0 10px;
}
#page-chat .conversation-tab-close {
  top:6px; right:5px; width:21px; height:21px;
  border-radius:0; background:transparent;
}
#page-chat .conversation-tab-close:hover {background:rgba(253,224,233,.72)}
#page-chat .conversation-add {
  align-self:center; flex:0 0 35px; width:35px; height:35px; margin:0 8px;
}
body[data-theme="dark"] #page-chat .conversation-tab.active {
  background:rgba(43,67,102,.96); border-color:#729bd4;
}

/* Composer textarea: hide Chrome's native scrollbar and arrow buttons.
   Long drafts remain vertically scrollable inside the textarea. */
#page-chat .composer textarea {
  overflow-x: hidden;
  overflow-y: hidden;
  scrollbar-width: none !important;
  -ms-overflow-style: none;
  resize: none;
}
#page-chat .composer textarea::-webkit-scrollbar,
#page-chat .composer textarea::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}