/* ==========================================================================
   Visitor view: left = owner profile + quick actions,
   right = daily limits + return. Plus social (friends/followers) UI.
   Loaded statically so it is always available.
   ========================================================================== */

/* --- Left: owner profile card ------------------------------------------- */
#foreign-profile-panel {
    position: fixed !important;
    top: calc(var(--app-safe-top, 0px) + 50px) !important;
    left: calc(var(--app-safe-left, 0px) + 4px) !important;
    right: auto !important;
    z-index: 360 !important;
    width: min(175px, calc(50vw - 16px)) !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 15px 11px !important;
    color: #eaf6ff !important;
    font-family: "Quicksand", "Segoe UI", Arial, sans-serif !important;
    background: radial-gradient(circle at 30% 30%, #3d85b157, #155e9594) !important;
    border-radius: 20px !important;
    box-shadow: 0 0 0 1px rgb(114 158 185 / 70%), 0 10px 20px rgba(0, 50, 100, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.6) !important;
}
#foreign-profile-panel.hidden { display: none !important; }

/* Right panel: same glass style as the profile panel. */
#foreign-actions-panel {
    position: fixed !important;
    top: calc(var(--app-safe-top, 0px) + 50px) !important;
    right: calc(var(--app-safe-right, 0px) + 4px) !important;
    left: auto !important;
    z-index: 360 !important;
    width: min(175px, calc(50vw - 16px)) !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
    padding: 11px !important;
    color: #eaf6ff !important;
    font-family: "Quicksand", "Segoe UI", Arial, sans-serif !important;
    background: radial-gradient(circle at 30% 30%, rgba(122, 191, 233, 0.3), #0b5e9c99) !important;
    border-radius: 20px !important;
    box-shadow: 0 0 0 1px rgb(114 158 185 / 70%), 0 10px 20px rgba(0, 50, 100, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.6) !important;
}
#foreign-actions-panel.hidden { display: none !important; }
#foreign-actions-panel { border: 0 !important; }
#foreign-actions-panel .foreign-actions-list {
    display: grid;
    gap: 6px;
}
#foreign-actions-panel .foreign-actions-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 203, 74, 0.8);
    padding: 7px 9px;
    border-radius: 10px;
    background: rgba(76, 118, 159, 0.56);
    border: 1px solid rgba(255, 255, 255, 0.22);
    white-space: nowrap;
}
#foreign-actions-panel .foreign-actions-item strong {
    color: #2dd1d5de;
    font-weight: 800;
    white-space: nowrap;
}
#foreign-actions-panel .foreign-actions-title,
#foreign-actions-panel .foreign-actions-subtitle {
    color: #eaf6ff;
    font-weight: 800;
    margin-bottom: 6px;
}

/* Hide the personal side buttons while visiting another farm. */
body.viewing-farm-mode #user-panel-actions,
body.viewing-farm-mode #user-panel-actions-secondary {
    display: none !important;
}

/* Bottom return button (sits just above the bottom control dock). */
#viewing-return-bar {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(var(--app-safe-bottom, 0px) + 106px) !important;
    z-index: 101 !important;
    display: flex !important;
    justify-content: center !important;
    pointer-events: none !important;
}
#viewing-return-bar.hidden { display: none !important; }
#viewing-return-bar .return-to-my-farm-side-btn {
    pointer-events: auto !important;
    width: auto !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 15px !important;
    padding: 14px 35px !important;
    background: linear-gradient(180deg, #8ccf66bd, #5a9b3e) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32) !important;
}

/* Hide the visitor HUD while any modal window is open. */
body.app-modal-active #foreign-profile-panel,
body.app-modal-active #foreign-actions-panel {
    display: none !important;
}

/* Visitor panels reuse the .user-panel-background glass look (blue + stars). */

/* --- Profile row --------------------------------------------------------- */
#foreign-profile-panel .foreign-profile {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 7px;
}
#foreign-profile-panel .foreign-profile-avatar-wrap {
    position: relative;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
}
#foreign-profile-panel .foreign-profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    background: radial-gradient(circle at 35% 28%, #ffe9b6, #e2a64f);
    border: 2px solid #c98f4b;
    box-shadow: 0 4px 9px rgba(120, 80, 30, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
#foreign-profile-panel .foreign-profile-level {
    position: absolute;
    right: -4px;
    bottom: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffd76a, #e0a63a);
    color: #5a3f24;
    font-size: 10px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff8e6;
    box-shadow: 0 3px 7px rgba(120, 80, 30, 0.3);
    box-sizing: border-box;
}
#foreign-profile-panel .foreign-profile-info {
    min-width: 0;
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    margin-left: 6px;
}
#foreign-profile-panel .foreign-profile-name {
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    color: #f2f9ff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#foreign-profile-panel .foreign-profile-sub { display: none !important; }

/* --- Action buttons ------------------------------------------------------ */
#foreign-profile-panel .foreign-profile-actions {
    display: flex;
    gap: 5px;
}
#foreign-profile-panel .foreign-action-btn {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 5px 3px;
    border-radius: 10px;
    border: 1px solid rgba(176, 144, 103, 0.35);
    background: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    color: #5a3f24;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease, background 0.12s ease;
}
#foreign-profile-panel .foreign-action-btn:hover { transform: translateY(-1px); box-shadow: 0 5px 11px rgba(92, 68, 35, 0.2); }
#foreign-profile-panel .foreign-action-btn:active { transform: translateY(0); }
#foreign-profile-panel .foreign-action-btn:disabled { cursor: default; }
#foreign-profile-panel .foreign-action-icon { display: inline-flex; line-height: 0; }
#foreign-profile-panel .foreign-action-icon svg { width: 16px; height: 16px; }
#foreign-profile-panel .foreign-action-img {
    width: 17px;
    height: 17px;
    object-fit: contain;
    display: block;
}
#foreign-profile-panel .foreign-action-btn--friend.is-pending::after {
    content: "✕";
    position: absolute;
    top: -5px;
    right: -5px;
    width: 15px;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e53935;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
