:root { --sidebar-width:315px;--nav-width:315px }
#sidebar > header { padding-left:14px;gap:8px }
#sidebar > header .logo.small { width:24px;height:24px;font-size:19px;transform:none;translate:0 2px }
#sidebar > header > b { margin-left:0;font-size:14px;line-height:16px;font-weight:700;translate:0 3px }
#sidebar > #history { padding-top:8px }
#sidebar .chat-list-heading { padding-right:8px;gap:2px }
#history .chat-list-row {
  border-radius:12px;margin-bottom:2px;
  transition:background-color 150ms cubic-bezier(.4,0,.2,1),color 150ms cubic-bezier(.4,0,.2,1)
}
#history .chat-list-row.current { background:rgb(255 255 255 / 8%) }
#history .chat-list-row:is(:hover,:focus-within,:has([aria-expanded="true"])) { background:rgb(255 255 255 / 12%) }
.light #history .chat-list-row.current { background:rgb(0 0 0 / 6%) }
.light #history .chat-list-row:is(:hover,:focus-within,:has([aria-expanded="true"])) { background:rgb(0 0 0 / 9%) }
#history .chat-list-row .icon { transition:opacity 150ms ease,color 150ms ease }
#history .chat-list-row:has([aria-expanded="true"]) .icon { opacity:1;pointer-events:auto }
#history .chat-list-row:has([aria-expanded="true"]) .chat-list-title { padding-right:66px }
#history .chat-list-row:has(>[data-chat-ui="options"]):not(:has(>[data-chat-ui="delete"])) .chat-list-title { padding-right:36px }
#popover[data-menu="history-actions"] {
  transform:scale(.96);transition:opacity 150ms cubic-bezier(.4,0,.2,1),transform 150ms cubic-bezier(.2,.75,.3,1)
}
#popover[data-menu="history-actions"].menu-in { transform:scale(1) }
#popover[data-menu="history-actions"].menu-out { transform:scale(.96) }
#popover[data-menu="history-actions"] button { transition:background-color 150ms cubic-bezier(.4,0,.2,1),transform 150ms ease }
#popover[data-menu="history-actions"] button:active { transform:scale(.96);background:rgb(255 255 255 / 13%) }
#history .rename-chat { animation:chat-rename-in 150ms ease-out both }
@keyframes chat-rename-in { from { opacity:.4;transform:translateY(-4px) } }
.history-crossfade { view-transition-name:chat-sidebar }
html:has(.history-crossfade)::view-transition-group(root) { animation:none }
html:has(.history-crossfade)::view-transition-old(root),
html:has(.history-crossfade)::view-transition-new(root) { animation:none;mix-blend-mode:normal }
html:has(.history-crossfade)::view-transition-old(root) { display:none }
::view-transition { pointer-events:none }
::view-transition-group(chat-sidebar),
::view-transition-old(chat-sidebar),
::view-transition-new(chat-sidebar) { animation-duration:150ms;animation-timing-function:cubic-bezier(.4,0,.2,1) }

#attachments:not(:empty) { display:flex;gap:4px;overflow-x:auto;padding:12px 12px 0 }
.draft-attachment {
  position:relative;width:116px;height:116px;flex:none;border-radius:20px;overflow:hidden;
  background:rgb(255 255 255 / 10%);animation:draft-file-in 180ms cubic-bezier(.2,.7,.2,1) both
}
@keyframes draft-file-in { from { opacity:0;transform:scale(.92) } }
.draft-attachment > button:first-child { display:block;width:100%;height:100%;padding:12px;text-align:left }
.draft-attachment.attachment-image > button:first-child { padding:0 }
.draft-attachment img { display:block;width:100%;height:100%;object-fit:cover }
.draft-attachment strong { display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;font-size:13px;line-height:19px }
.draft-attachment small,.draft-attachment span { display:flex;align-items:center;gap:3px;margin-top:4px;color:var(--muted);font-size:12px }
.draft-attachment span svg { width:16px;height:16px }
.draft-attachment .remove-attachment {
  position:absolute;top:8px;right:8px;width:22px;height:22px;padding:4px;border-radius:50%;background:#151515;color:white;
  display:grid;place-items:center;opacity:0;transition:opacity 120ms ease
}
.draft-attachment .remove-attachment svg { width:12px;height:12px }
.draft-attachment:is(:hover,:focus-within) .remove-attachment { opacity:1 }
.sent-attachment-stack { display:flex;flex-wrap:wrap;align-items:center;min-height:28px;margin:12px 0 -46px;padding:4px 72px 2px 0 }
.sent-attachment {
  position:relative;display:grid;place-items:center;width:56px;height:56px;flex:none;padding:0;
  border:1px solid #ffffff21;border-radius:8px;overflow:hidden;background:#3d3d3d;
  rotate:4deg;transition:transform 150ms ease-out,box-shadow 150ms ease-out;
  animation:sent-file-in 300ms cubic-bezier(.1,.77,.37,1.13) calc(var(--attachment-index)*50ms) backwards
}
.sent-attachment + .sent-attachment { margin-left:-12px }
.sent-attachment:is(:hover,:focus-visible) { transform:translateY(-8px) scale(1.1);z-index:1;box-shadow:0 4px 12px #0005 }
.sent-attachment.attachment-image:is(:hover,:focus-visible) { transform:translateY(-4px) scale(1.06) rotate(-4deg) }
.sent-attachment img,.sent-attachment .attachment-file-glyph { display:block;width:100%;height:100%;object-fit:cover }
@keyframes sent-file-in { from { scale:0 } }
#conversation .message.user:has(.sent-attachment-stack) { margin-bottom:48px }
.attachment-filename:not([hidden]) {
  position:fixed;z-index:9999;max-width:min(320px,calc(100vw - 16px));padding:5px 12px;border-radius:999px;
  background:#f2f2f2;color:#171c25;font-size:12px;font-weight:600;line-height:18px;overflow-wrap:anywhere;
  pointer-events:none;box-shadow:0 4px 12px #0005;animation:attachment-name-in 120ms ease-out both
}
@keyframes attachment-name-in { from { opacity:0;translate:0 2px } }

#overlay.image-viewer-overlay { background:rgba(0,0,0,.6);animation:none }
#dialog[data-panel="image-viewer"] {
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:min(90vw,var(--viewer-fit,90dvh),var(--viewer-native,90vw));aspect-ratio:var(--viewer-ratio,1.45);max-width:none;max-height:none;
  border:0;border-radius:16px;padding:8px;background:#222;overflow:hidden
}
.chat-image-viewer { height:100%;width:100% }
.chat-image-viewer img { display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;border-radius:8px }
#dialog[data-panel="image-viewer"] .dialog-close {
  top:0;right:0;width:44px;height:44px;padding:0;border-radius:0 0 0 10px;background:#222;color:white
}
#dialog[data-panel="image-viewer"] .dialog-close svg { width:19px;height:19px }
@media (hover:none) { .draft-attachment .remove-attachment { opacity:1 } }
@media (prefers-reduced-motion:reduce) {
  #history .chat-list-row,#history .chat-list-row .icon,#popover[data-menu="history-actions"],#popover[data-menu="history-actions"] button,.sent-attachment,.draft-attachment .remove-attachment { transition:none }
  #history .rename-chat,.draft-attachment,.sent-attachment,.attachment-filename { animation:none }
  .sent-attachment:is(:hover,:focus-visible) { transform:none }
}
.image-reply .chat-image-button { aspect-ratio:1 }
.image-reply .chat-image-button img { height:100%;object-fit:cover }