/*==================================================
MESSAGE GENERATOR
AI / TECH UI
==================================================*/

:root{

    --bg:#050807;
    --panel:#0a0f0d;
    --panel-2:#0c1210;

    --border:rgba(96,255,164,.12);
    --border-active:rgba(96,255,164,.30);

    --green:#63f7a2;
    --green-soft:#39d982;

    --text:#edf7f1;
    --text-soft:#91a49a;
    --text-muted:#61736a;

    --danger:#ff6f7d;

    --radius:16px;

    --shadow:
        0 20px 60px rgba(0,0,0,.45);

    --glow:
        0 0 30px rgba(74,255,145,.08);

}


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

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}


html{
    min-height:100%;
    background:var(--bg);
}


body{

    min-height:100vh;

    background:
        radial-gradient(
            circle at 92% 18%,
            rgba(65,255,145,.07),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 82%,
            rgba(65,255,145,.045),
            transparent 25%
        ),
        var(--bg);

    color:var(--text);

    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing:antialiased;

}


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

.app{

    position:relative;

    min-height:100vh;

    overflow:visible !important;

}



/*==================================================
TECH GRID
==================================================*/

.tech-grid{

    position:fixed;

    inset:0;

    pointer-events:none;

    opacity:.28;

    background-image:

        linear-gradient(
            rgba(91,255,157,.035) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(91,255,157,.035) 1px,
            transparent 1px
        );

    background-size:
        42px 42px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 88%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 88%
        );

}


/*==================================================
GLOW
==================================================*/

.glow{

    position:fixed;

    width:360px;
    height:360px;

    pointer-events:none;

    border-radius:50%;

    filter:blur(90px);

    opacity:.10;

}


.glow-top-right{

    top:-180px;
    right:-120px;

    background:#39ff8b;

}


.glow-bottom-right{

    right:-180px;
    bottom:-180px;

    background:#20d878;

}


/*==================================================
STICKY NAVBAR
==================================================*/

.app-header{

    position:sticky;
    top:0;

    z-index:1000;

    width:100%;

    min-height:78px;

    margin:0;

    padding:
        0 max(16px, calc((100% - 1180px) / 2));

    display:flex;

    align-items:center;

    justify-content:space-between;

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

    background:
        rgba(5,8,7,.90);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    isolation:isolate;

}


/*==================================================
SUBTLE GREEN LINE UNDER NAVBAR
==================================================*/

.app-header::after{

    content:"";

    position:absolute;

    left:0;
    right:0;

    bottom:-1px;

    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(99,247,162,.14) 25%,
            rgba(99,247,162,.30) 50%,
            rgba(99,247,162,.14) 75%,
            transparent 100%
        );

    pointer-events:none;

}


/*==================================================
BRAND
==================================================*/

.brand{

    display:flex;

    align-items:center;

    gap:12px;

    min-width:0;

}


.brand-icon{

    flex:0 0 40px;

    width:40px;
    height:40px;

    display:grid;

    place-items:center;

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

    border-radius:11px;

    color:var(--green);

    background:
        rgba(72,255,145,.045);

    box-shadow:
        inset 0 0 18px rgba(72,255,145,.025),
        0 0 20px rgba(72,255,145,.04);

}


.brand-icon svg{

    width:20px;
    height:20px;

}


/*==================================================
BRAND TEXT
==================================================*/

.brand-text{

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:2px;

}


.brand-title{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    font-size:14px;

    font-weight:650;

    letter-spacing:.02em;

}


.brand-subtitle{

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:var(--text-muted);

    font-size:11px;

    letter-spacing:.04em;

}


/*==================================================
HEADER STATUS
==================================================*/

.header-status{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    gap:7px;

    color:var(--text-muted);

    font-size:11px;

    white-space:nowrap;

}


/*==================================================
STATUS DOT
==================================================*/

.status-dot{

    width:6px;
    height:6px;

    flex:0 0 6px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 8px rgba(99,247,162,.7);

}


/*==================================================
CONTENT SCROLL BEHAVIOUR
==================================================*/

