/**
 * ASB PWA Engine - Settings Hub Styles
 * 
 * v1.9.0: Complete rewrite for flexible layouts
 * Supports: fan (12-9 o'clock), vertical, horizontal
 * Automatic sizing based on feature count
 *
 * @version 1.9.0
 */

/* ==========================================
   CSS Variables
   ========================================== */
.asb-settings-hub {
    position: fixed !important;
    z-index: 999999 !important;
    --hub-size: 56px;
    --hub-item-size: 45px;
    --hub-bg-color: #2196F3;
    --hub-icon-color: #ffffff;
    --hub-bell-granted: #4CAF50;
    --hub-bell-denied: #f44336;
}

/* ==========================================
   Position Classes
   ========================================== */
.asb-settings-hub.pos-bottom { bottom: 20px !important; }
.asb-settings-hub.pos-top { top: 20px !important; }
.asb-settings-hub.pos-right { right: 20px !important; }
.asb-settings-hub.pos-left { left: 20px !important; }

/* ==========================================
   Main Toggle Button (Gear)
   ========================================== */
.asb-settings-hub .hub-toggle {
    width: var(--hub-size) !important;
    height: var(--hub-size) !important;
    min-width: var(--hub-size) !important;
    min-height: var(--hub-size) !important;
    max-width: var(--hub-size) !important;
    max-height: var(--hub-size) !important;
    border-radius: 50% !important;
    border: none !important;
    background-color: var(--hub-bg-color) !important;
    color: var(--hub-icon-color) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

.asb-settings-hub .hub-toggle:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
}

.asb-settings-hub .hub-toggle i {
    font-size: calc(var(--hub-size) * 0.45) !important;
    line-height: 1 !important;
    transition: transform 0.3s ease !important;
}

/* ==========================================
   Single Mode (One feature only)
   ========================================== */
.asb-settings-hub.single-mode .hub-main-single {
    width: var(--hub-size) !important;
    height: var(--hub-size) !important;
    border-radius: 50% !important;
    border: none !important;
    background-color: var(--hub-bg-color) !important;
    color: var(--hub-icon-color) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

.asb-settings-hub.single-mode .hub-main-single i {
    font-size: calc(var(--hub-size) * 0.45) !important;
}

.asb-settings-hub.single-mode .hub-main-single:hover {
    transform: scale(1.05) !important;
}

/* Single mode bell colors */
.asb-settings-hub.single-mode .hub-bell.granted {
    background-color: var(--hub-bell-granted) !important;
}

.asb-settings-hub.single-mode .hub-bell.denied,
.asb-settings-hub.single-mode .hub-bell.default {
    background-color: var(--hub-bell-denied) !important;
}

/* ==========================================
   Sub Items Container
   ========================================== */
.asb-settings-hub .hub-items {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    z-index: 1 !important;
}

.asb-settings-hub.pos-left .hub-items {
    right: auto !important;
    left: 0 !important;
}

/* ==========================================
   Sub Item Buttons
   ========================================== */
.asb-settings-hub .hub-item {
    position: absolute !important;
    width: var(--hub-item-size) !important;
    height: var(--hub-item-size) !important;
    min-width: var(--hub-item-size) !important;
    min-height: var(--hub-item-size) !important;
    max-width: var(--hub-item-size) !important;
    max-height: var(--hub-item-size) !important;
    border-radius: 50% !important;
    border: none !important;
    background-color: var(--hub-bg-color) !important;
    color: var(--hub-icon-color) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    opacity: 0 !important;
    transform: scale(0.5) !important;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
    pointer-events: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    outline: none !important;
}

.asb-settings-hub .hub-item i {
    font-size: calc(var(--hub-item-size) * 0.45) !important;
    line-height: 1 !important;
}

.asb-settings-hub .hub-item:hover {
    transform: scale(1.1) !important;
}

/* Expanded state - show items */
.asb-settings-hub.expanded .hub-item {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Bell state colors */
.asb-settings-hub .hub-bell.granted {
    background-color: var(--hub-bell-granted) !important;
}

.asb-settings-hub .hub-bell.denied,
.asb-settings-hub .hub-bell.default {
    background-color: var(--hub-bell-denied) !important;
}

/* ==========================================
   Inbox Badge
   ========================================== */
.asb-settings-hub .inbox-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 18px !important;
    height: 18px !important;
    background: #f44336 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-align: center !important;
    border-radius: 9px !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
}

/* Smaller badge for compact items */
.asb-settings-hub.compact-items .inbox-badge {
    min-width: 16px !important;
    height: 16px !important;
    font-size: 9px !important;
    line-height: 16px !important;
    top: -3px !important;
    right: -3px !important;
    padding: 0 4px !important;
}

/* ==========================================
   Gear Icon Badge (v1.9.1)
   ========================================== */
.asb-settings-hub .hub-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    min-width: 18px !important;
    height: 18px !important;
    background: #f44336 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 18px !important;
    text-align: center !important;
    border-radius: 9px !important;
    padding: 0 5px !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
}

