/*
 * ScotNet Gizmo v1.0.1
 * Isolated robot, speech bubble and operations panel styles.
 */

#gizmo-home-anchor{
  position:fixed;
  right:18px;
  bottom:120px;
  width:1px;
  height:1px;
  pointer-events:none;
  opacity:0;
  z-index:1;
}

#scotnet-bot{
  position:fixed;
  right:16px;
  bottom:14px;
  width:72px;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10004;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  border-radius:24px;
  transition:transform .18s ease, filter .18s ease;
  filter:drop-shadow(0 11px 18px rgba(15,23,42,.22));
}

#scotnet-bot:hover{
  transform:translateY(-3px);
}

#scotnet-bot:active{
  transform:translateY(-1px) scale(.97);
}

#scotnet-bot .gizmo-robot{
  width:72px;
  height:72px;
  overflow:visible;
}

#scotnet-bot .gizmo-shadow{
  fill:rgba(15,23,42,.16);
}

#scotnet-bot .gizmo-body{
  fill:#dbe7f0;
  stroke:#7890a6;
  stroke-width:2;
}

#scotnet-bot .gizmo-face{
  fill:#15283a;
  stroke:#68839c;
  stroke-width:1.5;
}

#scotnet-bot .gizmo-neck{
  fill:#91a5b8;
}

#scotnet-bot .gizmo-antenna,
#scotnet-bot .gizmo-arm{
  fill:none;
  stroke:#7890a6;
  stroke-width:3;
  stroke-linecap:round;
}

#scotnet-bot .gizmo-eye{
  fill:#dff7ff;
  transform-origin:center;
}

#scotnet-bot .gizmo-mouth{
  fill:none;
  stroke:#dff7ff;
  stroke-width:2;
  stroke-linecap:round;
}

#scotnet-bot .gizmo-mouth-flat,
#scotnet-bot .gizmo-mouth-worried{
  display:none;
}

#scotnet-bot .gizmo-led-halo{
  fill:rgba(148,163,184,.18);
}

#scotnet-bot .gizmo-led,
#scotnet-bot .gizmo-chest-light{
  fill:#94a3b8;
  transition:fill .2s ease, filter .2s ease;
}

#scotnet-bot[data-state="healthy"] .gizmo-led,
#scotnet-bot[data-state="healthy"] .gizmo-chest-light{
  fill:#22c55e;
  filter:drop-shadow(0 0 5px rgba(34,197,94,.75));
}

#scotnet-bot[data-state="critical"] .gizmo-led,
#scotnet-bot[data-state="critical"] .gizmo-chest-light{
  fill:#ef4444;
  filter:drop-shadow(0 0 7px rgba(239,68,68,.88));
  animation:gizmo-led-critical .72s ease-in-out infinite;
}

#scotnet-bot[data-state="critical"] .gizmo-mouth-happy,
#scotnet-bot[data-state="critical"] .gizmo-mouth-flat{
  display:none;
}

#scotnet-bot[data-state="critical"] .gizmo-mouth-worried{
  display:block;
}

#scotnet-bot[data-state="critical"] .gizmo-eye{
  fill:#ffd9d9;
}

#scotnet-bot[data-state="degraded"] .gizmo-led,
#scotnet-bot[data-state="degraded"] .gizmo-chest-light{
  fill:#f59e0b;
  filter:drop-shadow(0 0 6px rgba(245,158,11,.7));
}

#scotnet-bot[data-state="degraded"] .gizmo-mouth-happy,
#scotnet-bot[data-state="degraded"] .gizmo-mouth-worried{
  display:none;
}

#scotnet-bot[data-state="degraded"] .gizmo-mouth-flat{
  display:block;
}

#scotnet-bot[data-state="maintenance"] .gizmo-led,
#scotnet-bot[data-state="maintenance"] .gizmo-chest-light{
  fill:#3b82f6;
  filter:drop-shadow(0 0 6px rgba(59,130,246,.72));
}

#scotnet-bot[data-state="maintenance"] .gizmo-mouth-happy,
#scotnet-bot[data-state="maintenance"] .gizmo-mouth-worried{
  display:none;
}

#scotnet-bot[data-state="maintenance"] .gizmo-mouth-flat{
  display:block;
}

@keyframes gizmo-led-critical{
  0%,100%{opacity:1}
  50%{opacity:.34}
}

@keyframes gizmo-eye-blink{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.08)}
}

#scotnet-bot .gizmo-eye.blink{
  animation:gizmo-eye-blink .18s ease-in-out 1;
}