html{

    scroll-behavior:auto;

}


body{

    min-height:100vh;

    overflow-x:hidden;

}


/*
Prevent focused inputs from causing the browser
to scroll the entire document unnecessarily.
*/

input,
select,
textarea{

    scroll-margin-top:75px;

}


/*==================================================
MOBILE NAVBAR
==================================================*/

@media(max-width:560px){

    .app-header{

        min-height:68px;

        padding:
            0 10px;

    }


    .brand{

        gap:9px;

    }


    .brand-icon{

        width:36px;
        height:36px;

        flex-basis:36px;

        border-radius:10px;

    }


    .brand-icon svg{

        width:18px;
        height:18px;

    }


    .brand-title{

        font-size:13px;

    }


    .brand-subtitle{

        display:none;

    }


    .header-status{

        font-size:9px;

    }

}


/*==================================================
MAIN
==================================================*/

.main-content{

    position:relative;

    z-index:1;

    width:min(1180px, calc(100% - 32px));

    margin:0 auto;

    padding:34px 0 50px;

    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    gap:18px;

}


/*==================================================
PANEL
==================================================*/

.panel{

    position:relative;

    background:
        linear-gradient(
            145deg,
            rgba(15,24,20,.96),
            rgba(7,12,10,.96)
        );

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

    border-radius:var(--radius);

    padding:22px;

    box-shadow:var(--shadow);

    backdrop-filter:blur(12px);

    -webkit-backdrop-filter:blur(12px);

    overflow:hidden;

}


.panel::after{

    content:"";

    position:absolute;

    top:0;
    right:0;

    width:110px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(99,247,162,.32)
        );

}


.panel:hover{

    border-color:
        rgba(99,247,162,.17);

}


/*==================================================
PANEL HEADING
==================================================*/

.panel-heading{

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:15px;

    margin-bottom:22px;

}


.section-label{

    display:block;

    margin-bottom:6px;

    color:var(--green-soft);

    font-size:9px;

    font-weight:700;

    letter-spacing:.14em;

}


.panel h1,
.panel h2{

    font-size:17px;

    line-height:1.3;

    font-weight:600;

    letter-spacing:-.01em;

}


.panel-icon{

    width:34px;
    height:34px;

    display:grid;
    place-items:center;

    color:var(--text-muted);

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

    border-radius:9px;

}


.panel-icon svg{

    width:17px;
    height:17px;

}


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

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}


.form-group + .form-group{

    margin-top:18px;

}


label{

    color:var(--text-soft);

    font-size:11px;

    font-weight:500;

}


.input-wrap,
.select-wrap{

    position:relative;

}


.input-icon{

    position:absolute;

    left:14px;

    top:50%;

    width:16px;
    height:16px;

    color:var(--text-muted);

    transform:translateY(-50%);

    pointer-events:none;

}


