/* Full-window list. The connection table used to sit in the
 * centered lite page (max-width 56rem), which crushed a wide
 * row of client, scopes, dates, and actions. */
.mcp-connections-app {
 height: 100vh;
 height: 100dvh;
 max-height: 100vh;
 max-height: 100dvh;
 width: 100%;
 display: flex;
 flex-direction: column;
 min-height: 0;
 overflow: hidden;
 box-sizing: border-box;
 background: var(--shell-surface);
 /* viewport-fit=cover draws into the home indicator and
  * notch. The shell is exactly one viewport tall and does
  * not scroll, so the inset has to come out of this box or
  * the table's last row and sideways scrollbar stay trapped
  * underneath. */
 padding-right: env(
  safe-area-inset-right,
  0px
 );
 padding-bottom: env(
  safe-area-inset-bottom,
  0px
 );
 padding-left: env(
  safe-area-inset-left,
  0px
 );
}

.mcp-connections-header {
 flex: 0 0 auto;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 8px;
 padding: 16px 24px 14px;
 padding-top: max(
  16px,
  env(safe-area-inset-top, 0px)
 );
 border-bottom: 1px solid var(--border);
 background: var(--card);
}

.mcp-connections-header h1 {
 font-size: 2rem;
 line-height: 1.25;
 font-weight: 600;
}

.mcp-connections-lead {
 margin: 0;
 max-width: 76rem;
 font-size: 13px;
 line-height: 1.45;
}

.mcp-connections-main {
 flex: 1 1 auto;
 min-height: 0;
 display: flex;
 flex-direction: column;
 gap: 10px;
 padding: 12px 24px 16px;
 box-sizing: border-box;
}

.mcp-connections-meta {
 flex: 0 0 auto;
 display: flex;
 flex-direction: column;
 gap: 4px;
}

.mcp-connections-meta:empty {
 display: none;
}

.mcp-connections-count,
.mcp-connections-note {
 margin: 0;
 font-size: 13px;
}

.mcp-connections-table {
 flex: 1 1 auto;
 min-height: 0;
 min-width: 0;
 overflow: auto;
 width: 100%;
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
}

.mcp-connections-table.is-message {
 flex: 0 0 auto;
 overflow: visible;
 background: transparent;
 border: 0;
}

.mcp-connections-table .table-wrap {
 overflow: visible;
 max-width: none;
}

.mcp-connections-table .table {
 width: max-content;
 min-width: 100%;
 border-collapse: separate;
 border-spacing: 0;
}

.mcp-connections-table .table th {
 position: sticky;
 top: 0;
 z-index: 1;
 background: var(--card);
}

.mcp-connections-table
 td.mcp-connections-client {
 min-width: 14rem;
 max-width: 24rem;
 overflow-wrap: anywhere;
}

.mcp-connections-table
 td.mcp-connections-actions {
 white-space: nowrap;
 width: 1%;
}

.mcp-connections-table
 .mcp-connections-actions
 .row {
 gap: 8px;
 flex-wrap: nowrap;
}

.mcp-connections-table .skeleton-table {
 border: 0;
 border-radius: 0;
}

@media (max-width: 720px) {
 .mcp-connections-header,
 .mcp-connections-main {
  padding-left: 16px;
  padding-right: 16px;
 }

 .mcp-connections-header h1 {
  font-size: 1.5rem;
 }
}

.mcp-tools-dialog {
 max-width: 40rem;
}

.mcp-tools-host {
 min-height: 4.5rem;
}

.mcp-tool-category {
 margin: 14px 0 6px;
 font-size: 12px;
 font-weight: 600;
 letter-spacing: 0.02em;
 text-transform: uppercase;
 color: var(--muted-foreground);
}

.mcp-tool-category:first-child {
 margin-top: 0;
}

.mcp-tool-group {
 border: 1px solid var(--border);
 border-radius: 8px;
 background: var(--card);
}

.mcp-tool-group + .mcp-tool-group,
.mcp-tool-category + .mcp-tool-group {
 margin-top: 8px;
}

.mcp-tool-group > summary {
 display: flex;
 align-items: center;
 gap: 10px;
 padding: 8px 10px;
 cursor: pointer;
 list-style: none;
}

.mcp-tool-group
 > summary::-webkit-details-marker {
 display: none;
}

.mcp-tool-chevron {
 width: 0.75rem;
 color: var(--muted-foreground);
 transition: transform 0.15s ease;
}

.mcp-tool-group[open]
 > summary
 .mcp-tool-chevron {
 transform: rotate(90deg);
}

.mcp-tool-group-label {
 flex: 1;
 min-width: 0;
 font-size: 14px;
 font-weight: 500;
}

.mcp-tool-count {
 font-size: 12px;
 white-space: nowrap;
}

.mcp-tool-row {
 display: flex;
 align-items: flex-start;
 gap: 10px;
 padding: 8px 10px 8px 36px;
 border-top: 1px solid var(--border);
}

.mcp-tool-row.is-inactive {
 opacity: 0.55;
}

.mcp-tool-copy {
 min-width: 0;
 flex: 1;
}

.mcp-tool-name {
 font-size: 13px;
 font-weight: 500;
}

.mcp-tool-desc {
 margin-top: 2px;
 font-size: 12px;
 color: var(--muted-foreground);
 display: -webkit-box;
 -webkit-line-clamp: 2;
 -webkit-box-orient: vertical;
 overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
 .mcp-tool-chevron {
  transition: none;
 }
}