/* ============================================================
   QUERYBOX — INDEX PAGE STYLES (Google Search Layout)
   networktoolkit.io
   Depends on: tokens.css, base.css
   ============================================================ */


/* ----------------------------------------------------------
   PAGE WRAPPER
---------------------------------------------------------- */
.page-body {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
}


/* ----------------------------------------------------------
   PROTOCOL REFERENCE PANEL
---------------------------------------------------------- */
.proto-panel {
  background:    var(--bg-surface);
  border-bottom: 1px solid var(--border-default);
  overflow:      hidden;
  max-height:    0;
  transition:    max-height var(--duration-slow) var(--ease-default);
}

.proto-panel.is-open { max-height: 380px; }

.proto-panel__inner {
  padding:    14px 22px 16px;
  max-height: 340px;
  overflow-y: auto;
}

.proto-panel__title {
  font-size:      10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--text-ghost);
  margin-bottom:  12px;
}

.proto-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   6px;
}

@media (max-width: 600px) {
  .proto-grid { grid-template-columns: 1fr; }
}

.proto-card {
  background:    var(--bg-elevated);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding:       9px 11px;
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  cursor:        pointer;
}

.proto-card__name  { font-size: var(--text-sm); font-weight: var(--weight-semibold); min-width: 140px; line-height: 1.35; }
.proto-card__desc  { font-size: var(--text-xs); color: var(--text-secondary); flex: 1; line-height: 1.4; }
.proto-card__cat   { font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-ghost); flex-shrink: 0; }


/* ----------------------------------------------------------
   SEARCH PAGE — Google-style centered layout
---------------------------------------------------------- */
.search-page {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  flex:           1;
  padding:        5vh var(--space-5) var(--space-8);
  gap:            28px;
}

.search-center {
  width:          100%;
  max-width:      700px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--space-4);
}


/* ----------------------------------------------------------
   LOGO
---------------------------------------------------------- */
.logo-block {
  text-align:    center;
  margin-bottom: var(--space-2);
}

.logo-text {
  font-size:      76px;
  font-weight:    var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height:    1;
  color:          var(--text-primary);
  font-family:    var(--font-mono);
}

.logo-brand { color: var(--accent-cyan); }

.logo-tagline {
  font-size:      9px;
  color:          var(--text-tertiary);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-top:     var(--space-2);
  max-width:      none;
}

@media (max-width: 600px) {
  .logo-text { font-size: 48px; }
}


/* ----------------------------------------------------------
   SEQUENCE GUIDE — centered
---------------------------------------------------------- */
.seq-row {
  justify-content: center;
  gap:             0;
}


/* ----------------------------------------------------------
   SEARCH BAR
   - Pill shape
   - No glow on focus — darken background instead
   - Animated autocomplete dropdown
---------------------------------------------------------- */
.search-outer {
  width:    100%;
  position: relative;
}

/* Moderate radius, badge spacing, no focus glow */
.search-center .input-container {
  border-radius: 12px;
  min-height:    52px;
  padding:       10px 12px 10px 22px;
  gap:           8px;
  transition:    background var(--duration-base) var(--ease-default),
                 border-color var(--duration-base) var(--ease-default),
                 border-bottom-left-radius 150ms ease,
                 border-bottom-right-radius 150ms ease;
}

/* Flatten only bottom corners when dropdown is open; top corners locked */
.search-center .input-container.ac-open {
  border-top-left-radius:     12px;
  border-top-right-radius:    12px;
  border-bottom-left-radius:  0;
  border-bottom-right-radius: 0;
  border-bottom-color:        transparent;
}

/* Focus: darken, no border glow */
.search-center .input-container:focus-within {
  background:   var(--bg-elevated);
  border-color: var(--border-default);
  box-shadow:   none;
}

/* Kill the global :focus-visible ring on the text input */
#search-input:focus-visible {
  box-shadow:    none;
  border-radius: 0;
}

/* Kill the global :focus-visible ring on the run button */
#run-btn:focus-visible {
  box-shadow: none;
}

/* Google-style connected autocomplete dropdown */
.search-center .ac-drop {
  display:        block;
  visibility:     hidden;
  opacity:        0;
  pointer-events: none;
  top:            100%;
  background:     var(--bg-elevated);
  border:         1px solid var(--border-default);
  border-top:     none;
  border-radius:  0 0 20px 20px;
  box-shadow:     0 12px 28px rgba(0,0,0,0.35);
  transition:     opacity 180ms ease,
                  visibility 0ms 180ms;
}

.search-center .ac-drop.is-open {
  visibility:     visible;
  opacity:        1;
  pointer-events: auto;
  transition:     opacity 180ms ease;
}

