/* Sequence Query Panel — BiosphereAtlas */

.query-tab {
  position: fixed; left: 0; top: 50%; transform: translateY(-50%);
  width: 26px; height: 94px;
  background: rgba(10,10,18,0.92); border: 1px solid #1c1c2c; border-left: none;
  border-radius: 0 5px 5px 0; cursor: pointer; z-index: 35;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: border-color 0.2s, background 0.2s; user-select: none;
}
.query-tab:hover { border-color: #2a3050; background: rgba(14,14,26,0.95); }
.query-tab.active { border-color: #3355aa; background: rgba(12,14,28,0.95); }
.query-tab-icon { font-size: 10px; color: #5570a0; transition: color 0.2s; line-height: 1; }
.query-tab:hover .query-tab-icon { color: #8099cc; }
.query-tab.active .query-tab-icon { color: #88aaff; }
.query-tab-label {
  writing-mode: vertical-rl; font-size: 7px; letter-spacing: 2.5px;
  text-transform: uppercase; color: #4a5878; transition: color 0.2s;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.query-tab:hover .query-tab-label { color: #7788aa; }
.query-tab.active .query-tab-label { color: #7799cc; }
.query-tab-count {
  position: absolute; top: 4px; right: 3px;
  font-size: 7px; font-weight: 600; color: #88aaff;
  background: rgba(35,55,120,0.5); border-radius: 7px; padding: 1px 4px;
  line-height: 1.2; display: none; font-family: -apple-system, sans-serif;
}
.query-tab-count.visible { display: block; }

/* Panel */
.query-panel {
  position: fixed; left: 0; top: 0; bottom: 0; width: 290px;
  background: rgba(7,7,12,0.97); border-right: 1px solid #1e1e34; z-index: 30;
  transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1);
  display: flex; flex-direction: column; padding: 26px 20px 20px; overflow: hidden;
  backdrop-filter: blur(14px);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.query-panel.open { transform: translateX(0); }

.qp-title { color: #a0b8e8; font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 6px; }
.qp-desc { color: #5a7090; font-size: 9px; line-height: 1.7; margin-bottom: 18px; }

.qp-textarea {
  width: 100%; background: #0a0a16; border: 1px solid #202440; color: #80d080;
  font-family: 'Monaco','Menlo','Consolas',monospace; font-size: 10px;
  padding: 10px 11px; border-radius: 4px; resize: vertical; outline: none;
  line-height: 1.55; margin-bottom: 9px; min-height: 82px; max-height: 200px;
  transition: border-color 0.15s;
}
.qp-textarea:focus { border-color: #3050a0; }
.qp-textarea::placeholder { color: #2e3a50; }

.qp-upload { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; cursor: pointer; }
.qp-upload input[type="file"] { display: none; }
.qp-upload-btn {
  padding: 4px 9px; background: #0c0c1a; border: 1px solid #202440; color: #5a6a88;
  border-radius: 3px; font-size: 9px; letter-spacing: 0.8px; cursor: pointer;
  transition: all 0.15s; white-space: nowrap; font-family: inherit;
}
.qp-upload-btn:hover { border-color: #3050a0; color: #8aa0cc; }
.qp-upload-name { color: #3a4a60; font-size: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

.qp-submit {
  width: 100%; padding: 9px; background: #0e1630; border: 1px solid #253870; color: #7898dd;
  border-radius: 4px; font-size: 10px; letter-spacing: 2px; cursor: pointer;
  transition: all 0.18s; margin-bottom: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: inherit; text-transform: uppercase;
}
.qp-submit:hover:not(:disabled) { background: #142044; border-color: #3a5599; color: #99bbee; }
.qp-submit:disabled { opacity: 0.3; cursor: not-allowed; }

.qp-spinner {
  display: inline-block; width: 11px; height: 11px;
  border: 1.5px solid #1e3060; border-top-color: #7898dd; border-radius: 50%;
  animation: qp-spin 0.7s linear infinite; margin-right: 8px;
}
@keyframes qp-spin { to { transform: rotate(360deg); } }

.qp-error {
  color: #dd6050; font-size: 9px; padding: 7px 10px;
  background: #1a0c08; border: 1px solid #401815; border-radius: 3px;
  margin-bottom: 10px; display: none; line-height: 1.5;
}
.qp-error.visible { display: block; }

.qp-samples { border-top: 1px solid #161a28; padding-top: 12px; margin-bottom: 14px; }
.qp-samples-label { font-size: 8px; letter-spacing: 2px; color: #4a5a70; text-transform: uppercase; margin-bottom: 8px; }
.qp-samples-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.qp-sample-btn {
  background: #0a0a14; border: 1px solid #1a1e30; border-radius: 3px; padding: 6px 8px;
  cursor: pointer; text-align: left; transition: border-color 0.15s, color 0.15s;
  font-family: inherit; font-size: 9px; letter-spacing: 0.3px; color: #5a6a88; line-height: 1.3;
}
.qp-sample-btn:hover { border-color: #2a3858; color: #88aacc; }

.qp-results { flex: 1; overflow-y: auto; padding-right: 2px; }
.qp-results::-webkit-scrollbar { width: 3px; }
.qp-results::-webkit-scrollbar-thumb { background: #2a2a40; border-radius: 2px; }
.qp-results-label { font-size: 8px; letter-spacing: 2px; color: #4a5a70; text-transform: uppercase; margin-bottom: 8px; }

/* Result cards */
.qr-card {
  background: #0c0c1e; border: 1px solid #1a1e38; border-radius: 4px;
  padding: 11px 12px; margin-bottom: 8px; animation: qr-in 0.35s ease;
}
@keyframes qr-in { from { opacity: 0; transform: translateY(5px); } }
.qr-header { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; }
.qr-domain { font-size: 11px; font-weight: 500; }
.qr-latency {
  font-size: 8px; font-family: 'Monaco','Menlo',monospace;
  color: #50d890; background: rgba(40,100,60,0.2);
  padding: 1px 5px; border-radius: 3px; letter-spacing: 0.3px;
}
.qr-label { font-size: 8px; letter-spacing: 0.8px; color: #4a5a70; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qr-remove { background: none; border: none; color: #3a4460; cursor: pointer; font-size: 12px; line-height: 1; padding: 0 1px; transition: color 0.15s; font-family: inherit; }
.qr-remove:hover { color: #dd6050; }
.qr-probs {
  display: flex; gap: 8px; margin-bottom: 5px;
}
.qr-prob {
  font-size: 8px; font-family: 'Monaco','Menlo',monospace;
  letter-spacing: 0.3px;
}
.qr-taxonomy { font-size: 9px; color: #5570a0; margin-bottom: 5px; line-height: 1.5; }
.qr-coords { color: #3e5878; font-size: 9px; font-family: 'Monaco','Menlo',monospace; margin-bottom: 7px; letter-spacing: 0.3px; }
.qr-conf { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.qr-conf-bar { flex: 1; height: 2px; background: #141424; border-radius: 2px; overflow: hidden; }
.qr-conf-fill { height: 100%; border-radius: 2px; }
.qr-conf-text { font-size: 8px; color: #4a5a70; white-space: nowrap; }
.qr-actions {
  display: flex; gap: 5px; margin-top: 8px;
}
.qr-fly, .qr-share {
  flex: 1; padding: 5px 0;
  background: none; border: 1px solid #1a1e38; border-radius: 3px;
  color: #3e5878; font-size: 7px; letter-spacing: 2px; text-transform: uppercase;
  cursor: pointer; transition: color 0.15s, border-color 0.15s; font-family: inherit;
  text-align: center;
}
.qr-fly:hover { color: #e8c547; border-color: #3a3520; }
.qr-share:hover { color: #7898dd; border-color: #253870; }

@media (max-width: 768px) {
  .query-panel, .query-tab { display: none !important; }
}