/* Same handle geometry and interactions as mail-sidebar-resizer. */
:is(.conversation-resizer, .ai-history-resizer) {
  position: relative;
  z-index: 12;
  width: 10px;
  flex: 0 0 10px;
  height: 100%;
  outline: none;
  cursor: col-resize;
  touch-action: none;
}
:is(.conversation-resizer, .ai-history-resizer)::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 50%;
  width: 1px;
  background: transparent;
  transform: translateX(-50%);
  transition: width var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
:is(.conversation-resizer, .ai-history-resizer):is(:hover, :focus-visible)::before,
.is-sidebar-resizing > .conversation-resizer::before,
.is-history-resizing > .ai-history-resizer::before {
  width: 2px;
  background: color-mix(in srgb, var(--lime) 52%, var(--line));
}
:is(.conversation-resizer__toggle, .ai-history-resizer__toggle) {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 24px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted-strong);
  background: var(--bg-raised, var(--bg));
  box-shadow: var(--shadow-xs);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
    opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
:is(.conversation-resizer, .ai-history-resizer):is(:hover, :focus-visible) > span,
:is(.is-sidebar-resizing, .is-sidebar-collapsed) > .conversation-resizer > span,
:is(.is-history-resizing, .is-history-collapsed) > .ai-history-resizer > span {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
:is(.conversation-resizer, .ai-history-resizer):is(:hover, :focus-visible) > span {
  border-color: color-mix(in srgb, var(--lime) 42%, var(--line));
  color: var(--lime);
}
.is-sidebar-collapsed > .conversation-resizer,
.is-history-collapsed > .ai-history-resizer { cursor: e-resize; }
.is-sidebar-collapsed > .conversation-resizer svg,
.is-history-collapsed > .ai-history-resizer svg { transform: rotate(180deg); }

@media (min-width: 701px) {
  .chat-layout.has-sidebar-resizer > .chat-sidebar {
    width: var(--conversation-sidebar-width, 300px);
    min-width: 0;
    opacity: 1;
    transition: width var(--dur-slow) var(--ease), opacity var(--dur-base) var(--ease);
  }
  .chat-layout.is-sidebar-collapsed > .chat-sidebar {
    visibility: hidden;
    border-right-width: 0;
    opacity: 0;
    pointer-events: none;
  }
  .chat-layout.is-sidebar-resizing { cursor: col-resize; user-select: none; }
  .chat-layout.is-sidebar-resizing > .chat-sidebar { transition: none; }
}
@media (max-width: 700px) {
  .conversation-resizer { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-layout.has-sidebar-resizer > .chat-sidebar,
  :is(.conversation-resizer, .ai-history-resizer)::before,
  :is(.conversation-resizer__toggle, .ai-history-resizer__toggle) { transition: none; }
}