.lobster-task-fab {
  position: fixed;
  right: max(18px, calc((100vw - 430px) / 2 + 18px));
  bottom: max(96px, calc(82px + env(safe-area-inset-bottom)));
  z-index: 1250;
  width: 54px;
  min-width: 54px;
  height: 54px;
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, #2563eb, #0ea5e9);
  box-shadow: 0 16px 34px rgba(37, 99, 235, .28), 0 6px 16px rgba(14, 165, 233, .2);
  cursor: grab;
  touch-action: none;
  user-select: none;
  overflow: hidden;
}

.lobster-task-fab::before,
.lobster-task-panel::before {
  content: "";
  position: absolute;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, .82) 50%, transparent 58%);
  animation: lobster-task-sweep 3.2s linear infinite;
}

.lobster-task-fab::before { inset: 3px; border: 1px solid rgba(255, 255, 255, .24); border-radius: inherit; background: none; animation: none; }
.lobster-task-fab svg { position: relative; width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.lobster-task-fab i { position: absolute; top: 2px; right: 2px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #94a3b8; }
.lobster-task-fab.is-active i { background: #22c55e; box-shadow: 0 0 14px rgba(34, 197, 94, .8); }
.lobster-task-fab.is-dragging { cursor: grabbing; transition: none; }
.lobster-task-fab:not(.is-dragging):active { transform: scale(.96); }

.lobster-task-panel {
  position: fixed;
  z-index: 1251;
  width: min(390px, calc(100vw - 24px));
  max-height: min(52vh, 430px);
  border: 1px solid rgba(56, 189, 248, .42);
  border-radius: 12px;
  color: #0f2942;
  background: linear-gradient(145deg, rgba(240, 249, 255, .99), rgba(224, 247, 255, .98));
  box-shadow: 0 22px 54px rgba(14, 116, 144, .24);
  overflow: hidden;
}

.lobster-task-panel::before { inset: -70% -30%; background: linear-gradient(112deg, transparent 43%, rgba(103, 232, 249, .46) 50%, transparent 57%); }
.lobster-task-panel[hidden] { display: none; }
.lobster-task-head { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 10px 12px 10px 15px; border-bottom: 1px solid rgba(14, 165, 233, .2); background: rgba(186, 230, 253, .34); }
.lobster-task-head strong { font-size: 15px; color: #075985; }
.lobster-task-close { width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px; color: #075985; background: transparent; font-size: 22px; line-height: 1; }
.lobster-task-list { position: relative; max-height: calc(min(52vh, 430px) - 49px); padding: 10px; overflow: auto; }
.lobster-task-empty { padding: 24px 10px; color: #52718d; text-align: center; font-size: 13px; }
.lobster-task-card { position: relative; display: flex; align-items: flex-start; gap: 10px; min-height: 64px; margin-bottom: 8px; padding: 12px; border: 1px solid rgba(56, 189, 248, .25); border-radius: 8px; background: rgba(255, 255, 255, .78); box-shadow: 0 5px 16px rgba(14, 116, 144, .07); overflow: hidden; }
.lobster-task-card:last-child { margin-bottom: 0; }
.lobster-task-card::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 2px; background: linear-gradient(90deg, transparent, #22d3ee, #60a5fa, #22d3ee, transparent); background-size: 200% 100%; animation: lobster-task-line 1.8s linear infinite; }
.lobster-task-copy { min-width: 0; flex: 1; }
.lobster-task-title { overflow: hidden; color: #0c4a6e; font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.lobster-task-message { margin-top: 6px; color: #45657f; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.lobster-task-stop { flex: 0 0 auto; min-width: 48px; padding: 6px 9px; border: 1px solid rgba(251, 113, 133, .42); border-radius: 6px; color: #be123c; background: #fff1f2; font-size: 12px; }
.lobster-task-stop:disabled { opacity: .55; }

@keyframes lobster-task-sweep { from { transform: translateX(-45%); } to { transform: translateX(45%); } }
@keyframes lobster-task-line { from { background-position: 200% 0; } to { background-position: -20% 0; } }