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

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

html,
body{

    width:100%;
    height:100%;
    overflow:hidden;

    font-family:-apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Helvetica Neue",
    sans-serif;

    background:black;

}

/* ==========================================
   AFRAME
========================================== */

a-scene{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

}

/* ==========================================
   iPHONE MESSAGE
========================================== */

.ios-notification{

    position:fixed;

    top:18px;
    left:50%;

    transform:translate(-50%,-150%);

    width:92%;
    max-width:390px;

    background:rgba(245,245,245,.82);

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

    border-radius:22px;

    padding:14px 16px;

    box-shadow:
        0 15px 45px rgba(0,0,0,.28);

    transition:all .45s cubic-bezier(.25,.8,.25,1);

    z-index:99999;

    opacity:0;

}

/* Notification visible */

.ios-notification.show{

    transform:translate(-50%,0);

    opacity:1;

}

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

.ios-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:10px;

}

.ios-left{

    display:flex;

    align-items:center;

    gap:8px;

}

/* Messages icon */

.messages-icon{

    width:22px;
    height:22px;

    border-radius:6px;

    background:#34C759;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:12px;

}

.app-name{

    font-size:13px;

    font-weight:600;

    color:#666;

}

.time{

    font-size:13px;

    color:#888;

}

/* ==========================================
   MESSAGE
========================================== */

.sender{

    font-size:17px;

    font-weight:700;

    color:#000;

    margin-bottom:4px;

}

.message{

    font-size:17px;

    color:#111;

    line-height:1.35;

}

/* ==========================================
   BOTTOM UI
========================================== */

.bottom-ui{

    position:fixed;

    bottom:30px;

    left:50%;

    transform:translateX(-50%);

    width:92%;
    max-width:500px;

    display:flex;

    gap:16px;

    z-index:9999;

}

/* Buttons */

.bottom-ui button{

    flex:1;

    padding:18px;

    border:none;

    border-radius:16px;

    font-size:18px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

    color:white;

}

/* Press animation */

.bottom-ui button:active{

    transform:scale(.97);

}

/* Cheap */

#cheapBtn{

    background:#E53935;

}

/* Comfort */

#comfortBtn{

    background:#34C759;

}

/* Hover (desktop testing) */

.bottom-ui button:hover{

    filter:brightness(1.08);

}