/* Dense portrait chrome + left-edge resonance drawer (r14)
   Touch rules: visual can be short; hit ≥44pt via padding/margin. No scrollbars. */

/* --- 1) Header denser --- */
.phone .top {
  padding: 0 10px !important;
  min-height: 32px !important;
  align-items: center !important;
}
.phone .top .sym-btn {
  min-height: 44px !important;
  padding: 0 6px 0 0 !important;
  margin: -6px 0 !important; /* visual short, hit 44 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.phone .top .sym {
  font-size: 15px !important;
  line-height: 1.05 !important;
  font-weight: 800;
}
.phone .top .sym-sub {
  font-size: 9px !important;
  margin-top: 0 !important;
  line-height: 1.1 !important;
}
.phone .top .px .p {
  font-size: 15px !important;
  line-height: 1.05 !important;
}
.phone .top .px .c {
  font-size: 10px !important;
  line-height: 1.1 !important;
}

/* --- 2) TF row denser (~30 visual) --- */
.phone .tf {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 2px !important;
  gap: 0 !important;
  align-items: center !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
}
.phone .tf::-webkit-scrollbar { display: none !important; height: 0 !important; }
.phone .tf button {
  min-height: 44px !important;
  height: 44px !important;
  padding: 0 8px !important;
  margin: -7px 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  flex: 1 0 auto;
  border-radius: 0 !important;
}
.phone .tf button.on {
  background: transparent !important;
  color: var(--text) !important;
  font-weight: 800 !important;
}

/* --- 3) Park resonance out of flow (Vue keeps updating it) --- */
#alert-block.hj-res-parked {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Chart eats freed vertical space; ops sinks */
.phone .chart-block {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
.phone .ops {
  flex-shrink: 0 !important;
}
.phone .ops:not(.hid) {
  /* keep usable; don't let panel steal chart forever */
  max-height: 46% !important;
}

/* --- 4) Left-edge rail (金山毒霸-style) --- */
#hj-res-rail {
  position: absolute;
  left: 0;
  top: 38%;
  z-index: 14;
  width: 44px;
  height: 72px;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
#hj-res-rail .pill {
  width: 9px;
  height: 56px;
  border-radius: 0 10px 10px 0;
  background: #1a1f27;
  border: 1px solid #3a4450;
  border-left: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e8c07a;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transition: width 0.15s ease, background 0.15s ease, color 0.15s ease;
  pointer-events: none;
}
#hj-res-rail:active .pill,
#hj-res-rail.pressed .pill {
  background: #2a2416;
  border-color: #f0b90b;
  width: 11px;
}
#hj-res-rail.open .pill {
  width: 14px;
  background: #2a2416;
  border-color: #f0b90b;
  color: #f0b90b;
}
#hj-res-rail.open .pill::after {
  content: "收";
  margin-top: 4px;
  font-size: 8px;
  color: #f0b90b;
}
.phone.ia-tab-quotes #hj-res-rail,
.phone.ia-tab-positions #hj-res-rail,
.phone.ia-tab-history #hj-res-rail {
  display: none !important;
}

/* --- 5) Resonance drawer layer (covers ind-bar → ops top) --- */
#hj-res-layer {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 22; /* > ind-bar/chart; < sheets(35)/auth(80)/tf-more(50) */
  display: none;
  pointer-events: none;
}
#hj-res-layer.on {
  display: block;
  pointer-events: auto;
}
#hj-res-layer .hj-res-mask {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.18s ease;
}
#hj-res-layer.on .hj-res-mask { opacity: 1; }
#hj-res-layer .hj-res-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(86%, 340px);
  background: #12161c;
  border-right: 1px solid #2a323c;
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.55);
  transform: translateX(-102%);
  transition: transform 0.18s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}
#hj-res-layer.on .hj-res-panel { transform: translateX(0); }
#hj-res-layer .hj-res-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: 8px;
}
#hj-res-layer .hj-res-hd .t {
  font-size: 14px;
  font-weight: 800;
  color: #eaecef;
}
#hj-res-layer .hj-res-hd .x {
  border: 0;
  background: transparent;
  color: #848e9c;
  min-width: 44px;
  min-height: 44px;
  font-size: 22px;
}
#hj-res-layer .hj-res-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
#hj-res-layer .hj-res-body::-webkit-scrollbar { display: none !important; }
#hj-res-layer .hj-res-body .sum,
#hj-res-layer .hj-res-body .res {
  background: transparent;
  border: 0;
  padding: 4px 0 8px;
}
#hj-res-layer .hj-res-body .sum-row {
  gap: 12px;
}