/* ============================================ */
/* SIDEBAR CSS - All sidebar-related styles   */
/* ============================================ */

/* CSS Variables */
:root {
  --sidebar-width: 250px;
  --sidebar-collapsed: 56px;
}

/* ============================================ */
/* BASE LAYOUT & SIDEBAR                      */
/* ============================================ */

.app-layout {
  grid-template-columns: var(--sidebar-width) 1fr;
}

.app-layout.sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed) 1fr;
}

.sidebar {
  position: relative;
  z-index: 110;
  height: 100vh;
  width: var(--sidebar-width);
  min-width: 200px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .25s cubic-bezier(.2,.7,.2,1), min-width .25s cubic-bezier(.2,.7,.2,1);
  will-change: width, transform;
}

.sidebar-backdrop {
  display: none;
}

/* ============================================ */
/* COLLAPSED STATE                            */
/* ============================================ */

.sidebar-collapsed .sidebar {
  width: var(--sidebar-collapsed);
  min-width: var(--sidebar-collapsed);
}

.sidebar-collapsed #sidebar-toggle,
.sidebar-collapsed .sidebar-actions-pill * {
  pointer-events: auto;
}

/* Toggle button positioned left in collapsed state */
.sidebar-collapsed #sidebar-toggle {
  transform: translateX(-5px);
}

.sidebar-collapsed .main-content {
  margin-left: 0;
  z-index: 1;
}

/* Hide elements when collapsed - with smooth transitions */
.chat-list-heading,
.sidebar-footer,
.sidebar-title {
  transition: all .25s cubic-bezier(.2,.7,.2,1);
}

.sidebar-collapsed .chat-list-heading,
.sidebar-collapsed .sidebar-footer,
.sidebar-collapsed .sidebar-title {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* User menu toggle - remove from layout when collapsed */
#user-menu-toggle {
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  max-width: 200px;
  border-radius: var(--radius-xl);
  transform: translateX(0);
  line-height: 0;
  display: grid;
  place-items: center;
}

#user-menu-toggle svg {
  display: block;
  margin: 0;
}

.sidebar-collapsed #user-menu-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  display: none;
}

#chat-list {
  transition: all .25s cubic-bezier(.2,.7,.2,1);
}

.sidebar-collapsed #chat-list {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.chat-info {
  transition: all .25s cubic-bezier(.2,.7,.2,1);
}

.sidebar-collapsed .chat-info {
  opacity: 0;
  pointer-events: none;
}

.btn-ghost span {
  transition: all .25s cubic-bezier(.2,.7,.2,1);
}

.sidebar-collapsed .btn-ghost span {
  opacity: 0;
  width: 0;
  overflow: hidden;
}


/* ============================================ */
/* SIDEBAR HEADER                             */
/* ============================================ */

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  margin: 5px;
  min-height: var(--control-height);
  transition: none;
}

.sidebar-collapsed .sidebar-header {
  justify-content: flex-start;
  padding: 0;
}

.sidebar-collapsed .sidebar-header:hover {
  cursor: ew-resize;
}

.sidebar-collapsed .sidebar:hover {
  cursor: ew-resize;
}

.sidebar-collapsed #sidebar-toggle,
.sidebar-collapsed #sidebar-toggle:hover {
  cursor: ew-resize;
}

.user-profile-btn {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 50%;
  background: transparent;
  border: none;
  width: var(--control-height);
  height: var(--control-height);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  order: 1;
  cursor: pointer;
  transition: opacity .25s cubic-bezier(.2,.7,.2,1);
}

.sidebar-toggle {
  order: 2;
  margin-left: auto;
}

.user-profile-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.user-profile-btn:hover {
  background: var(--state-hover-soft);
}

.user-profile-btn:active {
  background: var(--active_transparent_btns);
  opacity: 0.6;
}

.user-profile-btn:focus,
.user-profile-btn:focus-visible {
  outline: none;
  box-shadow: none;
}

.sidebar-title {
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
}

/* Sidebar toggle button */
#sidebar-toggle {
  border: 0;
  background: transparent;
  padding: 0;
  margin-left: auto;
  line-height: 1;
  font-size: 20px;
  color: #0f172a;
  border-radius: var(--radius-xl);
  cursor: ew-resize;
  transition: background .15s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  width: var(--control-height);
  height: var(--control-height);
  min-width: var(--control-height);
  min-height: var(--control-height);
  box-sizing: border-box;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#sidebar-toggle:hover {
  background: var(--state-hover-soft);
}

