/* sf_console.css (ModernConsole)
   ✅ No new color/root vars. Uses your global theme vars (sf_new.css).
   ✅ CJK-friendly wrapping + code-ish whitespace handling.
   ✅ Mobile responsive + touch-friendly.
*/

/* ---------- Root ---------- */
.mc-root{
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2147483600;

  width: min(760px, calc(100vw - 32px));
  max-height: min(62vh, 540px);

  display: flex;
  flex-direction: column;
  overflow: hidden;

  border-radius: var(--panel-radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--panel-shadow-strong);

  background: var(--color-bg-elevated);
  color: var(--color-text);

  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));

  opacity: 1;
  transform: translateY(0);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}

.mc-root.mc-hidden{
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
}

.mc-root *{ box-sizing: border-box; }

/* Scrollbars */
.mc-log-list{ scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; }
.mc-log-list::-webkit-scrollbar{ width: 8px; height: 8px; }
.mc-log-list::-webkit-scrollbar-track{ background: transparent; }
.mc-log-list::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, var(--color-border) 65%, transparent);
  border-radius: 9999px;
}

/* ---------- Header ---------- */
.mc-header{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;

  padding: 8px 10px 8px 12px;
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);

  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.mc-title-group{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

.mc-title-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-success);
  box-shadow: 0 0 0 3px var(--color-success-soft);
  flex: 0 0 auto;
}

.mc-title-text{
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);

  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}

.mc-header-actions{
  display:flex;
  align-items:center;
  gap: 6px;
  flex: 0 0 auto;
}

/* ---------- Buttons ---------- */
.mc-btn{
  height: 30px;
  padding: 0 10px;
  border-radius: var(--panel-radius-sm);

  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  color: var(--color-text);

  font-size: 12px;
  font-family: var(--font-sans);

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;

  cursor:pointer;
  white-space: nowrap;
  transition: transform .06s ease, background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.mc-btn:hover{
  background: color-mix(in srgb, var(--color-bg-elevated) 80%, transparent);
  border-color: var(--color-accent);
}

.mc-btn:active{ transform: translateY(1px); }
.mc-btn:focus{ outline: none; box-shadow: 0 0 0 3px var(--color-accent-soft); }

.mc-btn-icon{
  width: 30px;
  padding: 0;
  font-weight: 900;
}

.mc-btn-primary{
  border-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-border));
  background: color-mix(in srgb, var(--color-accent-soft) 60%, var(--color-bg-elevated));
}

.mc-btn-danger{
  border-color: color-mix(in srgb, var(--color-danger) 70%, var(--color-border));
  background: color-mix(in srgb, var(--color-danger-soft) 60%, var(--color-bg-elevated));
}

/* ---------- Toolbar ---------- */
.mc-toolbar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 8px 10px;

  border-bottom: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);

  /* allow wrapping on narrow widths */
  flex-wrap: wrap;
}

.mc-tabs{
  display:flex;
  align-items:center;
  gap: 6px;
  min-width: 120px;
  max-width: 100%;
  overflow: auto;
  padding-bottom: 2px;
}

.mc-tab{
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;

  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-elevated) 82%, transparent);

  color: var(--color-text-muted);
  font-size: 12px;
  cursor:pointer;

  display:flex;
  align-items:center;
  gap: 8px;
  white-space: nowrap;

  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.mc-tab:hover{ border-color: var(--color-accent); color: var(--color-text); }
