/*
  windows.css
  The fake-OS "window" component used everywhere on the site:
  the confession dialog, the form, AND every single message on
  the board (each confession renders as its own little error dialog).
*/

.win{
  background: var(--win-face);
  border: 1px solid #000;
  box-shadow:
    inset 1px 1px 0 var(--win-border-light),
    inset -1px -1px 0 var(--win-border-dark),
    0 10px 40px rgba(0,0,0,0.7);
  border-radius: var(--radius);
}

.title-bar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 26px;
  padding: 0 6px;
  background: linear-gradient(90deg, var(--title-grad-a), var(--title-grad-b));
  border-bottom: 1px solid #000;
}
.title-text{
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--title-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.title-btns{
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.t-btn{
  width: 18px;
  height: 16px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1;
  background: #1c1c2a;
  color: var(--text-main);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 var(--win-border-light);
  padding: 0;
}
.t-btn:active{
  box-shadow: inset -1px -1px 0 var(--win-border-light);
}
.t-close:hover{
  background: var(--accent-blood);
  color: #fff;
}

.win-body{
  padding: 18px 16px;
  font-family: var(--font-mono);
  font-size: 19px;
  color: var(--text-main);
}
.win-body.center{
  text-align: center;
}

.icon-row{
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.icon-row svg{
  width: 40px;
  height: 40px;
}

.dialog-q{
  font-size: 22px;
  margin: 4px 0 18px;
  color: var(--text-bright);
}

.btn-row{
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 6px;
}

.btn-98{
  min-width: 84px;
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.5px;
  background: #1c1c2a;
  color: var(--text-bright);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 var(--win-border-light), inset -1px -1px 0 #000;
}
.btn-98:hover{
  background: #25253a;
}
.btn-98:active{
  box-shadow: inset -1px -1px 0 var(--win-border-light), inset 1px 1px 0 #000;
}
.btn-98:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-98.accent-hate{ color: var(--accent-hate-glow); }
.btn-98.accent-calm{ color: var(--accent-calm-glow); }

.link-btn{
  background: none;
  border: none;
  color: var(--accent-calm);
  font-family: var(--font-mono);
  font-size: 16px;
  padding: 0;
}
.link-btn:hover{ text-decoration: underline; }

/* ---------- the confession dialog "screen" wrapper ---------- */
#confession-overlay{
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
}
#confession-overlay[hidden]{ display: none; }

.dialog{
  position: relative;
  z-index: 2;
  width: min(380px, 92vw);
}
.dialog.wide{
  width: min(640px, 94vw);
}
.dialog.maximized{
  width: min(640px, 94vw);
}
.dialog[hidden]{ display: none; }

textarea#reason-text{
  width: 100%;
  min-height: 110px;
  resize: vertical;
  background: #08080d;
  color: var(--text-bright);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 var(--win-border-light);
  padding: 8px;
  font-size: 17px;
}

.visibility-row{
  display: flex;
  gap: 18px;
  margin: 10px 0 14px;
  font-size: 16px;
}
.visibility-row label{ display: flex; align-items: center; gap: 6px; cursor: pointer; }

#form-status{
  min-height: 1.2em;
  font-size: 15px;
  color: var(--accent-ok);
}
#form-status.error{ color: var(--accent-hate); }

/* ---------- confession board ---------- */
.board-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 4px;
}
.board-empty{
  font-size: 16px;
  color: var(--text-dim);
  text-align: center;
  grid-column: 1 / -1;
  padding: 20px 0;
}

.confession-card{
  background: var(--win-face-soft);
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 var(--win-border-light), inset -1px -1px 0 #000;
}
.confession-card .title-bar{
  height: 22px;
}
.confession-card .title-text{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.confession-card .title-text svg{
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.confession-card .card-body{
  padding: 10px 10px 8px;
  font-size: 16px;
  line-height: 1.35;
  word-break: break-word;
}
.confession-card .card-time{
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
}
.confession-card.choice-hate .title-bar{
  background: linear-gradient(90deg, #2a0a18, #4a0f2c);
}
.confession-card.choice-love .title-bar{
  background: linear-gradient(90deg, #0a1f2a, #0f3a4a);
}