/* ============ ئاساسلىق ============ */

* {

    box-sizing: border-box;

    margin: 0;

    padding: 0;

}



html, body {

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    background: #F3F4F6;

    color: #1F2937;

    overflow-x: hidden;

}



#app {

    max-width: 480px;

    margin: 0 auto;

    min-height: 100vh;

    background: #F3F4F6;

}



/* ============ header ============ */

.header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 20px;

    background: #fff;

    border-bottom: 1px solid #F3F4F6;

    position: sticky;

    top: 0;

    z-index: 100;

}



.header h1 {

    font-size: 17px;

    color: #1F2937;

    font-weight: 700;

}



.back-btn {

    background: none;

    border: none;

    font-size: 20px;

    cursor: pointer;

    color: #8B5CF6;

    padding: 4px 8px;

}



/* ============ باش بەت ============ */

.home-page {

    padding-bottom: 80px;

}



.hero-image {

    min-height: 200px;

    margin: 16px;

    border-radius: 16px;

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.15);

}



.hero-image p {

    color: #fff;

    font-size: 18px;

    font-weight: 600;

    text-shadow: 0 2px 10px rgba(0,0,0,0.4);

    text-align: center;

    padding: 0 20px;

}



.categories {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 12px;

    padding: 16px;

}



.category-btn {

    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);

    color: #fff;

    border: none;

    border-radius: 14px;

    padding: 18px 12px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);

    transition: transform 0.2s;

}



.category-btn:active {

    transform: translateY(2px);

}



/* ============ خادىم تىزىملىكى ============ */

.staff-list-page {

    padding-bottom: 80px;

}



/* ============ پاراڭ بېتى ============ */

.chat-page {

    height: 100vh;

    display: flex;

    flex-direction: column;

    padding-bottom: 0;

}



.chat-messages {

    flex: 1;

    overflow-y: auto;

    padding: 15px;

    background: #F3F4F6;

    -webkit-overflow-scrolling: touch;

}



.message {

    max-width: 75%;

    padding: 10px 15px;

    margin-bottom: 10px;

    border-radius: 15px;

    word-wrap: break-word;

    font-size: 14px;

}



.my-message {

    background: #8B5CF6;

    color: #fff;

    margin-left: auto;

    border-bottom-right-radius: 5px;

}



.other-message {

    background: #fff;

    color: #333;

    border-bottom-left-radius: 5px;

}



.chat-input {

    display: flex;

    gap: 8px;

    padding: 10px 15px;

    background: #fff;

    border-top: 1px solid #E5E7EB;

    padding-bottom: calc(10px + env(safe-area-inset-bottom));

}



.chat-input input {

    flex: 1;

    padding: 10px 14px;

    border: 1px solid #ddd;

    border-radius: 20px;

    font-size: 14px;

    outline: none;

    min-width: 0;

}



.chat-input button {

    padding: 10px 18px;

    border: none;

    border-radius: 20px;

    background: #8B5CF6;

    color: #fff;

    font-size: 14px;

    cursor: pointer;

    flex-shrink: 0;

}



.chat-input .img-btn {

    background: #F3F4F6;

    color: #333;

    padding: 10px 14px;

}



/* ============ ئەزالار مەركىزى ============ */

.profile-page {

    padding-bottom: 80px;

    min-height: 100vh;

}



