/* =========================================================
   TempMail UI  NeoBrutal Paper (Unique Design) [FIXED]
   - No color-mix() (para walang editor errors)
   - Valid braces / media queries
   - PC + Android optimized
   ========================================================= */

:root{
  --bg: #0f1b2d;
  --paper: #142238;
  --paper2:#121f33;
  --ink: rgba(245,249,255,.96);
  --muted: rgba(210,221,235,.70);

  --line: rgba(180,198,220,.18);
  --line2: rgba(180,198,220,.30);

  --accent: #7cb4ff;
  --accent2:#8fd3c8;
  --accent3:#c9d7ee;

  --danger:#ff7a7a;

  --shadow: 0 12px 28px rgba(0,0,0,.30);
  --shadowSoft: 0 18px 40px rgba(0,0,0,.24);

  --r: 18px;
  --r2: 14px;

  --mono: "Consolas", "Courier New", monospace;
  --sans: "Trebuchet MS", "Verdana", "Tahoma", sans-serif;

  --t: 160ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}

html.light{
  --bg: #f4f7fb;
  --paper:#ffffff;
  --paper2:#f1f5fa;
  --ink: rgba(18,28,45,.92);
  --muted: rgba(18,28,45,.60);

  --line: rgba(60,85,120,.18);
  --line2: rgba(60,85,120,.28);

  --shadow: 0 12px 28px rgba(20,40,70,.12);
  --shadowSoft: 0 18px 40px rgba(20,40,70,.12);
}

/* base */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--sans);
  color: var(--ink);
  background:
    radial-gradient(900px 520px at 12% 10%, rgba(124,180,255,.22), transparent 60%),
    radial-gradient(900px 520px at 90% 12%, rgba(143,211,200,.16), transparent 55%),
    radial-gradient(1000px 700px at 50% 100%, rgba(201,215,238,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg));
  overflow-x:hidden;
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

a{ color: inherit; }

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 14px 90px;
  position:relative;
  z-index: 1;
}


/* layout */
.layout{
  display:grid;
  grid-template-columns: 360px 1fr;
  gap: 18px;
  margin-top: 16px;
}

.sidebar{
  position: relative;
}

/* =========================================================
   Header
   ========================================================= */
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 12px;
  background: var(--paper);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  position: sticky;
  top: 10px;
  z-index: 20;
}

html.light .header{
  background: var(--paper);
}

.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 240px;
}

.logo{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line2);
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.35), transparent 55%),
    linear-gradient(135deg, rgba(124,180,255,.35), rgba(143,211,200,.32));
  box-shadow: 0 8px 16px rgba(0,0,0,.20);
  position:relative;
  overflow:hidden;
}

.logo:before{
  content:"";
  position:absolute;
  inset: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.6);
}

@keyframes rise{
  from{ opacity:0; transform: translateY(10px); }
  to{ opacity:1; transform: translateY(0); }
}


.brand h1{
  margin:0;
  font-size: 1.12rem;
  letter-spacing:.2px;
  font-weight: 950;
  line-height: 1.05;
}

.brand .sub{
  margin-top: 3px;
  font-size: .86rem;
  color: var(--muted);
  font-family: var(--mono);
}

.brand .sub b{ color: var(--ink); font-weight: 900; }

.header-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}


.pill{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: var(--paper2);
  box-shadow: var(--shadowSoft);
  white-space:nowrap;
}

html.light .pill{
  background: var(--paper2);
}

.pill-label{
  font-size: .84rem;
  color: var(--muted);
}

.pill b{
  font-family: var(--mono);
  font-weight: 950;
}

.badge{
  font-family: var(--mono);
  font-weight: 950;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255,255,255,.08);
}

html.light .badge{ background: rgba(0,0,0,.04); }

/* =========================================================
   Buttons & Inputs
   ========================================================= */
