/* ============================================================================
   METATRIX DEVICE LINK — sidebar-embedded connectivity panel.
   Bluetooth IoT pairing · Cast to TV (Presentation API) · Chrome Remote Desktop.
   Lives inside the Metatrix sidebar (#mtx-side) under a "Devices" section;
   falls back to a floating top-right rectangle if no sidebar is present.
   Pure CSS, themed to the sidebar (black / purple / green seam).
   ========================================================================== */
#mtx-devlink, #mtx-devlink * { box-sizing: border-box; }

/* ---- embedded-in-sidebar (default) ---- */
#mtx-devlink {
  margin: 2px 8px 8px; background: #0a0a0e; color: #ededf2;
  border: 1px solid rgba(166,108,255,0.25); border-top: 2px solid #29f19c;
  border-radius: 10px; overflow: hidden; font-size: 13px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}
/* hidden when the sidebar collapses to the icon rail */
html.mtx-side-rail #mtx-side #mtx-devlink,
html.mtx-side-rail #mtx-side .mtx-seclabel-devlink { display: none; }

/* ---- floating fallback (no sidebar on page) ---- */
#mtx-devlink.dl-float {
  position: fixed; top: 92px; right: 14px; width: 312px; z-index: 2147481500;
  border-radius: 12px; box-shadow: 0 12px 44px rgba(0,0,0,0.55); margin: 0;
}
@media (max-width: 720px) {
  #mtx-devlink.dl-float { right: 8px; width: min(312px, calc(100vw - 16px)); top: 76px; }
}

/* header */
#mtx-devlink .dl-head {
  display: flex; align-items: center; gap: 8px; padding: 9px 11px;
  background: #000; cursor: pointer; user-select: none;
}
#mtx-devlink .dl-head .dl-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #5b5b66; flex: 0 0 8px;
  transition: background .2s ease, box-shadow .2s ease;
}
#mtx-devlink.dl-live .dl-head .dl-dot { background: #29f19c; box-shadow: 0 0 8px rgba(41,241,156,0.7); }
#mtx-devlink .dl-head .dl-title {
  font-family: Georgia, "Times New Roman", serif; font-size: 14px; font-weight: 600;
  letter-spacing: .4px; color: #f4f2ff; flex: 1;
}
#mtx-devlink .dl-head .dl-caret { color: #a66cff; transition: transform .18s ease; display: grid; place-items: center; }
#mtx-devlink .dl-head .dl-caret svg { width: 15px; height: 15px; display: block; }
#mtx-devlink.dl-min .dl-head .dl-caret { transform: rotate(180deg); }
#mtx-devlink.dl-min .dl-body { display: none; }

/* body + sections */
#mtx-devlink .dl-body { padding: 2px 9px 9px; max-height: 52vh; overflow-y: auto; }
#mtx-devlink .dl-body::-webkit-scrollbar { width: 8px; }
#mtx-devlink .dl-body::-webkit-scrollbar-thumb { background: #2a2a30; border-radius: 8px; }
#mtx-devlink .dl-sec { padding: 7px 1px 2px; }
#mtx-devlink .dl-sec + .dl-sec { border-top: 1px solid rgba(166,108,255,0.14); margin-top: 7px; }
#mtx-devlink .dl-seclabel {
  font-size: 10.5px; letter-spacing: .08em; color: #7b7b86; text-transform: uppercase;
  display: flex; align-items: center; gap: 6px; padding-bottom: 5px;
}
#mtx-devlink .dl-seclabel .dl-ic { color: #a66cff; display: grid; place-items: center; }
#mtx-devlink .dl-seclabel svg { width: 13px; height: 13px; display: block; }
#mtx-devlink .dl-seclabel .dl-state { margin-left: auto; text-transform: none; letter-spacing: 0; color: #9a9aa6; font-size: 11px; }
#mtx-devlink .dl-seclabel .dl-state.ok { color: #29f19c; }
#mtx-devlink .dl-seclabel .dl-state.err { color: #ff7a7a; }

/* buttons */
#mtx-devlink .dl-btn {
  display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 7px 9px; border-radius: 8px; border: 1px solid rgba(166,108,255,0.28);
  background: rgba(166,108,255,0.08); color: #c4b3ff; font-size: 12.5px; cursor: pointer;
  text-decoration: none; margin-top: 6px; transition: background .15s ease, color .15s ease;
}
#mtx-devlink .dl-btn:hover { background: rgba(166,108,255,0.2); color: #e9e0ff; }
#mtx-devlink .dl-btn:disabled { opacity: .45; cursor: not-allowed; }
#mtx-devlink .dl-btn svg { width: 15px; height: 15px; flex: 0 0 15px; color: #a66cff; }
#mtx-devlink .dl-btn .dl-sub { margin-left: auto; color: #6b6b76; font-size: 11px; }
#mtx-devlink .dl-btn.dl-danger { border-color: rgba(255,122,122,0.3); color: #ffb3b3; background: rgba(255,122,122,0.06); }
#mtx-devlink .dl-btn.dl-danger:hover { background: rgba(255,122,122,0.16); }
#mtx-devlink .dl-btn.dl-go { border-color: rgba(41,241,156,0.35); }
#mtx-devlink .dl-btn.dl-go svg { color: #29f19c; }

/* connected device chips */
#mtx-devlink .dl-devs { display: flex; flex-direction: column; gap: 5px; margin-top: 6px; }
#mtx-devlink .dl-dev {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px;
  background: #111118; border: 1px solid rgba(41,241,156,0.25);
}
#mtx-devlink .dl-dev .dl-devdot { width: 7px; height: 7px; border-radius: 50%; background: #29f19c; flex: 0 0 7px; }
#mtx-devlink .dl-dev.dl-off .dl-devdot { background: #5b5b66; }
#mtx-devlink .dl-dev.dl-off { border-color: rgba(166,108,255,0.18); }
#mtx-devlink .dl-dev .dl-devname { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #ededf2; font-size: 12.5px; }
#mtx-devlink .dl-dev .dl-devmeta { color: #7b7b86; font-size: 11px; }
#mtx-devlink .dl-dev .dl-devx {
  border: 0; background: transparent; color: #7b7b86; cursor: pointer; font-size: 14px;
  width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
}
#mtx-devlink .dl-dev .dl-devx:hover { background: rgba(255,122,122,0.16); color: #ffb3b3; }

/* status / hint line */
#mtx-devlink .dl-msg { color: #9a9aa6; font-size: 11px; line-height: 1.45; padding: 5px 1px 0; }
#mtx-devlink .dl-msg:empty { display: none; }
#mtx-devlink .dl-msg.err { color: #ff9c9c; }
#mtx-devlink .dl-msg.ok { color: #29f19c; }
#mtx-devlink .dl-msg code { color: #c4b3ff; background: #16161e; padding: 0 4px; border-radius: 4px; font-size: 10.5px; }