/* ==========================================
   Modal Open State - Prevent Pull-to-Refresh (v1.9.3)
   ========================================== */
html.asb-modal-open,
body.asb-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    overscroll-behavior-y: none !important;
    touch-action: none !important;
    -webkit-overflow-scrolling: auto !important;
}

/* Badge visibility control */
.asb-settings-hub .inbox-badge.hidden,
.asb-settings-hub .hub-badge.hidden {
    display: none !important;
}

/* ==========================================
   FAN LAYOUT (12 to 9 o'clock)
   Right side positioning
   ========================================== */

/* Base collapsed position */
.asb-settings-hub.layout-fan .hub-item {
    bottom: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
    right: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
}

/* === 1 Item: 12 o'clock === */
.asb-settings-hub.layout-fan.items-1.expanded .hub-item[data-index="0"] {
    transform: scale(1) !important;
    bottom: calc(var(--hub-size) + 10px) !important;
    right: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
}

/* === 2 Items: 12 and 9 o'clock === */
.asb-settings-hub.layout-fan.items-2.expanded .hub-item[data-index="0"] {
    transform: scale(1) !important;
    bottom: calc(var(--hub-size) + 10px) !important;
    right: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
    transition-delay: 0s !important;
}

.asb-settings-hub.layout-fan.items-2.expanded .hub-item[data-index="1"] {
    transform: scale(1) !important;
    bottom: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
    right: calc(var(--hub-size) + 10px) !important;
    transition-delay: 0.05s !important;
}

/* === 3 Items: 12, 10:30, 9 o'clock === */
.asb-settings-hub.layout-fan.items-3.expanded .hub-item[data-index="0"] {
    transform: scale(1) !important;
    bottom: calc(var(--hub-size) + 10px) !important;
    right: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
    transition-delay: 0s !important;
}

.asb-settings-hub.layout-fan.items-3.expanded .hub-item[data-index="1"] {
    transform: scale(1) !important;
    bottom: calc(var(--hub-size) * 0.75 + var(--hub-item-size) * 0.2) !important;
    right: calc(var(--hub-size) * 0.75 + var(--hub-item-size) * 0.2) !important;
    transition-delay: 0.05s !important;
}

.asb-settings-hub.layout-fan.items-3.expanded .hub-item[data-index="2"] {
    transform: scale(1) !important;
    bottom: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
    right: calc(var(--hub-size) + 10px) !important;
    transition-delay: 0.1s !important;
}

/* === 4 Items: 12, 11, 10, 9 o'clock (compact) === */
/* Using polar coordinates with equal radius for proper fan shape */
.asb-settings-hub.layout-fan.items-4.expanded .hub-item[data-index="0"] {
    /* 12 o'clock: 90 degrees, radius 70px */
    transform: scale(1) !important;
    bottom: calc((var(--hub-size) - var(--hub-item-size)) / 2 + 70px) !important;
    right: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
    transition-delay: 0s !important;
}

.asb-settings-hub.layout-fan.items-4.expanded .hub-item[data-index="1"] {
    /* 11 o'clock: 120 degrees, radius 70px */
    /* cos(120) = -0.5, sin(120) = 0.866 */
    transform: scale(1) !important;
    bottom: calc((var(--hub-size) - var(--hub-item-size)) / 2 + 60px) !important;
    right: calc((var(--hub-size) - var(--hub-item-size)) / 2 + 35px) !important;
    transition-delay: 0.04s !important;
}

.asb-settings-hub.layout-fan.items-4.expanded .hub-item[data-index="2"] {
    /* 10 o'clock: 150 degrees, radius 70px */
    /* cos(150) = -0.866, sin(150) = 0.5 */
    transform: scale(1) !important;
    bottom: calc((var(--hub-size) - var(--hub-item-size)) / 2 + 35px) !important;
    right: calc((var(--hub-size) - var(--hub-item-size)) / 2 + 60px) !important;
    transition-delay: 0.08s !important;
}

