:root{
  --bg:#000;
  --panel:#0f1420;
  --card:#11182a;
  --text:#e6ecff;
  --muted:#7a8aa9;
  --accent:#39c7c7;
  --accent-strong:#25ffaa;
  --border:#1f2740;
  --ring:#ff4d6d;
  --shadow:0 18px 50px rgba(0,0,0,.45);
}

@font-face{
  font-family:"PixelOperator";
  src:url("../assets/fonts/pixel_operator/PixelOperator.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"PixelOperatorBold";
  src:url("../assets/fonts/pixel_operator/PixelOperator-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"ChironGoRoundTC";
  src:url("../assets/fonts/ChironGoRoundTC-VariableFont_wght.ttf") format("truetype");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"GoogleSansCodeVar";
  src:url("../assets/fonts/Google_Sans_Code/GoogleSansCode-VariableFont_wght.ttf") format("truetype");
  font-weight:300 800;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Zpix";
  src:url("../assets/fonts/zpix.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

*{box-sizing:border-box}
html,body{height:100%; overflow:hidden}
body{
  margin:0;
  background:#000;
  color:var(--text);
  font:16px/1.6 "ChironGoRoundTC","SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.call-screen{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  padding:0 16px;
  overflow:hidden;
  text-align:center;
}

.call-glow{display:none;}

.call-card{
  position:relative;
  width:min(480px,100%);
  background:#e7e7e7;
  border:2px solid #111;
  border-radius:0;
  box-shadow:0 10px 0 #000;
  text-align:center;
  overflow:hidden;
  padding:0;
  color:#111;
}

.call-header-bar{
  background:#e7e7e7;
  border-bottom:2px solid #111;
  padding:9px 16px 8px;
  font:400 14px/1 "Pixelify Sans","pixelmix",monospace;
  letter-spacing:.04em;
  color:#111;
  font-weight:400;
  text-transform:uppercase;
}

.call-body{
  padding:40px 24px 28px;
}

.call-title{
  margin:0 0 12px;
  font:400 26px/1.1 "Pixelify Sans","pixelmix",monospace;
  color:#111;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  letter-spacing:0;
}

.call-icon-image{
  width:30px;
  height:30px;
  object-fit:contain;
  image-rendering:pixelated;
  flex:0 0 auto;
}

.call-status{
  margin:0 0 20px;
  color:#111;
  font:400 18px/1 "Pixelify Sans","pixelmix",monospace;
}

.dots span{
  animation:dot-blink 1.4s infinite both;
}
.dots span:nth-child(2){animation-delay:.2s;}
.dots span:nth-child(3){animation-delay:.4s;}

@keyframes dot-blink{
  0%,80%,100%{opacity:0;}
  40%{opacity:1;}
}

.call-actions{
  display:flex;
  justify-content:center;
  gap:12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:116px;
  min-height:44px;
  padding:8px 24px;
  border-radius:0;
  border:2px solid #111;
  background:#111;
  color:#fff;
  font:400 18px/1 "Pixelify Sans","pixelmix",monospace;
  font-weight:400;
  letter-spacing:0;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:focus-visible{outline:2px solid #111; outline-offset:2px;}

.btn.no-underline{text-decoration:none;}

.btn.accept{
  background:#111;
  color:#fff;
  border-color:#111;
  font-family:"PixelOperator","Pixelify Sans","pixelmix",monospace;
}
.btn.accept:hover{
  background:#2a2a2a;
  color:#fff;
  border-color:#111;
}

.call-screen:not(.answered) .btn.accept:active{
  transform:translateY(1px);
}

@media (max-width:768px){
  .call-card{
    width:min(430px,100%);
  }

  .call-title{
    font-size:24px;
  }

  .call-status{
    font-size:17px;
  }

  .btn{
    font-size:17px;
  }
}

@media (max-width:560px){
  .call-card{
    width:min(360px,100%);
    box-shadow:0 8px 0 #000;
  }

  .call-body{
    padding:30px 16px 24px;
  }

  .call-title{
    font-size:22px;
    gap:8px;
  }

  .call-icon-image{
    width:26px;
    height:26px;
  }

  .call-status{
    font-size:16px;
  }

  .btn{
    min-width:98px;
    min-height:38px;
    padding:7px 18px;
    font-size:16px;
  }
}

@media (min-width:1200px){
  .call-card{
    width:min(620px,100%);
    border-width:3px;
    box-shadow:0 14px 0 #000;
  }

  .call-header-bar{
    padding:12px 20px 10px;
    font-size:18px;
  }

  .call-body{
    padding:52px 30px 38px;
  }

  .call-title{
    font-size:34px;
    gap:14px;
    margin-bottom:14px;
  }

  .call-icon-image{
    width:38px;
    height:38px;
  }

  .call-status{
    font-size:24px;
    margin-bottom:26px;
  }

  .btn{
    min-width:160px;
    min-height:56px;
    padding:10px 28px;
    font-size:24px;
    border-width:3px;
  }
}

.btn.mission{
  width:100%;
  margin-top:10px;
  background:var(--accent);
  color:#00101b;
  border:1px solid transparent;
  box-shadow:0 12px 28px rgba(57,199,199,.35);
}

.briefing{
  display:none;
}

.briefing.hidden{display:none;}
.call-screen.answered .briefing{display:block; animation:fade-up .3s ease forwards;}
.call-screen.answered .call-card{display:none;}

/* When the incident report is shown, make the call-screen a plain block container */
.call-screen.answered{
  display:block;
  padding:0;
}

.video-shell{
  display:none;
}

.audio-shell{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  gap:12px;
}

.audio-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  letter-spacing:.4px;
}
.audio-title{
  font-weight:800;
  color:var(--text);
  letter-spacing:1px;
}
.audio-status{
  font-size:13px;
  padding:6px 10px;
  border-radius:10px;
  background:rgba(57,199,199,.14);
  color:var(--accent);
  border:1px solid rgba(57,199,199,.26);
}
.audio-hint{
  margin:0;
  font-size:14px;
  line-height:1.5;
  color:var(--muted);
}

#waveform{
  width:100%;
  border-radius:12px;
  background:linear-gradient(180deg,#0b1324 0%,#0d162b 100%);
  border:1px solid #0f2037;
}

.audio-controls audio{
  width:100%;
}

.case-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 18px 16px;
  box-shadow:var(--shadow);
}
.case-meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  color:var(--muted);
  letter-spacing:.4px;
  font-size:13px;
}
.case-tag{
  padding:4px 8px;
  background:rgba(57,199,199,.14);
  color:var(--accent);
  border:1px solid rgba(57,199,199,.3);
  border-radius:8px;
  font-weight:700;
}
.case-code{opacity:.8;}
.case-title{
  margin:4px 0 6px;
  font-size:22px;
  letter-spacing:.6px;
}
.case-desc{
  margin:0 0 12px;
  color:var(--muted);
}

.transcript-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:left;
}

.transcript-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}
.transcript-line{
  padding:10px 12px;
  border:1px solid rgba(57,199,199,.16);
  border-radius:12px;
  background:rgba(15,23,40,.6);
  color:var(--muted);
  transition:border-color .2s ease, background .2s ease, color .2s ease;
}
.transcript-line.active{
  border-color:rgba(37,255,170,.4);
  color:var(--text);
  background:rgba(37,255,170,.08);
}

@keyframes fade-up{
  from{opacity:0; transform:translateY(16px);}
  to{opacity:1; transform:translateY(0);}
}

/* ═══════════════════════════════════════════════
   ANSWERED STATE — MISSION BOARD
   ═══════════════════════════════════════════════ */
.call-screen.answered .briefing{
  width:100%;
  min-height:100svh;
  background:#000;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
  position:relative;
  overflow:hidden;
}

.ir-page{
  --ir-page-pad-x:36px;
  --bottom-align-gap:40px;
  display:flex;
  flex-direction:column;
  min-height:100svh;
  padding:42px var(--ir-page-pad-x) 20px;
  box-sizing:border-box;
  color:#fff;
  font-family:"PixelOperator","Pixelify Sans","pixelmix",monospace;
  position:relative;
  overflow:hidden;
  text-align:left;
}

.ir-top{
  margin:-20px 0 18px;
  margin-left:calc(-1 * var(--ir-page-pad-x) + 20px);
  width:max-content;
  align-self:flex-start;
  text-align:left;
}

.ir-title{
  margin:0;
  color:#fff;
  font:700 clamp(34px,2.4vw,46px)/1 "PixelOperatorBold","PixelOperator","Pixelify Sans","pixelmix",monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-align:left;
}

.ir-body{
  display:grid;
  grid-template-columns:minmax(280px,32%) minmax(420px,46%) minmax(220px,22%);
  gap:0;
  flex:1;
  min-height:0;
  overflow:hidden;
}

.ir-main-top-decor{
  grid-column:2 / 4;
  grid-row:1;
  align-self:start;
  width:100%;
  height:20px;
  background:url("../assets/images/zhuangshi1.png") no-repeat left top/100% 100%;
  pointer-events:none;
  z-index:2;
}

.ir-main-callbar{
  grid-column:2 / 4;
  grid-row:1;
  align-self:start;
  margin-top:38px;
  width:100%;
  min-height:34px;
  border:1px solid #f2f2f2;
  background:#000;
  display:flex;
  align-items:center;
  padding:0 18px 0 70px;
  position:relative;
  z-index:2;
}

.ir-main-callbar::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:56px;
  height:100%;
  background:#f2f2f2;
}

