/* OpenClaw Portal — custom styles on top of Tailwind */

/* Smooth scrollbar */
* { scrollbar-width: thin; scrollbar-color: #374151 transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: #374151; border-radius: 3px; }

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Gray-850 (between 800 and 900) */
.bg-gray-850 { background-color: #1c2029; }
.hover\:bg-gray-850:hover { background-color: #1c2029; }

/* HTMX loading indicator */
.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }
.htmx-request .htmx-indicator { opacity: 1; }
.htmx-request.htmx-indicator { opacity: 1; }

/* Disable and dim buttons while htmx request is in flight */
form.htmx-request button {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

/* Claw brand colour utilities (Tailwind extend doesn't always pick these up at CDN) */
.text-claw { color: #e85d2f; }
.text-claw-light { color: #f07050; }
.bg-claw { background-color: #e85d2f; }
.hover\:bg-claw:hover { background-color: #e85d2f; }
.bg-claw-dark { background-color: #c44d22; }
.hover\:bg-claw-dark:hover { background-color: #c44d22; }
.border-claw { border-color: #e85d2f; }
.border-claw\/30 { border-color: rgba(232,93,47,0.3); }
.bg-claw\/20 { background-color: rgba(232,93,47,0.2); }

/* Animate pulse for live indicator */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4,0,0.6,1) infinite; }

/* Focus ring */
input:focus, button:focus { outline: none; }