/* APORIA — lab analysis: viewers (hex/table/text/chat) + question widgets. */

.modal-analysis .modal-body { display: flex; flex-direction: column; gap: 14px; }
.technique {
  background: rgba(62, 230, 255, .05);
  box-shadow: inset 4px 0 0 var(--cyan), inset 0 0 0 1px rgba(62, 230, 255, .25);
  padding: 10px 14px;
}
.technique summary { cursor: pointer; display: flex; gap: 10px; align-items: center; font-weight: 800; list-style: none; }
.technique summary::-webkit-details-marker { display: none; }
.technique summary::after { content: "▾"; margin-left: auto; color: var(--cyan); }
.technique:not([open]) summary::after { content: "▸"; }
.technique p { margin: 8px 0 2px; font-size: 15px; line-height: 1.55; }
.tech-tag { font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; padding: 2px 6px; color: var(--cyan-ink); background: var(--cyan); }

.analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  gap: 16px;
  align-items: start;
  min-height: 0;
}
.viewer-pane { min-width: 0; }
.q-pane { display: grid; gap: 12px; align-content: start; }
.q-kicker { display: flex; justify-content: space-between; font-size: 12px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; color: var(--yellow); }
.q-mode { color: var(--ink-faint); }
.q-prompt { font-size: 16px; font-weight: 800; margin: 0; }
.q-actions { display: flex; justify-content: flex-end; gap: 10px; }
.q-submit { width: 100%; }
.q-feedback.shake { animation: shake .32s steps(4); }
.q-feedback .feedback, .q-result .resolution { margin-top: 0; }

.attempts { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-dim); flex-wrap: wrap; }
.attempt-pips { list-style: none; margin: 0; padding: 0; display: flex; gap: 5px; }
.attempt-pips li { width: 14px; height: 14px; background: #050913; box-shadow: inset 0 0 0 2px var(--line-hi); }
.attempt-pips li.is-current { background: var(--cyan); box-shadow: inset 0 -3px 0 var(--cyan-2); animation: blink 1s steps(2) infinite; }
.attempt-pips li.is-used { background: var(--red); box-shadow: inset 0 -3px 0 var(--red-2); }
.attempt-pips li.is-right { background: var(--green); box-shadow: inset 0 -3px 0 var(--green-2); }
.attempt-worth { margin-left: auto; color: var(--yellow); font-weight: 800; }

.resolution { padding: 14px; animation: pop-in .25s steps(4); display: grid; gap: 4px; }
.resolution.is-good { background: rgba(69, 224, 138, .08); box-shadow: inset 0 0 0 2px var(--green); }
.resolution.is-bad { background: rgba(255, 77, 94, .07); box-shadow: inset 0 0 0 2px var(--red); }
.resolution-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 6px; }
.resolution-title { font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.resolution.is-good .resolution-title { color: var(--green); }
.resolution.is-bad .resolution-title { color: var(--red); }
.resolution .note-card { margin-top: 8px; }
.resolution .q-actions { margin-top: 10px; }

.sel-info { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-dim); }
.sel-glyph { color: var(--yellow); font-size: 18px; }
.sel-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 8px; font-weight: 800; }
.sel-count { color: var(--yellow); font-size: 18px; }

