body{
  margin:0;
  background:#050505;
  color:white;
  font-family:-apple-system,BlinkMacSystemFont,sans-serif;
}

#phone{
  margin:auto;
  width:390px;
  height:844px;
  max-height:100vh;
  padding:20px;
  box-sizing:border-box;
  background:
    linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.70)),
    url("wallpaperatlas.jpg");
  background-size:cover;
  background-position:center;
  position:relative;
  overflow:hidden;
}

#home{
  padding-top:20px;
}

#statusbar{
  display:grid;
  align-items:center;
  grid-template-columns:1fr auto 1fr;
  gap:20px;
}

.status-icons{
  display:flex;
  align-items:center;
  gap:10px;
  justify-self:end;
}

.signal{
  display:flex;
  align-items:flex-end;
  gap:2px;
  height:14px;
}

.signal span{
  width:3px;
  background:white;
  border-radius:2px;
}

.signal span:nth-child(1){height:5px;}
.signal span:nth-child(2){height:8px;}
.signal span:nth-child(3){height:11px;}
.signal span:nth-child(4){height:14px;}

.wifi-icon{
  position:relative;
  width:18px;
  height:14px;
}

.wifi-icon span{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border:2px solid white;
  border-top:none;
  border-left-color:transparent;
  border-right-color:transparent;
  border-radius:0 0 20px 20px;
}

.wifi-icon span:nth-child(1){
  bottom:0;
  width:4px;
  height:4px;
  background:white;
  border:none;
  border-radius:50%;
}

.wifi-icon span:nth-child(2){
  bottom:2px;
  width:10px;
  height:8px;
}

.wifi-icon span:nth-child(3){
  bottom:4px;
  width:18px;
  height:12px;
}

.battery{
  width:24px;
  height:12px;
  border:2px solid white;
  border-radius:4px;
  position:relative;
}

.battery::after{
  content:"";
  position:absolute;
  right:-5px;
  top:3px;
  width:3px;
  height:6px;
  background:white;
  border-radius:1px;
}

.battery-level{
  width:78%;
  height:100%;
  background:#56ff65;
  border-radius:2px;
}

#dynamic-island{
  width:120px;
  height:32px;
  background:#000;
  border-radius:30px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  justify-self:center;
}

h1{
  margin-top:40px;
  margin-bottom:35px;
  font-size:48px;
}

.app-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(70px,1fr));
  justify-content:center;
  gap:28px 18px;
  margin-top:30px;
}

.app-icon{
  text-align:center;
  cursor:pointer;
}

.icon{
  width:78px;
  height:78px;
  margin:auto;
  border-radius:22px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
}

.glass{
  background:rgba(255,255,255,.05);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 30px rgba(0,0,0,.35);
}

.app-icon span{
  display:block;
  margin-top:8px;
  font-size:14px;
}

.screen{
  padding-top:10px;
}

#dock{
  position:absolute;
  left:50%;
  bottom:20px;
  transform:translateX(-50%);
  display:flex;
  gap:25px;
  padding:18px 40px;
  border-radius:30px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 8px 30px rgba(0,0,0,.35);
}

.dock-icon{
  font-size:30px;
  cursor:pointer;
}

#lockscreen{
  position:absolute;
  inset:0;
  background:url("wallpaperatlas.jpg") center/cover no-repeat;
  color:white;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-top:90px;
  z-index:99999;
}

.lock-time{
  font-size:72px;
  font-weight:700;
}

.lock-date{
  font-size:18px;
  color:#ddd;
}

.unlock-text{
  position:absolute;
  bottom:50px;
  color:#aaa;
  font-size:14px;
}

/* Messages app */

#messages.screen{
  padding:0;
}

#messages{
  position:absolute;
  inset:0;
  background:#0b0b0d;
  overflow:hidden;
}

.app-header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(11,11,13,.95);
  backdrop-filter:blur(20px);
  position:sticky;
  top:0;
  z-index:20;
}

.app-header h2{
  margin:0;
}

.conversation-list{
  overflow-y:auto;
  height:calc(100% - 70px);
  padding:12px;
  box-sizing:border-box;
}

.conversation{
  display:flex;
  align-items:center;
  gap:14px;

  padding:14px;

  margin-bottom:8px;

  border-radius:18px;

  background:rgba(20,20,20,.65);

  backdrop-filter:blur(20px);

  border:1px solid rgba(255,255,255,.04);

  cursor:pointer;

  transition:.15s;
}

.conversation:hover{
  background:rgba(35,35,35,.75);
}

.conversation-avatar{
  width:52px;
  height:52px;

  border-radius:50%;

  background:#2b2b2b;

  display:flex;
  align-items:center;
  justify-content:center;

  font-weight:700;
}

.conversation-main{
  flex:1;
}

.conversation-top{
  display:flex;
  justify-content:space-between;
  align-items:center;

  margin-bottom:4px;
}

.conversation-name{
  font-weight:700;
  font-size:16px;
}

.conversation-time{
  font-size:11px;
  color:#888;
}

.conversation-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.conversation-preview{
  color:#9a9a9a;

  font-size:13px;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;

  max-width:220px;
}

.unread-badge{
  min-width:18px;
  height:18px;

  padding:0 6px;

  border-radius:999px;

  background:#ff3b30;

  color:white;

  font-size:11px;
  font-weight:700;

  display:flex;
  align-items:center;
  justify-content:center;
}

.chat-header{
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:85px;
  padding:18px 15px 10px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  gap:12px;
  background:rgba(11,11,13,.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,255,255,.06);
  z-index:30;
}