#gizmo-bubble{
  --gizmo-bubble-right:22px;
  --gizmo-bubble-bottom:94px;
  position:fixed;
  right:var(--gizmo-bubble-right);
  bottom:var(--gizmo-bubble-bottom);
  width:max-content;
  max-width:min(310px, calc(100vw - 32px));
  padding:11px 14px;
  background:color-mix(in srgb, var(--card) 95%, transparent);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:15px 15px 4px 15px;
  box-shadow:0 15px 38px rgba(15,23,42,.16);
  font-size:13px;
  line-height:1.45;
  opacity:0;
  pointer-events:none;
  transform:translateY(7px) scale(.98);
  transform-origin:bottom right;
  transition:opacity .2s ease, transform .2s ease;
  z-index:10003;
  backdrop-filter:blur(10px);
}

#gizmo-bubble.show{
  opacity:1;
  transform:translateY(0) scale(1);
}

#gizmo-panel{
  position:fixed;
  right:16px;
  bottom:96px;
  width:min(390px, calc(100vw - 32px));
  max-height:min(690px, calc(100vh - 120px));
  overflow:auto;
  overscroll-behavior:contain;
  background:color-mix(in srgb, var(--card) 97%, transparent);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:22px;
  box-shadow:0 24px 70px rgba(15,23,42,.22);
  padding:14px;
  z-index:10002;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(14px) scale(.98);
  transform-origin:bottom right;
  transition:opacity .18s ease, transform .18s ease, visibility .18s step-end;
  backdrop-filter:blur(18px);
}

#gizmo-panel.show{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0) scale(1);
  transition:opacity .18s ease, transform .18s ease, visibility 0s;
}

#gizmo-panel .gp-header{
  display:grid;
  grid-template-columns:1fr auto auto;
  align-items:center;
  gap:10px;
  padding:2px 2px 12px;
}

#gizmo-panel .gp-identity{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

#gizmo-panel .gp-identity > span:last-child{
  display:flex;
  flex-direction:column;
  min-width:0;
}

#gizmo-panel .gp-identity strong{
  font-size:15px;
  line-height:1.2;
}

#gizmo-panel .gp-identity small{
  color:var(--muted);
  font-size:11px;
  line-height:1.35;
}

#gizmo-panel .gp-state-dot{
  width:11px;
  height:11px;
  flex:0 0 11px;
  border-radius:50%;
  background:#94a3b8;
  box-shadow:0 0 0 4px rgba(148,163,184,.13);
}

#gizmo-panel[data-state="healthy"] .gp-state-dot{background:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.14)}
#gizmo-panel[data-state="critical"] .gp-state-dot{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.14)}
#gizmo-panel[data-state="degraded"] .gp-state-dot{background:#f59e0b;box-shadow:0 0 0 4px rgba(245,158,11,.15)}
#gizmo-panel[data-state="maintenance"] .gp-state-dot{background:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.15)}

#gizmo-panel .gp-version{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--soft);
  color:var(--muted);
  font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;
}

#gizmo-panel .gp-icon-btn{
  width:38px;
  min-height:38px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:var(--muted);
  font-size:24px;
  line-height:1;
  cursor:pointer;
}

#gizmo-panel .gp-icon-btn:hover{
  background:var(--soft);
  color:var(--text);
}

#gizmo-panel .gp-status-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:17px;
  padding:15px;
  background:linear-gradient(145deg, color-mix(in srgb, var(--soft) 72%, var(--card)), var(--card));
}

#gizmo-panel .gp-status-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:#94a3b8;
}

#gizmo-panel[data-state="healthy"] .gp-status-card::before{background:#22c55e}
#gizmo-panel[data-state="critical"] .gp-status-card::before{background:#ef4444}
#gizmo-panel[data-state="degraded"] .gp-status-card::before{background:#f59e0b}
#gizmo-panel[data-state="maintenance"] .gp-status-card::before{background:#3b82f6}

#gizmo-panel .gp-status-copy{
  display:flex;
  flex-direction:column;
  gap:3px;
}

#gizmo-panel .gp-eyebrow{
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

#gizmo-panel .gp-status-copy strong{
  font-size:18px;
  line-height:1.25;
}

#gizmo-panel .gp-status-copy > span:last-child{
  color:var(--muted);
  font-size:12px;
  line-height:1.45;
}

#gizmo-panel .gp-counts{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
  margin-top:13px;
}

#gizmo-panel .gp-counts span{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:52px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 82%, transparent);
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.04em;
}

#gizmo-panel .gp-counts strong{
  color:var(--text);
  font-size:17px;
  line-height:1.1;
}

#gizmo-panel .gp-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:11px;
}

#gizmo-panel .gp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--text);
  font:700 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:transform .08s ease, border-color .15s ease, background .15s ease;
}

#gizmo-panel .gp-btn:hover{
  text-decoration:none;
  border-color:color-mix(in srgb, var(--link) 45%, var(--border));
}

