/* PWA Safe Area Fixed Header Overrides */
#app-header {
    /* Changed from fixed to sticky so it reserves space (holds a line) and doesn't overlap the content below it */
    position: sticky !important; 
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    
    /* Force Absolute Transparency so the page background shows through completely */
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    
    /* Z-index keeps the header above page content but below the Assistive Touch menu */
    z-index: 50 !important; 
    
    /* Handles the iPhone status bar/notch */
    padding-top: env(safe-area-inset-top, 0px) !important;
    height: calc(4rem + env(safe-area-inset-top, 0px)) !important;
}

/* Core View Management */
.hidden { display: none !important; }

/* Custom scrollbar behaviors */
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 9999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

/* Farsi and Layout Overrides */
.font-farsi {
    font-family: 'Vazirmatn', 'Inter', sans-serif !important;
    direction: rtl; 
    text-align: right;
}
.font-farsi .text-left { 
    text-align: right !important; 
}
.ltr-override {
    direction: ltr !important;
    text-align: left !important;
}

/* Adjustments for RTL within the Assistive Menu Back Button */
.font-farsi .assistive-menu-back-btn { left: auto; right: 0.25rem; }
.font-farsi .assistive-menu-back-btn i { transform: rotate(180deg); }

/* Inline spinner helper */
.inline-spinner {
    border: 2px solid rgba(255, 255, 255, 0.1);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border-left-color: #00A99D;
    animation: spin 0.8s linear infinite;
    display: inline-block;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Back Button UI */
.back-button {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    cursor: pointer;
    outline: none;
}
.back-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}
.back-button:active { transform: scale(0.96); }

/* Assistive Touch Component Styles */
#assistive-touch { position: fixed; z-index: 1000; user-select: none; }

.assistive-touch-btn {
    width: 55px; height: 55px; background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: grab; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.assistive-touch-btn.dragging {
    transform: scale(1.1); box-shadow: 0 8px 25px rgba(0,0,0,0.6); cursor: grabbing;
}
.assistive-touch-btn-icon {
    width: 25px; height: 25px; border: 2.5px solid #00A99D; border-radius: 50%; background: transparent;
}

.assistive-touch-menu {
    position: absolute; width: 200px; background: rgba(10, 10, 10, 0.9);
    border-radius: 1.25rem; border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6); padding: 0.5rem;
    opacity: 0; visibility: hidden; transform: scale(0.95);
    transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.assistive-touch-menu.open { opacity: 1; visibility: visible; transform: scale(1); }

.assistive-menu-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }

.assistive-menu-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0.75rem 0.5rem; border-radius: 0.75rem; cursor: pointer;
    transition: background-color 0.2s ease; text-decoration: none;
    color: #e5e7eb; background-color: rgba(255, 255, 255, 0.05); border: none; font-family: inherit;
}
.assistive-menu-item:hover { background-color: rgba(255, 255, 255, 0.15); color: #fff; }
.assistive-menu-item i { font-size: 1.3rem; color: #00A99D; margin-bottom: 0.25rem; }
.assistive-menu-item span { font-size: 0.7rem; font-weight: 500; white-space: nowrap; }

.add-word-container { position: relative; padding: 0.5rem; }

.assistive-menu-back-btn {
    position: absolute; top: 0; bottom: 0; left: 0.25rem; height: max-content; margin: auto 0;
    background: none; border: none; color: #00A99D; font-size: 1.2rem; cursor: pointer;
    padding: 0.5rem; line-height: 1; z-index: 10;
}

.add-word-input {
    width: 100%; background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15); border-radius: 0.5rem;
    padding: 0.5rem 0.75rem; color: white; font-size: 0.8rem;
    box-sizing: border-box; text-align: start; /* Allows dir="auto" to align properly */
}
.add-word-input:focus {
    outline: none; border-color: #00A99D; box-shadow: 0 0 0 2px rgba(0, 169, 157, 0.3);
}

.add-word-save-btn {
    width: 100%; background-color: #00A99D; color: white;
    font-weight: 600; border: none; border-radius: 0.5rem;
    padding: 0.5rem; font-size: 0.8rem; cursor: pointer; transition: background-color 0.2s;
}
.add-word-save-btn:hover { background-color: #008f85; }