/* The sidebar owns its collapse control while it is visible. */
#sidebarCollapse,#sidebarPanelToggle { display:none; }

@media (min-width:761px) {
  #toggle { display:none; }
  #sidebarPanelToggle { display:grid; margin-left:0; }
  #sidebar { transition:width .22s ease, flex-basis .22s ease, padding .22s ease, opacity .16s ease; }
  #sidebar.open { width:0; flex-basis:0; padding-left:0; padding-right:0; overflow:hidden; opacity:0; border-right-width:0; pointer-events:none; }
  #sidebar.open ~ main #toggle { display:grid; }
}

#attachmentPreview { display:flex; align-items:center; gap:9px; margin:0 0 9px; padding:7px; border:1px solid #3d4661; border-radius:11px; background:#202637; color:#dfe4f4; }
#attachmentPreview img { width:46px; height:34px; object-fit:cover; border-radius:7px; border:1px solid #59627f; }
#attachmentPreview span { overflow:hidden; flex:1; font-size:11px; white-space:nowrap; text-overflow:ellipsis; }
#attachmentPreview button { padding:5px 7px; border-radius:7px; background:#30394f; color:#dfe4f4; font-size:11px; }

.usageSidebar { position:relative; margin:0 0 12px; }
.usageSidebar .usageShortcut { width:100%; margin:0; grid-template-columns:25px 1fr; }
.usageRefresh { position:absolute; top:34px; right:10px; width:28px; height:28px; transform:translateY(-50%); border-radius:8px; background:transparent; color:#c7c9df; font-size:16px; line-height:1; }
.usageRefresh:hover { background:#ffffff14; color:#fff; }
#sidebar #usagePanel { max-height:calc(100vh - 340px); margin:10px 0 0; padding:0 3px 2px; overflow-x:hidden; overflow-y:auto; border:0; background:transparent; scrollbar-width:thin; scrollbar-color:#8a7ce1 #11131c; }
#sidebar #usagePanel::-webkit-scrollbar { width:11px; }
#sidebar #usagePanel::-webkit-scrollbar-track { background:#11131c; border-radius:99px; }
#sidebar #usagePanel::-webkit-scrollbar-thumb { border:3px solid #11131c; border-radius:99px; background:linear-gradient(#8a7ce1,#5e75ce); }
#sidebar #usagePanel::-webkit-scrollbar-thumb:hover { background:#a193ff; }
#sidebar .usageCards { display:grid; grid-template-columns:1fr; gap:8px; margin:0; }
#sidebar .usageCard { padding:10px; border-radius:11px; }
#sidebar .usageCard h3 { margin-bottom:7px; font-size:12px; }
#sidebar .limit + .limit { margin-top:8px; }
#sidebar .usageUpdated { display:block; padding:7px 3px 1px; color:#81889f; font-size:10px; }
#sidebar .usageError { margin:7px 3px 0; font-size:11px; }