/* COATDOCTOR — /tool.css
   Shared styles for tool iframes only (ENTERPRISE PATCH v2)
*/

:root{
  color-scheme: dark;

  --tool-ink: rgba(234,240,255,0.92);
  --tool-muted: rgba(234,240,255,0.68);
  --tool-border: rgba(234,240,255,0.12);
  --tool-panel: rgba(0,0,0,0.22);
  --tool-surface: rgba(0,0,0,0.28);
  --tool-input: rgba(0,0,0,0.24);
  --tool-placeholder: rgba(234,240,255,0.5);

  --tool-radius: 14px;
  --tool-radius-sm: 12px;
  --tool-pad: 14px;

  --tool-focus: rgba(0,229,255,0.55);
  --tool-accent: rgba(0,229,255,0.9);

  --tool-glow: 0 0 0 1px rgba(0,229,255,0.15), 0 8px 24px rgba(0,0,0,0.35);
}

/* =========================
   RESET
========================= */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  min-height:100%;
  margin:0;
  background:transparent;
  color:var(--tool-ink);

  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  overflow-x:hidden;
}

/* =========================
   BASE ELEMENTS
========================= */
a{
  color:inherit;
  text-decoration:none;
}

img,
svg,
video,
canvas{
  display:block;
  max-width:100%;
}

button,
input,
textarea,
select{
  font:inherit;
  color:var(--tool-ink);
}

/* REMOVE iOS weird tap highlight */
button,
a,
input,
select,
textarea,
[role="button"]{
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}

/* =========================
   BUTTON BASE (NEW)
========================= */
button{
  cursor:pointer;
  border:none;
  border-radius:var(--tool-radius-sm);
  background:rgba(234,240,255,0.06);
  transition:
    background .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

button:hover{
  background:rgba(234,240,255,0.12);
}

button:active{
  transform:translateY(1px);
}

/* =========================
   TOOL ROOT LAYOUT
========================= */
.tool,
.toolWrap,
.container{
  width:100% !important;
  max-width:none !important;
}

.tool{
  min-height:100%;
  padding:var(--tool-pad);
}

/* =========================
   SURFACES
========================= */
.card,
.panel,
.box{
  border:1px solid var(--tool-border);
  background:var(--tool-panel);
  border-radius:var(--tool-radius);

  /* subtle glass */
  backdrop-filter: blur(6px);
}

/* hover depth (NEW) */
.card:hover{
  border-color:rgba(0,229,255,0.28);
}

/* =========================
   TYPOGRAPHY
========================= */
.toolTitle{
  margin:0;
  font-size:16px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.02em;
  color:var(--tool-ink);
}

.toolText{
  margin-top:6px;
  font-size:13px;
  line-height:1.4;
  color:var(--tool-muted);
}

/* =========================
   FORM CONTROLS
========================= */
input,
textarea,
select{
  width:100%;
  border:1px solid var(--tool-border);
  border-radius:var(--tool-radius-sm);
  background:var(--tool-input);
  color:var(--tool-ink);
  padding:10px 12px;

  outline:none;

  transition:
    border-color .18s ease,
    background-color .18s ease,
    box-shadow .18s ease;
}

input::placeholder,
textarea::placeholder{
  color:var(--tool-placeholder);
}

/* focus = premium glow */
input:focus,
textarea:focus,
select:focus{
  border-color:var(--tool-focus);
  box-shadow:0 0 0 2px rgba(0,229,255,0.12);
  background:rgba(0,0,0,0.32);
}

/* disabled */
input:disabled,
textarea:disabled,
select:disabled,
button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

/* =========================
   SCROLLBAR (NEW - important UX)
========================= */
::-webkit-scrollbar{
  width:10px;
  height:10px;
}

::-webkit-scrollbar-track{
  background:transparent;
}

::-webkit-scrollbar-thumb{
  background:rgba(234,240,255,0.18);
  border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
  background:rgba(0,229,255,0.35);
}

/* =========================
   CODE / TABLE
========================= */
pre,
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

pre{
  white-space:pre-wrap;
  word-break:break-word;
}

table{
  width:100%;
  border-collapse:collapse;
}

/* =========================
   IMAGE SYSTEM (NEW - CRITICAL)
========================= */
img{
  border-radius:10px;
}

/* prevents layout shift in gallery */
img[loading="lazy"]{
  min-height:60px;
}

/* =========================
   STATE HELPERS
========================= */
[hidden]{
  display:none !important;
}

.muted{
  opacity:.7;
}

/* =========================
   FUTURE AI / OVERLAY READY
========================= */
.overlay-layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.overlay-marker{
  position:absolute;
  border:2px solid rgba(0,229,255,0.7);
  border-radius:6px;
  box-shadow:0 0 12px rgba(0,229,255,0.4);
}