#foreign-profile-panel .foreign-action-label { white-space: nowrap; }

#foreign-profile-panel .foreign-action-btn--flower,
#foreign-profile-panel .foreign-action-btn--friend {
    background: rgba(64, 108, 177, 0.33) !important;
    border-color: rgba(66, 174, 96, 0.35) !important;
    color: rgba(255, 255, 255, 0.95) !important;
    box-shadow: inset 0 1px 0 rgba(40, 108, 199, 0.35), 0 1px 10px rgba(2, 130, 255, 0.47) !important;
}

#foreign-profile-panel .foreign-action-btn--friend .friend-check { display: none; }
#foreign-profile-panel .foreign-action-btn--friend.is-friends {
    background: linear-gradient(180deg, #7fc45a, #5f9a3a) !important;
    border-color: #4f8530 !important;
    color: #fff !important;
    opacity: 1;
}
#foreign-profile-panel .foreign-action-btn--friend.is-friends .friend-plus { display: none; }
#foreign-profile-panel .foreign-action-btn--friend.is-friends .friend-check { display: block; }

/* --- SVG animations ------------------------------------------------------ */
#foreign-profile-panel .flower-petals {
    transform-origin: 12px 12px;
    animation: fhFlowerSpin 7s linear infinite;
}
#foreign-profile-panel .foreign-action-btn--flower:hover .flower-petals { animation-duration: 2.2s; }
#foreign-profile-panel .friend-plus {
    transform-origin: 19px 11px;
    animation: fhFriendPulse 1.7s ease-in-out infinite;
}
#foreign-profile-panel .foreign-action-btn--friend:hover .friend-plus { animation-duration: 0.9s; }

@keyframes fhFlowerSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes fhFriendPulse {
    0%, 100% { opacity: 0.55; transform: scale(0.9); }
    50%      { opacity: 1;    transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
    #foreign-profile-panel .flower-petals,
    #foreign-profile-panel .friend-plus { animation: none !important; }
}

/* ==========================================================================
   Social UI (users modal): friends sub-tabs, follower chip, block actions
   ========================================================================== */
.modal-window .users-view-select {
    position: relative !important;
    margin: 1px 0 2px !important;
}
.modal-window .users-view-select-toggle {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    padding: 4px 9px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(176, 144, 103, 0.4) !important;
    background: rgb(208 207 175 / 48%) !important;
    color: #6b7534 !important;
    font-family: "Quicksand", "Segoe UI", Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-align: left !important;
    text-transform: none !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(92, 68, 35, 0.1) !important;
}
.modal-window .users-view-select-icon {
    font-size: 15px !important;
    margin-bottom: 2px;
}
.modal-window .users-view-select-label { flex: 1 1 auto !important; }
.modal-window .users-view-select-arrow { transition: transform 0.2s ease !important; }
.modal-window .users-view-select-toggle[aria-expanded="true"] .users-view-select-arrow { transform: rotate(180deg) !important; }
.modal-window .users-view-select-menu {
    margin-top: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 6px !important;
    border-radius: 14px !important;
    background: #faeed6bd !important;
    border: 1px solid rgba(176, 144, 103, 0.4) !important;
    box-shadow: 0 8px 18px rgba(64, 46, 29, 0.16) !important;
}
.modal-window .users-view-select-menu.hidden { display: none !important; }
.modal-window .users-view-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 9px 12px !important;
    border: none !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #5a3f24 !important;
    font-family: "Quicksand", "Segoe UI", Arial, sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: left !important;
    text-transform: none !important;
    cursor: pointer !important;
}
.modal-window .users-view-option:hover { background: rgba(127, 196, 90, 0.16) !important; }
.modal-window .users-view-option.active {
    background: linear-gradient(180deg, #c2f071ab, #98a731b5) !important;
    color: #545919 !important;
}
.modal-window .users-view-option-badge {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #d94747 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.modal-window .users-view-option.active .users-view-option-badge { background: rgba(255, 255, 255, 0.3) !important; }
.modal-window .users-view-select-badge {
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 5px !important;
    border-radius: 999px !important;
    background: #d94747 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
}

.modal-window .user-followers-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    margin-left: 6px !important;
    padding: 1px 7px !important;
    border-radius: 999px !important;
    background: rgba(90, 155, 62, 0.14) !important;
    color: #3f6b2f !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

.modal-window .user-friend-action-btn--unblock {
    background: linear-gradient(180deg, #ffe9b8, #f0c775) !important;
    border-color: rgba(176, 120, 40, 0.5) !important;
    color: #6b4a16 !important;
}

.modal-window .user-friend-action-btn--remove {
    border-color: rgba(179, 38, 30, 0.5) !important;
    color: #8c1d18 !important;
    background: rgba(255, 240, 238, 0.95) !important;
}

.modal-window .users-empty-note {
    padding: 18px 10px !important;
    text-align: center !important;
    color: #8a7358 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}