.ir-main-callbar-text{
  color:#fff;
  font-size:clamp(14px,1.05vw,18px);
  letter-spacing:.03em;
}

/* ── Left column ── */
.ir-col-left{
  grid-column:1;
  grid-row:1;
  display:flex;
  flex-direction:column;
  padding-right:26px;
  text-align:left;
  position:relative;
}

.ir-col-left::after{
  display:none;
}

.ir-col-left::before{
  display:none;
}

.ir-section-label{
  display:none;
}

.ir-zone-section{
  margin-bottom:24px;
}

.ir-zone-header{
  display:flex;
  align-items:center;
  width:100%;
  min-height:32px;
  padding:0 14px 0 52px;
  border:none;
  clip-path:none;
  background:url("../assets/images/kuang.png") no-repeat center/100% 100%;
  color:#f4f4f4;
  font-size:clamp(13px,1.05vw,17px);
  letter-spacing:.05em;
  text-transform:uppercase;
}

.ir-zone-meta-row{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin:8px 2px 10px;
  font-size:clamp(12px,0.95vw,15px);
}

.ir-zone-new-label{
  color:#ef2d2d;
}

.ir-zone-new-count{
  color:#fff;
}

.ir-zone-section:first-child .ir-case-list{
  position:relative;
  border:none;
  padding:6px 0 18px 56px;
  min-height:0;
  gap:10px;
}

