/* buddylist */
.app-buddylist a {
    color: #0078D7;
    text-decoration: none;
    font-size: 14px;
}
.app-buddylist h2 {
    padding: 0px;
    margin: 0px;
}
.window-main {
    flex-grow: 1;
    overflow-y: auto;
    /* background-color: #FFF; */
    padding: 10px;
    border-top: 1px solid #000;
}
.loginForm {
    padding-bottom: 10px;
}
.loginForm input[type="text"],
.loginForm input[type="password"] {
    margin: 5px 0;
    padding: 8px;
    width: calc(100% - 20px);
    border: 1px solid #888;
    border-radius: 3px;
}
.loginForm .password {
    display: none;
}
.loginForm button {
    padding: 10px 15px;
    background-color: #0078D7;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.loginForm button:hover {
    background-color: #0056b3;
}
.h2,
.h3 {
    color: #000;
    font-size: 18px;
}
.addBuddyForm {
    gap: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sendBuddyRequest:hover {
    background-color: #2ca6a4;
}
.buddyListHolder,
.addBuddyForm {
    padding: 10px;
    /* background-color: #f9f9f9; */
    border: 1px solid #ccc;
    width: 100%;
    user-select: none;;
}
.positiveAffirmation {
    text-align: center;
    width: 100%;
    font-size: 14px;
    text-decoration: italic;
    padding-bottom: 30px;
    padding-top: 5px;
    border-bottom: 1px solid #eee;
    cursor: pointer;
}
.onlineStatus {
    width: 100%;
}
.onlineStatusSelect {
    width: 100%;
    padding: 0;
    margin: 0;
}
.buddylist {
    list-style: none;
}
.login-frog {
    font-size: 64px;
    text-align: center;
    color: green;

}
.login-frog i:hover {
    cursor: pointer;
    transform: scale(1.1);
}
.loginMessage {
    text-align: center;
}
.loginButton {
    background-color: #48d1cc;
    border: none;
    padding: 5px 10px;
    margin-top: 5px;
    cursor: pointer;
    border-radius: 3px;
    width: 100%;
}
.buddylistContainer {
    display: none;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-start;
    gap: 20px;
    padding: 0 20px 0 0;
}
.inviteBuddyHolder {
    text-align: center;

}
.loginStatus {
    text-align: center
}
.tos-checkbox {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 5px;
}
.buddy-message-sender {
    cursor: pointer;
}

.resetPasswordLink {
    color: #0078D7 !important;
    text-decoration: none;
    font-size: 14px;
    display: none;
    text-align: center;
}

.resetPasswordLink a {
    color: #0078D7 !important;
    text-decoration: none;
    font-size: 14px;
}

.forgot-password-modal {
    display: none;
}

.forgot-password-modal {
    padding-bottom: 10px;
}
.forgot-password-modal input[type="text"],
.forgot-password-modal input[type="password"] {
    margin: 5px 0;
    padding: 8px;
    width: calc(100% - 20px);
    border: 1px solid #888;
    border-radius: 3px;
}
.forgot-password-modal button {
    padding: 10px 15px;
    background-color: #0078D7;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.forgot-password-modal button:hover {
    background-color: #0056b3;
}

@media (max-width: 767px) and (pointer: coarse) and (hover: none) {
    /* Set base font size for consistency (optional, only if not already set) */
    html {
        font-size: 16px; /* Adjust to 14px if you want smaller scaling */
    }

    .app-buddylist > p,
    .app-buddylist > input,
    .app-buddylist > i,
    .app-buddylist > button {
        font-size: 1rem; /* ~16px, standard for body text and inputs */
    }

    .aim-input {
        font-size: 0.875rem; /* ~14px, slightly smaller for inputs */
        height: 2.5rem; /* ~40px, touch-friendly height */
    }

    .button-bar-button {
        width: 2rem; /* ~32px, compact but tappable with padding */
        height: 2rem;
        padding: 0.5rem; /* ~8px, total ~48px tap target */
    }

    .aim-send-btn {
        width: 3rem; /* ~48px, smaller but touch-friendly */
        height: 3rem;
        padding: 0.5rem; /* ~8px, total ~64px tap target */
    }

    .emojiPicker {
        display: none; /* Unchanged, good for mobile */
    }

    .loginButton {
        width: 100%; /* Unchanged, full-width is good */
        font-size: 1.25rem; /* ~20px, readable for buttons */
        height: 3.5rem; /* ~56px, touch-friendly */
    }

    .loginForm input {
        font-size: 1rem; /* ~16px, standard for inputs */
        height: 3rem; /* ~48px, touch-friendly */
    }

    #tosAgree {
        width: 2rem; /* ~32px, smaller but tappable */
        height: 2rem;
    }

    .loginMessage {
        font-size: 1.5rem; /* ~16px, readable for messages */
    }

    .onlineStatusSelect {
        font-size: 1.5rem; /* ~16px, consistent with inputs */
    }

    .buddy-message-sender {
        font-size: 1rem; /* ~16px, standard for text */
    }

    .desktopButton {
        width: 100%; /* Unchanged, full-width is good */
        height: 3rem; /* ~48px, touch-friendly */
        font-size: 1.25rem; /* ~20px, readable */
    }

    .positiveAffirmation {
        font-size: 1rem; /* ~16px, readable for text */
        padding-bottom: 0.75rem; /* ~12px */
        padding-top: 0.5rem; /* ~8px */
    }

    .addBuddyForm {
        align-items: center; /* Unchanged, good for layout */
    }

    .buddy_request_name {
        width: 100%; /* Unchanged, full-width is good */
    }

    .sendBuddyRequest {
        width: 100%; /* Unchanged, full-width is good */
    }

    .tos-checkbox {
        font-size: 1rem; /* ~16px, standard */
        flex-direction: column; /* Unchanged */
        align-items: center; /* Unchanged */
        gap: 0.75rem; /* ~12px, smaller gap */
        padding-top: 1rem; /* ~16px, reduced padding */
    }

    .tos-checkbox label {
        font-size: 1rem; /* ~16px, matches other text */
        line-height: 1.4; /* Unchanged, good for readability */
    }
}

.button-bar-item {
  position: relative;
  display: inline-block;
}

.button-dropdown {
  position: absolute;
  bottom: 100%; /* makes it drop *up* above the bar */
  left: 0;
  background: var(--desktop_element-background);
  border: 1px solid #444;
  border-radius: 4px;
  z-index: 1000;
}

.button-dropdown .dropdown-item {
  display: flex;
  padding: 4px 8px;
  cursor: pointer;
  align-items: center;
  
}

.button-dropdown .dropdown-item:hover {
  background: var(--desktop_element_hover-background);
}
