/* OpsDesk 2.0 — smart workspace and lightweight interaction layer */

/* ── Dynamic island ─────────────────────────────────────────────────────── */
#dynamic-island {
  position: fixed;
  z-index: 260;
  top: 12px;
  left: 50%;
  width: 132px;
  min-height: 38px;
  transform: translateX(-50%);
  color: #f7f8ff;
  background: rgba(20, 20, 27, .9);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  box-shadow: 0 15px 42px rgba(20, 23, 43, .22), inset 0 1px rgba(255, 255, 255, .09);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: width .42s cubic-bezier(.34, 1.56, .64, 1), border-radius .3s ease, opacity .2s ease, visibility .2s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
body.ops-authenticated #dynamic-island { opacity: 1; visibility: visible; pointer-events: auto; }
#micro-island-trigger {
  width: 100%;
  min-height: 36px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: inherit;
  background: transparent;
  border-radius: inherit;
  font-size: 12px;
  font-weight: 700;
}
#micro-island-trigger:hover { background: rgba(255, 255, 255, .07); }
#micro-island-trigger b {
  min-width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0 5px;
  color: #d9d4ff;
  background: rgba(139, 125, 228, .2);
  border-radius: 99px;
  font-size: 10px;
}
.island-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #63e6be;
  box-shadow: 0 0 12px rgba(99, 230, 190, .9);
}
#island-status {
  position: absolute;
  inset: 0;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  visibility: hidden;
  opacity: 0;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.island-status-icon {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #10261f;
  background: #63e6be;
}
#dynamic-island[data-type="error"] .island-status-icon { color: #3a1219; background: #ff8395; }
#dynamic-island[data-type="info"] .island-status-icon { color: #141b3d; background: #9eabff; }
#dynamic-island.is-notifying { width: min(420px, calc(100vw - 28px)); }
#dynamic-island.is-notifying #micro-island-trigger { visibility: hidden; opacity: 0; }
#dynamic-island.is-notifying #island-status { visibility: visible; opacity: 1; transition: opacity .18s ease .08s; }
#dynamic-island.is-composing { width: min(680px, calc(100vw - 30px)); border-radius: 18px; }
#dynamic-island.is-composing #micro-island-trigger { display: none; }
#micro-log-compose { display: flex; align-items: center; width: 100%; padding: 5px 7px 5px 16px; }
#micro-log-compose input {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  color: #f7f8ff;
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 13px;
}
#micro-log-compose input::placeholder { color: #9599a8; }
#micro-log-compose button { width: 28px; height: 28px; color: #c9c4ee; background: rgba(255, 255, 255, .08); border-radius: 9px; }
#dynamic-island.is-jelly { animation: islandJelly .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes islandJelly { 35% { transform: translateX(-50%) scale(.9, 1.1); } 70% { transform: translateX(-50%) scale(1.04, .96); } }

