/* Tool gallery and tool-detail dialog. Used by the
 * lite (MCP) deployment. */
.tool-gallery-app {
 min-height: 100vh;
 width: 100%;
 display: flex;
 flex-direction: column;
 background:
  radial-gradient(
   1200px 480px at 10% -10%,
   color-mix(
    in srgb,
    var(--primary) 12%,
    transparent
   ),
   transparent 60%
  ),
  linear-gradient(
   180deg,
   var(--muted) 0%,
   var(--background) 42%
  );
}

.tool-gallery-header {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 gap: 1rem;
 padding: 1.25rem 1.5rem 1rem;
 border-bottom: 1px solid var(--border);
 background: color-mix(
  in srgb,
  var(--card) 88%,
  transparent
 );
 backdrop-filter: blur(8px);
 position: sticky;
 top: 0;
 z-index: 5;
}

.tool-gallery-main {
 flex: 1;
 padding: 1.25rem 1.5rem 2rem;
 width: 100%;
 max-width: none;
 box-sizing: border-box;
}

.tool-gallery-toolbar {
 align-items: center;
}

.tool-gallery-table {
 width: 100%;
 overflow: auto;
 background: var(--card);
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
}

.tool-gallery-table .table-wrap {
 max-width: none;
}

.tool-gallery-table .table {
 width: 100%;
}

@media (max-width: 720px) {
 .tool-gallery-header {
  flex-direction: column;
  padding: 1rem;
 }

 .tool-gallery-main {
  padding: 1rem;
 }
}

.tool-detail-dialog {
 max-width: 42rem;
 max-height: 85vh;
 overflow-y: auto;
}

.tool-detail-heading {
 margin: 0;
 font-size: 13px;
 font-weight: 600;
 color: var(--muted-foreground);
 text-transform: uppercase;
 letter-spacing: 0.04em;
}

.tool-detail-params {
 display: flex;
 flex-direction: column;
 border: 1px solid var(--border);
 border-radius: var(--radius-md);
 overflow: hidden;
}

.tool-detail-params-row {
 display: grid;
 grid-template-columns: 11rem 9rem 5.5rem 1fr;
 gap: 8px;
 padding: 8px 10px;
 font-size: 13px;
 border-bottom: 1px solid var(--border);
}

.tool-detail-params-row:last-child {
 border-bottom: 0;
}

.tool-detail-params-head {
 background: var(--muted);
 font-size: 12px;
 font-weight: 600;
 color: var(--muted-foreground);
}

.tool-detail-params-row code {
 font-size: 12px;
 font-family:
  ui-monospace, SFMono-Regular, Menlo,
  Monaco, Consolas, monospace;
}

@media (max-width: 720px) {
 .tool-detail-params-row {
  grid-template-columns: 1fr;
  gap: 2px;
 }

 .tool-detail-params-head {
  display: none;
 }
}