/*
|--------------------------------------------------------------------------
| AMMIT - Global Design System
|--------------------------------------------------------------------------
| Mobile-first private messaging application
| WhatsApp-inspired dark interface
|--------------------------------------------------------------------------
*/


/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */

:root {

    /*
    |--------------------------------------------------------------------------
    | Backgrounds
    |--------------------------------------------------------------------------
    */

    --app-bg: #0b141a;

    --header-bg: #202c33;

    --panel-bg: #111b21;

    --surface-bg: #202c33;

    --surface-hover: #2a3942;

    --input-bg: #2a3942;


    /*
    |--------------------------------------------------------------------------
    | AMMIT / Messaging Accent
    |--------------------------------------------------------------------------
    */

    --primary: #00a884;

    --primary-dark: #008069;

    --primary-light: #25d366;


    /*
    |--------------------------------------------------------------------------
    | Chat
    |--------------------------------------------------------------------------
    */

    --message-sent: #005c4b;

    --message-received: #202c33;

    --message-read: #53bdeb;


    /*
    |--------------------------------------------------------------------------
    | Text
    |--------------------------------------------------------------------------
    */

    --text-primary: #e9edef;

    --text-secondary: #8696a0;

    --text-muted: #667781;

    --text-white: #ffffff;


    /*
    |--------------------------------------------------------------------------
    | Borders
    |--------------------------------------------------------------------------
    */

    --border-color:
        rgba(255, 255, 255, 0.08);


    /*
    |--------------------------------------------------------------------------
    | Status
    |--------------------------------------------------------------------------
    */

    --success: #25d366;

    --danger: #f15c6d;

    --warning: #f7c948;


    /*
    |--------------------------------------------------------------------------
    | Font
    |--------------------------------------------------------------------------
    */

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


    /*
    |--------------------------------------------------------------------------
    | Font Sizes
    |--------------------------------------------------------------------------
    */

    --font-xs: 11px;

    --font-sm: 13px;

    --font-normal: 14px;

    --font-input: 16px;

    --font-medium: 17px;

    --font-large: 20px;

    --font-title: 24px;


    /*
    |--------------------------------------------------------------------------
    | Radius
    |--------------------------------------------------------------------------
    */

    --radius-small: 6px;

    --radius-medium: 8px;

    --radius-large: 12px;

    --radius-round: 50%;

    --radius-pill: 999px;


    /*
    |--------------------------------------------------------------------------
    | Application Dimensions
    |--------------------------------------------------------------------------
    */

    --header-height: 60px;

    --touch-size: 44px;

    --avatar-size: 40px;

    --desktop-width: 1400px;


    /*
    |--------------------------------------------------------------------------
    | Safe Areas - iPhone / Android
    |--------------------------------------------------------------------------
    */

    --safe-top:
        env(safe-area-inset-top, 0px);

    --safe-right:
        env(safe-area-inset-right, 0px);

    --safe-bottom:
        env(safe-area-inset-bottom, 0px);

    --safe-left:
        env(safe-area-inset-left, 0px);


    /*
    |--------------------------------------------------------------------------
    | Animation
    |--------------------------------------------------------------------------
    */

    --transition-fast:
        150ms ease;

    --transition-normal:
        250ms ease;
}


/* ==========================================================================
   RESET
   ========================================================================== */

*,
*::before,
*::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;
}


/* ==========================================================================
   HTML
   ========================================================================== */

html {

    width: 100%;

    height: 100%;

    font-size: 16px;

    background: var(--app-bg);

    -webkit-text-size-adjust: 100%;

    text-size-adjust: 100%;
}


/* ==========================================================================
   BODY
   ========================================================================== */

body {

    width: 100%;

    min-width: 320px;

    min-height: 100vh;

    min-height: 100dvh;

    font-family:
        var(--font-family);

    font-size:
        var(--font-normal);

    line-height: 1.4;

    background:
        var(--app-bg);

    color:
        var(--text-primary);

    overflow-x: hidden;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    -webkit-tap-highlight-color:
        transparent;
}


/* ==========================================================================
   LINKS
   ========================================================================== */

a {

    color: inherit;

    text-decoration: none;

    -webkit-tap-highlight-color:
        transparent;
}


/* ==========================================================================
   MEDIA
   ========================================================================== */