/* ── Drawers ────────────────────────────────────────────────────────────── */
#smart-drawer-backdrop {
  position: fixed;
  z-index: 220;
  inset: 0;
  background: rgba(34, 38, 60, .24);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.smart-drawer {
  position: fixed;
  z-index: 230;
  top: 0;
  right: 0;
  width: min(480px, 94vw);
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: rgba(250, 251, 255, .96);
  border-left: 1px solid rgba(205, 210, 226, .8);
  box-shadow: -24px 0 70px rgba(38, 43, 72, .17);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transform: translateX(105%);
  transition: transform .42s cubic-bezier(.22, 1, .36, 1);
}
.smart-drawer.is-open { transform: translateX(0); }
.smart-drawer > header {
  min-height: 92px;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(125deg, rgba(139,125,228,.1), rgba(71,191,163,.08));
}
.smart-drawer h2 { margin-top: 3px; font-size: 20px; }
.drawer-kicker { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: 1.8px; }
.drawer-close { width: 34px; height: 34px; color: var(--text2); background: rgba(255,255,255,.8); border: 1px solid var(--border); border-radius: 11px; font-size: 22px; }
.drawer-content { flex: 1; overflow-y: auto; padding: 22px; }
.drawer-empty { padding: 18px; color: var(--text3); background: #f4f5f9; border-radius: 13px; text-align: center; font-size: 12px; }
.drawer-empty.large { margin-top: 18px; padding: 48px 24px; line-height: 1.7; }
.global-section { margin-bottom: 26px; }
.global-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.global-section-head h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.global-section-head h3 b { min-width: 20px; padding: 2px 6px; color: var(--accent); background: var(--accent-bg); border-radius: 99px; font-size: 10px; text-align: center; }
.global-section-head button { color: var(--accent); background: transparent; font-size: 11px; font-weight: 700; }
.global-resource {
  width: 100%;
  min-width: 0;
  margin-bottom: 8px;
  padding: 11px 12px;
  display: flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  background: white;
  border: 1px solid var(--border);
  border-radius: 13px;
  text-align: left;
  transition: transform var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.global-resource:hover { transform: translateX(3px); border-color: #cbc3f5; box-shadow: var(--shadow-sm); }
.global-resource > span { width: 28px; height: 28px; display: grid; place-items: center; color: var(--accent); background: var(--accent-bg); border-radius: 9px; font: 700 11px/1 monospace; }
.global-resource > div { min-width: 0; display: grid; gap: 2px; }
.global-resource strong, .global-resource small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.global-resource strong { font-size: 12px; }
.global-resource small { color: var(--text3); font-size: 10px; }

/* ── Global workspace card ──────────────────────────────────────────────── */
.global-workspace-card {
  grid-column: 1 / -1;
  min-height: 176px;
  color: white;
  background: radial-gradient(circle at var(--spot-x, 70%) var(--spot-y, 30%), rgba(255,255,255,.18), transparent 34%), linear-gradient(125deg, #4d45a6, #6858d9 48%, #2d9e8a);
  border: 0;
  box-shadow: 0 22px 48px rgba(78, 67, 169, .22);
}
.global-workspace-card::before { background: rgba(255,255,255,.75); }
.global-workspace-card::after { background: rgba(255,255,255,.16); }
.global-workspace-card h3, .global-workspace-card p, .global-workspace-card .project-stat, .global-workspace-card .project-stat strong { color: white; }
.global-workspace-card p, .global-workspace-card .project-stat { opacity: .78; }
.global-workspace-card .project-card-icon { background: rgba(255,255,255,.16) !important; color: white !important; border: 1px solid rgba(255,255,255,.2); }
.global-card-hint { position: absolute; z-index: 2; right: 22px; bottom: 20px; color: rgba(255,255,255,.72); font-size: 11px; white-space: nowrap; }
.global-workspace-card .project-card-stats { align-items: flex-start; gap: 12px; padding-right: 150px; }
.global-workspace-card .project-stat { display: grid; grid-template-rows: 28px auto; width: 82px; line-height: 1.2; text-align: center; }
.global-workspace-card .project-stat strong { height: 28px; display: flex; align-items: center; justify-content: center; font-size: 20px; line-height: 1; }

/* ── Card spotlight / 3D tilt ───────────────────────────────────────────── */
[data-tilt-ready="true"] {
  --spot-x: 50%;
  --spot-y: 50%;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  position: relative;
  isolation: isolate;
  transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), box-shadow var(--trans), border-color var(--trans);
}
[data-tilt-ready="true"] > * { z-index: 1; }
[data-tilt-ready="true"] > :not(.project-card-actions):not(.global-card-hint) { position: relative; }
[data-tilt-ready="true"] > .project-card-actions { z-index: 2; }
[data-tilt-ready="true"]::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(circle 220px at var(--spot-x) var(--spot-y), rgba(255,255,255,.6), transparent 58%);
  opacity: .32;
  transition: opacity .2s ease;
}
[data-tilt-ready="true"]:hover::before { opacity: .55; }
.global-workspace-card[data-tilt-ready="true"]::before { background: radial-gradient(circle 260px at var(--spot-x) var(--spot-y), rgba(255,255,255,.25), transparent 62%); }

/* ── Command assembler ──────────────────────────────────────────────────── */
.module-actions { display: flex; align-items: center; gap: 8px; }
.placeholder-helper { margin: -7px 0 15px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.placeholder-helper > span, .section-label { color: var(--text3); font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; }
.placeholder-helper button { padding: 4px 7px; color: #6254b7; background: #f2efff; border: 1px solid #dfd9ff; border-radius: 7px; font: 600 10px/1.2 monospace; }
.placeholder-helper button:hover { color: white; background: var(--accent); }
.assembler-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.custom-params { margin: 5px 0 14px; padding: 14px; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; background: #f7f8fc; border: 1px solid var(--border); border-radius: 13px; }
.custom-params > .section-label { grid-column: 1 / -1; }
.custom-params .form-group { margin: 0; }
.assembler-output { margin-top: 10px; }
.assembler-output pre {
  min-height: 92px;
  margin-top: 7px;
  padding: 15px;
  overflow: auto;
  color: #dce3f1;
  background: #151924;
  border: 1px solid #2a3140;
  border-radius: 13px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.65 "Cascadia Code", "Fira Code", monospace;
}
.assembler-output mark { padding: 2px 4px; color: #ffd1d9; background: rgba(239,68,68,.22); border-radius: 4px; }
.assembler-output small { display: block; margin-top: 7px; color: var(--text3); }

/* ── AI parser ──────────────────────────────────────────────────────────── */
.ai-status { margin-bottom: 14px; padding: 10px 12px; display: flex; align-items: center; gap: 8px; border-radius: 11px; font-size: 11px; }
.ai-status i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; }
.ai-status.ready { color: #18765f; background: #eaf9f4; border: 1px solid #bde8db; }
.ai-status.ready i { background: #32b995; box-shadow: 0 0 9px #64d9bc; }
.ai-status.missing { color: #9c5a14; background: #fff6e8; border: 1px solid #f0d8af; }
.ai-status.missing i { background: #e69b3d; }
.ai-parse-actions { margin: -4px 0 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ai-parse-actions span { color: var(--text3); font-size: 11px; }
.ai-preview-empty { padding: 30px; color: var(--text3); background: #f7f8fc; border: 1px dashed var(--border2); border-radius: 13px; text-align: center; font-size: 12px; }
.ai-preview-head { margin: 8px 0; display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.ai-preview-head strong { font-size: 13px; }
.ai-preview-head span { color: var(--text3); font-size: 10px; }
.ai-preview-table { max-height: 320px; background: white; border: 1px solid var(--border); border-radius: 12px; }
.ai-preview-table th, .ai-preview-table td { min-width: 100px; padding: 6px; }
.ai-preview-table th:first-child, .ai-preview-table td:first-child { min-width: 36px; width: 36px; text-align: center; }
.ai-preview-table input:not([type="checkbox"]) { min-width: 90px; padding: 7px 8px; border-radius: 8px; font-size: 11px; }

/* ── Micro-log drawer ───────────────────────────────────────────────────── */
.micro-summary { padding: 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: white; background: linear-gradient(120deg, #222431, #3d365d); border-radius: 15px; }
.micro-summary > div { display: flex; align-items: baseline; gap: 8px; }
.micro-summary strong { font-size: 28px; }
.micro-summary span { color: #b9b9c8; font-size: 11px; }
.micro-summary .btn { font-size: 11px; }
.micro-log-list { position: relative; margin-top: 18px; padding-left: 15px; }
.micro-log-list::before { content: ""; position: absolute; top: 7px; bottom: 7px; left: 4px; width: 1px; background: linear-gradient(var(--accent), transparent); }
.micro-log-item { position: relative; padding: 0 28px 16px 13px; display: grid; grid-template-columns: 58px 1fr; gap: 10px; }
.micro-log-item::before { content: ""; position: absolute; top: 6px; left: -14px; width: 7px; height: 7px; background: var(--accent); border: 3px solid #fafbff; border-radius: 50%; box-shadow: 0 0 0 3px var(--accent-bg); }
.micro-log-item time { padding-top: 2px; color: var(--text3); font-size: 9px; }
.micro-log-item div > span { display: inline-block; margin-bottom: 4px; padding: 2px 7px; color: var(--project-color); background: color-mix(in srgb, var(--project-color) 10%, white); border-radius: 99px; font-size: 9px; font-weight: 700; }
.micro-log-item p { color: var(--text); font-size: 12px; line-height: 1.55; }
.micro-log-item > button { position: absolute; right: 0; top: 0; width: 24px; height: 24px; color: var(--text3); background: transparent; border-radius: 7px; }
.micro-log-item > button:hover { color: var(--danger); background: #fff0f2; }
.report-loading { margin-top: 18px; padding: 18px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text2); background: #f7f8fc; border-radius: 12px; font-size: 12px; }
.daily-report { margin-top: 20px; padding: 16px; background: white; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-sm); }
.daily-report pre { margin: 10px 0; color: var(--text2); white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.75 inherit; }
.daily-report > small { color: var(--text3); font-size: 9px; }

/* ── Jelly copy and particles ───────────────────────────────────────────── */
.is-copy-success { animation: jellyCopy .52s cubic-bezier(.34, 1.56, .64, 1); color: #18765f !important; background: #e9f8f3 !important; }
@keyframes jellyCopy { 25% { transform: scale(.85); } 62% { transform: scale(1.08); } 100% { transform: scale(1); } }
.copy-particle {
  position: fixed;
  z-index: 500;
  width: 5px;
  height: 5px;
  pointer-events: none;
  background: var(--particle-color);
  border-radius: 50%;
  box-shadow: 0 0 9px var(--particle-color);
  animation: particleBurst .72s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes particleBurst { to { transform: translate(var(--tx), var(--ty)) scale(.2); opacity: 0; } }

/* ── Easter eggs ────────────────────────────────────────────────────────── */
#merit-rack {
  position: fixed;
  z-index: 170;
  right: 16px;
  bottom: 16px;
  min-width: 96px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #d9deea;
  background: rgba(27, 31, 43, .92);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(26, 31, 51, .24);
  backdrop-filter: blur(12px);
  font-size: 9px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
body.ops-authenticated #merit-rack { opacity: 1; visibility: visible; pointer-events: auto; }
#merit-rack:hover { transform: translateY(-2px); }
.rack-lights { display: flex; gap: 3px; }
.rack-lights i { width: 4px; height: 13px; border-radius: 99px; background: #47bfa3; box-shadow: 0 0 7px #47bfa3; animation: rackLight 1.6s ease-in-out infinite alternate; }
.rack-lights i:nth-child(2) { background: #8b7de4; box-shadow: 0 0 7px #8b7de4; animation-delay: -.6s; }
.rack-lights i:nth-child(3) { background: #62a8e5; box-shadow: 0 0 7px #62a8e5; animation-delay: -1.1s; }
@keyframes rackLight { to { opacity: .25; transform: scaleY(.7); } }
.merit-float { position: fixed; z-index: 520; pointer-events: none; color: #584bc0; font-size: 12px; font-weight: 800; text-shadow: 0 3px 12px white; animation: meritFloat 1.15s ease-out forwards; }
@keyframes meritFloat { to { transform: translate(-12px, -70px) rotate(-4deg); opacity: 0; } }
.excuse-card { padding: 26px 20px; display: grid; grid-template-columns: 54px 1fr; align-items: center; gap: 16px; background: linear-gradient(130deg, #f3f1ff, #eefaf6); border: 1px solid #ded9f8; border-radius: 16px; }
.excuse-dice { width: 54px; height: 54px; display: grid; place-items: center; color: white; background: linear-gradient(145deg, #8b7de4, #5b4dc1); border-radius: 16px; box-shadow: 0 12px 24px rgba(91,77,193,.22); font-size: 27px; }
.excuse-card p { color: var(--text); font-size: 14px; line-height: 1.7; }

@media (max-width: 700px) {
  #dynamic-island { top: 8px; }
  #dynamic-island.is-composing { width: calc(100vw - 18px); }
  #micro-log-compose { padding-left: 10px; }
  .module-actions { width: 100%; align-items: stretch; }
  .module-actions .btn { flex: 1; }
  .assembler-grid, .custom-params { grid-template-columns: 1fr; }
  .custom-params > .section-label { grid-column: auto; }
  .ai-preview-head { align-items: start; flex-direction: column; }
  .global-workspace-card { min-height: 204px; }
  .global-card-hint { display: none; }
  .global-workspace-card .project-card-stats { padding-right: 0; }
  .micro-summary { align-items: stretch; flex-direction: column; }
  .micro-log-item { grid-template-columns: 1fr; gap: 3px; }
  #merit-rack { right: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #dynamic-island, .smart-drawer, [data-tilt-ready="true"], .global-resource, #merit-rack { transition: none !important; transform: none !important; }
  #dynamic-island { transform: translateX(-50%) !important; }
  .copy-particle, .merit-float { display: none !important; }
  .rack-lights i, #dynamic-island.is-jelly, .is-copy-success { animation: none !important; }
}