/* ── viewer chrome ────────────────────────────────────────────────────── */
.viewer {
  background: #050913;
  box-shadow: inset 0 0 0 2px var(--line), var(--notch2), 4px 5px 0 rgba(0, 0, 0, .45);
  min-width: 0;
}
.viewer-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  font-size: 13px;
  background: var(--bg3);
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -3px 0 rgba(0, 0, 0, .3);
}
.viewer-dots { display: flex; gap: 4px; }
.viewer-dots i { width: 8px; height: 8px; background: var(--red); }
.viewer-dots i:nth-child(2) { background: var(--yellow); }
.viewer-dots i:nth-child(3) { background: var(--green); }
.viewer-title { font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.viewer-meta { color: var(--ink-faint); white-space: nowrap; }

/* hex */
.hex-scroll { overflow: auto; max-height: 52vh; padding: 10px 12px; }
.hex-grid { font-size: 14px; line-height: 1.6; width: max-content; }
.hex-row { display: flex; gap: 18px; white-space: pre; }
.hex-head { color: var(--ink-faint); font-size: 12px; margin-bottom: 4px; box-shadow: 0 2px 0 var(--line); padding-bottom: 2px; }
.hex-off { color: var(--cyan-2); width: 9ch; flex: none; }
.hex-bytes { display: grid; grid-template-columns: repeat(8, 2ch) 1ch repeat(8, 2ch); column-gap: .7ch; }
.hex-bytes > b:nth-child(8) { margin-right: 1ch; }
.hex-bytes { display: flex; gap: .6ch; }
.hex-bytes b { font-weight: 400; width: 2ch; text-align: center; color: var(--ink); cursor: crosshair; }
.hex-bytes b:nth-child(8) { margin-right: .9ch; }
.hex-bytes b.is-zero { color: var(--ink-faint); }
.hex-ascii { display: flex; color: var(--yellow); padding-left: 10px; box-shadow: -2px 0 0 var(--line); }
.hex-ascii i { font-style: normal; width: 1ch; text-align: center; cursor: crosshair; }
.hex-ascii i.is-np { color: var(--ink-faint); }
.hex-head .hex-bytes b { color: var(--ink-faint); cursor: default; }
.hex-head .hex-ascii { color: var(--ink-faint); }
.hex-bytes b.is-hot, .hex-ascii i.is-hot { background: var(--cyan); color: var(--cyan-ink); }
.hex-inspector {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 8px 12px;
  font-size: 13px;
  box-shadow: inset 0 2px 0 var(--line);
  color: var(--ink);
  min-height: 2.4em;
}

/* table */
.tbl-wrap { overflow: auto; max-height: 52vh; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.data-table.is-mono { font-family: var(--font); }
.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 8px 10px;
  text-align: left;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cyan);
  background: var(--bg3);
  box-shadow: inset 0 -2px 0 var(--line-hi);
}
.data-table td { padding: 7px 10px; white-space: nowrap; box-shadow: inset 0 -1px 0 rgba(42, 58, 99, .6); }
.data-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .025); }
.data-table .rownum { color: var(--ink-faint); width: 1%; text-align: right; }
.data-table .sel-col { width: 1%; text-align: center; color: var(--ink-faint); }
.viewer-table .data-table td { white-space: pre-wrap; }
.viewer-table .data-table.is-mono td { white-space: pre; }
tr.is-selectable { cursor: pointer; }
tr.is-selectable:hover td { background: rgba(62, 230, 255, .08); }
tr.is-selected td { background: rgba(255, 210, 63, .16) !important; color: var(--ink); }
tr.is-selected td:first-child { box-shadow: inset 4px 0 0 var(--yellow); }
tr.is-selected .sel-box { color: var(--yellow); }
tr.is-answer td { background: rgba(69, 224, 138, .16) !important; }
tr.is-answer td:first-child { box-shadow: inset 4px 0 0 var(--green); }
tr.is-answer .sel-box { color: var(--green); }
tr.is-miss td { background: rgba(255, 77, 94, .14) !important; }
tr.is-miss .sel-box { color: var(--red); }
tr.is-selectable:focus-visible { outline: 3px dashed var(--yellow); outline-offset: -3px; }
.is-locked tr.is-selectable { cursor: default; }

/* text */
.code-scroll { overflow: auto; max-height: 52vh; padding: 6px 0; }
.code-lines { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.6; }
.code-line { display: flex; gap: 0; padding: 1px 12px 1px 0; }
.code-line .ln { width: 4ch; flex: none; padding-right: 1ch; text-align: right; color: var(--ink-faint); box-shadow: inset -2px 0 0 var(--line); margin-right: 1.2ch; user-select: none; }
.code-line .code { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); }
.code-line .sel-box { width: 2.2ch; flex: none; text-align: center; color: var(--ink-faint); }
.code-line.is-selectable { cursor: pointer; }
.code-line.is-selectable:hover { background: rgba(62, 230, 255, .08); }
.code-line.is-selected { background: rgba(255, 210, 63, .16); box-shadow: inset 4px 0 0 var(--yellow); }
.code-line.is-selected .sel-box { color: var(--yellow); }
.code-line.is-answer { background: rgba(69, 224, 138, .16); box-shadow: inset 4px 0 0 var(--green); }
.code-line.is-answer .sel-box { color: var(--green); }
.code-line.is-miss { background: rgba(255, 77, 94, .14); box-shadow: inset 4px 0 0 var(--red); }
.code-line:focus-visible { outline: 3px dashed var(--yellow); outline-offset: -3px; }
.is-locked .code-line.is-selectable { cursor: default; }

