/* ==========================================================
   ClawView — Advanced Styles (Dark Theme)
   ========================================================== */

/* --- Variables --- */
:root {
  --muted: #93a4c7;
  --text: #eaf0ff;
  --accent: #7aa2ff;
  --ok: #3ddc97;
  --warn: #ffd166;
  --bad: #ff5c7a;
}

/* ==========================================================
   1. Animations & Transitions
   ========================================================== */

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .7; }
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(.9); opacity: .6; }
  50%      { transform: scale(1.1); opacity: 1; }
}

.cardItem {
  animation: fadeInUp .3s ease both;
  transition: transform .18s ease, box-shadow .18s ease;
}

.cardItem:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 18px rgba(122, 162, 255, .18);
}

.drawer {
  transition: transform .25s cubic-bezier(.22, 1, .36, 1);
}

.toast-enter {
  animation: slideInRight .3s ease both;
}

.toast-exit {
  animation: fadeOut .25s ease both;
}

/* ==========================================================
   2. Custom Scrollbar
   ========================================================== */

::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(122, 162, 255, .3);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(122, 162, 255, .5);
}

/* ==========================================================
   3. Micro-interactions
   ========================================================== */

.chip {
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.badge.blocked {
  animation: pulse 2s infinite;
}

.status {
  animation: pulse-dot 2s infinite;
}

.avatar:hover {
  transform: scale(1.1);
  transition: transform .15s ease;
}

.btn:active {
  transform: scale(.97);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================
   4. Typography
   ========================================================== */

.cardTitle {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 600;
  font-size: .95rem;
  line-height: 1.35;
}

.panel .txt {
  background: rgba(0, 0, 0, .2);
  padding: 8px;
  border-radius: 8px;
  font-size: .85rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ==========================================================
   5. Dark Refinements
   ========================================================== */

.cardItem:nth-child(even) {
  background: rgba(255, 255, 255, .02);
}

.listHead {
  background: rgba(255, 255, 255, .02);
}

/* ==========================================================
   6. Responsiveness
   ========================================================== */

/* --- Desktop (default, ≥1025px) --- */
@media (min-width: 1025px) {
  /* layout padrão — nenhum override necessário */
}

/* --- Tablet (768–1024px) --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    width: 200px;
  }
}

/* --- Mobile (≤767px) --- */
@media (max-width: 767px) {
  .sidebar {
    position: fixed;
    inset: 0;
    z-index: 900;
    width: 80%;
    max-width: 300px;
    transform: translateX(-100%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .cardItem {
    width: 100% !important;
  }

  .drawer {
    width: 100% !important;
  }
}

/* ── Inbox Chat ── */
#inboxChat{max-height:45vh;overflow-y:auto;padding:8px 4px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
.inbox-empty{color:var(--muted);font-size:13px;padding:12px 0;text-align:center}
.inbox-msg{display:flex;max-width:85%}
.inbox-msg-user{align-self:flex-end;justify-content:flex-end}
.inbox-msg-assistant{align-self:flex-start}
.inbox-bubble{padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.45;word-break:break-word;white-space:pre-wrap}
.inbox-msg-user .inbox-bubble{background:rgba(122,162,255,.18);border:1px solid rgba(122,162,255,.30);color:#dbe7ff;border-bottom-right-radius:4px}
.inbox-msg-assistant .inbox-bubble{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.10);color:var(--text);border-bottom-left-radius:4px}

/* Typing indicator */
.inbox-typing{display:flex;gap:4px;align-items:center;padding:10px 16px}
.inbox-typing span{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:inboxDot 1.4s infinite both}
.inbox-typing span:nth-child(2){animation-delay:.2s}
.inbox-typing span:nth-child(3){animation-delay:.4s}
@keyframes inboxDot{0%,80%,100%{opacity:.3;transform:scale(.8)}40%{opacity:1;transform:scale(1.1)}}

/* Story preview cards */
.inbox-story-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.10);border-radius:12px;padding:10px 12px;margin-bottom:8px}
.inbox-story-title{font-weight:700;font-size:13px;color:var(--text)}
.inbox-story-desc{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4}
.inbox-story-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.inbox-story-meta .risk-high{border-color:rgba(255,92,122,.4);color:#ffd6de;background:rgba(255,92,122,.12)}
.inbox-story-meta .risk-med{border-color:rgba(255,209,102,.4);color:#ffe7b8;background:rgba(255,209,102,.12)}
.inbox-story-meta .risk-low{border-color:rgba(61,220,151,.4);color:#b5ffd9;background:rgba(61,220,151,.12)}
.inbox-story-dod{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.6}

/* Agent Live Card Animations */
.agentLiveCard.working .statusIndicator {
  animation: pulse-dot 1.5s ease-in-out infinite;
  box-shadow: 0 0 0 4px rgba(61,220,151,.2);
}

.agentLiveCard .heartbeat-time {
  font-size: .7rem;
  color: var(--muted);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.agentLiveCard .heartbeat-time.recent {
  color: var(--ok);
}

.agentLiveCard .heartbeat-time.stale {
  color: var(--warn);
}

.liveOutput {
  max-height: 120px;
  overflow-y: auto;
  margin-top: 8px;
  padding: 8px;
  background: rgba(0,0,0,.3);
  border-radius: 6px;
  font-size: .75rem;
  font-family: ui-monospace, monospace;
  scrollbar-width: thin;
}

.liveOutputLine {
  margin-bottom: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.liveOutputLine:last-child {
  color: var(--text);
  font-weight: 500;
}