input,
select,
textarea{

    width:100%;

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

    outline:none;

    color:var(--text);

    background:
        rgba(3,8,6,.72);

    border-radius:10px;

    font-family:inherit;

    font-size:13px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


input,
select{

    height:46px;

    padding:
        0 14px 0 42px;

}


select{

    appearance:none;

    -webkit-appearance:none;

    cursor:pointer;

}


select option{

    background:#0a0f0d;

    color:var(--text);

}


textarea{

    min-height:92px;

    padding:13px 14px;

    resize:vertical;

    line-height:1.6;

}


input::placeholder,
textarea::placeholder{

    color:#43534b;

}


input:focus,
select:focus,
textarea:focus{

    border-color:
        rgba(99,247,162,.38);

    background:
        rgba(8,18,13,.9);

    box-shadow:
        0 0 0 3px rgba(99,247,162,.035),
        0 0 18px rgba(99,247,162,.07);

}


.select-wrap::after{

    content:"";

    position:absolute;

    right:15px;
    top:50%;

    width:6px;
    height:6px;

    border-right:1px solid var(--text-muted);
    border-bottom:1px solid var(--text-muted);

    transform:
        translateY(-65%)
        rotate(45deg);

    pointer-events:none;

}


/*==================================================
SECONDARY BUTTON
==================================================*/

.secondary-button{

    width:max-content;

    margin-top:9px;

    display:flex;

    align-items:center;

    gap:7px;

    padding:7px 9px;

    border:1px solid transparent;

    border-radius:8px;

    background:transparent;

    color:var(--text-muted);

    font-family:inherit;

    font-size:10px;

    cursor:pointer;

    transition:.2s ease;

}


.secondary-button svg{

    width:13px;
    height:13px;

}


.secondary-button:hover{

    color:var(--green);

    border-color:var(--border);

    background:
        rgba(99,247,162,.035);

}


/*==================================================
CATEGORY SELECTOR
==================================================*/

.category-selector{

    width:100%;

    display:grid;

    grid-template-columns:
        1fr
        1fr;

    gap:10px;

}


/*==================================================
CATEGORY CARD — HORIZONTAL
==================================================*/

.category-card{

    position:relative;

    width:100%;

    min-width:0;

    height:62px;

    padding:8px;

    display:flex;

    flex-direction:row;

    align-items:center;

    justify-content:flex-start;

    gap:11px;

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

    border-radius:11px;

    background:
        rgba(3,8,6,.55);

    color:var(--text);

    font-family:inherit;

    text-align:left;

    cursor:pointer;

    overflow:hidden;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


/*==================================================
TOP GREEN EDGE
==================================================*/

.category-card::before{

    content:"";

    position:absolute;

    top:0;
    right:0;

    width:55px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(99,247,162,.45)
        );

}


/*==================================================
CATEGORY ICON
==================================================*/

.category-icon{

    position:relative;

    top:auto;
    left:auto;

    flex:0 0 38px;

    width:38px;
    height:38px;

    display:grid;

    place-items:center;

    color:var(--green);

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

    border-radius:9px;

    background:
        rgba(99,247,162,.035);

}


.category-icon svg{

    width:18px;
    height:18px;

}


/*==================================================
CATEGORY CONTENT
==================================================*/

.category-content{

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:3px;

}


.category-name{

    font-size:13px;

    font-weight:600;

    line-height:1.2;

}


.category-description{

    color:var(--text-muted);

    font-size:9px;

    line-height:1.2;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}


/*==================================================
ACTIVE
==================================================*/

.category-card.active{

    border-color:
        rgba(99,247,162,.42);

    background:
        linear-gradient(
            145deg,
            rgba(48,130,79,.12),
            rgba(5,14,9,.7)
        );

    box-shadow:
        inset 0 0 20px rgba(99,247,162,.025),
        0 0 18px rgba(99,247,162,.04);

}


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

.category-card:hover{

    border-color:
        rgba(99,247,162,.24);

}


/*==================================================
PHONE
==================================================*/

@media(max-width:560px){

    .category-selector{

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr);

        gap:8px;

    }


    .category-card{

        height:62px;

        padding:8px;

        gap:8px;

        border-radius:10px;

    }


    .category-icon{

        flex-basis:34px;

        width:34px;
        height:34px;

        border-radius:8px;

    }


    .category-icon svg{

        width:16px;
        height:16px;

    }


    .category-name{

        font-size:12px;

    }


    .category-description{

        font-size:8px;

    }

}

/*==================================================
FORM GRID
==================================================*/

.form-grid{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:16px;

}


.form-grid .form-group + .form-group{

    margin-top:0;

}


/*==================================================
GENDER
==================================================*/

.gender-selector{

    height:46px;

    display:grid;

    grid-template-columns:1fr 1fr;

    padding:3px;

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

    border-radius:10px;

    background:
        rgba(3,8,6,.72);

}


.gender-button{

    border:0;

    border-radius:7px;

    background:transparent;

    color:var(--text-muted);

    font-family:inherit;

    font-size:11px;

    cursor:pointer;

    transition:.2s ease;

}


.gender-button:hover{

    color:var(--text-soft);

}