.profile-top {

    background: linear-gradient(135deg, #8B5CF6, #7C3AED);

    padding: 40px 20px 30px;

    text-align: center;

    border-radius: 0 0 30px 30px;

    margin-bottom: 20px;

}



.profile-avatar-wrap {

    position: relative;

    width: 100px;

    height: 100px;

    margin: 0 auto 16px;

    border-radius: 50%;

    background: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    cursor: pointer;

    box-shadow: 0 4px 20px rgba(0,0,0,0.2);

}



.profile-avatar {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.profile-avatar-text {

    font-size: 40px;

    color: #8B5CF6;

    font-weight: bold;

}



.profile-edit-badge {

    position: absolute;

    bottom: 0;

    right: 0;

    background: #10B981;

    color: #fff;

    width: 28px;

    height: 28px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

}



.profile-name-row {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    color: #fff;

    cursor: pointer;

}



.profile-name {

    font-size: 20px;

    font-weight: 700;

}



.profile-id {

    font-size: 13px;

    background: rgba(255,255,255,0.3);

    padding: 2px 8px;

    border-radius: 10px;

}



.profile-edit-icon {

    font-size: 14px;

}



.profile-menu {

    background: #fff;

    border-radius: 16px;

    margin: 0 16px 16px;

    overflow: hidden;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

}



.profile-menu-item {

    display: flex;

    align-items: center;

    padding: 16px 20px;

    border-bottom: 1px solid #F3F4F6;

    cursor: pointer;

    transition: background 0.2s;

}



.profile-menu-item:last-child {

    border-bottom: none;

}



.profile-menu-item:active {

    background: #F9FAFB;

}



.menu-icon {

    font-size: 20px;

    margin-right: 12px;

}



.menu-text {

    flex: 1;

    font-size: 15px;

    color: #1F2937;

}



.menu-arrow {

    color: #D1D5DB;

    font-size: 14px;

}



.logout-btn {

    width: calc(100% - 32px);

    margin: 16px;

    padding: 14px;

    background: #FEE2E2;

    color: #DC2626;

    border: none;

    border-radius: 12px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

}



/* ============ ئارخىپ ============ */

.profile-header {

    text-align: center;

    padding: 20px;

    background: #fff;

    border-radius: 16px;

    margin: 16px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

}



.avatar-wrapper {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: linear-gradient(135deg, #8B5CF6, #7C3AED);

    display: flex;

    align-items: center;

    justify-content: center;

    margin: 0 auto 1

    overflow: hidden;

}



.avatar-img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.avatar-text {

    color: #fff;

    font-size: 40px;

    font-weight: bold;

}



.profile-form {

    background: #fff;

    border-radius: 16px;

    margin: 16px;

    padding: 20px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.05);

}



.form-row {

    margin-bottom: 16px;

}



.form-row label {

    display: block;

    font-size: 13px;

    color: #666;

    margin-bottom: 6px;

    font-weight: 500;

}



.form-row input,

.form-row select,

.form-row textarea {

    width: 100%;

    padding: 12px 14px;

    border: 2px solid #E5E7EB;

    border-radius: 10px;

    font-size: 14px;

    outline: none;

    transition: border-color 0.2s;

    font-family: inherit;

}



.form-row input:focus,

.form-row select:focus,

.form-row textarea:focus {

    border-color: #8B5CF6;

}



.save-btn {

    width: 100%;

    padding: 14px;

    background: linear-gradient(135deg, #8B5CF6, #7C3AED);

    color: #fff;

    border: none;

    border-radius: 12px;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);

}



/* ============ ئېھتىياج ============ */

.needs-section {

    background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);

    border: 2px solid #DDD6FE;

    border-radius: 16px;

    padding: 20px;

    margin: 16px;

}



/* ============ footer (tabbar) ============ */

.footer {

    position: fixed;

    bottom: 0;

    left: 0;

    right: 0;

    display: flex;

    flex-direction: row;

    background: #fff;

    border-top: 1px solid #E5E7EB;

    padding: 8px 0;

    padding-bottom: calc(8px + env(safe-area-inset-bottom));

    z-index: 9999;

    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);

    max-width: 480px;

    margin: 0 auto;

}



.footer button {

    flex: 1 1 50%;

    width: 50%;

    padding: 12px;

    background: none;

    border: none;

    font-size: 14px;

    color: #9CA3AF;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 4px;

    font-family: inherit;

}



.footer button.active {

    color: #8B5CF6;

    font-weight: 600;

}



/* ============ ئاس

.home-page,

.profile-page,

.staff-list-page,

.chat-page,

.needs-page,

.about-page,

.report-page,

.daily-page,

.chat-history-page,

.edit-profile-page {

    padding-bottom: 80px;

}



/* ============ كىچىك ئېكران ============ */

@media (max-width: 480px) {

    .categories {

        grid-template-columns: repeat(2, 1fr);

        gap: 10px;

        padding: 12px;

    }

    .category-btn {

        padding: 16px 8px;

        font-size: 14px;

    }

}




/* ============ footer نى مەجبۇرىي كۆرسىتىش ============ */

.footer {

    position: fixed !important;

    bottom: 0 !important;

    left: 0 !important;

    right: 0 !important;

    display: flex !important;

    flex-direction: row !important;

    background: #fff !important;

    border-top: 1px solid #E5E7EB !important;

    padding: 8px 0 !important;

    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;

    z-index: 99999 !important;

    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;

    max-width: 480px !important;

    margin: 0 auto !important;

}



.footer button {

    flex: 1 1 50% !important;

    width: 50% !important;

    padding: 12px !important;

    background: none !important;

    border: none !important;

    font-size: 14px !important;

    color: #9CA3AF !important;

    cursor: pointer !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 4px !important;

    font-family: inherit !important;

}



.footer button.active {

    color: #8B5CF6 !important;

    font-weight: 600 !important;

}



/* ============ ئاستى بوشلۇق ============ */

.home-page, .profile-page, .staff-list-page, .chat-page, .needs-page, .about-page, .report-page, .daily-page, .chat-history-page, .edit-profile-page {

    padding-bottom: 80px !important;

}




/* ============ footer نى مەركەزلەشتۈرۈش ============ */

.footer {

    position: fixed !important;

    bottom: 0 !important;

    left: 50% !important;

    right: auto !important;

    transform: translateX(-50%) !important;

    width: 100% !important;

    max-width: 480px !important;

    display: flex !important;

    flex-direction: row !important;

    background: #fff !important;

    border-top: 1px solid #E5E7EB !important;

    padding: 8px 0 !important;

    padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;

    z-index: 99999 !important;

    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;

}



.footer button {

    flex: 1 1 50% !important;

    width: 50% !important;

    padding: 12px !important;

    background: none !important;

    border: none !important;

    font-size: 14px !important;

    color: #9CA3AF !important;

    cursor: pointer !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    justify-content: center !important;

    gap: 4px !important;

    font-family: inherit !important;

}



.footer button.active {

    color: #8B5CF6 !important;

    font-weight: 600 !important;

}