#sidebar-toggle .icon-burger {
  position: absolute;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
}

#sidebar-toggle .icon-burger line {
  transform-origin: 50% 50%;
  transition: transform .25s cubic-bezier(.2,.7,.2,1);
  stroke-width: 1.5;
}

#sidebar-toggle .icon-burger .line-top {
  transform: rotate(45deg);
}

#sidebar-toggle .icon-burger .line-bottom {
  transform: rotate(-45deg);
}

.sidebar-collapsed #sidebar-toggle .icon-burger .line-top {
  transform: translateY(-3px);
}

.sidebar-collapsed #sidebar-toggle .icon-burger .line-bottom {
  transform: translateY(3px);
}

/* ============================================ */
/* SIDEBAR ACTIONS & BUTTONS                  */
/* ============================================ */

.sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  margin-top: -7px;
}

.sidebar-collapsed .sidebar-actions {
  padding: 0;
}

.btn-secondary {
  padding: 9px 12px;
  height: var(--control-height);
  min-height: var(--control-height);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, opacity .1s ease;
  font-size: 14px;
  font-family: var(--font-default);
  box-sizing: border-box;
}

.btn-secondary:focus,
.btn-secondary:focus-visible {
  outline: none;
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--hover_transparent_btns);
}

.btn-secondary:active {
  background: var(--active_transparent_btns);
  opacity: 0.6;
}

.btn-icon:not(.user-profile-btn) {
  width: var(--control-height);
  height: var(--control-height);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.btn-icon:not(.user-profile-btn) svg {
  width: 18px;
  height: 18px;
}

/* Active state for navigation buttons */
#new-chat.active,
#files-btn.active,
#vector-search-btn.active,
#editor-btn.active {
  background: var(--file-item-active);
  color: var(--file-item-active-text);
}

#new-chat.active:hover,
#files-btn.active:hover,
#vector-search-btn.active:hover,
#editor-btn.active:hover {
  background: color-mix(in srgb, var(--active_transparent_btns) 70%, white);
}

#new-chat.active:active,
#files-btn.active:active,
#vector-search-btn.active:active,
#editor-btn.active:active {
  color: color-mix(in srgb, var(--file-item-active-text) 70%, white);
}

.sidebar-actions-pill .btn-secondary .icon-active {
  display: none;
}

#new-chat.active .icon-default,
#files-btn.active .icon-default,
#vector-search-btn.active .icon-default,
#editor-btn.active .icon-default {
  display: none;
}

#new-chat.active .icon-active,
#files-btn.active .icon-active,
#vector-search-btn.active .icon-active,
#editor-btn.active .icon-active {
  display: inline;
}

/* Sidebar open button container - removed */

/* Actions pill container */
.sidebar-actions-pill {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--padding-xs);
  margin: 5px;
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
  overflow: hidden;
  width: calc(var(--sidebar-width) - 10px);
  transition: width .25s cubic-bezier(.2,.7,.2,1);
  cursor: pointer;
}

.sidebar-collapsed .sidebar-actions-pill {
  width: calc(var(--sidebar-collapsed) - 10px);
}

.sidebar-actions-pill .btn-secondary {
  margin: 0;
  padding: 7px 12px;
  flex-shrink: 0;
  white-space: nowrap;
  gap: 0;
  position: relative;
  width: 100%;
  border: none;
  cursor: pointer;
}

.sidebar-actions-pill .btn-secondary:hover {
  background: var(--file-item-hover);
}

.sidebar-actions-pill .btn-secondary:active {
  opacity: 1;
}

.sidebar-actions-pill .btn-secondary.is-pressed {
  opacity: 1;
}

.sidebar-collapsed .sidebar-actions-pill .btn-secondary:active .icon-active {
  color: color-mix(in srgb, var(--file-item-active-text) 70%, white) !important;
  fill: color-mix(in srgb, var(--file-item-active-text) 70%, white) !important;
}