/* Run button — keyboard key style */
#run-btn {
  background:     var(--bg-elevated);
  border:         1px solid var(--border-strong);
  border-radius:  6px;
  color:          var(--text-ghost);
  padding:        5px 11px;
  font-size:      16px;
  letter-spacing: 0;
  text-transform: none;
  font-weight:    normal;
  box-shadow:     0 2px 0 rgba(0,0,0,0.4);
  line-height:    1;
}

#run-btn:not(:disabled) {
  background:   var(--accent-green);
  border-color: var(--accent-green);
  color:        var(--text-inverse);
  box-shadow:   0 2px 0 rgba(0,0,0,0.2);
}
#run-btn:not(:disabled):hover {
  background:   #33ffb0;
  border-color: #33ffb0;
  box-shadow:   0 2px 0 rgba(0,0,0,0.15), 0 0 10px rgba(0, 255, 148, 0.15);
}


/* ----------------------------------------------------------
   RESULTS AREA
---------------------------------------------------------- */
.results-area {
  width:     100%;
  max-width: 760px;
  padding:   0 var(--space-5) var(--space-8);
}


/* ----------------------------------------------------------
   HISTORY TABLE — matches terminal visual style
---------------------------------------------------------- */
.hist-panel {
  border:     none;
  background: transparent;
  overflow:   visible;
  margin-top: 12px;
  display:    none;
}

.hist-panel.is-open { display: block; }

/* Terminal-style topbar for history */
.hist-panel__head {
  display:       flex;
  align-items:   center;
  gap:           var(--space-2);
  padding:       7px 12px;
  background:    var(--bg-elevated);
  border:        1px solid var(--border-default);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-bottom: none;
}

.hist-panel__label {
  font-size:      10px;
  color:          var(--text-tertiary);
  flex:           1;
  margin-left:    4px;
  letter-spacing: 0.05em;
}

/* Terminal-style body for history */
.hist-panel__body {
  background:    var(--bg-recessed);
  border:        1px solid var(--border-default);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow:      hidden;
}

/* Collapsed state */
.hist-panel.is-collapsed .hist-panel__body  { display: none; }
.hist-panel.is-collapsed .hist-panel__head  { border-radius: var(--radius-md); }

.hist-table {
  width:           100%;
  border-collapse: collapse;
  font-size:       var(--text-xs);
}

.hist-table thead th {
  text-align:     left;
  padding:        6px 12px;
  font-size:      10px;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--text-ghost);
  border-bottom:  1px solid var(--border-default);
  white-space:    nowrap;
  font-weight:    var(--weight-regular);
}

.hist-cell {
  padding:       7px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  color:         var(--text-secondary);
  vertical-align: middle;
}

.hist-row:last-child .hist-cell { border-bottom: none; }
.hist-row:hover .hist-cell      { background: var(--bg-overlay); }

.hist-cell--time   { color: var(--text-ghost);     white-space: nowrap; width: 54px; }
.hist-cell--tool   { color: var(--accent-cyan);    font-weight: var(--weight-medium); width: 140px; }
.hist-cell--host   { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; max-width: 200px; white-space: nowrap; }
.hist-cell--status { text-align: center; width: 48px; }
.hist-cell--action { text-align: right; width: 36px; }

.hist-status--ok      { color: var(--accent-green); }
.hist-status--err     { color: var(--accent-red); }
.hist-status--pending { color: var(--text-ghost); }

.hist-panel__rerun {
  background:    none;
  border:        1px solid var(--border-default);
  color:         var(--text-ghost);
  font-family:   var(--font-mono);
  font-size:     10px;
  padding:       2px 6px;
  border-radius: var(--radius-sm);
  cursor:        pointer;
  transition:    all var(--duration-base);
}
.hist-panel__rerun:hover { color: var(--accent-cyan); border-color: rgba(0,212,255,0.3); }


/* ----------------------------------------------------------
   TERMINAL MINIMIZE (amber dot)
---------------------------------------------------------- */
.terminal-wrap.is-minimized .terminal-split { display: none; }
.terminal-wrap.is-minimized .terminal__topbar {
  border-radius: var(--radius-md);
  border-bottom: 1px solid var(--border-default);
}


/* ----------------------------------------------------------
   MULTI-NODE SPLIT LAYOUT
---------------------------------------------------------- */

.terminal-split {
  display: flex;
  height: 480px;
}

/* Override base.css max-height — height controlled by .terminal-split */
.terminal-split .terminal {
  max-height: none;
  min-height:  0;
  height:      100%;
  flex:        1;
  border-radius: 0;
  border:      none;
  border-top:  1px solid var(--border-subtle);
}

/* Sidebar */
.term-sidebar {
  width:        148px;
  flex-shrink:  0;
  background:   var(--bg-elevated);
  border-right: 1px solid var(--border-default);
  display:      flex;
  flex-direction: column;
  overflow:     hidden;
}

