:root { --sidebar-width:300px;--nav-width:var(--sidebar-width) }
@media (max-width:1079px) { :root { --sidebar-width:316px } }
@media (max-width:900px) {
  :root { --nav-width:0px }
  #sidebar { width:var(--sidebar-width) }
}
@media (max-width:599px), (max-width:799px) and (max-height:499px) {
  :root { --sidebar-width:100vw }
}
#sidebar > :is(header,nav,#history,footer) { width:calc(var(--sidebar-width) - 1px) }
#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:4px 8px 4px 12px;gap:2px;margin-bottom:4px }
#sidebar .chat-list-heading strong { font-size:14px;line-height:20px;font-weight:700 }
#sidebar #history .chat-list-heading .icon {
  display:inline-flex;align-items:center;justify-content:center;gap:0;width:28px;height:28px;
  padding:0;border-radius:50%;background-color:transparent;color:rgb(255 255 255 / 66%);
  font-size:14px;font-weight:700;line-height:16px
}
#sidebar #history .chat-list-heading .icon:is(:hover,:focus-visible) { background-color:rgb(255 255 255 / 12%) }
#sidebar #history .chat-list-heading .icon:active { background-color:rgb(255 255 255 / 18%) }
.light #sidebar #history .chat-list-heading .icon { color:rgb(0 0 0 / 60%) }
.light #sidebar #history .chat-list-heading .icon:is(:hover,:focus-visible) { background-color:rgb(0 0 0 / 8%) }
.light #sidebar #history .chat-list-heading .icon:active { background-color:rgb(0 0 0 / 12%) }
#sidebar > header .hide { color:var(--muted) }
#sidebar nav > button { line-height:16px }
#sidebar footer > button { font-size:14px;line-height:20px }
#sidebar footer > button b { font-weight:700 }
#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 }
#sidebar #history .chat-list-row .chat-list-title { line-height:20px;font-size:14px;font-weight:400 }
#sidebar #history .chat-list-row:has(>[data-chat-ui="delete"]) .chat-list-title { padding-right:72px }
#sidebar #history .chat-list-row:has(>[data-chat-ui="options"]):not(:has(>[data-chat-ui="delete"])) .chat-list-title { padding-right:42px }
#history .chat-list-row > [data-chat-ui="delete"] { right:44px }
#history .chat-list-row > [data-chat-ui="options"]:last-child { right:14px }
#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) }

.draft-has-files:not(.chatting) main { padding-top:max(28px,calc(50dvh - 304px)) }
.draft-has-files #entry { border:0;box-shadow:none;background:transparent }
.draft-has-files #entry .composer { padding:0 0 16px!important;border:0 }
.draft-has-files #entry .privacy { display:none }
.draft-has-files:not(.chatting) :is(#suggestions,#suggestion-panel) { display:none }
.draft-has-files #entry .input-row { position:relative;min-height:56px }
.draft-has-files #entry #prompt {
  width:100%;min-height:56px;margin:0;padding:16px 48px 12px 20px;
  font-size:16px;font-weight:400;line-height:28px
}
.draft-has-files #entry [data-action="dictate"] { position:absolute;right:16px;top:14px;width:32px;height:32px }
.draft-has-files #entry .toolbar { height:32px;margin:0 16px;gap:4px }
.draft-upload-note:not([hidden]) { margin:56px 0 0;text-align:center;color:var(--muted);font-size:11px;line-height:12px }
.chatting .draft-upload-note:not([hidden]) { margin:8px 0 0 }
#attachments:not(:empty) { display:flex;gap:4px;overflow-x:auto;padding:12px 12px 0;scrollbar-width:thin }
.draft-attachment {
  position:relative;width:116px;height:116px;flex:none;border-radius:18px;overflow:hidden;
  background:rgb(255 255 255 / 12%);
  animation:draft-file-in 300ms cubic-bezier(.1,.77,.37,1.13) calc(var(--draft-index)*50ms) backwards
}
.light .draft-attachment { background:rgb(0 0 0 / 8%) }
@keyframes draft-file-in { from { transform:scale(0) } }
.draft-attachment > button:first-child {
  display:flex;flex-direction:column;align-items:stretch;gap:0;width:100%;height:100%;padding:0;text-align:left;
  border:1px solid transparent;border-radius:18px;background:transparent
}
.draft-attachment > button:first-child:hover { background:rgb(255 255 255 / 6%);border-color:rgb(255 255 255 / 6%) }
.draft-attachment > button:first-child:active { background:rgb(255 255 255 / 12%) }
.draft-attachment.attachment-image > button:first-child { padding:0;overflow:hidden }
.draft-attachment img { display:block;width:100%;height:100%;object-fit:cover }
.draft-attachment .draft-filename {
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;
  height:54px;flex:none;padding:12px 12px 2px;font-size:14px;font-weight:400;line-height:20px
}
.draft-attachment .draft-size,.draft-attachment .draft-type {
  display:flex;align-items:center;gap:4px;margin:0;padding:4px 12px;color:var(--muted);font-size:12px;line-height:16px
}
.draft-attachment .draft-type { height:36px;padding-bottom:12px }
.draft-attachment span svg { width:16px;height:16px }
.draft-attachment .remove-attachment {
  position:absolute;top:9px;right:9px;width:20px;height:20px;padding:0;border-radius:50%;background:#222;color:rgb(255 255 255 / 66%);
  display:grid;place-content:center;opacity:0;transition:opacity 150ms ease-out,transform 200ms ease-out
}
.draft-attachment .remove-attachment svg { width:10px;height:10px }
.draft-attachment .remove-attachment:hover { transform:scale(1.1);color:white }
.draft-attachment .remove-attachment:active { transform:scale(.95) }
.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 }