.sidebar-collapsed .sidebar-actions-pill .btn-secondary.is-pressed .icon-active {
  color: color-mix(in srgb, var(--file-item-active-text) 70%, white) !important;
  fill: color-mix(in srgb, var(--file-item-active-text) 70%, white) !important;
}

.sidebar-collapsed .sidebar-actions-pill .btn-secondary:active .icon-active path,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:active .icon-active circle,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:active .icon-active line,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:active .icon-active polyline,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:active .icon-active polygon,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:active .icon-active ellipse {
  fill: color-mix(in srgb, var(--file-item-active-text) 70%, white) !important;
  stroke: color-mix(in srgb, var(--file-item-active-text) 70%, white) !important;
}

.sidebar-collapsed .sidebar-actions-pill .btn-secondary.is-pressed .icon-active path,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary.is-pressed .icon-active circle,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary.is-pressed .icon-active line,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary.is-pressed .icon-active polyline,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary.is-pressed .icon-active polygon,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary.is-pressed .icon-active ellipse {
  fill: color-mix(in srgb, var(--file-item-active-text) 70%, white) !important;
  stroke: color-mix(in srgb, var(--file-item-active-text) 70%, white) !important;
}

.sidebar-collapsed .sidebar-actions-pill .btn-secondary:not(.active):active .icon-default path,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:not(.active):active .icon-default circle,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:not(.active):active .icon-default line,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:not(.active):active .icon-default polyline,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:not(.active):active .icon-default polygon,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:not(.active):active .icon-default ellipse {
  fill: #5a5a5a !important;
  stroke: #5a5a5a !important;
}

.sidebar-collapsed .sidebar-actions-pill .btn-secondary:not(.active).is-pressed .icon-default path,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:not(.active).is-pressed .icon-default circle,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:not(.active).is-pressed .icon-default line,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:not(.active).is-pressed .icon-default polyline,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:not(.active).is-pressed .icon-default polygon,
.sidebar-collapsed .sidebar-actions-pill .btn-secondary:not(.active).is-pressed .icon-default ellipse {
  fill: #5a5a5a !important;
  stroke: #5a5a5a !important;
}

.sidebar-actions-pill .btn-secondary svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  transform: translateX(-3px);
}

.sidebar-actions-pill .btn-secondary span {
  position: absolute;
  left: 38px;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  transform: none;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all .25s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
  font-family: var(--font-default);
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.app-layout:not(.sidebar-collapsed) .sidebar-actions-pill .btn-secondary span {
  opacity: 1;
  visibility: visible;
}

.app-layout:not(.sidebar-collapsed) .sidebar-actions-pill .btn-secondary:active span {
  opacity: 0.6;
}

.app-layout:not(.sidebar-collapsed) .sidebar-actions-pill .btn-secondary.is-pressed span {
  opacity: 0.6;
}

.sidebar-collapsed .sidebar-actions-pill .btn-secondary span {
  opacity: 0;
  visibility: hidden;
}

/* ============================================ */
/* CHAT LIST                                  */
/* ============================================ */

.chat-list-heading {
  font-family: 'Instrument Serif' !important;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--muted);
  margin: 0 7px 0 7px;
  padding-left: 14px;
  padding-top: 8px;
  padding-bottom: 0;
  user-select: none;
}

.chat-list {
  position: relative;
  padding: var(--padding-xs) 0 var(--padding-xs) var(--padding-xs);
  margin: 0 3px 0px 7px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  background: transparent;
  border: none;
  box-shadow: none;
}

.chat-list-scroll {
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.chat-list-scroll::-webkit-scrollbar {
  width: 10px;
}

.chat-list-scroll::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 2px;
}

.chat-list-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--border) 85%, black);
}

.chat-list-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.chat-avatar {
  display: none;
}

.chat-item {
  position: relative;
  text-align: left;
  padding: 7px 10px;
  height: var(--control-height);
  min-height: var(--control-height);
  border-radius: 18px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition: background .15s ease, opacity .1s ease;
  display: flex;
  align-items: center;
  min-width: 0;
  font-family: var(--font-default);
  font-size: 14px;
  user-select: none;
}

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

.chat-item:active {
  background: color-mix(in srgb, var(--hover_transparent_btns) 70%, white);
  opacity: 1;
}