.gender-button.active{

    color:var(--green);

    background:
        rgba(99,247,162,.08);

    box-shadow:
        inset 0 0 12px rgba(99,247,162,.025);

}


/*==================================================
HIDDEN
==================================================*/

.hidden{

    display:none !important;

}


/*==================================================
GENERATOR
==================================================*/

.generator-panel{

    grid-column:1 / -1;

}


.message-options{

    display:grid;

    grid-template-columns:
        minmax(180px,.55fr)
        minmax(300px,1.45fr);

    gap:18px;

    align-items:start;

}


.message-options .form-group + .form-group{

    margin-top:0;

}


/*==================================================
ENGINE STATUS
==================================================*/

.engine-indicator{

    display:flex;

    align-items:center;

    gap:7px;

    color:var(--text-muted);

    font-size:10px;

}


/*==================================================
PRIMARY BUTTON
==================================================*/

.primary-button{

    width:100%;

    height:46px;

    margin-top:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:9px;

    border:1px solid
        rgba(99,247,162,.30);

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            rgba(46,104,69,.32),
            rgba(10,28,18,.85)
        );

    color:#caffdc;

    font-family:inherit;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

    box-shadow:
        0 0 20px rgba(99,247,162,.035);

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;

}


.primary-button svg{

    width:16px;
    height:16px;

}


.primary-button:hover{

    border-color:
        rgba(99,247,162,.55);

    background:
        linear-gradient(
            135deg,
            rgba(55,132,82,.36),
            rgba(10,31,19,.9)
        );

    box-shadow:
        0 0 25px rgba(99,247,162,.08);

}


.primary-button:active{

    transform:scale(.99);

}


/*==================================================
OUTPUT
==================================================*/

.output-panel{

    grid-column:1 / -1;

}


.copy-button{

    height:34px;

    padding:0 11px;

    display:flex;

    align-items:center;

    gap:7px;

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

    border-radius:8px;

    background:
        rgba(99,247,162,.025);

    color:var(--text-soft);

    font-family:inherit;

    font-size:10px;

    cursor:pointer;

    transition:.2s ease;

}


.copy-button svg{

    width:14px;
    height:14px;

}


.copy-button:hover{

    color:var(--green);

    border-color:
        rgba(99,247,162,.3);

    background:
        rgba(99,247,162,.055);

}


.message-output textarea{

    min-height:170px;

    background:
        rgba(2,7,5,.85);

    line-height:1.7;

}


.output-footer{

    margin-top:10px;

    display:flex;

    align-items:center;

    justify-content:space-between;

}


.character-count,
.output-status{

    color:var(--text-muted);

    font-size:9px;

}


.output-status{

    display:flex;

    align-items:center;

    gap:7px;

}


/*==================================================
FOOTER
==================================================*/

.app-footer{

    position:relative;

    z-index:1;

    width:min(1180px, calc(100% - 32px));

    margin:0 auto;

    padding:0 0 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    color:#3e4e46;

    font-size:9px;

    letter-spacing:.03em;

}


.footer-divider{

    width:3px;
    height:3px;

    border-radius:50%;

    background:#3e4e46;

}


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

::-webkit-scrollbar{

    width:7px;
    height:7px;

}


::-webkit-scrollbar-track{

    background:#050807;

}


::-webkit-scrollbar-thumb{

    background:#17251e;

    border-radius:10px;

}


::-webkit-scrollbar-thumb:hover{

    background:#23402f;

}


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

::selection{

    background:
        rgba(99,247,162,.18);

    color:#d9ffe6;

}


/*==================================================
RESPONSIVE
==================================================*/

@media(max-width:800px){

    .main-content{

        grid-template-columns:1fr;

        padding-top:22px;

    }


    .generator-panel,
    .output-panel{

        grid-column:auto;

    }


    .message-options{

        grid-template-columns:1fr;

    }

}


/*==================================================
PHONE LAYOUT
==================================================*/