img,
picture,
video,
canvas,
svg {

    display: block;

    max-width: 100%;
}


img {

    height: auto;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

button {

    font-family: inherit;

    border: 0;

    background: none;

    color: inherit;

    cursor: pointer;

    -webkit-tap-highlight-color:
        transparent;
}


/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

input,
textarea,
select {

    font-family: inherit;

    /*
    |--------------------------------------------------------------------------
    | 16px prevents automatic zoom on iPhone input focus.
    |--------------------------------------------------------------------------
    */

    font-size: 16px;
}


input,
textarea {

    color:
        var(--text-primary);
}


textarea {

    resize: none;
}


/* ==========================================================================
   APPLICATION SHELL
   ========================================================================== */

.app-container {

    width: 100%;

    min-height: 100vh;

    min-height: 100dvh;

    background:
        var(--panel-bg);
}


/* ==========================================================================
   STANDARD PAGE
   ========================================================================== */

.page {

    width: 100%;

    min-height: 100vh;

    min-height: 100dvh;

    background:
        var(--app-bg);
}


/* ==========================================================================
   APP HEADER
   ========================================================================== */

.app-header {

    width: 100%;

    min-height:
        calc(
            var(--header-height) +
            var(--safe-top)
        );

    padding-top:
        var(--safe-top);

    padding-left:
        max(
            10px,
            var(--safe-left)
        );

    padding-right:
        max(
            10px,
            var(--safe-right)
        );

    display: flex;

    align-items: center;

    background:
        var(--header-bg);

    color:
        var(--text-primary);

    position: relative;

    z-index: 100;
}


/* ==========================================================================
   HEADER ICON BUTTON
   ========================================================================== */

.icon-button {

    width:
        var(--touch-size);

    height:
        var(--touch-size);

    min-width:
        var(--touch-size);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius:
        var(--radius-round);

    color:
        var(--text-secondary);

    transition:
        background-color
        var(--transition-fast);
}


.icon-button:active {

    background:
        rgba(255, 255, 255, 0.08);
}


/* ==========================================================================
   AVATAR
   ========================================================================== */

.avatar {

    width:
        var(--avatar-size);

    height:
        var(--avatar-size);

    min-width:
        var(--avatar-size);

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius:
        var(--radius-round);

    background:
        var(--surface-bg);

    color:
        var(--text-white);

    font-weight: 600;
}


.avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;
}


/* ==========================================================================
   USER / CONTACT INFORMATION
   ========================================================================== */

.contact-info {

    min-width: 0;

    flex: 1;
}


