.btn, .dock-btn, .chip, .tag-chip, .capture-btn, .action-label-btn, .icon-action-btn, .toast-undo-btn {
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; border: none; outline: none; font-family: inherit;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn:active, .dock-btn:active, .chip:active, .tag-chip:active, .capture-btn:active, .action-label-btn:active, .icon-action-btn:active, .toast-undo-btn:active {
  transform: scale(0.95);
}

.capture-btn {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #ffffff; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 8px 16px; border-radius: 9999px; box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4);
}
.capture-btn:hover { box-shadow: 0 6px 20px rgba(37, 99, 235, 0.6); }

.tag-chip {
  background: rgba(255, 255, 255, 0.05); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.06);
  white-space: nowrap;
}
.tag-chip:hover {
  background: rgba(59, 130, 246, 0.15); color: var(--accent-light);
  border-color: rgba(59, 130, 246, 0.3);
}

.floating-dock {
  display: flex; align-items: center; justify-content: space-around;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 9999px; padding: 4px 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.dock-btn {
  background: transparent; color: var(--text-dim);
  padding: 8px 14px; border-radius: 9999px; gap: 6px; font-size: 12px; font-weight: 600;
}
.dock-btn:hover { color: var(--text); }
.dock-btn.active { color: #ffffff; background: rgba(255, 255, 255, 0.1); }

.thought-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 100%), var(--surface);
  border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column;
  gap: 8px; animation: cardEnter 0.25s cubic-bezier(0.16, 1, 0.3, 1); word-break: break-word;
}
.thought-card.pinned {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.05) 0%, rgba(255, 255, 255, 0) 100%), var(--surface);
}

.card-top {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; color: var(--text-dim);
}
.card-body { font-size: 15px; line-height: 1.55; color: #e2e8f0; white-space: pre-wrap; }
.card-bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.card-actions { display: flex; align-items: center; gap: 4px; }

.icon-action-btn {
  width: 28px; height: 28px; border-radius: 6px; background: transparent;
  color: var(--text-dim); padding: 0;
}
.icon-action-btn:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.icon-action-btn.delete-btn:hover { color: #ef4444; }

.inline-drawer {
  max-height: 0; overflow: hidden; opacity: 0; background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: max-height 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  width: 100%; display: flex; justify-content: center;
}
.inline-drawer.open { max-height: 100px; opacity: 1; padding: 10px 18px; }
.drawer-inner { width: 100%; max-width: 640px; display: flex; gap: 8px; }

.dock-field {
  width: 100%; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; color: var(--text); outline: none;
}
.dock-field:focus { border-color: var(--accent); }

.toast-container {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 100; pointer-events: none; display: flex; flex-direction: column;
  align-items: center; gap: 8px;
}

.toast {
  pointer-events: auto; background: rgba(18, 22, 34, 0.95);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border); color: #ffffff; font-size: 12px;
  font-weight: 600; padding: 8px 16px; border-radius: 9999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: cardEnter 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex; align-items: center; gap: 10px;
}

.toast-undo-btn {
  background: rgba(59, 130, 246, 0.25); color: var(--accent-light);
  border: 1px solid rgba(59, 130, 246, 0.4); font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 9999px; text-transform: uppercase; letter-spacing: 0.04em;
}
.toast-undo-btn:hover { background: rgba(59, 130, 246, 0.45); color: #ffffff; }

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