/* ==========================================================================
   Laiza -- the AI program that runs inside the big center box.
   Loaded only by laiza.html (which lives in the site's main_iframe), on top of
   Styles7.css + Styles4.css so the window chrome matches the other folders.
   Nothing here leaks to the rest of the site.
   ========================================================================== */

/* the generic body rule in Styles4.css already gives margin:0 / overflow:hidden,
   so the window table alone decides the size -- same as platformfolder2.html,
   which is what makes Laiza land in exactly the same box as the desktop. */
body#laizaBody {
    cursor: url(../../cursor/01.cur), default;
}

/* ---- window chrome tweaks (title bar gets a name + a status lamp) -------- */

table.window td#titlebar .laiza-titletext {
    font-family: 'W95FA';
    font-size: 12px;
    color: #fff;
    text-shadow: 1px 1px 0 #4b3a86;
    padding-left: 6px;
    line-height: 25px;
    float: left;
}

table.window td#titlebar .laiza-titletext img {
    width: 12px;
    vertical-align: -1px;
}

.laiza-online {
    float: left;
    margin: 5px 0 0 8px;
    padding: 0 6px;
    font-family: 'ModernDOS';
    font-size: 10px;
    line-height: 15px;
    color: #0b5c2e;
    background: #b6ffce;
    border: 1px solid #fff;
    box-shadow: inset -1px -1px #4b8f66;
}

.laiza-online.is-off { color: #6b2f2f; background: #ffc9c9; box-shadow: inset -1px -1px #a35b5b; }
.laiza-online .dot { animation: laiza-blink 1.4s steps(1) infinite; }

@keyframes laiza-blink { 50% { opacity: 0; } }

/* ---- screen ------------------------------------------------------------- */

td.windowbody#laizaScreen {
    height: 420px;
    padding: 0;
    background: #cfe6ff url(../../backgrounds/desktop.gif) center/cover;
}

#laiza-shell {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
}

.laiza-screen { display: none; width: 100%; height: 420px; }
.laiza-screen.is-active { display: block; }

/* ---- STATE: LAIZA_LOADING ----------------------------------------------- */

#scr-loading {
    background: #a8e2ff url(laiza-loading.png) center/cover no-repeat;
    text-align: center;
    position: relative;
}

#scr-loading::after {           /* CRT scanlines, no modern spinner in sight */
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom, rgba(255,255,255,.10) 0 1px, rgba(90,40,120,.06) 1px 3px);
    pointer-events: none;
}

.laiza-loadbox {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    width: 380px;
    padding: 8px 10px 10px;
    background: rgba(255,255,255,.82);
    border: 2px solid #fff;
    box-shadow: inset -2px -2px #b98fd6, inset 2px 2px #fff, 2px 2px 0 rgba(90,40,120,.35);
    z-index: 2;
}

.laiza-loadtitle {
    font-family: '2Credits';
    font-size: 17px;
    color: #d43ea0;
    text-shadow: 1px 1px 0 #fff;
    letter-spacing: 1px;
}

.laiza-loadline {
    font-family: 'ModernDOS';
    font-size: 11px;
    color: #4b3a86;
    height: 14px;
    margin-top: 3px;
    text-align: left;
    padding-left: 4px;
}

.laiza-loadline .cursor { animation: laiza-blink 0.8s steps(1) infinite; }

/* chunky Win95 progress bar: 20 blocks that light up one at a time */
.laiza-bar {
    margin-top: 6px;
    height: 16px;
    padding: 2px;
    background: #e6d9ff;
    box-shadow: inset -1px -1px #fff, inset 1px 1px #7a63a8;
    display: flex;
    gap: 2px;
}

.laiza-bar i {
    flex: 1;
    background: #cbb8ee;
    box-shadow: inset -1px -1px #a98fd6;
}

