@font-face{
  font-family: "MyUI";
  src: url("assets/ui-font-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --chrome-0:#8f8f8f;
  --chrome-1:#a8a8a8;
  --chrome-2:#c7c7c7;

  --edge-light:#ffffff;
  --edge-dark:#3b3b3b;

  --paper:#f1f1f1;
  --paper-2:#e7e7e7;
  --ink:#101010;

  --tab-idle:#a9a9a9;
  --tab-active:#777777;

  --shadow:rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;

  /* background always */
  background:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
    url("assets/bgimage.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;

  font-family:"MyUI","MS UI Gothic","Tahoma","Verdana",system-ui,sans-serif;
  font-size:12px;
  line-height:1.25;

  overflow:hidden;
}

button,input,textarea,select{
  font-family:inherit;
  font-size:inherit;
}

/* optional overlay vibe */
.fx{ position:fixed; inset:0; pointer-events:none; }
.scanlines{
  position:absolute; inset:0;
  opacity:.28;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03),
    rgba(255,255,255,0.03) 1px,
    rgba(0,0,0,0) 4px,
    rgba(0,0,0,0) 7px
  );
}
.vignette{
  position:absolute; inset:0;
  background: radial-gradient(circle at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}

/* main window */
.window{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  width:min(920px, calc(100vw - 40px));
  height:min(560px, calc(100vh - 40px));

  background: var(--chrome-1);
  border:3px solid var(--edge-dark);
  box-shadow: 0 0 0 2px var(--edge-light) inset, 0 18px 44px var(--shadow);
  overflow:hidden;
}

/* top bar gradient */
.titlebar{
  height:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 8px;

  background: linear-gradient(90deg, #0f0f0f 0%, #6f6f6f 55%, #d2d2d2 100%);
  color:#f2f2f2;

  border-bottom:3px solid var(--edge-dark);
  box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset;
}

.url{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  letter-spacing:.2px;
}

.sysbtns{ display:flex; gap:6px; }
.sysbtn{
  width:22px; height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#d8d8d8;
  color:#111;
  border:2px solid #2f2f2f;
  box-shadow: 0 0 0 1px #fff inset;
}

/* body layout */
.body{
  display:flex;
  height: calc(100% - 34px);
}

.content{
  flex:1;
  padding:10px;
  background: var(--chrome-2);
  border-right:3px solid var(--edge-dark);
}

/* side page buttons */
.side{
  width:70px;
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:10px 8px;
  background: var(--chrome-1);
}

.sidebtn{
  height:70px;
  border:3px solid var(--edge-dark);
  box-shadow: 0 0 0 2px var(--edge-light) inset;
  background: var(--tab-idle);
  cursor:pointer;
  letter-spacing:1px;
}
.sidebtn.is-active{ background: var(--tab-active); }

/* pages */
.page{ display:none; height:100%; }
.page.is-active{ display:block; }

/* ===== Page 1 grid ===== */
.grid{
  height:100%;
  display:grid;
  grid-template-columns: 220px 1fr 135px; /* right thin */
  gap:12px;
}

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

/* boxes = “text squares” */
.box{
  background: var(--paper);
  border:3px solid var(--edge-dark);
  box-shadow: 0 0 0 2px var(--edge-light) inset;
  overflow:hidden;
  color: var(--ink);
}
.box-title{
  padding:6px 8px;
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-bottom:2px solid rgba(0,0,0,.25);
  letter-spacing:.4px;
  text-transform: uppercase;
}
.box-body{ padding:10px; }

.p{ margin:0; }
.muted{ color:#666; }
.mono{ font-family: "MyUI","MS UI Gothic","Tahoma",monospace; }
.tiny{ font-size:11px; }

/* grey chrome pill */
.chrome-pill{
  display:inline-block;
  padding:4px 10px;
  background: var(--chrome-0);
  border:3px solid var(--edge-dark);
  box-shadow: 0 0 0 2px var(--edge-light) inset;
  color:#111;
}

/* pfp fully visible */
.pfp-wrap{
  height:160px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#111;
}
.pfp{
  width:100%;
  height:100%;
  object-fit: contain; /* no cropping */
}

/* info rows */
.info .k{ display:inline-block; width:80px; color:#333; }
.info .v{ color:#111; }

/* thumbs squares fully visible */
.thumb-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.thumbbox{
  aspect-ratio:1/1;
  border:3px solid var(--edge-dark);
  box-shadow: 0 0 0 2px var(--edge-light) inset;
  overflow:hidden;
  background:#111;
  display:flex;
  align-items:center;
  justify-content:center;
}
.thumb{
  width:100%;
  height:100%;
  object-fit: contain; /* no cropping */
}

/* tall panel (fully visible) */
.tall{ height:100%; display:flex; flex-direction:column; }
.tall-body{ flex:1; padding:0; background:#111; }
.tallimg{
  width:100%;
  height:100%;
  object-fit: contain; /* no cropping */
}

/* ===== Page 2 layout ===== */
.links-grid{
  height:100%;
  display:grid;
  grid-template-columns: 1fr 220px;
  gap:12px;
}
.fill{ height:100%; }

.links-title{
  font-size: 14px;
  margin-bottom: 8px;
}
.dash{
  height:1px;
  background: rgba(0,0,0,.25);
  margin-bottom: 14px;
}

/* watermark image under links text */
.watermark{
  position: relative;
  overflow: hidden;
}
.watermark::before{
  content:"";
  position:absolute;
  inset: 18px;
  background: url("assets/6.png") center / contain no-repeat;
  opacity: 0.13;
  filter: grayscale(1) contrast(1.1);
  pointer-events:none;
  z-index: 0;
}
.watermark > .box-body{
  position: relative;
  z-index: 1;
}

.links-plain{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-right: 6px;
  max-height: 100%;
  overflow:auto;
}
.linkline{
  display:flex;
  gap:12px;
  align-items:baseline;
}
.linkline a{
  color:#111;
  text-decoration:none;
}
.linkline a:hover{ text-decoration:underline; }
.linkname{
  width:120px;
  color:#111;
}
.linktag{
  color:#666;
}

/* ===== Page 3 custom chat UI ===== */
.chat-ui{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

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

.chat-status{
  display:flex;
  align-items:center;
  gap:10px;
}

.pill-grey{
  display:inline-block;
  padding:4px 10px;
  background: var(--chrome-0);
  border:3px solid var(--edge-dark);
  box-shadow: 0 0 0 2px var(--edge-light) inset;
  color:#111;
  text-transform: uppercase;
  letter-spacing:.4px;
}

.chat-nick{
  display:flex;
  align-items:center;
  gap:8px;
}

.field{
  padding:8px 10px;
  border:3px solid var(--edge-dark);
  box-shadow: 0 0 0 2px var(--edge-light) inset;
  background:#fff;
  color:#111;
  min-width: 200px;
}

.notice{
  padding:8px 10px;
  border:3px dashed rgba(0,0,0,.35);
  background: rgba(255,255,255,.6);
  color:#111;
}

.chat-messages{
  flex:1;
  overflow:auto;
  background:#fff;
  border:3px solid var(--edge-dark);
  box-shadow: 0 0 0 2px var(--edge-light) inset;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.msg{
  display:flex;
  gap:10px;
  align-items:flex-start;
  border-bottom:1px solid rgba(0,0,0,.12);
  padding-bottom:6px;
}
.msg:last-child{ border-bottom:0; padding-bottom:0; }

.msg .time{
  width:70px;
  color:#666;
  font-size:11px;
  flex:0 0 auto;
}
.msg .nick{
  width:120px;
  color:#111;
  text-transform: lowercase;
  flex:0 0 auto;
}
.msg .text{
  color:#111;
  white-space:pre-wrap;
  word-break:break-word;
  flex:1;
}

.chat-input{
  display:flex;
  gap:8px;
}

.btn{
  padding:6px 10px;
  border:3px solid var(--edge-dark);
  box-shadow: 0 0 0 2px var(--edge-light) inset;
  background:#8f8f8f;
  cursor:pointer;
  text-transform: uppercase;
  letter-spacing:.4px;
}
.btn.dark{ background:#777; }
.btn:active{ transform: translateY(1px); }

/* mobile fallback */
@media (max-width: 900px){
  body{ overflow:auto; }
  .window{
    position:relative;
    left:auto; top:auto;
    transform:none;
    margin:16px auto;
    width: calc(100% - 20px);
    height: 980px;
  }
  .body{ flex-direction:column; height:auto; }
  .side{
    width:auto;
    flex-direction:row;
    justify-content:center;
  }
  .grid{ grid-template-columns: 1fr; }
  .links-grid{ grid-template-columns: 1fr; }
  .chat-input{ flex-direction:column; }
  .field{ min-width: 0; width:100%; }
}