.asb-settings-hub.layout-fan.items-4.expanded .hub-item[data-index="3"] {
    /* 9 o'clock: 180 degrees, radius 70px */
    transform: scale(1) !important;
    bottom: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
    right: calc((var(--hub-size) - var(--hub-item-size)) / 2 + 70px) !important;
    transition-delay: 0.12s !important;
}

/* ==========================================
   FAN LAYOUT - Left Side
   ========================================== */
.asb-settings-hub.layout-fan.pos-left .hub-item {
    right: auto !important;
    left: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
}

/* 1 Item - Left */
.asb-settings-hub.layout-fan.pos-left.items-1.expanded .hub-item[data-index="0"] {
    left: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
}

/* 2 Items - Left */
.asb-settings-hub.layout-fan.pos-left.items-2.expanded .hub-item[data-index="0"] {
    left: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
}

.asb-settings-hub.layout-fan.pos-left.items-2.expanded .hub-item[data-index="1"] {
    left: calc(var(--hub-size) + 10px) !important;
}

/* 3 Items - Left */
.asb-settings-hub.layout-fan.pos-left.items-3.expanded .hub-item[data-index="0"] {
    left: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
}

.asb-settings-hub.layout-fan.pos-left.items-3.expanded .hub-item[data-index="1"] {
    left: calc(var(--hub-size) * 0.75 + var(--hub-item-size) * 0.2) !important;
}

.asb-settings-hub.layout-fan.pos-left.items-3.expanded .hub-item[data-index="2"] {
    left: calc(var(--hub-size) + 10px) !important;
}

/* 4 Items - Left */
.asb-settings-hub.layout-fan.pos-left.items-4.expanded .hub-item[data-index="0"] {
    left: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
}

.asb-settings-hub.layout-fan.pos-left.items-4.expanded .hub-item[data-index="1"] {
    left: calc(var(--hub-size) * 0.65) !important;
}

.asb-settings-hub.layout-fan.pos-left.items-4.expanded .hub-item[data-index="2"] {
    left: calc(var(--hub-size) * 0.9) !important;
}

.asb-settings-hub.layout-fan.pos-left.items-4.expanded .hub-item[data-index="3"] {
    left: calc(var(--hub-size) + 8px) !important;
}

/* ==========================================
   VERTICAL LAYOUT (Upward)
   ========================================== */
.asb-settings-hub.layout-vertical .hub-item {
    bottom: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
    right: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
}

.asb-settings-hub.layout-vertical.pos-left .hub-item {
    right: auto !important;
    left: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
}

.asb-settings-hub.layout-vertical.expanded .hub-item[data-index="0"] {
    transform: scale(1) !important;
    bottom: calc(var(--hub-size) + 8px) !important;
    transition-delay: 0s !important;
}

.asb-settings-hub.layout-vertical.expanded .hub-item[data-index="1"] {
    transform: scale(1) !important;
    bottom: calc(var(--hub-size) + var(--hub-item-size) + 16px) !important;
    transition-delay: 0.04s !important;
}

.asb-settings-hub.layout-vertical.expanded .hub-item[data-index="2"] {
    transform: scale(1) !important;
    bottom: calc(var(--hub-size) + var(--hub-item-size) * 2 + 24px) !important;
    transition-delay: 0.08s !important;
}

.asb-settings-hub.layout-vertical.expanded .hub-item[data-index="3"] {
    transform: scale(1) !important;
    bottom: calc(var(--hub-size) + var(--hub-item-size) * 3 + 32px) !important;
    transition-delay: 0.12s !important;
}

/* Vertical - Top position (downward) */
.asb-settings-hub.layout-vertical.pos-top .hub-item {
    bottom: auto !important;
    top: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
}

.asb-settings-hub.layout-vertical.pos-top.expanded .hub-item[data-index="0"] {
    top: calc(var(--hub-size) + 8px) !important;
}

.asb-settings-hub.layout-vertical.pos-top.expanded .hub-item[data-index="1"] {
    top: calc(var(--hub-size) + var(--hub-item-size) + 16px) !important;
}

.asb-settings-hub.layout-vertical.pos-top.expanded .hub-item[data-index="2"] {
    top: calc(var(--hub-size) + var(--hub-item-size) * 2 + 24px) !important;
}