.mc-tab-active{
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.mc-tab-badge{
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;

  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;

  display:flex;
  align-items:center;
  justify-content:center;

  background: color-mix(in srgb, var(--color-border) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  color: var(--color-text);
}

.mc-tab-has-error .mc-tab-badge{
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
}

.mc-filters{
  display:flex;
  align-items:center;
  gap: 6px;
  margin-left: auto;
}

.mc-filter-chip{
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;

  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-elevated) 74%, transparent);

  color: var(--color-text-muted);
  font-size: 12px;
  cursor:pointer;

  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.mc-filter-chip:hover{ border-color: var(--color-accent); color: var(--color-text); }
.mc-filter-active{
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  color: var(--color-text);
}

.mc-actions{
  display:flex;
  align-items:center;
  gap: 6px;
  flex-wrap: wrap;
}

.mc-run-select{
  height: 30px;
  padding: 0 10px;
  border-radius: var(--panel-radius-sm);

  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  color: var(--color-text);

  font-size: 12px;
  cursor:pointer;

  max-width: 220px;
}

.mc-run-select:hover{ border-color: var(--color-accent); }
.mc-run-select:focus{ outline:none; box-shadow: 0 0 0 3px var(--color-accent-soft); }

/* ---------- Body ---------- */
.mc-body{
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  flex-direction:column;
  background: var(--color-bg);
}

.mc-empty{
  flex: 1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 14px;
  color: var(--color-text-muted);
  font-size: 12px;
}

/* log list: good spacing for touch + dense logs */
.mc-log-list{
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

/* Run divider */
.mc-run-divider{
  position: sticky;
  top: 0;
  z-index: 2;

  padding: 8px 10px;
  border-radius: var(--panel-radius-sm);

  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-accent-soft) 70%, var(--color-bg-elevated));

  color: var(--color-text);
  font-size: 12px;
  font-weight: 700;

  /* Chinese: avoid ugly single-char wraps */
  word-break: keep-all;
  line-break: strict;
}

/* Log item */
.mc-log-item{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  padding: 10px;

  border-radius: var(--panel-radius-sm);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-elevated) 90%, transparent);

  transition: border-color .12s ease, background .12s ease;
}

.mc-log-item:hover{
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--color-bg-elevated) 95%, transparent);
}

/* Selection checkbox */
.mc-selectbox{
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--color-accent);
  display:none;
}
.mc-root.mc-select-mode .mc-selectbox{ display:block; }

/* Meta column */
.mc-log-item-meta{
  width: 88px;
  flex: 0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 6px;
  padding-top: 1px;
}

.mc-log-pill{
  height: 18px;
  padding: 0 8px;
  border-radius: 999px;

  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .6px;

  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-border) 28%, transparent);
  color: var(--color-text);

  display:flex;
  align-items:center;
}

.mc-log-pill-log{ background: var(--color-success-soft); border-color: var(--color-success); }
.mc-log-pill-warn{ background: var(--color-warning-soft); border-color: var(--color-warning); }
.mc-log-pill-error{ background: var(--color-danger-soft); border-color: var(--color-danger); }
.mc-log-pill-info{ background: var(--color-info-soft); border-color: var(--color-info); }
.mc-log-pill-input{ background: var(--color-accent-soft); border-color: var(--color-accent); }
.mc-log-pill-result{ background: color-mix(in srgb, var(--color-bg) 55%, transparent); }

.mc-log-meta-secondary{
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
}

/* Content: IMPORTANT for Chinese + code + JSON */
.mc-log-content{
  flex: 1 1 auto;
  min-width: 0;
  user-select: text;

  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text);

  /* Chinese + mixed content: do NOT collapse spaces, but still wrap */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-break: loose;

  /* prevents weird CJK punctuation at line start in some browsers */
  text-rendering: geometricPrecision;
}

/* ---------- Input row ---------- */
.mc-input-row{
  display:flex;
  align-items:center;
  gap: 8px;

  padding: 10px;
  border-top: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
}

.mc-input-prompt{
  width: 16px;
  text-align:center;
  font-family: var(--font-mono);
  font-weight: 900;
  color: var(--color-accent);
}

.mc-input{
  flex: 1 1 auto;
  height: 34px;
  padding: 0 10px;

  border-radius: var(--panel-radius-sm);
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 80%, transparent);

  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 12px;

  outline: none;
}

.mc-input::placeholder{ color: var(--color-text-muted); }
.mc-input:focus{
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* ---------- Resize handle ---------- */
.mc-resize-handle{
  height: 10px;
  cursor: nwse-resize;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 70%, transparent);
  background:
    linear-gradient(135deg,
      transparent 0%,
      transparent 45%,
      color-mix(in srgb, var(--color-border) 55%, transparent) 45%,
      color-mix(in srgb, var(--color-border) 55%, transparent) 60%,
      transparent 60%,
      transparent 100%);
}