.btn{
  border: 1px solid var(--line2);
  background: var(--paper2);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 950;
  letter-spacing:.1px;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), background var(--t) var(--ease);
  box-shadow: var(--shadowSoft);
  user-select:none;
}

html.light .btn{
  background: var(--paper2);
}

.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0); box-shadow: 3px 3px 0 rgba(0,0,0,.22); }

.btn.primary{
  background: linear-gradient(135deg, rgba(124,180,255,.26), rgba(143,211,200,.22));
}

.btn.ghost{
  background: transparent;
  box-shadow:none;
}

/*  mini button (for recent clear) */
.btn.mini{
  padding: 8px 10px;
  border-radius: 12px;
  font-size: .88rem;
}

.input{
  width: 100%;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: var(--paper2);
  color: var(--ink);
  outline:none;
  font-family: var(--mono);
  transition: transform var(--t) var(--ease), border-color var(--t) var(--ease);
}

html.light .input{
  background: var(--paper2);
}

.input:focus{
  transform: translateY(-1px);
  border-color: rgba(0,230,168,.70);
}

select.input{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 52%,
    calc(100% - 12px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 34px;
}

select.input option{
  background: var(--paper);
  color: var(--ink);
}

select.input:focus{
  box-shadow: 0 0 0 2px rgba(255,59,59,.20);
}

select.input option:checked{
  background: linear-gradient(135deg, rgba(255,59,59,.25), rgba(45,107,255,.22));
  color: var(--ink);
}

/* =========================================================
   Layout
   ========================================================= */
.grid{
  display:grid;
  grid-template-columns: 400px 1fr;
  gap: 14px;
  margin-top: 14px;
}

.layout .card{ animation-delay: 80ms; }
.layout .card:nth-of-type(2){ animation-delay: 140ms; }

.card{
  background: var(--paper);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
  animation: rise 360ms var(--ease) both;
}

html.light .card{
  background: var(--paper);
}

.card .hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 12px 12px;
  border-bottom: 1px solid var(--line2);
  background: var(--paper2);
}

html.light .card .hd{
  background: var(--paper2);
}

.card .hd .title{
  display:flex;
  align-items:center;
  gap: 10px;
  font-weight: 960;
  letter-spacing:.12px;
}

.flag{
  width: 12px; height: 12px;
  border-radius: 4px;
  border: 2px solid var(--line2);
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 3px 3px 0 rgba(0,0,0,.25);
}

.card .bd{ padding: 12px; }

/* =========================================================
   Identity panel
   ========================================================= */
.row{
  display:flex;
  gap: 10px;
  align-items:center;
}

.row .btn{ flex: 0 0 140px; }
.row .input{ flex: 1 1 auto; }

.field-row{
  display:flex;
  flex-direction:column;
  gap: 6px;
  margin-top: 10px;
}

.label{
  font-size: .82rem;
  color: var(--muted);
  letter-spacing: .2px;
}

.identity-box{
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--r2);
  border: 1px dashed var(--line2);
  background: var(--paper2);
}

html.light .identity-box{
  background: var(--paper2);
}

.email-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap:wrap;
}

.email{
  font-family: var(--mono);
  font-weight: 950;
  letter-spacing:.15px;
  word-break: break-all;
}

.name{
  margin-top: 8px;
  color: var(--muted);
  font-weight: 900;
}

.stack{
  display:flex;
  gap: 10px;
  margin-top: 12px;
}

.stack .btn{ flex:1; }

.helper{
  margin-top: 10px;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.45;
}


/*  Recent section */
.sep{
  border:0;
  border-top: 2px solid var(--line2);
  margin: 12px 0;
  opacity:.75;
}

.recent{ margin-top: 2px; }

.recent-hd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.recent-list{
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
  max-height: 220px;
  overflow:auto;
  padding-right: 4px;
}

.recent-item{
  width: 100%;
  text-align:left;
  font-family: var(--mono);
  font-weight: 950;
  letter-spacing:.1px;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid var(--line2);
  background: var(--paper);
  box-shadow: var(--shadowSoft);
  cursor:pointer;
  transition: transform var(--t) var(--ease);
  color: var(--ink);
  font-size: .86rem;
}