@media(max-width:560px){

    .app-header{

        min-height:68px;

    }


    .brand-subtitle{

        display:none;

    }


    .header-status{

        font-size:9px;

    }


    .main-content{

        width:calc(100% - 20px);

        margin:0 auto;

        padding-top:20px;

        padding-bottom:35px;

        grid-template-columns:1fr;

    }


    .panel{

        padding:17px;

        border-radius:13px;

    }


    .panel-heading{

        margin-bottom:18px;

    }


    /*==============================================
    PETS + GOODS
    ==============================================*/

    .category-selector{

        width:100%;

        display:grid;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:8px;

    }


    .category-card{

        height:62px;

        min-height:0;

        padding:8px;

        gap:8px;

    }


    .category-icon{

        position:relative;

        top:auto;
        left:auto;

        flex:0 0 34px;

        width:34px;
        height:34px;

    }


    .category-icon svg{

        width:16px;
        height:16px;

    }


    .category-name{

        font-size:12px;

    }


    .category-description{

        font-size:8px;

        line-height:1.2;

    }

    /*==============================================
    FORM GRID
    ==============================================*/

    .form-grid{

        grid-template-columns:1fr;

    }


    .form-grid .form-group + .form-group{

        margin-top:18px;

    }


    /*==============================================
    OUTPUT
    ==============================================*/

    .output-footer{

        align-items:flex-start;

        flex-direction:column;

        gap:8px;

    }


    .app-footer{

        width:calc(100% - 20px);

        flex-wrap:wrap;

        text-align:center;

    }

}


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

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

    *{

        scroll-behavior:auto !important;

        transition:none !important;

    }

}

/*==================================================
PHONE EDIT BUTTON
==================================================*/

.phone-input-wrap{

    position:relative;

}


.phone-input-wrap input{

    padding-right:48px;

}


.phone-edit-button{

    position:absolute;

    top:50%;
    right:9px;

    width:30px;
    height:30px;

    transform:translateY(-50%);

    display:grid;
    place-items:center;

    border:1px solid transparent;

    border-radius:7px;

    background:transparent;

    color:var(--text-muted);

    cursor:pointer;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;

}


.phone-edit-button svg{

    width:14px;
    height:14px;

}


.phone-edit-button:hover{

    color:var(--green);

    border-color:var(--border);

    background:
        rgba(99,247,162,.055);

}


.phone-edit-button:active{

    transform:
        translateY(-50%)
        scale(.94);

}


.phone-input-wrap input:not([readonly]){

    border-color:
        rgba(99,247,162,.38);

    box-shadow:
        0 0 0 3px rgba(99,247,162,.035),
        0 0 18px rgba(99,247,162,.07);

}

/*==================================================
LOCATION EDIT BUTTON
==================================================*/

.location-input-wrap{

    position:relative;

}


.location-input-wrap input{

    padding-right:48px;

}


.location-edit-button{

    position:absolute;

    top:50%;
    right:9px;

    width:30px;
    height:30px;

    transform:translateY(-50%);

    display:grid;
    place-items:center;

    border:1px solid transparent;

    border-radius:7px;

    background:transparent;

    color:var(--text-muted);

    cursor:pointer;

    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;

}


.location-edit-button svg{

    width:14px;
    height:14px;

}


.location-edit-button:hover{

    color:var(--green);

    border-color:var(--border);

    background:
        rgba(99,247,162,.055);

}


.location-edit-button:active{

    transform:
        translateY(-50%)
        scale(.94);

}


.location-input-wrap input:not([readonly]){

    border-color:
        rgba(99,247,162,.38);

    box-shadow:
        0 0 0 3px rgba(99,247,162,.035),
        0 0 18px rgba(99,247,162,.07);

}

/*==================================================
PET GENDER TOGGLE
==================================================*/

.gender-toggle{

    flex:0 0 auto;

    display:flex;

    align-items:center;

    gap:2px;

    padding:3px;

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

    border-radius:9px;

    background:
        rgba(3,8,6,.72);

}