.laiza-bar i.on {
    background: linear-gradient(#ff9ada, #ff5cbe);
    box-shadow: inset -1px -1px #c0338d, inset 1px 1px #ffd4ee;
}

/* ---- STATE: LAIZA_CHAT -------------------------------------------------- */

#scr-chat {
    background: linear-gradient(160deg, #cfefff 0%, #ded2ff 48%, #ffd6f2 100%);
    display: flex;
    padding: 8px;
    gap: 8px;
    box-sizing: border-box;
    font-family: 'W95FA';
}

/* the character, stage left */

.laiza-char {
    width: 186px;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255,255,255,.55);
    border: 2px solid #fff;
    box-shadow: inset -2px -2px #b98fd6, 2px 2px 0 rgba(90,40,120,.25);
    padding: 6px 4px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.laiza-char::before {           /* starfield behind her */
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2px 2px at 18% 22%, #fff 50%, transparent 51%),
        radial-gradient(2px 2px at 78% 14%, #ffe878 50%, transparent 51%),
        radial-gradient(2px 2px at 30% 68%, #ff8ad8 50%, transparent 51%),
        radial-gradient(2px 2px at 86% 62%, #fff 50%, transparent 51%),
        radial-gradient(2px 2px at 60% 88%, #ffe878 50%, transparent 51%);
    opacity: .9;
    animation: laiza-twinkle 2.2s steps(2) infinite;
}

@keyframes laiza-twinkle { 50% { opacity: .25; } }

#laiza-portrait {
    width: 168px;
    height: 168px;
    object-fit: contain;
    image-rendering: pixelated;
    position: relative;
    z-index: 1;
    animation: laiza-bob 3.2s ease-in-out infinite;
}

@keyframes laiza-bob   { 50% { transform: translateY(-4px); } }
@keyframes laiza-sway  { 33% { transform: rotate(-2deg); } 66% { transform: rotate(2deg); } }
@keyframes laiza-chat  { 50% { transform: translateY(-7px) scale(1.02); } }
@keyframes laiza-pop   { 40% { transform: translateY(-10px) scale(1.05); } }

#laiza-portrait.state-thinking { animation: laiza-sway 1.6s ease-in-out infinite; }
#laiza-portrait.state-talking  { animation: laiza-chat 0.5s ease-in-out infinite; }
#laiza-portrait.state-happy    { animation: laiza-pop 0.9s ease-in-out 2; }

.laiza-nameplate {
    position: relative;
    z-index: 1;
    margin-top: 4px;
    font-family: '2Credits';
    font-size: 15px;
    color: #d43ea0;
    text-shadow: 1px 1px 0 #fff;
}

.laiza-mood {
    position: relative;
    z-index: 1;
    font-family: 'ModernDOS';
    font-size: 10px;
    color: #5b4a9c;
    height: 12px;
}

.laiza-voicerow {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 4px;
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Win95 pastel buttons */

.laiza-btn {
    font-family: 'W95FA';
    font-size: 11px;
    color: #3d2f6b;
    background: linear-gradient(#fff, #e9dcff);
    border: none;
    box-shadow: inset -2px -2px #9a7fd0, inset 2px 2px #fff, 1px 1px 0 rgba(90,40,120,.35);
    padding: 4px 8px;
    cursor: url(../../cursor/cur905.gif), pointer;
}

.laiza-btn:active,
.laiza-btn[aria-pressed="true"] {
    box-shadow: inset 2px 2px #9a7fd0, inset -2px -2px #fff;
    background: linear-gradient(#e9dcff, #fff);
}

.laiza-btn:disabled { color: #9a92b5; text-shadow: 1px 1px 0 #fff; }

.laiza-btn.send {
    background: linear-gradient(#ffd6f2, #ff9ada);
    box-shadow: inset -2px -2px #c0338d, inset 2px 2px #fff, 1px 1px 0 rgba(90,40,120,.35);
    color: #6b1247;
    font-weight: bold;
}

/* the conversation, stage right */

.laiza-chatcol {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#laiza-log {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px;
    background: #fffdf2;
    box-shadow: inset -2px -2px #fff, inset 2px 2px #9a7fd0;
    font-size: 12px;
    line-height: 1.45;
    color: #2f2a44;
    scrollbar-width: thin;
    scrollbar-color: #ff9ada #e9dcff;
}

.laiza-msg { margin: 0 0 6px; word-wrap: break-word; overflow-wrap: anywhere; }
.laiza-msg .who { font-weight: bold; }
.laiza-msg.from-laiza .who { color: #d43ea0; }
.laiza-msg.from-user  .who { color: #3f7fd4; }
.laiza-msg.from-sys   { color: #7a6a9c; font-style: italic; font-size: 11px; }
.laiza-msg.is-error   { color: #a33; }

.laiza-msg .bubble {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 9px;
    background: #ffeaf8;
    box-shadow: 1px 1px 0 #e3b9d8;
}

.laiza-msg.from-user .bubble { background: #e3f1ff; box-shadow: 1px 1px 0 #b6d3ef; }

#laiza-typing {
    height: 14px;
    font-family: 'ModernDOS';
    font-size: 11px;
    color: #d43ea0;
    visibility: hidden;
    padding-left: 2px;
}

#laiza-typing.is-on { visibility: visible; }

.laiza-inputrow { display: flex; gap: 4px; }

#laiza-input {
    flex: 1;
    min-width: 0;
    font-family: 'W95FA';
    font-size: 12px;
    color: #2f2a44;
    padding: 5px 6px;
    border: none;
    background: #fffdf2;
    box-shadow: inset -2px -2px #fff, inset 2px 2px #9a7fd0;
    outline: none;
}

#laiza-input::placeholder { color: #a99fc4; }
#laiza-input:disabled { background: #efeafa; }

.laiza-hint {
    font-family: 'ModernDOS';
    font-size: 10px;
    color: #6b5ba8;
    text-align: right;
}

.laiza-hint a { color: #d43ea0; }

/* the site is viewed at initial-scale 0.5 on small screens; keep the program
   readable rather than reflowing it into a different design */
@media (max-width: 620px) {
    .laiza-char { width: 150px; }
    #laiza-portrait { width: 138px; height: 138px; }
}