.chat-back{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.08);
  cursor:pointer;
}

.chat-user{
  display:flex;
  align-items:center;
  gap:12px;
}

.chat-avatar{
  width:42px;
  height:42px;
  border-radius:50%;
  background:#2d2d2d;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}

.chat-name{
  font-size:18px;
  font-weight:700;
}

.chat-status{
  font-size:11px;
  color:#5cff75;
}

.chat-scroll{
  position:absolute;
  top:85px;
  bottom:74px;
  left:0;
  right:0;
  overflow-y:auto;
  padding:14px 12px;
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.mine{
  background:#d92b2b;
  color:white;
  padding:12px 16px;
  border-radius:18px;
  margin:8px 0;
  margin-left:auto;
  width:fit-content;
  max-width:70%;
}

.theirs{
  background:#1f1f1f;
  color:white;
  padding:12px 16px;
  border-radius:18px;
  margin:8px 0;
  width:fit-content;
  max-width:70%;
}

.composer{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:74px;
  box-sizing:border-box;
  display:flex;
  gap:8px;
  padding:10px 12px 14px;
  background:rgba(11,11,13,.96);
  backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,.06);
  z-index:40;
}

.composer input{
  flex:1;
  border:none;
  border-radius:999px;
  padding:16px;
}

.composer button{
  border:none;
  border-radius:999px;
  padding:16px 22px;
}

/* Future widgets */

.hero{
  margin-bottom:30px;
}

.hero-date{
  color:#aaa;
  font-size:14px;
}

.hero-user{
  font-size:32px;
  font-weight:700;
  margin-top:10px;
  margin-bottom:20px;
}

.hero-cards{
  display:flex;
  gap:12px;
}

.widget{
  flex:1;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  padding:16px;
  backdrop-filter:blur(20px);
}

.widget-title{
  color:#999;
  font-size:13px;
  margin-bottom:8px;
}

.message-row{
  display:flex;
  width:100%;
}

.row-mine{
  justify-content:flex-end;
}

.row-theirs{
  justify-content:flex-start;
}

.bubble{
  max-width:72%;
  padding:11px 14px 7px;
  border-radius:20px;
  font-size:14px;
  line-height:1.25;
}

.mine{
  background:linear-gradient(
    180deg,
    #ff453a,
    #ff3b30
  );

  box-shadow:
    0 2px 8px rgba(255,59,48,.12);
}

.theirs{
  background:#1f1f1f;
  color:white;
  border:1px solid rgba(255,255,255,.04);
}

.message-time{
  margin-top:4px;
  font-size:10px;
  opacity:.45;
  text-align:right;
}

.date-separator{
  align-self:center;

  margin:12px 0;

  padding:4px 12px;

  border-radius:999px;

  background:rgba(255,255,255,.06);

  color:#888;

  font-size:11px;
}

.payment-card{
  background:rgba(255,255,255,.06);
  border-radius:16px;
  padding:14px;
}

.payment-icon{
  font-size:24px;
  margin-bottom:8px;
}

.payment-title{
  font-size:15px;
  font-weight:700;
}

.payment-status{
  margin-top:4px;
  font-size:12px;
  opacity:.75;
  text-transform:capitalize;
}

.contact-sheet{
  position:absolute;
  inset:0;
  z-index:100;
}

.sheet-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
}

.sheet-panel{
  position:absolute;
  left:0;
  right:0;
  bottom:0;

  padding:14px 18px 26px;

  background:rgba(18,18,20,.98);
  backdrop-filter:blur(24px);

  border-radius:28px 28px 0 0;
  border-top:1px solid rgba(255,255,255,.08);

  text-align:center;
}

.sheet-handle{
  width:42px;
  height:5px;
  border-radius:999px;
  background:#555;
  margin:0 auto 18px;
}

.sheet-avatar{
  width:70px;
  height:70px;
  border-radius:50%;

  background:#2d2d2d;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0 auto 10px;

  font-weight:800;
  font-size:22px;
}

.sheet-panel h2{
  margin:4px 0 0;
}

.sheet-status{
  color:#5cff75;
  margin:4px 0 18px;
  font-size:13px;
}

.sheet-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.sheet-actions button{
  border:none;
  border-radius:16px;
  padding:14px 10px;

  background:rgba(255,255,255,.08);
  color:white;

  font-weight:700;
}

.sheet-actions .danger{
  background:rgba(255,59,48,.18);
  color:#ff6b64;
}

.payment-bubble{
  background:rgba(255,255,255,.07);
  color:white;
  padding:12px 14px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  backdrop-filter:blur(20px);
  width:fit-content;
  min-width:130px;
  max-width:220px;
}

.payment-card{
  min-width:170px;
}

.payment-icon{
  font-size:22px;
  margin-bottom:6px;
}

.payment-title{
  font-size:16px;
  font-weight:800;
}

.payment-status{
  margin-top:5px;
  font-size:12px;
  opacity:.9;
  text-transform:capitalize;
}

.payment-card .payment-status{
  color:#56ff65;
}

.payment-card.request .payment-status{
  color:#ffd34d;
}

.payment-card.request .payment-status:contains("Declined"){
  color:#ff6767;
}

.status-completed{
  color:#56ff65;
}

.status-paid{
  color:#56ff65;
}

.status-pending{
  color:#ffd34d;
}

.status-declined{
  color:#ff6b6b;
}

.status-failed{
  color:#ff6b6b;
}