.ir-zone-section:first-child .ir-case-list::before{
  content:"";
  position:absolute;
  left:34px;
  top:-32px;
  bottom:8px;
  width:2px;
  background:#f1f1f1;
}

.ir-zone-section:first-child .ir-case-list::after{
  content:"";
  position:absolute;
  left:34px;
  bottom:8px;
  width:62px;
  height:2px;
  background:#f1f1f1;
}

.ir-zone-section:first-child .ir-zone-meta-row{
  margin:10px 4px 8px 56px;
}

.ir-zone-section:first-child .ir-case-item{
  padding:4px 10px;
}

.ir-zone-section:first-child .ir-case-active{
  margin-left:-6px;
  margin-right:2px;
}

.ir-case-list{
  list-style:none;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:0;
  user-select:none;
}

.ir-case-item{
  display:flex;
  align-items:center;
  gap:8px;
  padding:4px 8px;
  border:none;
  font-size:clamp(14px,1.05vw,18px);
  color:#fff;
  background:transparent;
  cursor:default;
  justify-content:flex-start;
  transform:none;
  transition:background .12s ease, color .12s ease;
}

.ir-case-item:hover{
  background:rgba(255,255,255,.18);
  color:#fff;
}

.ir-case-item:active{
  transform:none;
}

.ir-case-active{
  background:#f2f2f2;
  color:#000;
}

