/* DAAILOK test 3D Studio · trajectory editor only.
   Local component layout: two-column actions, aligned inputs, one scrolling
   list. Does not change drawer width, 3D viewport or site-wide glass skin. */
.drawer-content[data-tool="route"] .daailok-route-panel{
  --route-edge:rgba(236,240,236,.15);
  --route-fill:rgba(255,255,255,.038);
  --route-text:#e4e8e3;
  --route-muted:#a5aea7;
  display:flex!important;
  flex-direction:column;
  gap:12px;
  width:100%;
  min-width:0;
  padding:6px 0 18px!important;
  box-sizing:border-box;
  color:var(--route-text);
}
.drawer-content[data-tool="route"] .daailok-route-panel *{box-sizing:border-box;min-width:0}
.drawer-content[data-tool="route"] .daailok-route-panel .drawer-kicker{
  height:auto!important;min-height:30px;gap:8px;
  font-size:11px;line-height:1.4;flex-wrap:wrap;
}
.daailok-route-panel .drawer-kicker b{color:var(--route-text);font-size:11px}
.daailok-route-panel .drawer-kicker span{color:var(--route-muted);font-size:9px}
.daailok-route-panel .route-fields{display:grid;gap:10px}
.daailok-route-panel .route-field{
  display:flex!important;flex-direction:column!important;
  align-items:stretch!important;gap:6px;
  width:100%;margin:0!important;
  color:var(--route-muted);font-size:10px;font-weight:500;line-height:1.4;
}
.daailok-route-panel .route-field>span{display:block}
.daailok-route-panel .route-field>select,
.daailok-route-panel .route-field>input{
  display:block;width:100%!important;min-width:0!important;
  height:35px!important;min-height:35px!important;
  padding:0 9px!important;margin:0!important;
  border:1px solid var(--route-edge)!important;
  border-radius:9px!important;
  background:rgba(10,15,18,.28)!important;
  color:var(--route-text)!important;
  font:inherit!important;font-size:11px!important;
  line-height:normal!important;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.028);
}
.daailok-route-panel .route-field>select:focus-visible,
.daailok-route-panel .route-field>input:focus-visible{
  outline:2px solid rgba(230,190,111,.8);outline-offset:1px;
}
.daailok-route-panel .route-field>select option{background:#222729;color:#ecf1eb}
.daailok-route-panel .route-block{
  display:flex!important;flex-direction:column;gap:9px;
  width:100%;margin:0!important;padding:11px!important;
  border:1px solid rgba(235,242,238,.10);
  border-radius:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.047),rgba(255,255,255,.014));
}
.daailok-route-panel .route-block[hidden]{display:none!important}
.daailok-route-panel .route-block-title{
  display:flex;justify-content:space-between;align-items:center;
  gap:6px;color:var(--route-text);font-size:11px;font-weight:640;
}
.daailok-route-panel .route-block-title small{color:var(--route-muted);font-size:9px;font-weight:450}
.daailok-route-panel .route-actions{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px!important;width:100%;align-items:stretch;
}
.daailok-route-panel .route-actions button{
  display:flex!important;align-items:center;justify-content:center;
  width:100%!important;min-height:34px!important;
  height:auto!important;min-width:0!important;
  padding:7px 5px!important;margin:0!important;
  white-space:normal!important;word-break:keep-all;
  text-align:center;line-height:1.35;
  font-size:10px!important;font-weight:560!important;
  border:1px solid var(--route-edge)!important;
  border-radius:9px!important;
  background:rgba(18,23,26,.34)!important;
  color:var(--route-text)!important;
  box-shadow:none!important;
  transition:background .17s,border-color .17s,box-shadow .17s;
}
.daailok-route-panel .route-actions button:hover{
  background:rgba(246,250,246,.085)!important;
  border-color:rgba(231,188,99,.62)!important;
}
/* All controls are neutral until actively pressed/recording. */
.daailok-route-panel .route-actions button.route-primary{
  border-color:var(--route-edge)!important;
  background:rgba(18,23,26,.34)!important;
  color:var(--route-text)!important;
}
/* Selected uses EXACT active tokens used by
   preview.css .top-function-nav .rail-item.active.
   The shared button-glass WebGL renderer also sees .active / aria-pressed. */
