/* ── Root ── */
#html-tool-root {
  all: initial;
  display: block;
  font-family: inherit;
  width: 100%;
  background: var(--wp--preset--color--surface-alt, #F0EBE3);
  border: 2px solid var(--wp--preset--color--contrast, #1A1A1A);
  border-radius: 8px;
  overflow: hidden;
  box-sizing: border-box;
  box-shadow: 4px 4px 0 var(--wp--preset--color--contrast, #1A1A1A);
}

#html-tool-root * {
  box-sizing: border-box;
}

/* ── Toolbar ── */
#html-tool-root .tool-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--wp--preset--color--surface-alt, #F0EBE3);
  border-bottom: 2px solid var(--wp--preset--color--contrast, #1A1A1A);
}

#html-tool-root .toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

#html-tool-root .toolbar-group + .toolbar-group {
  padding-left: 8px;
  border-left: 1px solid #D0C8BE;
}

#html-tool-root .toolbar-group--end {
  margin-left: auto;
  padding-left: 8px;
  border-left: 1px solid #D0C8BE;
}

#html-tool-root .toolbar-label {
  color: #888;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.5px;
  font-family: inherit;
  white-space: nowrap;
}

/* ── Insert Panel (collapsible) ── */
#html-tool-root .insert-panel {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--wp--preset--color--surface, #FFF);
  border-bottom: 1px solid #E0D8CE;
}

#html-tool-root .insert-panel.is-open {
  display: flex;
}

#html-tool-root .insert-panel select {
  padding: 3px 6px;
  font-size: 11px;
  border: 1px solid #E0D8CE;
  background: var(--wp--preset--color--surface, #FFF);
  color: var(--wp--preset--color--contrast, #1A1A1A);
  border-radius: 4px;
  font-family: inherit;
}

/* ── Buttons ── */
#html-tool-root button {
  border: 2px solid var(--wp--preset--color--contrast, #1A1A1A);
  background: var(--wp--preset--color--surface, #FFF);
  color: var(--wp--preset--color--contrast, #1A1A1A);
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  border-radius: 4px;
  box-shadow: 2px 2px 0 var(--wp--preset--color--contrast, #1A1A1A);
  transform: translate(0, 0);
  transition: all 0.1s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

#html-tool-root button:hover {
  box-shadow: 3px 3px 0 var(--wp--preset--color--contrast, #1A1A1A);
  transform: translate(-1px, -1px);
}

#html-tool-root button:active {
  box-shadow: 0px 0px 0 var(--wp--preset--color--contrast, #1A1A1A);
  transform: translate(2px, 2px);
}

#html-tool-root .btn-status {
  color: var(--wp--preset--color--primary, #E8C32A);
  border-color: var(--wp--preset--color--primary, #E8C32A);
  box-shadow: 2px 2px 0 var(--wp--preset--color--primary, #E8C32A);
}

#html-tool-root .btn-status:hover {
  box-shadow: 3px 3px 0 var(--wp--preset--color--primary, #E8C32A);
}

#html-tool-root .btn-status:active {
  box-shadow: 0px 0px 0 var(--wp--preset--color--primary, #E8C32A);
}

#html-tool-root .btn-copy {
  background: var(--wp--preset--color--primary, #E8C32A) !important;
  color: var(--wp--preset--color--contrast, #1A1A1A) !important;
  font-weight: bold !important;
  border-color: var(--wp--preset--color--contrast, #1A1A1A) !important;
  box-shadow: 2px 2px 0 var(--wp--preset--color--contrast, #1A1A1A) !important;
}

#html-tool-root .btn-copy:hover {
  box-shadow: 3px 3px 0 var(--wp--preset--color--contrast, #1A1A1A) !important;
  transform: translate(-1px, -1px);
}

#html-tool-root .btn-copy:active {
  box-shadow: 0px 0px 0 var(--wp--preset--color--contrast, #1A1A1A) !important;
  transform: translate(2px, 2px);
}

#html-tool-root .btn-danger {
  color: #C44;
  border-color: #C44;
  box-shadow: 2px 2px 0 #C44;
}

#html-tool-root .btn-danger:hover {
  box-shadow: 3px 3px 0 #C44;
}

#html-tool-root .btn-danger:active {
  box-shadow: 0px 0px 0 #C44;
}

/* ── Panels Container ── */
#html-tool-root #html-live-preview-container {
  display: flex;
  flex-direction: row;
  min-height: 80vh;
  gap: 2px;
  background: var(--wp--preset--color--contrast, #1A1A1A);
}

#html-tool-root .editor-panel,
#html-tool-root .preview-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--wp--preset--color--surface, #FFF);
  min-width: 0;
}

/* ── Panel Labels ── */
#html-tool-root .panel-label {
  padding: 6px 12px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  color: #999;
  letter-spacing: 1.5px;
  font-family: inherit;
  background: var(--wp--preset--color--surface, #FFF);
  border-bottom: 1px solid #F0EBE3;
  flex-shrink: 0;
}

/* ── Editor ── */
#html-tool-root #html-live-editor {
  flex: 1;
  padding: 15px;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12px;
  line-height: 1.6;
  border: none;
  background: var(--wp--preset--color--surface, #FFF);
  color: var(--wp--preset--color--contrast, #1A1A1A);
  resize: none;
  outline: none;
  overflow-y: auto;
  min-height: 400px;
  tab-size: 2;
}

#html-tool-root #html-live-editor::placeholder {
  color: #BBB;
  font-style: italic;
  font-size: 13px;
}

/* ── Preview ── */
#html-tool-root #html-live-preview {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  word-wrap: break-word;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

#html-tool-root .preview-light { background: #ffffff !important; color: #333 !important; }
#html-tool-root .preview-dark { background: #121212 !important; color: #eee !important; }

/* ── Preview Typography (scaled down for panel context) ── */
#html-tool-root #html-live-preview h1 { font-size: 20px !important; margin: 0.4em 0 !important; color: inherit !important; font-weight: bold !important; line-height: 1.2 !important; }
#html-tool-root #html-live-preview h2 { font-size: 17px !important; margin: 0.4em 0 !important; color: inherit !important; font-weight: bold !important; line-height: 1.3 !important; }
#html-tool-root #html-live-preview h3 { font-size: 15px !important; margin: 0.4em 0 !important; color: inherit !important; font-weight: bold !important; line-height: 1.3 !important; }
#html-tool-root #html-live-preview p  { font-size: 13px !important; line-height: 1.5 !important; color: inherit !important; margin-bottom: 0.8em !important; }
#html-tool-root #html-live-preview a  { color: var(--wp--preset--color--accent, #4A7FBF) !important; text-decoration: underline !important; }
#html-tool-root #html-live-preview ul,
#html-tool-root #html-live-preview ol { font-size: 13px !important; line-height: 1.5 !important; padding-left: 1.5em !important; margin-bottom: 0.8em !important; }
#html-tool-root #html-live-preview img { max-width: 100% !important; height: auto !important; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  #html-tool-root .tool-toolbar { gap: 4px; }
  #html-tool-root .toolbar-group--end { margin-left: 0; }
}

@media (max-width: 768px) {
  #html-tool-root #html-live-preview-container {
    flex-direction: column;
    min-height: auto;
  }
  #html-tool-root #html-live-editor {
    min-height: 300px;
  }
  #html-tool-root #html-live-preview {
    min-height: 300px;
  }
}