.ir-case-active:hover{
  background:#f2f2f2;
  color:#000;
}

.ir-case-check{
  line-height:1;
}

.ir-case-arrow{
  line-height:1;
  font-size:.82em;
}

.ir-case-name{
  flex:1;
}

.ir-zone-count-row{
  margin:8px 2px 0;
  text-align:right;
  color:#fff;
  font-size:clamp(12px,0.95vw,15px);
}

.ir-case-locked,
.ir-case-dot{
  display:none;
}

.ir-left-dashes{
  position:absolute;
  left:0;
  bottom:var(--bottom-align-gap);
  margin:0;
  color:#d7d7d7;
  font-size:clamp(13px,1vw,16px);
  letter-spacing:.12em;
  user-select:none;
}

/* ── Middle column ── */
.ir-col-mid{
  grid-column:2;
  grid-row:1;
  position:relative;
  padding:0 24px 0 0;
  margin-top:10px;
  min-height:0;
}

.ir-paper{
  position:relative;
  display:flex;
  flex-direction:column;
  height:100%;
  min-height:0;
  border-top:none;
  padding-top:64px;
  color:#fff;
  background:transparent;
}

.ir-paper-header{
  display:none;
}

.ir-paper-top-area{
  display:none;
}

.ir-paper-tab-nub{
  display:none;
}

.ir-paper-header-bar{
  position:relative;
  width:100%;
  min-height:34px;
  border:2px solid #f2f2f2;
  display:flex;
  align-items:center;
  padding:0 18px 0 70px;
  background:#000;
}

.ir-paper-header-bar::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:56px;
  height:100%;
  background:#f2f2f2;
}

.ir-paper-call-name{
  color:#fff;
  font-size:clamp(14px,1.05vw,18px);
  letter-spacing:.03em;
}

.ir-paper-new-badge{
  display:none;
}

.ir-paper-body{
  position:relative;
  flex:0 0 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  background:#f2f2f2;
  margin-top:12px;
  padding:12px 34px 20px 0;
}

.ir-paper-body{
  scrollbar-width:none;
}

.ir-paper-body::-webkit-scrollbar{
  width:0;
  height:0;
}

.ir-paper-body::before{
  display:none;
}

.ir-paper-body::after{
  display:none;
}

.ir-paper-footer{
  display:none;
}

/* External scrollbar between middle and right columns */
.ir-paper-scrollbar{
  position:absolute;
  right:10px;
  top:110px;
  width:12px;
  height:220px;
  pointer-events:auto;
  z-index:4;
}

.ir-paper-scrollbar-track{
  position:relative;
  width:100%;
  height:100%;
  border:1px solid #efefef;
  background:#000;
  padding:2px;
  cursor:pointer;
}

.ir-paper-scrollbar-thumb{
  position:absolute;
  left:2px;
  top:2px;
  width:calc(100% - 4px);
  height:56px;
  background:#e3e3e3;
  cursor:pointer;
}