html.light .recent-item{
  background: var(--paper);
}

.recent-item:hover{ transform: translateY(-1px); }
.recent-item:active{ transform: translateY(0); }

/* =========================================================
   Inbox panel
   ========================================================= */
.toolbar{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap:wrap;
  width: 100%;
}

.search{
  position:relative;
  flex:1;
  min-width: 240px;
}

.search input{ padding-left: 40px; }
.search svg{
  position:absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  opacity:.75;
}

.status{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--muted);
  font-size: .88rem;
  min-width: 150px;
  justify-content:flex-end;
}

.toolbar .btn{
  white-space: nowrap;
}

.spinner{
  width: 18px; height: 18px;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.18);
  border-top-color: var(--accent);
  animation: spin .75s linear infinite;
}

html.light .spinner{
  border-color: rgba(0,0,0,.14);
  border-top-color: var(--accent);
}

@keyframes spin{ to{ transform: rotate(360deg); } }

.split{
  display:grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 12px;
  padding: 12px;
}

.pane{
  border: 1px solid var(--line2);
  border-radius: var(--r2);
  overflow:hidden;
  background: var(--paper2);
  min-height: 560px;
}

html.light .pane{
  background: var(--paper2);
}

.pane .phd{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 10px;
  border-bottom: 1px solid var(--line2);
  background: var(--paper2);
}

html.light .pane .phd{
  background: var(--paper2);
}

.pane .phd b{ font-weight: 950; }

.pane .pbd{
  padding: 10px;
  max-height: 660px;
  overflow:auto;
}

.list{ display:flex; flex-direction:column; gap: 10px; }

.item{
  padding: 12px;
  border-radius: 16px;
  border: 1px solid var(--line2);
  background: var(--paper);
  box-shadow: var(--shadowSoft);
  cursor:pointer;
  transition: transform var(--t) var(--ease);
  animation: enter 220ms var(--ease) both;
}

html.light .item{
  background: var(--paper);
}

@keyframes enter{
  from{ opacity:0; transform: translateY(8px); }
  to{ opacity:1; transform: translateY(0); }
}

.item:hover{ transform: translateY(-1px); }
.item:active{ transform: translateY(0); }

.item .subj{
  font-weight: 950;
  margin-bottom: 4px;
}

.meta{
  font-size: .86rem;
  color: var(--muted);
  line-height: 1.25;
}

/* NEW highlight */
.item.is-new{
  border-color: rgba(255,59,59,.65);
  box-shadow: 0 0 0 4px rgba(255,59,59,.12), var(--shadowSoft);
  animation: pulse 1.2s var(--ease) 1;
}

@keyframes pulse{
  0%{ transform: translateY(0); }
  45%{ transform: translateY(-2px); }
  100%{ transform: translateY(0); }
}

/* Viewer */
.viewer{
  border: 1px solid var(--line2);
  border-radius: 16px;
  overflow:hidden;
  background: var(--paper);
  box-shadow: var(--shadowSoft);
}

html.light .viewer{
  background: var(--paper);
}

.viewer .vh{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px;
  border-bottom: 1px solid var(--line2);
  background: var(--paper2);
}

.viewer .vb{
  padding: 10px;
  max-height: 610px;
  overflow:auto;
  line-height: 1.55;
}

.viewer .vb img{
  max-width:100%;
  height:auto;
  border-radius: 12px;
  border: 2px solid var(--line);
}

.viewer .vb a{
  color: var(--accent);
  font-weight: 950;
  text-decoration: none;
}
.viewer .vb a:hover{ text-decoration: underline; }

.empty{
  padding: 26px 10px;
  text-align:center;
  color: var(--muted);
}

.empty h3{
  margin:0 0 6px;
  font-size: 1.05rem;
  color: var(--ink);
}