.chat-item:not(.chat-item--menu-open):hover:has(.chat-menu-btn:hover) {
  background: transparent;
}

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

.chat-item.active {
  background: var(--active_transparent_btns);
  height: var(--control-height);
}

.chat-item.chat-item--pinned .chat-title {
  font-weight: 400;
}

.chat-item.chat-item--pinned::before {
  content: '';
  position: absolute;
  right: var(--padding-xs);
  top: 50%;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--muted);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 113 113'><g transform='matrix(1,0,0,1,-1442.072816,-934.4922)'><g transform='matrix(1,0,0,1,1210.541762,143.855077)'><g transform='matrix(0.894377,0.894377,-0.944171,0.944171,-124.73816,-1426.507065)'><path d='M1468.064,994.674C1467.993,991.48 1469.306,988.369 1471.742,986.095L1479.328,979.016C1480.124,978.273 1480.518,977.225 1480.398,976.172L1478.035,955.514C1477.583,951.566 1478.922,947.622 1481.718,944.667C1484.514,941.712 1488.502,940.023 1492.688,940.023L1510.891,940.023C1515.077,940.023 1519.065,941.712 1521.861,944.667C1524.656,947.622 1525.996,951.566 1525.544,955.514L1523.181,976.172C1523.061,977.225 1523.455,978.273 1524.251,979.016L1531.836,986.095C1534.273,988.369 1535.586,991.48 1535.515,994.674L1535.517,994.674C1535.517,1003.801 1524.57,1011.467 1509.833,1013.547C1508.723,1014.166 1508.031,1015.299 1508.031,1016.534C1508.031,1016.534 1508.031,1033.816 1508.031,1038.292C1508.031,1038.962 1507.75,1039.606 1507.249,1040.08C1505.574,1041.667 1501.789,1045.252 1501.789,1045.252C1501.789,1045.252 1498.005,1041.667 1496.33,1040.08C1495.829,1039.606 1495.547,1038.962 1495.547,1038.292C1495.547,1033.816 1495.547,1016.534 1495.547,1016.534C1495.547,1015.299 1494.856,1014.166 1493.746,1013.547C1479.009,1011.467 1468.061,1003.801 1468.061,994.674L1468.064,994.674ZM1528.925,994.8C1528.923,994.715 1528.923,994.629 1528.925,994.542C1528.959,993.053 1528.347,991.602 1527.211,990.542L1519.625,983.463C1517.396,981.382 1516.291,978.449 1516.629,975.5L1518.992,954.841C1519.242,952.655 1518.501,950.47 1516.952,948.833C1515.407,947.2 1513.204,946.266 1510.891,946.266L1492.688,946.266C1490.375,946.266 1488.171,947.2 1486.626,948.833C1485.078,950.47 1484.337,952.655 1484.587,954.841L1486.95,975.5C1487.287,978.449 1486.183,981.382 1483.953,983.463L1476.368,990.542C1475.232,991.602 1474.62,993.053 1474.653,994.542C1474.655,994.629 1474.655,994.715 1474.653,994.801C1474.709,997.293 1476.392,999.464 1478.78,1001.341C1478.891,1001.428 1479.004,1001.515 1479.119,1001.601C1479.205,1001.666 1479.293,1001.73 1479.381,1001.794C1483.196,1004.558 1488.579,1006.506 1494.717,1007.372C1494.829,1007.388 1494.94,1007.407 1495.051,1007.428C1497.214,1007.712 1499.471,1007.861 1501.789,1007.861C1504.107,1007.861 1506.365,1007.712 1508.528,1007.428C1508.638,1007.407 1508.75,1007.388 1508.861,1007.372C1515,1006.506 1520.383,1004.558 1524.197,1001.794C1524.286,1001.73 1524.373,1001.666 1524.46,1001.601C1524.574,1001.515 1524.687,1001.428 1524.799,1001.341C1527.187,999.464 1528.87,997.293 1528.925,994.8Z'/></g></g></g></svg>");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 14px 14px;
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 113 113'><g transform='matrix(1,0,0,1,-1442.072816,-934.4922)'><g transform='matrix(1,0,0,1,1210.541762,143.855077)'><g transform='matrix(0.894377,0.894377,-0.944171,0.944171,-124.73816,-1426.507065)'><path d='M1468.064,994.674C1467.993,991.48 1469.306,988.369 1471.742,986.095L1479.328,979.016C1480.124,978.273 1480.518,977.225 1480.398,976.172L1478.035,955.514C1477.583,951.566 1478.922,947.622 1481.718,944.667C1484.514,941.712 1488.502,940.023 1492.688,940.023L1510.891,940.023C1515.077,940.023 1519.065,941.712 1521.861,944.667C1524.656,947.622 1525.996,951.566 1525.544,955.514L1523.181,976.172C1523.061,977.225 1523.455,978.273 1524.251,979.016L1531.836,986.095C1534.273,988.369 1535.586,991.48 1535.515,994.674L1535.517,994.674C1535.517,1003.801 1524.57,1011.467 1509.833,1013.547C1508.723,1014.166 1508.031,1015.299 1508.031,1016.534C1508.031,1016.534 1508.031,1033.816 1508.031,1038.292C1508.031,1038.962 1507.75,1039.606 1507.249,1040.08C1505.574,1041.667 1501.789,1045.252 1501.789,1045.252C1501.789,1045.252 1498.005,1041.667 1496.33,1040.08C1495.829,1039.606 1495.547,1038.962 1495.547,1038.292C1495.547,1033.816 1495.547,1016.534 1495.547,1016.534C1495.547,1015.299 1494.856,1014.166 1493.746,1013.547C1479.009,1011.467 1468.061,1003.801 1468.061,994.674L1468.064,994.674ZM1528.925,994.8C1528.923,994.715 1528.923,994.629 1528.925,994.542C1528.959,993.053 1528.347,991.602 1527.211,990.542L1519.625,983.463C1517.396,981.382 1516.291,978.449 1516.629,975.5L1518.992,954.841C1519.242,952.655 1518.501,950.47 1516.952,948.833C1515.407,947.2 1513.204,946.266 1510.891,946.266L1492.688,946.266C1490.375,946.266 1488.171,947.2 1486.626,948.833C1485.078,950.47 1484.337,952.655 1484.587,954.841L1486.95,975.5C1487.287,978.449 1486.183,981.382 1483.953,983.463L1476.368,990.542C1475.232,991.602 1474.62,993.053 1474.653,994.542C1474.655,994.629 1474.655,994.715 1474.653,994.801C1474.709,997.293 1476.392,999.464 1478.78,1001.341C1478.891,1001.428 1479.004,1001.515 1479.119,1001.601C1479.205,1001.666 1479.293,1001.73 1479.381,1001.794C1483.196,1004.558 1488.579,1006.506 1494.717,1007.372C1494.829,1007.388 1494.94,1007.407 1495.051,1007.428C1497.214,1007.712 1499.471,1007.861 1501.789,1007.861C1504.107,1007.861 1506.365,1007.712 1508.528,1007.428C1508.638,1007.407 1508.75,1007.388 1508.861,1007.372C1515,1006.506 1520.383,1004.558 1524.197,1001.794C1524.286,1001.73 1524.373,1001.666 1524.46,1001.601C1524.574,1001.515 1524.687,1001.428 1524.799,1001.341C1527.187,999.464 1528.87,997.293 1528.925,994.8Z'/></g></g></g></svg>");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 14px 14px;
  pointer-events: none;
  opacity: 1;
  transition: opacity .15s ease;
  transform: translateY(-50%);
}

