/* Styles specific to the JSON → diagram tool page. Depends on styles.css tokens. */

.tool-shell{display:grid;grid-template-columns:390px 1fr;height:calc(100vh - 65px);min-height:520px;border-top:1px solid var(--border);}
@media(max-width:820px){ .tool-shell{grid-template-columns:1fr;height:auto;} }

.tool-left{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0;}
.tool-controls{padding:16px 22px;border-bottom:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap;}
.tool-search{padding:12px 22px;border-bottom:1px solid var(--border);display:flex;gap:8px;align-items:center;background:var(--panel-2);}
.tool-search input{flex:1;background:var(--panel);}
.tool-search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);outline:none;}
#search-count{font-size:11.5px;color:var(--text-faint);min-width:44px;text-align:right;}

.editor-wrap{flex:1;display:flex;flex-direction:column;min-height:280px;padding:16px 22px 10px;}
.editor-label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:8px;display:flex;justify-content:space-between;font-weight:600;}
#editor{flex:1;width:100%;resize:none;background:var(--panel-2);border:1px solid var(--border);border-radius:10px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.6;padding:14px;outline:none;min-height:220px;}
#editor:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);}
#status{padding:12px 22px 18px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--text-faint);border-top:1px solid var(--border);}
#status.err{color:var(--bool);}
#status.ok{color:var(--accent);}

/* AI assist panel */
.ai-panel{border-top:1px solid var(--border);padding:16px 22px;background:var(--panel-2);}
.ai-panel .row{display:flex;gap:8px;align-items:center;margin-bottom:8px;}
.ai-panel label{font-size:11px;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.06em;font-weight:600;}
.ai-panel input[type="password"]{flex:1;font-family:'JetBrains Mono',monospace;font-size:12px;}
.ai-panel .hint{font-size:11.5px;color:var(--text-faint);line-height:1.5;margin:6px 0 0;}
#ai-output{margin-top:10px;font-size:13px;line-height:1.6;color:var(--text-dim);background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:12px;display:none;white-space:pre-wrap;}

.tool-right{position:relative;overflow:hidden;background:
  radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0/24px 24px, var(--page-bg);
  min-height:420px;}
.canvas-toolbar{position:absolute;top:16px;right:16px;z-index:5;display:flex;gap:8px;}
.canvas-toolbar button{background:var(--panel);box-shadow:var(--shadow);}
/* This rule ties with `button.primary` on specificity and loads later, so the
   primary button needs restating here — otherwise it renders white on white. */
.canvas-toolbar button.primary{background:var(--blue);color:#fff;border-color:var(--blue);}
.canvas-toolbar button.primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff;}
#svg{width:100%;height:100%;display:block;cursor:grab;}
#svg:active{cursor:grabbing;}

.link{fill:none;stroke:var(--border-strong);stroke-width:1.5px;}
.node-box{fill:var(--panel);stroke:var(--border-strong);stroke-width:1px;filter:drop-shadow(0 1px 2px rgba(20,30,50,0.06));}
.node-box.obj{stroke:var(--obj);stroke-opacity:.6;}
.node-box.arr{stroke:var(--arr);stroke-opacity:.6;}
.node-box.matched{stroke:var(--match);stroke-width:2.5px;}
.node-key{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;fill:var(--key);}
.node-type{font-family:'JetBrains Mono',monospace;font-size:10px;fill:var(--text-faint);}
.node-val{font-family:'JetBrains Mono',monospace;font-size:12px;}
.v-str{fill:var(--str);} .v-num{fill:var(--num);} .v-bool{fill:var(--bool);} .v-null{fill:var(--null);}
.toggle-circle{fill:var(--panel);stroke:var(--border-strong);stroke-width:1px;cursor:pointer;}
.toggle-circle:hover{stroke:var(--blue);}
.toggle-glyph{font-family:'JetBrains Mono',monospace;font-size:11px;fill:var(--text-dim);text-anchor:middle;dominant-baseline:central;pointer-events:none;}
.root-label{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;fill:var(--blue);}

#empty-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--text-faint);pointer-events:none;}
#empty-hint .glyph{font-family:'JetBrains Mono',monospace;font-size:36px;color:var(--border-strong);}
#empty-hint p{font-size:13px;margin:0;}