.contact-name {

    color:
        var(--text-primary);

    font-size:
        var(--font-input);

    font-weight: 500;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


.contact-status {

    margin-top: 1px;

    color:
        var(--text-secondary);

    font-size:
        var(--font-xs);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
}


/* ==========================================================================
   COMMON CONTENT CONTAINER
   ========================================================================== */

.site-container {

    width: 100%;

    max-width: 1100px;

    margin-left: auto;

    margin-right: auto;

    padding-left:
        max(
            16px,
            var(--safe-left)
        );

    padding-right:
        max(
            16px,
            var(--safe-right)
        );
}


/* ==========================================================================
   CARDS
   ========================================================================== */

.card {

    width: 100%;

    background:
        var(--surface-bg);

    border-radius:
        var(--radius-large);

    border:
        1px solid
        var(--border-color);
}


/* ==========================================================================
   STANDARD BUTTON
   ========================================================================== */

.btn {

    min-height: 48px;

    padding:
        10px
        22px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap: 8px;

    border-radius:
        var(--radius-pill);

    font-size:
        var(--font-input);

    font-weight: 500;

    transition:
        background-color
        var(--transition-fast),
        transform
        var(--transition-fast);
}


.btn-primary {

    background:
        var(--primary);

    color:
        var(--text-white);
}


.btn-secondary {

    background:
        var(--surface-bg);

    color:
        var(--text-primary);
}


.btn-danger {

    background:
        var(--danger);

    color:
        var(--text-white);
}


.btn:active {

    transform:
        scale(0.98);
}


/* ==========================================================================
   FORM GROUP
   ========================================================================== */

.form-group {

    width: 100%;

    margin-bottom: 18px;
}


/* ==========================================================================
   FORM LABEL
   ========================================================================== */

.form-label {

    display: block;

    margin-bottom: 7px;

    color:
        var(--text-secondary);

    font-size:
        var(--font-sm);
}


/* ==========================================================================
   FORM INPUT
   ========================================================================== */

.form-control {

    width: 100%;

    min-height: 48px;

    padding:
        12px
        14px;

    border:
        1px solid
        var(--border-color);

    border-radius:
        var(--radius-medium);

    outline: none;

    background:
        var(--input-bg);

    color:
        var(--text-primary);

    transition:
        border-color
        var(--transition-fast);
}


.form-control::placeholder {

    color:
        var(--text-muted);
}


.form-control:focus {

    border-color:
        var(--primary);
}


/* ==========================================================================
   TEXTAREA
   ========================================================================== */

textarea.form-control {

    min-height: 100px;
}


/* ==========================================================================
   DIVIDER
   ========================================================================== */

.divider {

    width: 100%;

    height: 1px;

    background:
        var(--border-color);
}


/* ==========================================================================
   ALERT
   ========================================================================== */

.alert {

    width: 100%;

    padding:
        12px
        14px;

    margin-bottom:
        16px;

    border-radius:
        var(--radius-medium);

    font-size:
        var(--font-sm);
}


.alert-error {

    color:
        #ff9aa6;

    background:
        rgba(241, 92, 109, 0.12);

    border:
        1px solid
        rgba(241, 92, 109, 0.25);
}


.alert-success {

    color:
        #70e59b;

    background:
        rgba(37, 211, 102, 0.12);

    border:
        1px solid
        rgba(37, 211, 102, 0.25);
}


/* ==========================================================================
   ONLINE INDICATOR
   ========================================================================== */

.online-dot {

    width: 8px;

    height: 8px;

    border-radius:
        var(--radius-round);

    background:
        var(--success);
}


/* ==========================================================================
   TOUCH TARGET
   ========================================================================== */

.touch-target {

    min-width:
        var(--touch-size);

    min-height:
        var(--touch-size);

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;
}


/* ==========================================================================
   SAFE AREA HELPERS
   ========================================================================== */

.safe-top {

    padding-top:
        var(--safe-top);
}


.safe-bottom {

    padding-bottom:
        var(--safe-bottom);
}


/* ==========================================================================
   UTILITIES
   ========================================================================== */

.hidden {

    display:
        none !important;
}


.text-center {

    text-align:
        center;
}


.text-muted {

    color:
        var(--text-secondary);
}


.no-scroll {

    overflow:
        hidden !important;
}


/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

:focus {

    outline:
        none;
}


:focus-visible {

    outline:
        2px solid
        var(--primary-light);

    outline-offset:
        2px;
}


/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection {

    background:
        var(--primary);

    color:
        var(--text-white);
}


/* ==========================================================================
   SCROLLBAR
   ========================================================================== */

* {

    scrollbar-width:
        thin;

    scrollbar-color:
        #374045
        transparent;
}


*::-webkit-scrollbar {

    width:
        6px;

    height:
        6px;
}


*::-webkit-scrollbar-track {

    background:
        transparent;
}


*::-webkit-scrollbar-thumb {

    background:
        #374045;

    border-radius:
        var(--radius-pill);
}


/* ==========================================================================
   TOUCH DEVICES
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {

    /*
    |--------------------------------------------------------------------------
    | Larger controls for phone usage.
    |--------------------------------------------------------------------------
    */

    .btn {

        min-height:
            48px;
    }


    .icon-button {

        min-width:
            44px;

        min-height:
            44px;
    }

}


/* ==========================================================================
   TABLET
   ========================================================================== */

@media (min-width: 768px) {

    .site-container {

        padding-left:
            24px;

        padding-right:
            24px;
    }

}


/* ==========================================================================
   DESKTOP
   ========================================================================== */

@media (min-width: 1024px) {

    body {

        background:
            #0c1317;
    }


    .app-container {

        max-width:
            var(--desktop-width);

        margin-left:
            auto;

        margin-right:
            auto;
    }

}


/* ==========================================================================
   MOUSE HOVER
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {

    .icon-button:hover {

        background:
            rgba(255, 255, 255, 0.08);
    }


    .btn-primary:hover {

        background:
            var(--primary-dark);
    }


    .btn-secondary:hover {

        background:
            var(--surface-hover);
    }

}


/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}