/* Transcript lines */
.ir-transcript-list{
  list-style:none;
  margin:0;
  padding:30px 20px 0 0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.ir-transcript-line{
  position:relative;
  width:100%;
  max-width:100%;
  text-align:left;
  padding:0 0 0 26px;
  color:#111;
  font-size:clamp(13px,0.95vw,16px);
  line-height:1.15;
}

.lang-zh .ir-transcript-line,
.lang-zh .ir-speaker-label,
.lang-zh .ir-transcript-text{
  font-family:"Zpix","Pixelify Sans","PixelOperator",monospace;
  line-height:1.35;
}

.ir-line-left,
.ir-line-right{
  text-align:left;
}

.ir-line-gap-md{
  margin-top:10px;
}

.ir-line-gap-lg{
  margin-top:16px;
}

.ir-dot-left::before,
.ir-dot-right::before{
  display:none;
}

.ir-transcript-line.is-dot-visible.ir-dot-left::before,
.ir-transcript-line.is-dot-visible.ir-dot-right::before{
  display:none;
}

.ir-speaker-label{
  display:none;
  color:#111;
  font-size:clamp(13px,0.95vw,16px);
  line-height:1.05;
  margin:0 0 20px;
}

.ir-transcript-line.is-speaker-visible .ir-speaker-label{
  display:block;
}

.ir-transcript-text{
  display:block;
  padding-left:54px;
  color:#111;
}

.ir-transcript-line.is-typing .ir-transcript-text::after{
  content:"|";
  display:inline-block;
  margin-left:2px;
  color:#111;
  animation:irCaretBlink .8s steps(1, end) infinite;
}

@keyframes irCaretBlink{
  0%,49%{opacity:1;}
  50%,100%{opacity:0;}
}

/* ── Right column ── */
.ir-col-right{
  grid-column:3;
  grid-row:1;
  position:relative;
  padding-left:28px;
  padding-top:calc(var(--paper-top-offset, 0px) + 82px);
  display:flex;
  flex-direction:column;
  gap:20px;
  align-items:flex-start;
}

.ir-rec-dot{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#f01b2c;
  animation:rec-blink 1s ease-in-out infinite;
}

@keyframes rec-blink{
  0%,100%{opacity:1;}
  50%{opacity:0;}
}

.call-screen.answered #waveform{
  width:min(100%,280px);
  height:60px;
  background:transparent;
  border:none;
  border-radius:0;
  display:block;
}

.ir-meta-block{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-items:flex-start;
  text-align:left;
}

.ir-meta-label{
  color:#ef2231;
  font:700 clamp(18px,1.4vw,24px)/1 "PixelOperatorBold","PixelOperator","Pixelify Sans","pixelmix",monospace;
  letter-spacing:.04em;
}

.ir-meta-value{
  color:#fff;
  font-size:clamp(13px,1vw,16px);
  line-height:1.2;
}

.ir-start-wrap{
  position:absolute;
  right:0;
  bottom:calc(var(--bottom-align-gap) + 10px);
  margin:0;
}

.ir-start-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:136px;
  min-height:66px;
  padding:12px 34px;
  border:2px solid #ececec;
  background:#000;
  color:#fff;
  font:700 clamp(16px,1.25vw,22px)/1 "PixelOperatorBold","PixelOperator","Pixelify Sans","pixelmix",monospace;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}

.ir-start-btn:hover{
  background:#fff;
  color:#000;
}

@media (max-width:1200px){
  .ir-page{
    --ir-page-pad-x:18px;
    padding:30px var(--ir-page-pad-x) 20px;
  }

  .ir-body{
    grid-template-columns:minmax(250px,34%) minmax(370px,42%) minmax(190px,24%);
  }

  .ir-col-left::before{
    height:320px;
  }

  .ir-start-wrap{
    right:6px;
    bottom:calc(var(--bottom-align-gap) + 10px);
  }
}

@media (max-width:980px){
  .ir-page{
    overflow:auto;
  }

  .ir-body{
    grid-template-columns:1fr;
    gap:20px;
  }

  .ir-main-top-decor{
    display:none;
  }

  .ir-main-callbar{
    display:none;
  }

  .ir-col-left::after,
  .ir-col-left::before{
    display:none;
  }

  .ir-col-mid{
    grid-column:1;
    grid-row:auto;
    padding:0;
    margin-top:0;
  }

  .ir-paper-scrollbar{
    display:none;
  }

  .ir-col-right{
    grid-column:1;
    grid-row:auto;
    padding:0;
  }

  .ir-col-left{
    grid-column:1;
    grid-row:auto;
  }

  .ir-start-wrap{
    position:static;
    margin-top:20px;
  }
}

/* Answered page typography override:
   use Google Sans Code everywhere except the "MISSION BOARD" title */
.call-screen.answered .ir-page,
.call-screen.answered .ir-page *{
  font-family:"GoogleSansCodeVar","Google Sans Code","PixelOperator","Pixelify Sans","pixelmix",monospace;
}

.call-screen.answered .ir-page .ir-title{
  font-family:"PixelOperatorBold","PixelOperator","Pixelify Sans","pixelmix",monospace;
}