/* ---------- Inspector (nested object view) ---------- */
.mc-inspector{ display:inline-block; max-width:100%; }
.mc-inspector-node{ display:block; }

.mc-inspector-node-header{
  display:flex;
  align-items:flex-start;
  gap: 8px;
  min-height: 18px;

  /* allow long keys / Chinese to wrap nicely */
  min-width: 0;
}

.mc-inspector-toggle{
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 60%, transparent);
  cursor:pointer;
  position: relative;
  flex: 0 0 auto;
}

.mc-inspector-toggle::before{
  content:"";
  position:absolute;
  left: 4px;
  top: 3px;
  width: 0; height: 0;
  border-left: 5px solid var(--color-text);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transform: rotate(90deg);
  transition: transform .12s ease;
}
.mc-inspector-node:not(.mc-inspector-node-open) .mc-inspector-toggle::before{ transform: rotate(0deg); }

.mc-inspector-key{
  color: var(--color-text);
  font-weight: 700;

  /* Chinese-friendly key wrap */
  white-space: nowrap;
  flex: 0 0 auto;
}
.mc-inspector-separator{ color: var(--color-text-muted); flex: 0 0 auto; }

.mc-inspector-preview{
  color: color-mix(in srgb, var(--color-text) 82%, transparent);
  min-width: 0;

  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-break: loose;
}

.mc-inspector-children{
  margin-left: 16px;
  padding-left: 10px;
  margin-top: 6px;
  border-left: 1px dashed color-mix(in srgb, var(--color-border) 70%, transparent);
}

.mc-inspector-primitive{
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);

  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-text);

  /* important: strings with spaces/newlines should still display */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-break: loose;
}

.mc-prim-string{ background: var(--color-accent-soft); border-color: var(--color-accent); }
.mc-prim-number{ background: var(--color-success-soft); border-color: var(--color-success); }
.mc-prim-bool{ background: var(--color-info-soft); border-color: var(--color-info); }
.mc-prim-null{ background: var(--color-danger-soft); border-color: var(--color-danger); }
.mc-prim-undefined{ background: color-mix(in srgb, var(--color-bg) 60%, transparent); }
.mc-prim-function{ background: var(--color-warning-soft); border-color: var(--color-warning); }

/* DOM pill */
.mc-dom-pill{
  display:inline-flex;
  align-items:center;
  gap: 6px;

  padding: 2px 8px;
  border-radius: 999px;

  border: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-info-soft) 60%, var(--color-bg-elevated));
  color: var(--color-text);

  font-family: var(--font-mono);
  font-size: 12px;

  white-space: nowrap;
}
.mc-dom-pill-tag{ font-weight: 900; }
.mc-dom-pill-id{ color: var(--color-text); }
.mc-dom-pill-class{ color: var(--color-text-muted); }

/* ---------- Drag/Resize states ---------- */
.mc-root.mc-dragging{
  cursor: grabbing;
  box-shadow: var(--panel-shadow-strong);
}

/* ---------- Responsive ---------- */
@media (max-width: 720px){
  .mc-root{
    right: 10px;
    bottom: 10px;
    width: calc(100vw - 20px);
    max-height: min(58vh, 520px);
    border-radius: var(--panel-radius-md);
  }

  .mc-toolbar{
    gap: 8px;
    padding: 8px;
  }

  .mc-log-list{ padding: 8px; }

  .mc-log-item{
    padding: 9px;
    gap: 8px;
  }

  .mc-log-item-meta{
    width: 76px;
  }

  /* On mobile: keep action row compact */
  .mc-actions .mc-btn{
    padding: 0 8px;
  }
}

@media (max-width: 520px){
  /* ultra small: reduce clutter */
  .mc-title-text{ font-size: 12px; }

  .mc-run-select{ max-width: 140px; }

  /* hide “dock” icon button if needed to save space */
  .mc-header-actions .mc-btn-icon:first-child{ display:none; }

  /* meta column tighter */
  .mc-log-item-meta{ width: 70px; }
  .mc-log-content{ font-size: 12px; }
}

@media (prefers-reduced-motion: reduce){
  .mc-root{ transition: none; }
  .mc-btn{ transition: none; }
}