/* Compact Dynamic Island style status pill for the Zalo workspace. */
#zalo-dynamic-island {
  position: fixed;
  z-index: 11000;
  top: max(10px, env(safe-area-inset-top));
  left: 50%;
  width: 142px;
  min-height: 34px;
  padding: 4px 11px;
  color: #f7fbff;
  background: #11161b;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  box-shadow: 0 5px 18px rgba(4,10,16,.28);
  transform: translateX(-50%);
  transition: min-height .24s ease, border-radius .24s ease, box-shadow .24s ease;
  font: 13px/1.2 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  user-select: none;
}

#zalo-dynamic-island .zdi-core { display:flex; align-items:center; gap:8px; min-height:25px; }
#zalo-dynamic-island .zdi-dot { width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:#35d07f; box-shadow:0 0 0 4px rgba(53,208,127,.14); }
#zalo-dynamic-island .zdi-copy { min-width:0; display:flex; flex-direction:column; gap:2px; overflow:hidden; }
#zalo-dynamic-island .zdi-title, #zalo-dynamic-island .zdi-subtitle { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#zalo-dynamic-island .zdi-title { font-size:11px; font-weight:700; }
#zalo-dynamic-island .zdi-subtitle { display:none; color:#9da9b5; font-size:11px; }
#zalo-dynamic-island .zdi-chevron { display:none; margin-left:auto; color:#8e9aa5; font-size:16px; line-height:1; transition:transform .2s ease; }
#zalo-dynamic-island .zdi-detail { display:none; align-items:center; gap:8px; padding:10px 2px 3px 18px; color:#c6d0d9; font-size:11px; }
#zalo-dynamic-island .zdi-detail-icon { color:#4fceff; font-size:14px; }
#zalo-dynamic-island.zdi-expanded { width:min(290px, calc(100vw - 24px)); min-height:72px; border-radius:21px; box-shadow:0 12px 32px rgba(4,10,16,.35); }
#zalo-dynamic-island.zdi-expanded .zdi-subtitle, #zalo-dynamic-island.zdi-expanded .zdi-chevron { display:block; }
#zalo-dynamic-island.zdi-expanded .zdi-detail { display:flex; }
#zalo-dynamic-island.zdi-expanded .zdi-chevron { transform:rotate(180deg); }
.zdi-safe-space { height:54px; }

@media (max-width:600px) {
  #zalo-dynamic-island { top:max(8px, env(safe-area-inset-top)); width:142px; padding-inline:12px; }
  .zdi-safe-space { height:58px; }
}

/* The bot workspace keeps an extra compact pill so it never crowds the chat header. */
body.workspace-page #zalo-dynamic-island { width:126px; min-height:32px; padding:3px 9px; }
body.workspace-page #zalo-dynamic-island .zdi-title { font-size:10px; }
body.workspace-page #zalo-dynamic-island.zdi-expanded { width:min(270px, calc(100vw - 24px)); min-height:68px; }