/* chat */
.viewer-chat { background: transparent; box-shadow: none; display: grid; place-items: center; padding: 4px 0 8px; }
.phone {
  position: relative;
  width: min(380px, 100%);
  padding: 26px 12px 16px;
  background: #11151f;
  box-shadow: inset 0 0 0 4px #2b3243, inset 0 0 0 6px #05070c, var(--notch), 6px 8px 0 rgba(0, 0, 0, .5);
}
.phone-notch { position: absolute; top: 9px; left: 50%; width: 70px; height: 8px; margin-left: -35px; background: #05070c; }
.phone-status { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .14em; color: var(--ink-faint); padding: 0 6px 6px; }
.phone-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px;
  background: #1a2133;
  box-shadow: inset 0 -2px 0 #2b3243;
}
.phone-app { font-weight: 900; color: var(--cyan); letter-spacing: .1em; text-transform: uppercase; font-size: 14px; }
.phone-owner { font-size: 12px; color: var(--ink-dim); }
.phone-msgs {
  display: grid;
  gap: 10px;
  padding: 14px 10px;
  max-height: 46vh;
  overflow: auto;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .015) 0 8px, transparent 8px 16px),
    #0b0f18;
}
.msg { display: flex; }
.msg.is-out { justify-content: flex-end; }
.bubble {
  position: relative;
  max-width: 80%;
  padding: 8px 11px 6px;
  font-size: 14px;
  background: #273049;
  color: var(--ink);
  clip-path: polygon(0 4px, 4px 4px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25);
}
.msg.is-out .bubble { background: #1677a0; color: #f2fbff; }
.bubble-from { font-size: 12px; font-weight: 900; color: var(--yellow); margin-bottom: 2px; }
.bubble-text { overflow-wrap: anywhere; }
.bubble-meta { display: flex; gap: 6px; justify-content: flex-end; align-items: center; font-size: 11px; opacity: .75; margin-top: 3px; }
.bubble.is-selectable { cursor: pointer; }
.bubble.is-selectable:hover { filter: brightness(1.18); }
.bubble.is-selected { background: var(--yellow) !important; color: var(--yellow-ink) !important; }
.bubble.is-selected .bubble-from { color: var(--yellow-ink); }
.bubble.is-answer { background: var(--green) !important; color: #021a0c !important; }
.bubble.is-answer .bubble-from { color: #021a0c; }
.bubble.is-miss { background: var(--red) !important; color: #1b0306 !important; }
.bubble:focus-visible { outline: 3px dashed var(--yellow); outline-offset: -3px; }
.bubble .sel-box { font-weight: 900; }
.is-locked .bubble.is-selectable { cursor: default; filter: none; }

/* order */
.order-widget { display: grid; gap: 10px; }
.order-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 8px;
  background: var(--bg2);
  box-shadow: inset 0 0 0 2px var(--line), inset 0 -3px 0 rgba(0, 0, 0, .3), var(--notch2);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.order-item:hover { box-shadow: inset 0 0 0 2px var(--line-hi), inset 0 -3px 0 rgba(0, 0, 0, .3), var(--notch2); }
.order-item.is-dragging { cursor: grabbing; background: var(--bg4); box-shadow: inset 0 0 0 2px var(--yellow), var(--notch2), 5px 6px 0 rgba(0, 0, 0, .5); transform: translate(-3px, -2px); position: relative; z-index: 2; }
.order-item.moved { animation: pop-in .18s steps(3); }
.order-grip { color: var(--ink-faint); font-size: 20px; padding: 0 2px; touch-action: none; cursor: grab; }
.order-num {
  width: 26px; height: 26px;
  display: grid;
  place-items: center;
  flex: none;
  font-weight: 900;
  font-size: 13px;
  color: var(--yellow-ink);
  background: var(--yellow);
  box-shadow: inset 0 -3px 0 var(--yellow-2);
}
.order-text { flex: 1; min-width: 0; font-size: 14px; }
.order-ctrl { display: flex; gap: 4px; }
.order-btn {
  width: 34px; height: 34px;
  border: 0;
  font-weight: 900;
  font-size: 16px;
  cursor: pointer;
  color: var(--ink);
  background: var(--bg4);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .4), var(--notch2);
}
.order-btn:hover:not(:disabled) { background: var(--cyan); color: var(--cyan-ink); }
.order-btn:disabled { opacity: .3; cursor: default; }
.order-list.is-locked .order-item { cursor: default; }
.order-list.is-locked .order-grip { visibility: hidden; }
.order-item.is-answer { box-shadow: inset 0 0 0 2px var(--green), var(--notch2); }
.order-item.is-answer .order-num { background: var(--green); color: #021a0c; box-shadow: inset 0 -3px 0 var(--green-2); }
.order-list.shake { animation: shake .32s steps(4); }

@media (max-width: 900px) {
  .analysis-grid { grid-template-columns: 1fr; }
  .hex-scroll, .tbl-wrap, .code-scroll { max-height: none; }
  .phone-msgs { max-height: none; }
}
@media (max-height: 520px) {
  .hex-scroll, .tbl-wrap, .code-scroll, .phone-msgs { max-height: none; }
  .technique p { font-size: 14px; }
}
@media (max-width: 520px) {
  .technique summary .dim { display: none; }
}