.chat-item.chat-item--pinned:hover::before,
.chat-item.chat-item--pinned:focus-within::before,
.chat-item.chat-item--pinned.chat-item--menu-open::before,
.chat-item.chat-item--pinned.chat-item--renaming::before {
  opacity: 0;
}

.chat-item.active:active {
  background: color-mix(in srgb, var(--active_transparent_btns) 70%, white);
  opacity: 1;
}

.chat-item.active .chat-menu-btn {
  opacity: 0;
  pointer-events: none;
}

.chat-item.active:hover .chat-menu-btn {
  opacity: 1;
  pointer-events: auto;
}

.chat-item.chat-item--menu-open {
  background: var(--active_transparent_btns);
}

.chat-item.chat-item--renaming {
  background: var(--hover_transparent_btns);
}

.chat-item.active.chat-item--renaming {
  background: var(--active_transparent_btns);
}

.chat-item.chat-item--menu-open .chat-preview::after {
  opacity: 0;
}

.chat-item:not(.chat-item--menu-open):has(.chat-menu-btn:active),
.chat-item:not(.chat-item--menu-open):has(.chat-menu-dropdown .chat-menu-item:active) {
  background: transparent;
  opacity: 1;
}

.chat-info {
  flex: 1;
  min-width: 0;
  opacity: 1;
  transition: opacity .25s cubic-bezier(.2,.7,.2,1);
}

