/* One consistent control language for chat navigation and settings panels. */
#back.icon.mobile-back {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  border-radius: 50%;
  background: var(--hover);
  color: var(--blue);
  font-size: 0;
  transition: background-color .18s ease, transform .18s ease;
}
#back.mobile-back::after { display: none; }
#back svg, #lightbox .media-viewer-nav svg {
  display: block;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#back:hover { background: color-mix(in srgb, var(--blue) 14%, var(--surface)); }
#back:active { transform: scale(.94); }
#back:focus-visible, #lightbox .media-viewer-nav:focus-visible,
#workspace-close:focus-visible, .profile-switcher:focus-visible,
.connected-chats > summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
#lightbox .media-viewer-nav { font-size: 0; }
#lightbox .media-viewer-nav svg { width: 23px; height: 23px; margin: auto; }
#lightbox .media-viewer-nav:not(:disabled):active { transform: translateY(-50%) scale(.94); }

.ios-navigation { justify-content: center; }
.ios-navigation .sidebar-nav-spacer { display: none; }
.profile-switcher { cursor: pointer; transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.profile-switcher:hover { background: color-mix(in srgb, var(--blue) 9%, var(--hover)); }
.profile-switcher:active { transform: scale(.985); }
.profile-switcher.is-open { background: color-mix(in srgb, var(--blue) 13%, var(--hover)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 24%, transparent); }
.profile-switcher .profile-chevron { display: grid; flex: none; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: var(--muted); transition: transform .18s ease, background-color .18s ease, color .18s ease; }
.profile-switcher .profile-chevron svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.profile-switcher:hover .profile-chevron, .profile-switcher.is-open .profile-chevron { background: color-mix(in srgb, var(--blue) 13%, transparent); color: var(--blue); }
.profile-switcher.is-open .profile-chevron { transform: rotate(180deg); }

.connected-chats > summary { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 10px; list-style: none; transition: background-color .18s ease; }
.connected-chats > summary::-webkit-details-marker { display: none; }
.connected-chats > summary::marker { content: ''; }
.connected-chats > summary .archive-disclosure-chevron { display: none; }
.connected-chats > summary::after { content: ''; width: 8px; height: 8px; flex: none; margin-left: auto; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .18s ease; }
.connected-chats[open] > summary::after { transform: rotate(225deg) translateY(-2px); }
.connected-chats > summary:hover { background: var(--hover); }
.connected-chats > .connection-card { margin: 4px 12px 12px; }

.workspace-header { display: grid; grid-template-columns: 36px minmax(0,1fr) 36px; gap: 8px; }
.workspace-header > span:last-child { display: block; width: 36px; }
.workspace-header h2 { min-width: 0; margin: 0; text-align: center; font-size: 16px; line-height: 1.2; overflow-wrap: anywhere; }
#workspace-panel { width: min(460px, 100vw); }
#workspace-panel:has(.sc-select-trigger[data-state="open"]) { pointer-events: auto; }
@media (max-width: 700px) { #workspace-panel { width: 100%; } }
#workspace-close { display: grid; flex: none; place-items: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: var(--hover); font-size: 0 !important; transition: background-color .18s ease, transform .18s ease; }
#workspace-close::before { content: ''; width: 20px; height: 20px; background: currentColor; transform: translateY(3px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 5-7 7 7 7' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m15 5-7 7 7 7' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
#workspace-close:hover { background: color-mix(in srgb, var(--blue) 14%, var(--hover)); }
#workspace-close:active { transform: scale(.94); }

body.chat-unselected .chat-header, body.chat-unselected .chat-source-strip,
body.chat-unselected .archive-footer, body.chat-unselected #to-bottom { display: none !important; }
body.chat-unselected #messages { display: grid; flex: 1; place-items: center; }
.no-chat-prompt { max-width: 310px; padding: 32px; border-radius: 20px; background: color-mix(in srgb, var(--surface) 90%, transparent); text-align: center; box-shadow: 0 10px 36px #00000012; }
.no-chat-symbol { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 16px; border-radius: 15px; background: color-mix(in srgb, var(--blue) 12%, var(--surface)); color: var(--blue); font-size: 23px; }
.no-chat-symbol svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.no-chat-prompt h2 { margin: 0 0 7px; font-size: 20px; }
.no-chat-prompt p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
@media (max-width: 700px) {
  #back.icon.mobile-back { width: 40px; height: 40px; justify-content: center; }
  body.chat-unselected.show-list .conversation { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  #back, #lightbox .media-viewer-nav, #workspace-close, .profile-switcher,
  .profile-switcher .profile-chevron, .connected-chats > summary,
  .connected-chats > summary::after { transition-duration: 1ms; }
}