.tsb-all {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     6px 10px;
  font-family: var(--font-mono);
  font-size:   10px;
  font-weight: var(--weight-medium);
  color:       var(--text-secondary);
  cursor:      pointer;
  border-bottom: 1px solid var(--border-subtle);
  border-left:   2px solid transparent;
  transition:    background 80ms, color 80ms;
  user-select:   none;
}
.tsb-all:hover    { background: var(--bg-overlay); color: var(--text-primary); }
.tsb-all.is-active {
  color:       var(--accent-cyan);
  background:  var(--accent-cyan-tint);
  border-left-color: var(--accent-cyan);
}

.tsb-search-wrap {
  padding:      6px 8px;
  border-bottom: 1px solid var(--border-subtle);
}
.tsb-search {
  width:       100%;
  background:  var(--bg-overlay);
  border:      1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding:     4px 7px;
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--text-primary);
  outline:     none;
}
.tsb-search::placeholder { color: var(--text-ghost); }
.tsb-search:focus { border-color: rgba(0, 212, 255, 0.3); }

.tsb-list {
  flex:           1;
  overflow-y:     auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.05) transparent;
}
.tsb-list::-webkit-scrollbar       { width: 2px; }
.tsb-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.07); }

.tsb-node {
  display:     flex;
  align-items: center;
  gap:         6px;
  padding:     5px 10px;
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--text-secondary);
  cursor:      pointer;
  border-left: 2px solid transparent;
  transition:  background 80ms, color 80ms;
  white-space: nowrap;
  overflow:    hidden;
  animation:   tsb-slide 220ms ease both;
}
.tsb-node:hover    { background: var(--bg-overlay); color: var(--text-primary); }
.tsb-node.is-active {
  color:       var(--accent-cyan);
  background:  var(--accent-cyan-tint);
  border-left-color: var(--accent-cyan);
}
.tsb-node--hidden { display: none; }

@keyframes tsb-slide {
  from { opacity: 0; transform: translateX(-5px); }
  to   { opacity: 1; transform: translateX(0); }
}

.tsb-node-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.tsb-node-cnt   { font-size: 9px; color: var(--text-ghost); flex-shrink: 0; }

/* Sidebar status dots */
.tsb-dot {
  width:        6px;
  height:       6px;
  border-radius: var(--radius-pill);
  flex-shrink:  0;
}
.tsb-dot--live { background: var(--accent-green); box-shadow: 0 0 4px var(--accent-green-dim); animation: pulse-dot 1.2s ease-in-out infinite; }
.tsb-dot--ok   { background: var(--accent-green); box-shadow: 0 0 4px var(--accent-green-dim); }
.tsb-dot--err  { background: var(--accent-red);   box-shadow: 0 0 4px var(--accent-red-dim); }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}

.tsb-footer {
  padding:       6px 10px;
  border-top:    1px solid var(--border-subtle);
  font-family:   var(--font-mono);
  font-size:     9px;
  color:         var(--text-ghost);
  display:       flex;
  justify-content: space-between;
  flex-shrink:   0;
}

/* Main output pane */
.term-main {
  flex:      1;
  display:   flex;
  flex-direction: column;
  overflow:  hidden;
  min-width: 0;
}

.term-pane-hdr {
  padding:     5px 14px;
  background:  var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--text-tertiary);
  display:     flex;
  align-items: center;
  gap:         6px;
  min-height:  28px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}

/* Node output groups */
.ngrp {
  border-bottom: 1px solid var(--border-subtle);
}

.ngrp-hdr {
  display:     flex;
  align-items: center;
  gap:         4px;
  padding:     8px 14px 3px;
  font-family: var(--font-mono);
  font-size:   11px;
}

.ngrp-id { color: var(--text-secondary); letter-spacing: 0.02em; }

.ngrp-meta {
  margin-left: auto;
  display:     flex;
  align-items: center;
  gap:         3px;
  font-family: var(--font-mono);
  font-size:   10px;
  color:       var(--text-tertiary);
}

.ngrp-meta-sep { color: var(--text-ghost); margin: 0 2px; }

.ngrp-body {
  padding:     1px 14px 8px;
  font-family: var(--font-mono);
  font-size:   11px;
  line-height: 1.75;
}

@media (max-width: 600px) {
  .term-sidebar { display: none; }
  .terminal-split .terminal { border-top: none; }
}


/* ----------------------------------------------------------
   SITE FOOTER
---------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-surface);
}

.ip-info-bar {
  text-align:     center;
  padding:        6px var(--space-5) 8px;
  min-height:     22px;
}

.ip-info-text {
  font-size:      10px;
  font-family:    var(--font-mono);
  color:          var(--text-ghost);
  letter-spacing: 0.04em;
}