/* Flock client-side app styles (scoped under .fa-) */

.fa-app {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.5;
}

/* --- Sync bar --- */
.fa-syncbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    background: linear-gradient(135deg, #0e7490 0%, #155e75 100%);
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
}

.fa-syncbar input[type="text"] {
    flex: 1 1 220px;
    padding: 10px 12px;
    border: none;
    border-radius: 6px;
    font-size: 15px;
}

.fa-session {
    color: #a5f3fc;
    font-weight: 600;
}

/* --- Buttons --- */
.fa-btn {
    padding: 9px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.fa-btn:hover:not(:disabled) { background: #e2e8f0; }
.fa-btn:disabled { opacity: 0.55; cursor: default; }

.fa-btn-primary {
    background: #0891b2;
    border-color: #0891b2;
    color: #fff;
}
.fa-btn-primary:hover:not(:disabled) { background: #0e7490; }

.fa-btn-danger {
    background: #fff1f2;
    border-color: #fda4af;
    color: #be123c;
}
.fa-btn-danger:hover:not(:disabled) { background: #ffe4e6; }

.fa-btn-small { padding: 5px 10px; font-size: 13px; }
.fa-btn-wide { display: block; width: 100%; margin-top: 12px; }

/* --- Progress / messages --- */
.fa-progress { margin: 14px 0; }
.fa-progress-label { font-size: 13px; color: #475569; margin-bottom: 4px; }
.fa-progress-track {
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}
.fa-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #06b6d4, #0891b2);
    border-radius: 4px;
    transition: width 0.3s;
}
.fa-progress-fill.indeterminate {
    width: 35%;
    animation: fa-slide 1.2s infinite ease-in-out;
}
@keyframes fa-slide {
    0% { margin-left: -35%; }
    100% { margin-left: 100%; }
}

.fa-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 12px 0;
}

.fa-notice {
    background: #ecfeff;
    border: 1px solid #a5f3fc;
    color: #155e75;
    padding: 10px 14px;
    border-radius: 8px;
    margin: 12px 0;
}

.fa-hint { color: #64748b; font-size: 13.5px; }

/* --- Login --- */
.fa-login {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
    margin: 16px 0;
}
.fa-login h3 { margin-top: 0; }
.fa-login-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.fa-login-fields input {
    flex: 1 1 180px;
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 14px;
}

/* --- Profile header --- */
.fa-profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 14px;
}

/* --- Stats --- */
.fa-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 20px;
}
.fa-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 92px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    cursor: default;
}
.fa-stat-clickable { cursor: pointer; }
.fa-stat-clickable:hover { border-color: #06b6d4; background: #ecfeff; }
.fa-stat-active { border-color: #0891b2; background: #ecfeff; }
.fa-stat-value { font-size: 20px; font-weight: 700; color: #0f172a; font-variant-numeric: tabular-nums; }
.fa-stat-warn .fa-stat-value { color: #b45309; }
.fa-stat-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.4px; color: #64748b; }

/* --- Tabs --- */
.fa-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 16px;
}
.fa-tab {
    padding: 8px 16px;
    border: none;
    background: none;
    font-size: 14.5px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.fa-tab:hover { color: #0f172a; }
.fa-tab-active { color: #0891b2; border-bottom-color: #0891b2; }

/* --- Toolbar / filters --- */
.fa-toolbar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.fa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fa-chip {
    padding: 5px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    cursor: pointer;
}
.fa-chip:hover { border-color: #06b6d4; }
.fa-chip-active { background: #0891b2; border-color: #0891b2; color: #fff; }
.fa-toolbar-right { display: flex; flex-wrap: wrap; gap: 8px; }
.fa-toolbar-right input[type="search"] {
    flex: 1 1 200px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}
.fa-toolbar-right select {
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
}

.fa-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
}

/* --- Account rows --- */
.fa-list { display: flex; flex-direction: column; gap: 8px; }
.fa-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
}
.fa-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #e2e8f0;
}
.fa-avatar-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}
.fa-avatar-big { width: 56px; height: 56px; }
.fa-row-main { flex: 1 1 auto; min-width: 0; }
.fa-row-names { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.fa-name { font-weight: 700; color: #0f172a; text-decoration: none; }
.fa-name:hover { color: #0891b2; }
.fa-handle { color: #64748b; font-size: 13.5px; }
.fa-bio {
    color: #334155;
    font-size: 13.5px;
    margin: 3px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fa-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12.5px;
    color: #64748b;
}
.fa-reasons { cursor: pointer; text-decoration: underline dotted; }
.fa-postmix { color: #0e7490; font-variant-numeric: tabular-nums; }
.fa-badge-click { cursor: pointer; }
.fa-badge-click:hover { filter: brightness(0.93); }

/* --- Bot score breakdown --- */
.fa-botdetail {
    margin-top: 8px;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    color: #334155;
}
.fa-botdetail-title { font-weight: 700; margin-bottom: 6px; }
.fa-botdetail-line { display: flex; gap: 8px; align-items: baseline; margin: 2px 0; }
.fa-botdetail-pts {
    flex-shrink: 0;
    min-width: 34px;
    text-align: right;
    font-weight: 700;
    color: #b45309;
    font-variant-numeric: tabular-nums;
}
.fa-botdetail-pts-zero { color: #94a3b8; font-weight: 400; }
.fa-row-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}

/* --- Badges --- */
.fa-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.fa-badge-mutual { background: #dcfce7; color: #166534; }
.fa-badge-fan { background: #ecfeff; color: #155e75; }
.fa-badge-oneway { background: #f1f5f9; color: #475569; }
.fa-badge-bot { background: #fee2e2; color: #b91c1c; }
.fa-badge-sus { background: #fef3c7; color: #92400e; }
.fa-badge-ai { background: #ede9fe; color: #5b21b6; }
.fa-badge-score { background: #f1f5f9; color: #475569; }

/* --- History --- */
.fa-history {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: #fff;
}
.fa-history-head { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; }
.fa-history-dismiss {
    margin-left: auto;
    border: none;
    background: none;
    color: #94a3b8;
    font-size: 14px;
    cursor: pointer;
    padding: 0 4px;
}
.fa-history-dismiss:hover { color: #dc2626; }
.fa-gain { color: #16a34a; font-weight: 700; }
.fa-loss { color: #dc2626; font-weight: 700; }
.fa-history-list { font-size: 13.5px; margin-top: 4px; }
.fa-history-blocked { color: #94a3b8; }
.fa-history-blocked a { color: #94a3b8; }
.fa-history-list a { margin-right: 8px; }

/* --- Misc --- */
.fa-empty { margin: 18px 0; }
.fa-refollow {
    background: #f0fdfa;
    border: 1px solid #99f6e4;
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 14px;
}

.fa-author-cta {
    margin-top: 22px;
    padding-top: 12px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 13.5px;
}

@media (max-width: 640px) {
    .fa-row { flex-wrap: wrap; }
    .fa-row-actions { flex-direction: row; width: 100%; }
}