/**
 * HeuriSight Button System
 * Based on: mockups/apple-redesign/05-assessment-detail.html
 * 
 * Usage: Use hs-btn class with modifiers
 * Examples:
 *   <button class="hs-btn hs-btn--primary">Primary</button>
 *   <button class="hs-btn hs-btn--secondary">Secondary</button>
 *   <button class="hs-btn hs-btn--ghost">Ghost</button>
 *   <button class="hs-btn hs-btn--danger">Danger</button>
 *   <button class="hs-btn hs-btn--sm hs-btn--primary">Small Primary</button>
 */

/* =============================================================================
   BASE BUTTON
   ============================================================================= */

.hs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border-radius: var(--radius-sm, 8px);
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-primary, #1D1D1F);
    transition: all var(--duration-fast, 150ms) var(--ease-default, cubic-bezier(0.25, 0.1, 0.25, 1));
    white-space: nowrap;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

.hs-btn:focus-visible {
    outline: 2px solid var(--accent, #0071E3);
    outline-offset: 2px;
}

.hs-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* SVG icons inside buttons */
.hs-btn svg,
.hs-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

/* When inside .hs-btn, icons don't need margin (gap handles it) */
.hs-btn .hs-btn-icon {
    margin-right: 0;
}

/* Legacy btn classes with icons */
.btn .hs-btn-icon,
button .hs-btn-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

/* =============================================================================
   BUTTON VARIANTS
   ============================================================================= */

/* Primary - Blue accent */
.hs-btn--primary {
    background: var(--accent, #0071E3);
    color: #FFFFFF;
}

.hs-btn--primary:hover {
    background: var(--accent-hover, #0077ED);
}

.hs-btn--primary:active {
    background: #005BB5;
}

/* Secondary - Gray background with border */
.hs-btn--secondary {
    background: var(--bg-secondary, #F5F5F7);
    color: var(--text-primary, #1D1D1F);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
}

.hs-btn--secondary:hover {
    background: var(--gray-200, #E8E8ED);
}

.hs-btn--secondary:active {
    background: var(--gray-300, #D2D2D7);
}

/* Ghost - Transparent with hover background */
.hs-btn--ghost {
    background: transparent;
    color: var(--text-primary, #1D1D1F);
}

.hs-btn--ghost:hover {
    background: var(--border-light, rgba(0, 0, 0, 0.06));
}

.hs-btn--ghost:active {
    background: var(--border-default, rgba(0, 0, 0, 0.1));
}

/* Danger - Red for destructive actions */
.hs-btn--danger {
    background: var(--destructive, #FF3B30);
    color: #FFFFFF;
}

.hs-btn--danger:hover {
    background: #E63329;
}

.hs-btn--danger:active {
    background: #CC2D24;
}

/* Success - Green for confirmations */
.hs-btn--success {
    background: var(--success, #34C759);
    color: #FFFFFF;
}

.hs-btn--success:hover {
    background: #2DB74F;
}

.hs-btn--success:active {
    background: #28A745;
}

/* Warning - Orange/Amber */
.hs-btn--warning {
    background: var(--warning, #FF9500);
    color: #FFFFFF;
}

.hs-btn--warning:hover {
    background: #E68600;
}

/* Purple - For AI/special actions */
.hs-btn--purple {
    background: var(--purple, #AF52DE);
    color: #FFFFFF;
}

.hs-btn--purple:hover {
    background: #9D3DD0;
}

/* Text Link style button */
.hs-btn--link {
    background: transparent;
    color: var(--accent, #0071E3);
    padding: 0;
}

.hs-btn--link:hover {
    text-decoration: underline;
}

/* =============================================================================
   BUTTON SIZES
   ============================================================================= */

/* Small */
.hs-btn--sm {
    padding: var(--space-1, 4px) var(--space-3, 12px);
    font-size: var(--text-xs, 11px);
    border-radius: var(--radius-sm, 6px);
}

.hs-btn--sm svg {
    width: 14px;
    height: 14px;
}

/* Large */
.hs-btn--lg {
    padding: var(--space-3, 12px) var(--space-6, 24px);
    font-size: var(--text-base, 15px);
    border-radius: var(--radius-md, 10px);
}

.hs-btn--lg svg {
    width: 18px;
    height: 18px;
}

/* Full width */
.hs-btn--full {
    width: 100%;
}

/* =============================================================================
   ICON-ONLY BUTTON
   ============================================================================= */

.hs-btn--icon {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: var(--radius-sm, 8px);
}

.hs-btn--icon.hs-btn--sm {
    width: 28px;
    height: 28px;
}

.hs-btn--icon.hs-btn--lg {
    width: 44px;
    height: 44px;
}

/* =============================================================================
   PILL STYLE (rounded full)
   ============================================================================= */

.hs-btn--pill {
    border-radius: var(--radius-full, 9999px);
}

/* =============================================================================
   BUTTON GROUPS
   ============================================================================= */

.hs-btn-group {
    display: inline-flex;
    gap: var(--space-2, 8px);
}

.hs-btn-group--attached {
    gap: 0;
}

.hs-btn-group--attached .hs-btn {
    border-radius: 0;
}

.hs-btn-group--attached .hs-btn:first-child {
    border-radius: var(--radius-sm, 8px) 0 0 var(--radius-sm, 8px);
}

.hs-btn-group--attached .hs-btn:last-child {
    border-radius: 0 var(--radius-sm, 8px) var(--radius-sm, 8px) 0;
}

/* =============================================================================
   LOADING STATE
   ============================================================================= */

.hs-btn--loading {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.hs-btn--loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: hs-btn-spin 0.6s linear infinite;
}

@keyframes hs-btn-spin {
    to { transform: rotate(360deg); }
}

/* =============================================================================
   DARK THEME ADJUSTMENTS
   ============================================================================= */

[data-theme="dark"] .hs-btn--secondary {
    background: var(--bg-secondary, #2C2C2E);
    border-color: var(--border-default, rgba(255, 255, 255, 0.12));
}

[data-theme="dark"] .hs-btn--secondary:hover {
    background: var(--bg-tertiary, #3A3A3C);
}

[data-theme="dark"] .hs-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* =============================================================================
   REDUCED MOTION
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    .hs-btn {
        transition: none;
    }
    
    .hs-btn--loading::after {
        animation: none;
    }
}

/* =============================================================================
   LEGACY CLASS COMPATIBILITY (from mockups)
   These map mockup class names to hs-btn styles
   ============================================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border-radius: var(--radius-sm, 8px);
    font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
    color: var(--text-primary, #1D1D1F);
    transition: all var(--duration-fast, 150ms) var(--ease-default);
    white-space: nowrap;
}

.btn-primary {
    background: var(--accent, #0071E3);
    color: white;
}

.btn-primary:hover {
    background: var(--accent-hover, #0077ED);
}

.btn-secondary {
    background: var(--bg-tertiary, #E8E8ED);
    color: var(--text-primary, #1D1D1F);
}

.btn-secondary:hover {
    opacity: 0.8;
}

.btn-danger {
    background: var(--destructive, #FF3B30);
    color: white;
}

.btn-danger:hover {
    background: #E63329;
}

.btn-ghost {
    background: transparent;
    color: var(--text-secondary, #6E6E73);
}

.btn-ghost:hover {
    background: var(--border-light, rgba(0, 0, 0, 0.06));
}

/* =============================================================================
   ICON BUTTONS (Apple-style)
   ============================================================================= */

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm, 8px);
    color: var(--text-secondary, #6E6E73);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
}

.btn-icon:hover {
    background: var(--accent-subtle, rgba(0, 113, 227, 0.08));
    color: var(--accent, #0071E3);
}

.btn-icon:focus-visible {
    outline: 2px solid var(--accent, #0071E3);
    outline-offset: 2px;
}

.btn-icon svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.btn-icon--danger:hover {
    background: var(--destructive-subtle, rgba(255, 59, 48, 0.08));
    color: var(--destructive, #FF3B30);
}

.btn-icon--sm {
    width: 28px;
    height: 28px;
}

.btn-icon--sm svg {
    width: 14px;
    height: 14px;
}

/* Dark theme overrides for icon buttons */
[data-theme="dark"] .btn-icon {
    color: var(--text-secondary, #86868B);
}

[data-theme="dark"] .btn-icon:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .btn-icon--danger:hover {
    background: rgba(255, 59, 48, 0.15);
}

/* Inline icon for buttons with text */
.btn-icon-inline {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-right: var(--space-1, 4px);
}

/* =============================================================================
   CHAT ACTION BUTTONS
   ============================================================================= */

.chat-attach-button {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm, 8px);
    border: 1px solid var(--border-default, rgba(0, 0, 0, 0.1));
    background: var(--bg-secondary, #F5F5F7);
    color: var(--text-secondary, #6E6E73);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
}

.chat-attach-button:hover {
    background: var(--gray-200, #E8E8ED);
    color: var(--text-primary, #1D1D1F);
}

.chat-send-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--accent, #0071E3);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
}

.chat-send-button svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.chat-send-button:hover:not(:disabled) {
    background: var(--accent-hover, #0077ED);
}

.chat-send-button:disabled {
    background: var(--gray-300, #D2D2D7);
    cursor: not-allowed;
    opacity: 0.7;
}

.chat-stop-button {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--destructive, #FF3B30);
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--ease-default);
}

.chat-stop-button:hover {
    background: #E63329;
}

[data-theme="dark"] .chat-attach-button {
    background: var(--bg-tertiary, #3A3A3C);
    border-color: var(--border-default, rgba(255, 255, 255, 0.12));
    color: var(--text-tertiary, #86868B);
}