.chat-preview {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 28px;
  position: relative;
}

.chat-list .chat-preview {
  padding-right: 28px;
}

.chat-list .chat-preview::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 70%, var(--surface) 100%);
  opacity: 0;
  transition: opacity .18s ease;
}

.chat-item:not(.chat-item--renaming):hover .chat-preview::after,
.chat-item:not(.chat-item--renaming):focus-within .chat-preview::after {
  opacity: 0.85;
}

.chat-item--renaming .chat-menu-btn {
  opacity: 0 !important;
  pointer-events: none;
}

.chat-item--renaming .chat-preview::after {
  opacity: 0;
}

.chat-preview .chat-title {
  display: block;
  font-size: 14px;
  line-height: 1.2;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-item.active .chat-preview .chat-title {
  color: var(--file-item-active-text);
}

.chat-preview .chat-snippet {
  font-size: 14px;
  color: var(--muted);
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-snippet--muted {
  opacity: 0.35;
}

.chat-name {
  font-size: 15px;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: transform .1s ease;
}

/* ============================================ */
/* CHAT MENU                                  */
/* ============================================ */

.chat-menu-btn {
  opacity: 0;
  position: absolute;
  right: var(--padding-xs);
  top: 50%;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;
  border: none;
  box-shadow: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s ease, background .15s ease;
  padding: 0;
  color: var(--text);
  font-size: 0;
  font-weight: 600;
  line-height: 1;
  transform: translateY(-50%);
  z-index: 2;
}

.chat-menu-btn:hover,
.chat-menu-btn:focus-visible,
.chat-menu-btn:active {
  background: transparent;
}

.chat-item.active .chat-menu-btn:hover,
.chat-item.active .chat-menu-btn:focus-visible,
.chat-item.active .chat-menu-btn:active {
  background: transparent;
}

.chat-menu-icon {
  display: block;
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.chat-menu-dropdown {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid color-mix(in oklab, var(--border) 70%, transparent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  z-index: 200000; /* Keep above chat preview text and main content */
  min-width: 170px;
  overflow: hidden;
  padding: var(--padding-xs);
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(calc(var(--padding-xs) * -1));
  transition: opacity 0.12s ease, transform 0.12s ease;
  visibility: hidden;
  pointer-events: none;
}

.chat-menu-dropdown.visible {
  --context-menu-corner-length: 24px;
  --context-menu-corner-thickness: 2.5px;
  background: var(--glass-surface-70);
  opacity: 1;
  transform: translateY(0);
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  visibility: visible;
  pointer-events: auto;
  animation: none;
  overflow: hidden;
}

.chat-menu-list {
  display: flex;
  flex-direction: column;
}

.chat-menu-item {
  padding: 8px 12px;
  height: var(--control-height);
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-size: 14px;
  line-height: 1.2;
  font-family: var(--font-default);
  color: var(--text);
  display: grid;
  grid-template-columns: 22px 1fr;
  column-gap: 10px;
  align-items: center;
  border-radius: 18px;
  transition: background .15s ease, color .15s ease, opacity .1s ease;
}

.chat-menu-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: block;
  justify-self: center;
  align-self: center;
  margin: 0 auto;
}

.chat-menu-item.chat-menu-item--muted {
  color: var(--text);
}

.chat-menu-item.chat-menu-item--muted svg {
  color: var(--muted);
}

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

.chat-menu-item.chat-menu-item--muted:hover {
  color: var(--text);
}

.chat-menu-item:active {
  background: var(--active_transparent_btns);
  opacity: 0.6;
}

.chat-menu-item.danger {
  color: var(--danger);
  white-space: nowrap;
}

.chat-menu-item.danger svg {
  color: var(--danger);
}

.chat-menu-item.danger:hover {
  background: rgba(220, 38, 38, 0.1);
}

@keyframes chat-menu-fade {
  from {
    opacity: 0;
    transform: translateY(calc(var(--padding-xs) * -1));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================ */
/* CHAT RENAME                                */
/* ============================================ */

.chat-rename-inline {
  width: 100%;
  border: none;
  border-radius: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  background: transparent;
  color: var(--text);
  outline: none;
  box-shadow: none;
  line-height: 1.2;
}

.chat-rename-inline:focus {
  box-shadow: none;
}

.chat-rename-inline--error {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
  background: rgba(239, 68, 68, 0.05);
}

.chat-rename-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 14px 12px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.chat-rename-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.chat-rename-label {
  font-size: 12px;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.7);
}

.chat-rename-input {
  width: 100%;
  border: 1px solid var(--shadow);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  color: var(--text);
  background: var(--glass-surface-90);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.chat-rename-input:focus {
  border-color: rgba(59, 130, 246, 0.5);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  background: var(--surface);
}

.chat-rename-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.chat-rename-actions button {
  font-size: 14px;
  border-radius: 8px;
  padding: 6px 12px;
  border: none;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.chat-rename-cancel {
  background: rgba(148, 163, 184, 0.16);
  color: rgba(15, 23, 42, 0.8);
}

.chat-rename-cancel:hover {
  background: rgba(148, 163, 184, 0.32);
}

.chat-rename-save {
  background: linear-gradient(135deg, #2563eb, #4f46e5);
  color: #fff;
  box-shadow: 0 6px 16px rgba(79, 70, 229, 0.25);
}

.chat-rename-save:hover {
  box-shadow: 0 8px 18px rgba(79, 70, 229, 0.35);
}

.chat-rename-save:disabled {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
}

.chat-rename-error {
  min-height: 16px;
  font-size: 12px;
  color: var(--danger);
}

/* ============================================ */
/* SIDEBAR FOOTER                             */
/* ============================================ */

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--border);
}

.btn-ghost {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  color: #0f172a;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .15s ease, border-color .15s ease;
}

.btn-ghost:hover {
  background: rgba(0,0,0,.05);
}

.sidebar-collapsed .btn-ghost {
  width: 44px;
  height: 44px;
  padding: 0;
  justify-content: center;
}

/* ============================================ */
/* DESKTOP RESPONSIVE (min-width: 769px)      */
/* ============================================ */

.chat-header .mobile-only {
  display: none !important;
}

.mobile-only {
  display: none;
}

@media (min-width: 769px) {
  .btn-icon.mobile-only {
    display: none !important;
  }
}


/* ============================================ */
/* MOBILE RESPONSIVE (max-width: 768px)       */
/* ============================================ */

@media (max-width: 768px) {
  .app-layout,
  .app-layout.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  /* Default state: hidden sidebar that overlays content */
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 250px; /* Fixed width for mobile sidebar */
    transform: translateX(-100%);
    z-index: 2000; /* High z-index to overlay everything */
    box-shadow: 0 0 20px var(--state-hover-strong);
    background: var(--bg);
    transition: transform 0.3s cubic-bezier(.2,.7,.2,1);
    display: flex !important;
  }

  /* Hidden state is default via transform translateX(-100%) */
  
  /* Open state */
  .sidebar.open {
    transform: translateX(0);
    background: var(--bg);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--overlay-strong);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(.2,.7,.2,1);
    z-index: 1500;
  }

  .sidebar.open ~ .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  /* Show mobile menu button when sidebar is closed */
  .mobile-only {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--glass-surface-90);
    border: 1px solid var(--overlay-soft);
    box-shadow: 0 2px 8px var(--overlay-soft);
    transition: all 0.2s ease, opacity 0.3s ease;
    opacity: 1;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1000;
  }

  /* Hide toggle button when sidebar is open (optional, or move it inside sidebar) */
  .sidebar.open + .main-content .mobile-only {
    opacity: 0;
    pointer-events: none;
  }

  /* Adjust main content to take full width */
  .main-content {
    margin-left: 0 !important;
    width: 100%;
  }

  .main-content.chat-mode {
    top: 0 !important;
  }
}