/* The web version: the server picker, and small screens. */
a.brand { color: inherit; text-decoration: none; }
.picker .modal-body { gap: 14px; }
.srv-list { display: grid; gap: 8px; }
.srv { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--panel); }
.srv:hover:not(:disabled) { border-color: var(--gold); }
.srv:disabled { opacity: .55; cursor: not-allowed; }
.srv > .ico { color: var(--gold); width: 22px; height: 22px; }
.srv-main { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.srv-main b, .srv-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.srv-main small { color: var(--muted); font-size: 12.5px; }
.srv-tags { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.srv-tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 99px; background: var(--panel-2); color: var(--muted); }
.srv-tag.off { background: var(--red-soft); color: var(--red); }
.srv-empty { display: grid; gap: 12px; justify-items: start; }
.side-toggle { display: none; }
/* Keep clear of the usage button at the bottom right. */
body > .notice, body > .error { bottom: 74px !important; }
@media (min-width: 761px) and (max-width: 1300px) { .composer-wrap { padding-right: 76px; } }

@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: min(290px, 84vw); z-index: 45; transform: translateX(-102%); transition: transform .2s; box-shadow: var(--shadow); }
  .sidebar.open { transform: none; }
  .side-toggle { display: grid; place-items: center; position: fixed; left: 10px; top: 9px; z-index: 44; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); }
  .topbar { padding-left: 56px; }
  .welcome { padding: 60px 16px 20px; }
  .composer-wrap { padding: 8px 12px 12px; }
  .hint { display: none; }
  .usage-btn { bottom: 86px; right: 12px; width: 40px; height: 40px; }
  .usage-panel { right: 12px; bottom: 134px; }
  body > .notice, body > .error { bottom: 134px !important; left: 12px; right: 12px !important; max-width: none !important; }
  .token-bar .tb-text { display: none; }
}