/* ===== WM Copilot Styles v2 — Unified Browser + Network Panel ===== */

.wmc-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* ---- Top: Browser + Network side-by-side ---- */
.wmc-top {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  border-bottom: none;
}

/* Browser panel — takes most of the space, fills fully */
.wmc-browser {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #0f0f18;
  position: relative;
  overflow: hidden;
}

.wmc-browser-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  background: var(--bg-subtle, #fafafa);
  border-bottom: 1px solid var(--border, #e2e4e9);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.wmc-browser-header .wmc-panel-icon { font-size: 14px; }

.wmc-browser-url {
  margin-left: 8px;
  font-weight: 400;
  font-size: 11px;
  color: var(--text-tertiary, #9ca3af);
  font-family: 'SF Mono', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.wmc-browser-body {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: #0f0f18;
}

.wmc-browser-body canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.wmc-browser-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-tertiary, #9ca3af);
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-card, #fff);
  z-index: 1;
}
.wmc-browser-placeholder .wmc-placeholder-sub {
  font-size: 11px;
  opacity: 0.7;
}

/* Network / API side panel */
.wmc-network {
  width: 320px;
  min-width: 260px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--border, #e2e4e9);
  background: var(--bg-card, #fff);
  overflow: hidden;
}

.wmc-network-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  background: var(--bg-subtle, #fafafa);
  border-bottom: 1px solid var(--border, #e2e4e9);
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.wmc-network-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border, #e2e4e9);
  flex-shrink: 0;
}

.wmc-network-tab {
  flex: 1;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary, #6b7280);
  font-family: inherit;
  transition: all 0.15s;
}
.wmc-network-tab:hover { color: var(--text-primary, #1a1a2e); }
.wmc-network-tab.active {
  color: var(--accent, #253378);
  border-bottom-color: var(--accent, #253378);
}

.wmc-network-body {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0;
}

/* Network entries */
.wmc-net-entry {
  border-bottom: 1px solid var(--border, #e2e4e9);
  cursor: pointer;
  transition: background 0.1s;
}
.wmc-net-entry:hover { background: var(--bg-subtle, #f5f5f7); }

.wmc-net-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
}

.wmc-net-method {
  font-weight: 700;
  font-family: 'SF Mono', monospace;
  font-size: 10px;
  min-width: 32px;
}
.wmc-net-method.post { color: #f59e0b; }
.wmc-net-method.get { color: #3b82f6; }

.wmc-net-path {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: 'SF Mono', monospace;
  color: var(--text-primary, #1a1a2e);
}

.wmc-net-status {
  font-weight: 600;
  font-size: 10px;
  padding: 1px 5px;
  border-radius: 3px;
}
.wmc-net-status.ok { background: rgba(60,198,154,0.12); color: #3cc69a; }
.wmc-net-status.err { background: rgba(193,21,58,0.12); color: #c1153a; }

.wmc-net-time {
  font-size: 10px;
  color: var(--text-tertiary, #9ca3af);
  min-width: 40px;
  text-align: right;
}

/* Expanded network detail */
.wmc-net-detail {
  display: none;
  padding: 6px 10px 10px;
  font-size: 11px;
  background: var(--bg-subtle, #f5f5f7);
  border-top: 1px solid var(--border, #e2e4e9);
}
.wmc-net-entry.expanded .wmc-net-detail { display: block; }

.wmc-net-detail-label {
  font-weight: 600;
  font-size: 10px;
  color: var(--text-secondary, #6b7280);
  margin: 4px 0 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.wmc-net-detail-body {
  font-family: 'SF Mono', monospace;
  font-size: 10px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 150px;
  overflow-y: auto;
  background: #fff;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid var(--border, #e2e4e9);
}

/* Validation entries (special styling) */
.wmc-net-entry.validation .wmc-net-summary {
  background: rgba(168,85,247,0.04);
}
.wmc-net-entry.validation .wmc-net-method {
  color: #a855f7;
}

/* Empty state */
.wmc-network-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 6px;
  color: var(--text-tertiary, #9ca3af);
  font-size: 12px;
  padding: 20px;
  text-align: center;
}

/* ---- Chat Console ---- */
.wmc-chat {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  max-height: 45vh;
  min-height: 160px;
  height: 220px;
  background: var(--bg-card, #fff);
  resize: vertical;
  overflow: hidden;
  border-bottom: 2px solid var(--border, #e2e4e9);
}

.wmc-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 16px;
  border-bottom: 1px solid var(--border, #e2e4e9);
  background: var(--bg-subtle, #fafafa);
  flex-shrink: 0;
}

.wmc-chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.wmc-chat-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.wmc-chat-title { font-size: 13px; font-weight: 600; color: var(--text-primary, #1a1a2e); }

.wmc-ai-state { display: flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; color: var(--text-secondary, #6b7280); }
.wmc-state-dot { width: 7px; height: 7px; border-radius: 50%; }
.wmc-state-dot.idle { background: #9ca3af; }
.wmc-state-dot.thinking { background: #5398f6; animation: wmc-pulse 1s infinite; }
.wmc-state-dot.executing { background: #faa938; animation: wmc-pulse 0.8s infinite; }
.wmc-state-dot.waiting { background: #a855f7; animation: wmc-pulse 1.2s infinite; }

@keyframes wmc-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }

.wmc-conn-badge { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-tertiary, #9ca3af); }
.wmc-conn-dot { width: 6px; height: 6px; border-radius: 50%; }
.wmc-conn-dot.disconnected { background: #ef4444; }
.wmc-conn-dot.connecting { background: #faa938; animation: wmc-pulse 1s infinite; }
.wmc-conn-dot.connected, .wmc-conn-dot.ready { background: #3cc69a; }

.wmc-clear-btn { background:none; border:none; padding:4px; cursor:pointer; color:var(--text-tertiary,#9ca3af); border-radius:4px; display:flex; align-items:center; }
.wmc-clear-btn:hover { color:var(--text-secondary,#6b7280); background:var(--bg-subtle,#f5f5f7); }

/* Messages */
.wmc-chat-messages {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wmc-welcome { display:flex; gap:10px; padding:8px 0; align-items:flex-start; color:var(--text-secondary,#6b7280); font-size:13px; line-height:1.5; }
.wmc-welcome-icon { font-size:20px; flex-shrink:0; }
.wmc-welcome-text strong { color:var(--text-primary,#1a1a2e); }

.wmc-msg { display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.5; }
.wmc-msg-user { flex-direction:row-reverse; }
.wmc-msg-user .wmc-msg-content { background:var(--accent,#253378); color:#fff; border-radius:12px 12px 2px 12px; padding:6px 12px; max-width:70%; }
.wmc-msg-avatar { font-size:11px; font-weight:600; flex-shrink:0; min-width:24px; text-align:center; padding-top:2px; }
.wmc-msg-ai .wmc-msg-content { color:var(--text-primary,#1a1a2e); max-width:85%; }
.wmc-msg-ai .wmc-msg-content code { background:var(--bg-subtle,#f5f5f7); padding:1px 4px; border-radius:3px; font-size:11px; font-family:'SF Mono',monospace; }
.wmc-msg-action { gap:6px; padding:1px 0; align-items:center; }
.wmc-msg-surface-tag { font-size:10px; font-weight:600; padding:1px 7px; border-radius:4px; white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; gap:3px; line-height:1.6; }
.wmc-msg-action-text { font-size:12px; color:var(--text-secondary,#6b7280); font-family:'SF Mono','Menlo',monospace; }

/* Input */
.wmc-chat-input-area { padding:6px 16px 8px; border-top:1px solid var(--border,#e2e4e9); flex-shrink:0; }
.wmc-input-wrap { display:flex; align-items:flex-end; gap:8px; background:var(--bg-subtle,#f5f5f7); border:1px solid var(--border,#e2e4e9); border-radius:12px; padding:5px 5px 5px 14px; transition:border-color 0.15s; }
.wmc-input-wrap:focus-within { border-color:var(--accent,#253378); box-shadow:0 0 0 3px rgba(37,51,120,0.08); }
.wmc-chat-input { flex:1; border:none; background:none; outline:none; font-size:13px; font-family:inherit; line-height:1.5; resize:none; max-height:120px; min-height:22px; padding:3px 0; color:var(--text-primary,#1a1a2e); }
.wmc-chat-input::placeholder { color:var(--text-tertiary,#9ca3af); }
.wmc-send-btn,.wmc-stop-btn { width:30px; height:30px; border-radius:8px; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.15s; }
.wmc-send-btn { background:var(--accent,#253378); color:#fff; }
.wmc-send-btn:hover { background:#1a2660; }
.wmc-stop-btn { background:#ef4444; color:#fff; }
.wmc-stop-btn:hover { background:#dc2626; }

/* Responsive */
@media (max-width: 900px) {
  .wmc-network { width: 240px; min-width: 200px; }
}
@media (max-width: 700px) {
  .wmc-network { display: none; }
}

/* ---- Resizable panel splitters ---- */
.wmc-splitter-h {
  height: 5px;
  cursor: row-resize;
  background: var(--border, #e2e4e9);
  flex-shrink: 0;
  transition: background 0.15s;
  touch-action: none;
}
.wmc-splitter-h:hover { background: var(--accent, #474ecb); }
.wmc-splitter-v {
  width: 5px;
  cursor: col-resize;
  background: var(--border, #e2e4e9);
  flex-shrink: 0;
  transition: background 0.15s;
  touch-action: none;
}
.wmc-splitter-v:hover { background: var(--accent, #474ecb); }