/* Basic styles for the site and the virtual window */
:root{
    --bg: #f796d6;
    --card: #0b1220;
    --accent: #ff7ab6;
    --text: #000000;
}
*{
    box-sizing:border-box
}

html,body{
    height:100%;
    margin:0;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial
}

body{
    background:linear-gradient(180deg,var(--bg),#ffffff);
    color:var(--text)
    ;display:flex;
    align-items:center;
    justify-content:center
}

.virtual-window{
  width:320px;
  max-width:90vw;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.06));
  border:1px solid rgba(255,255,255,0.04);
  padding:18px;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(2,6,23,0.6);
  backdrop-filter:blur(6px);
}

.virtual-window .title{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:8px
}

.dot{
    width:10px;
    height:10px;
    border-radius:50%
}
.dot.red{background:#ff605c}
.dot.yellow{background:#ffbd44}
.dot.green{background:#00ca56}

.image {
    display: block;
    width: 100%;           /* fill the container */
    aspect-ratio: 16 / 9;  /* reserve space and keep proportions */
    max-height: 260px;     /* avoid excessive height on large screens */
    object-fit: contain;   /* scale without cropping */
    margin-bottom: 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.01);
}

.message{
    min-height:84px;
    padding:12px;
    border-radius:8px;
    background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.03));
    border:1px solid rgba(255,255,255,0.02);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    text-align:center
}

.controls{display:flex;gap:8px;justify-content:center;margin-top:12px}
.btn{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent),#ff9ac9);color:#071022;border:none}
/*.small{font-size:12px;opacity:0.8;margin-top:8px;text-align:center}*/

@media (prefers-reduced-motion: no-preference){
  .message.fade {transition: opacity 360ms ease, transform 360ms ease}
}