.gender-toggle-option{

    min-width:62px;

    height:28px;

    padding:0 10px;

    border:0;

    border-radius:6px;

    background:transparent;

    color:var(--text-muted);

    font-family:inherit;

    font-size:9px;

    font-weight:600;

    letter-spacing:.02em;

    cursor:pointer;

    transition:
        color .2s ease,
        background .2s ease,
        box-shadow .2s ease;

}


.gender-toggle-option:hover{

    color:var(--text-soft);

}


.gender-toggle-option.active{

    color:var(--green);

    background:
        rgba(99,247,162,.09);

    box-shadow:
        inset 0 0 12px
        rgba(99,247,162,.035),
        0 0 10px
        rgba(99,247,162,.025);

}


/*==================================================
MOBILE
==================================================*/

@media(max-width:560px){

    .gender-toggle{

        padding:2px;

        border-radius:8px;

    }


    .gender-toggle-option{

        min-width:54px;

        height:26px;

        padding:0 8px;

        font-size:8px;

    }

}

button,
button:focus,
button:active {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible {
    outline: none;
}

button::-moz-focus-inner {
    border: 0;
}

/*==================================================
KEYBOARD FOCUS FIX
ANDROID WEBVIEW / PWA / CHROME
==================================================*/

html{
    scroll-behavior:auto;
}

body{
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior-x:none;
}

.app{
    position:relative;
    overflow:visible !important;
}


/* Keep sticky header fully active */
.app-header{
    position:sticky !important;
    position:-webkit-sticky !important;
    top:0 !important;
    z-index:9999 !important;

    transform:none !important;
    will-change:auto !important;
}


/* Remove the artificial focus offset */
input,
select,
textarea{
    scroll-margin-top:0 !important;
}


/* Prevent focus from changing the page's
   scroll anchor unexpectedly */
input:focus,
select:focus,
textarea:focus{
    overflow-anchor:none;
}


/* Mobile */
@media(max-width:560px){

    .app-header{
        position:sticky !important;
        position:-webkit-sticky !important;
        top:0 !important;
        z-index:9999 !important;
    }

    input,
    select,
    textarea{
        scroll-margin-top:0 !important;
    }
}

.contact-mode-toggle {
    display: flex;
    gap: 4px;
}

.contact-mode-option {
    border: 1px solid rgba(255,255,255,0.10);
    background: transparent;
    color: inherit;
    padding: 7px 11px;
    border-radius: 8px;
    cursor: pointer;
}

.contact-mode-option.active {
    background: rgba(0,232,135,0.12);
    border-color: rgba(0,232,135,0.35);
}

/* ==================================================
   PWA / PHONE SYSTEM BARS
   ================================================== */

html {
    background: #000000;
    color-scheme: dark;
}

body {
    background: #000000;
}

.app-header {
    background: #000000;
}

.app {
    background: #000000;
}

/* PWA top/bottom safe areas */

@supports (padding: env(safe-area-inset-top)) {

    .app-header {
        padding-top: env(safe-area-inset-top);
    }

    .app {
        padding-bottom: env(safe-area-inset-bottom);
    }

}


/* ==================================================
   PWA INSTALL PROMPT
   ================================================== */

.pwa-install-prompt {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 18px;
    z-index: 99999;

    display: none;
    align-items: center;
    gap: 12px;

    padding: 12px 14px;

    background: #050807;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 16px;

    box-shadow: 0 12px 40px rgba(0,0,0,.55);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.pwa-install-prompt.show {
    display: flex;
}

.pwa-install-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border-radius: 11px;
    overflow: hidden;
}

.pwa-install-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pwa-install-info {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.pwa-install-info strong {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.pwa-install-info span {
    color: rgba(255,255,255,.55);
    font-size: 11px;
}

#pwaInstallBtn {
    border: 0;
    border-radius: 9px;
    padding: 9px 13px;
    cursor: pointer;

    background: #19d879;
    color: #031008;

    font-size: 12px;
    font-weight: 700;
}

.pwa-install-close {
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.5);
    font-size: 20px;
    cursor: pointer;
    padding: 2px;
}