.asb-settings-hub.layout-vertical.pos-top.expanded .hub-item[data-index="3"] {
    top: calc(var(--hub-size) + var(--hub-item-size) * 3 + 32px) !important;
}

/* ==========================================
   HORIZONTAL LAYOUT (Leftward)
   ========================================== */
.asb-settings-hub.layout-horizontal .hub-item {
    bottom: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
    right: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
}

.asb-settings-hub.layout-horizontal.expanded .hub-item[data-index="0"] {
    transform: scale(1) !important;
    right: calc(var(--hub-size) + 8px) !important;
    transition-delay: 0s !important;
}

.asb-settings-hub.layout-horizontal.expanded .hub-item[data-index="1"] {
    transform: scale(1) !important;
    right: calc(var(--hub-size) + var(--hub-item-size) + 16px) !important;
    transition-delay: 0.04s !important;
}

.asb-settings-hub.layout-horizontal.expanded .hub-item[data-index="2"] {
    transform: scale(1) !important;
    right: calc(var(--hub-size) + var(--hub-item-size) * 2 + 24px) !important;
    transition-delay: 0.08s !important;
}

.asb-settings-hub.layout-horizontal.expanded .hub-item[data-index="3"] {
    transform: scale(1) !important;
    right: calc(var(--hub-size) + var(--hub-item-size) * 3 + 32px) !important;
    transition-delay: 0.12s !important;
}

/* Horizontal - Left position (rightward) */
.asb-settings-hub.layout-horizontal.pos-left .hub-item {
    right: auto !important;
    left: calc((var(--hub-size) - var(--hub-item-size)) / 2) !important;
}

.asb-settings-hub.layout-horizontal.pos-left.expanded .hub-item[data-index="0"] {
    left: calc(var(--hub-size) + 8px) !important;
}

.asb-settings-hub.layout-horizontal.pos-left.expanded .hub-item[data-index="1"] {
    left: calc(var(--hub-size) + var(--hub-item-size) + 16px) !important;
}

.asb-settings-hub.layout-horizontal.pos-left.expanded .hub-item[data-index="2"] {
    left: calc(var(--hub-size) + var(--hub-item-size) * 2 + 24px) !important;
}

.asb-settings-hub.layout-horizontal.pos-left.expanded .hub-item[data-index="3"] {
    left: calc(var(--hub-size) + var(--hub-item-size) * 3 + 32px) !important;
}

/* ==========================================
   Toast Notification
   ========================================== */
.asb-hub-toast {
    position: fixed !important;
    bottom: 100px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(20px) !important;
    background: rgba(0, 0, 0, 0.85) !important;
    color: #fff !important;
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    z-index: 10000000 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    pointer-events: none !important;
    max-width: 80% !important;
    text-align: center !important;
}

.asb-hub-toast.show {
    opacity: 1 !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* ==========================================
   Guide Modal
   ========================================== */
.asb-settings-guide-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.6) !important;
    z-index: 10000001 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.asb-settings-guide-content {
    background: #fff !important;
    border-radius: 16px !important;
    padding: 24px !important;
    max-width: 320px !important;
    text-align: center !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
}

.asb-settings-guide-content h3 {
    margin: 0 0 16px 0 !important;
    font-size: 20px !important;
    color: #333 !important;
}

.asb-settings-guide-content p {
    margin: 0 0 20px 0 !important;
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.5 !important;
}

.asb-settings-guide-close {
    background: var(--hub-bg-color, #2196F3) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 12px 32px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* ==========================================
   Inbox Panel
   ========================================== */
.asb-inbox-panel {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
    /* v1.9.1: Prevent pull-to-refresh on entire panel */
    overscroll-behavior: none !important;
    touch-action: none !important;
}

.asb-inbox-panel.open {
    opacity: 1 !important;
    visibility: visible !important;
}

.asb-inbox-panel .inbox-wrapper {
    background: #fff !important;
    border-radius: 16px 16px 0 0 !important;
    max-height: 70vh !important;
    width: 100% !important;
    max-width: 500px !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s ease !important;
    box-sizing: border-box !important;
    /* Prevent pull-to-refresh */
    overscroll-behavior: contain !important;
}

.asb-inbox-panel.open .inbox-wrapper {
    transform: translateY(0) !important;
}

.asb-inbox-panel .inbox-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #eee !important;
    flex-shrink: 0 !important;
    /* Prevent pull-to-refresh on header */
    touch-action: none !important;
}

.asb-inbox-panel .inbox-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333 !important;
}