.daailok-route-panel .route-actions button.active,
.daailok-route-panel .route-actions button[aria-pressed="true"]{
  color:#f6d790!important;
  background:linear-gradient(145deg,rgba(238,201,127,.14),rgba(255,255,255,.025))!important;
  border-color:rgba(238,201,127,.25)!important;
  box-shadow:inset 2px 0 0 var(--ds-optical-accent)!important;
  text-shadow:none!important;
}
.daailok-route-panel .route-hint{
  margin:0!important;
  color:var(--route-muted);
  font-size:9.5px;
  line-height:1.65;
  overflow-wrap:anywhere;
}
.daailok-route-panel .route-keyframes{
  display:flex;flex-direction:column;gap:5px;
  width:100%;max-height:214px;
  overflow:auto;overscroll-behavior:contain;
  padding:2px!important;margin:0!important;
  font-size:10px;color:var(--route-muted);
  scrollbar-width:thin;scrollbar-color:rgba(224,192,124,.45) transparent;
}
.daailok-route-panel .route-keyframe-row{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 39px 25px;
  align-items:center;gap:4px;
  min-height:34px;padding:4px 5px;
  border:1px solid rgba(255,255,255,.07);border-radius:8px;
  background:var(--route-fill);
}
.daailok-route-panel .route-keyframe-row>span{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:9px;color:var(--route-text);
}
.daailok-route-panel .route-keyframe-row>button{
  display:grid;place-items:center;
  width:100%;height:25px;padding:0;
  border:1px solid rgba(255,255,255,.10);border-radius:6px;
  background:rgba(255,255,255,.04);color:var(--route-muted);
  font-size:10px;
}
.daailok-route-panel .route-keyframe-row>button:hover{
  color:#f5d292;border-color:rgba(241,199,114,.5);
}
.daailok-route-panel .route-status{
  width:100%;margin:0!important;padding:10px 11px;
  border:1px solid rgba(235,242,238,.09);border-radius:9px;
  background:rgba(255,255,255,.027);
  color:var(--route-muted);font-size:10px;line-height:1.6;
  overflow-wrap:anywhere;
}
#viewport.route-drawing-active #previewCanvas{cursor:crosshair!important}
body[data-theme="light"] .daailok-route-panel{
  --route-edge:rgba(248,251,247,.22);
  --route-fill:rgba(255,255,255,.08);
  --route-text:#f5f7f3;
  --route-muted:#e4e9e2;
}
body[data-theme="light"] .daailok-route-panel .route-field>select,
body[data-theme="light"] .daailok-route-panel .route-field>input{
  background:rgba(46,55,51,.22)!important;
}
@media(max-width:760px){
  .drawer-content[data-tool="route"] .daailok-route-panel{gap:9px}
  .daailok-route-panel .route-block{padding:9px!important}
}

/* Status text is displayed in the pre-existing #viewport .interaction-hint,
   with its unchanged rectangle, position, dimensions and glass optics. */
html body#daailokStudio #viewport .interaction-hint[data-route-status="recording"] .interaction-hint-line{
  color:#ebc8a8!important;
}
html body#daailokStudio #viewport .interaction-hint[data-route-status="processing"] .interaction-hint-line{
  color:#e4c785!important;
}
html body#daailokStudio #viewport .interaction-hint[data-route-status="complete"] .interaction-hint-line{
  color:#c8d4cb!important;
}
html body#daailokStudio #viewport .interaction-hint[data-route-status="error"] .interaction-hint-line{
  color:#e1a69e!important;
}