#gizmo-panel .gp-btn:active{transform:scale(.98)}
#gizmo-panel .gp-btn:disabled{opacity:.62;cursor:wait}

#gizmo-panel .gp-btn-primary{
  background:var(--link);
  border-color:var(--link);
  color:#fff;
}

#gizmo-panel .gp-updated{
  display:block;
  margin-top:9px;
  color:var(--muted);
  font-size:10px;
  text-align:right;
}

#gizmo-panel .gp-events{
  margin-top:13px;
}

#gizmo-panel .gp-section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 2px 7px;
}

#gizmo-panel .gp-section-heading strong{
  font-size:12px;
}

#gizmo-panel .gp-section-heading span{
  color:var(--muted);
  font-size:10px;
}

#gizmo-panel .gp-event-list{
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:var(--card);
}

#gizmo-panel .gp-event-item{
  display:grid;
  grid-template-columns:9px 1fr;
  align-items:start;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}

#gizmo-panel .gp-event-item:last-child{border-bottom:0}

#gizmo-panel .gp-event-marker{
  width:8px;
  height:8px;
  margin-top:4px;
  border-radius:50%;
  background:#94a3b8;
}

#gizmo-panel .gp-event-item[data-event-state="critical"] .gp-event-marker{background:#ef4444}
#gizmo-panel .gp-event-item[data-event-state="healthy"] .gp-event-marker{background:#22c55e}
#gizmo-panel .gp-event-item[data-event-state="maintenance"] .gp-event-marker{background:#3b82f6}
#gizmo-panel .gp-event-item[data-event-state="degraded"] .gp-event-marker{background:#f59e0b}

#gizmo-panel .gp-event-copy{
  display:flex;
  flex-direction:column;
  min-width:0;
}

#gizmo-panel .gp-event-copy strong{
  overflow-wrap:anywhere;
  font-size:11px;
  line-height:1.35;
}

#gizmo-panel .gp-event-copy span{
  color:var(--muted);
  font-size:10px;
  line-height:1.4;
}

#gizmo-panel .gp-event-empty{
  padding:13px;
  color:var(--muted);
  font-size:11px;
  text-align:center;
}

#gizmo-panel .gp-ask-wrap{
  margin-top:12px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:10px 2px;
}

#gizmo-panel .gp-ask-wrap summary{
  cursor:pointer;
  color:var(--text);
  font-size:12px;
  font-weight:800;
}

#gizmo-panel .gp-ask-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-top:10px;
}

#gizmo-panel .gp-input{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--card);
  color:var(--text);
  font:400 12px/1.3 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

#gizmo-panel .gp-note{
  margin-top:9px;
  color:var(--muted);
  font-size:11px;
  line-height:1.45;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

#gizmo-panel .gp-footer-actions{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  justify-content:center;
  padding:10px 2px 0;
}

#gizmo-panel .gp-text-btn{
  min-height:34px;
  padding:5px 2px;
  border:0;
  background:transparent;
  color:var(--muted);
  font:700 10px/1.25 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  cursor:pointer;
}

#gizmo-panel .gp-text-btn:hover{
  color:var(--link);
}

#gizmo-panel .gp-text-btn[aria-pressed="true"]{
  color:#f59e0b;
}

#gizmo-panel .gp-danger-text:hover{
  color:#ef4444;
}

:root[data-theme="dark"] #scotnet-bot .gizmo-body{
  fill:#9fb1c1;
  stroke:#d4e0e9;
}

:root[data-theme="dark"] #scotnet-bot .gizmo-face{
  fill:#071421;
  stroke:#607d96;
}

@media (max-width:600px){
  #scotnet-bot{
    right:10px;
    bottom:10px;
    width:66px;
    height:66px;
  }

  #scotnet-bot .gizmo-robot{
    width:66px;
    height:66px;
  }

  #gizmo-panel{
    right:10px;
    bottom:84px;
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 104px);
    border-radius:20px;
  }

  #gizmo-bubble{
    max-width:calc(100vw - 24px);
  }
}

@media (max-width:380px){
  #gizmo-panel .gp-header{
    grid-template-columns:1fr auto;
  }

  #gizmo-panel .gp-version{
    display:none;
  }

  #gizmo-panel .gp-counts span{
    min-height:48px;
  }
}

@media (prefers-reduced-motion:reduce){
  #scotnet-bot,
  #gizmo-panel,
  #gizmo-bubble{
    transition:none !important;
  }

  #scotnet-bot[data-state="critical"] .gizmo-led,
  #scotnet-bot[data-state="critical"] .gizmo-chest-light,
  #scotnet-bot .gizmo-eye.blink{
    animation:none !important;
  }
}