.asb-inbox-panel .inbox-close {
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    background: #f5f5f5 !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: #666 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.asb-inbox-panel .inbox-close:hover {
    background: #eee !important;
}

.asb-inbox-panel .inbox-content {
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 200px !important;
    /* Prevent pull-to-refresh */
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    /* v1.9.1: Allow only vertical scroll touch action */
    touch-action: pan-y !important;
}

.asb-inbox-panel .inbox-loading {
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
    color: #999 !important;
    font-size: 24px !important;
}

/* Show loading by default, hide via JS */
.asb-inbox-panel .inbox-loading.hidden {
    display: none !important;
}

.asb-inbox-panel .inbox-loading:not(.hidden) {
    display: flex !important;
}

.asb-inbox-panel .inbox-empty {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 60px 20px !important;
    color: #999 !important;
    text-align: center !important;
    min-height: 250px !important;
}

.asb-inbox-panel .inbox-empty.hidden {
    display: none !important;
}

.asb-inbox-panel .inbox-empty:not(.hidden) {
    display: flex !important;
}

.asb-inbox-panel .inbox-empty i {
    font-size: 56px !important;
    margin-bottom: 20px !important;
    opacity: 0.4 !important;
    color: #ccc !important;
}

.asb-inbox-panel .inbox-empty p {
    margin: 0 !important;
    font-size: 15px !important;
    color: #999 !important;
    line-height: 1.5 !important;
}

.asb-inbox-panel .inbox-list {
    padding: 0 !important;
    margin: 0 !important;
}

.asb-inbox-panel .inbox-list.hidden {
    display: none !important;
}

.asb-inbox-panel .inbox-list:not(.hidden) {
    display: block !important;
}

.asb-inbox-panel .inbox-item {
    display: block !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    text-decoration: none !important;
    color: inherit !important;
    transition: background 0.2s ease !important;
    box-sizing: border-box !important;
}

.asb-inbox-panel .inbox-item:hover {
    background: #f9f9f9 !important;
}

.asb-inbox-panel .inbox-item.unread {
    background: #f0f7ff !important;
    border-left: 3px solid #2196F3 !important;
}

.asb-inbox-panel .inbox-item.unread:hover {
    background: #e3f2fd !important;
}

.asb-inbox-panel .inbox-item-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.asb-inbox-panel .inbox-item-title {
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.4 !important;
}

.asb-inbox-panel .inbox-item-body {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.4 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.asb-inbox-panel .inbox-item-time {
    font-size: 11px !important;
    color: #999 !important;
    margin-top: 4px !important;
}

/* ==========================================
   Confirm Dialog Buttons (v1.9.4)
   ========================================== */
.asb-test-confirm-overlay .asb-settings-guide-content {
    max-width: 300px !important;
    padding: 20px !important;
}

.asb-test-confirm-overlay .asb-settings-guide-content h3 {
    font-size: 17px !important;
    margin-bottom: 12px !important;
}

.asb-test-confirm-overlay .asb-settings-guide-content p {
    font-size: 13px !important;
    margin-bottom: 16px !important;
}

.asb-test-confirm-overlay .asb-confirm-buttons {
    display: flex !important;
    gap: 10px !important;
    margin-top: 16px !important;
}

.asb-test-confirm-overlay .asb-confirm-btn {
    flex: 1 !important;
    padding: 10px 8px !important;
    font-size: 14px !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    text-align: center !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.asb-test-confirm-overlay .asb-test-cancel {
    background: #9e9e9e !important;
    color: #fff !important;
}

.asb-test-confirm-overlay .asb-test-ok {
    background: #2196F3 !important;
    color: #fff !important;
}

/* ==========================================
   Mobile Responsive
   ========================================== */
@media (max-width: 480px) {
    .asb-inbox-panel .inbox-wrapper {
        max-width: 100% !important;
    }
    
    .asb-inbox-panel .inbox-header h3 {
        font-size: 16px !important;
    }
    
    .asb-inbox-panel .inbox-item {
        padding: 14px 16px !important;
    }
    
    .asb-inbox-panel .inbox-item-title {
        font-size: 13px !important;
    }
    
    .asb-inbox-panel .inbox-item-body {
        font-size: 12px !important;
    }
    
    .asb-settings-guide-content {
        padding: 20px !important;
    }
    
    .asb-settings-guide-content h3 {
        font-size: 18px !important;
    }
}