.empty p{ margin:0; }

.err{
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,91,91,.55);
  background: rgba(255,91,91,.12);
}

/* =========================================================
   Mobile: Android-first layout
   ========================================================= */
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .split{ grid-template-columns: 1fr; }
}

@media (min-width: 900px){
  .recent-list{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px){
  html{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body{ font-size: 13.5px; }

  .wrap{
    padding: 12px 12px 90px;
  }

  .header{
    position: relative;
    top: auto;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 10px;
  }

  .brand{ min-width: 0; }
  .brand h1{ font-size: 1.05rem; }
  .brand .sub{ font-size: .8rem; line-height: 1.35; }

  .header-actions{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .pill{
    width: 100%;
    justify-content: space-between;
    padding: 8px 10px;
  }


  #activeEmailMini{
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .layout{ grid-template-columns: 1fr; gap: 14px; }
  .split{ grid-template-columns: 1fr; padding: 10px; gap: 10px; }

  .row{ flex-direction: column; align-items: stretch; }
  .row .input, .row .btn{ width: 100%; }
  .row .btn{ flex: 0 0 auto; padding: 10px 12px; }

  .email-line{ flex-direction: column; align-items: stretch; }
  #copyBtn{ width: 100%; }

  .stack{ flex-direction: column; gap: 8px; }
  .stack .btn{ width: 100%; }

  .toolbar{ flex-direction: column; align-items: stretch; gap: 8px; }
  .search{ min-width: 0; }
  .status{ width: 100%; justify-content: flex-start; }

  .pane{ min-height: unset; }
  .pane .pbd{ max-height: 56vh; }
  .viewer .vb{ max-height: 52vh; }

  .recent-list{ max-height: 180px; grid-template-columns: 1fr; }
}

/* =========================================================
   Toast
   ========================================================= */
.toast-wrap{
  position: fixed;
  right: 12px;
  bottom: 16px;
  display:flex;
  flex-direction:column;
  gap: 10px;
  z-index: 9999;
  pointer-events:none;
}

.toast{
  pointer-events:none;
  min-width: 220px;
  max-width: 340px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--line2);
  background: var(--paper);
  box-shadow: var(--shadowSoft);
  display:flex;
  align-items:flex-start;
  gap: 10px;
  opacity:0;
  transform: translateY(8px);
  animation: toastIn 200ms var(--ease) forwards;
}

html.light .toast{
  background: var(--paper);
}

@keyframes toastIn{ to{ opacity:1; transform: translateY(0); } }
@keyframes toastOut{ to{ opacity:0; transform: translateY(8px); } }

.toast .ico{
  width: 24px; height: 24px;
  border-radius: 10px;
  border: 1px solid var(--line2);
  display:grid;
  place-items:center;
  background: var(--paper2);
  font-weight: 950;
  flex:0 0 auto;
}

.toast b{ display:block; font-weight: 950; }
.toast small{ display:block; margin-top: 2px; color: var(--muted); line-height: 1.35; }

/* --- INLINE TABS: MOBILE ONLY --- */
.inline-tabs{ display:none; } /* default hidden */

/* show ONLY on small screens */
@media (max-width: 720px){
  .inline-tabs{
    display:flex;
    gap:8px;
    width:100%;
    margin-top: 6px; /* spacing under search/status */
  }
}

/* make toolbar stack nicely on mobile */
@media (max-width: 720px){
  .toolbar{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .status{
    justify-content: flex-start;
    width: 100%;
  }
}

/*  Inline tab buttons styling (kept same feel) */
.tab-btn{
  flex:1;
  border: 1px solid var(--line2);
  background: var(--paper2);
  color: var(--ink);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  font-weight: 950;
  box-shadow: var(--shadowSoft);
}
html.light .tab-btn{
  background: var(--paper2);
}
.tab-btn.active{
  background: linear-gradient(135deg, rgba(124,180,255,.20), rgba(143,211,200,.18));
}