:root {
    --bg-color: #c9c9b5;
}

* {
    image-rendering     : pixelated;
    background-repeat   : no-repeat !important;
    margin              : 0;
    padding             : 0;
    border              : none;
    box-sizing          : border-box;
    border-radius       : 0px;
    line-height         : 16px;
}

html {
    height: 100%;
}

body, div {
    border: 3px inset #c9c9b580;
}

/* Amiga Workbench Logo */
svg {
    /**/
    /* display             : none; */
    /**/
    position            : absolute;
    top                 : 0px;
    left                : 0px;
    border              : none;
    width               : 100%;
    height              : 100%;
    background          : #fff;
    z-index             : 1000;
    animation           : fadeout 0.5s ease forwards;
    animation-delay     : 1s; 
}


body {
    background: var(--bg-color);
    padding: 20px;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    background-image: linear-gradient(322deg, #fff0, #b2cfb4), linear-gradient(314deg, #fff0, #747983), linear-gradient(135deg, #fff0, #a9aab5);
}

.container {
    width: 100%;
    height: 100%;
}

.top-section {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}
.bottom-section {
    flex-direction  : column;
    display         :inline-block;
    width           : 100%;
    height          : calc(100% - 282px);
}

.box {
    height: 400px;
}

/* ---------------------------------------
              Avatar Styles 
---------------------------------------*/ 
.left[aria-status=static],
.left {
    background      : #061c0d;
    background-image: url('gfx/static.png');
    width           : 256px;
    height          : 256px;
    position        : relative;
}
.left[aria-status=thinking]{
    background-image: url('gfx/thinking.gif');
}
#face[aria-status=idle],
#face{
    background-image    : url('gfx/IDLE.png');
    width               : 100%;
    height              : 100%;
    position            : absolute;
    top                 : 0px;
    left                : 0px;
    display             : inline-block;
    background-size     : contain;
    image-rendering     : pixelated;
}
#face[aria-status=sleeping] {
    background-image: url('gfx/SLEEP.png');
}
/* ---------------------------------------
                Eyes Overlay
---------------------------------------*/ 
#face + span {
    background-image: none;
    position        : absolute;
    width           : 100%;
    height          : 100%;
    display         : inline-block;
    background-size : contain;
    image-rendering : pixelated;
}
#face[aria-status=thinking] {
    background-image: url('gfx/THINKING.png');
}
#face[aria-blink=true] + span{
    background-image: url('gfx/BLINK.png') !important;
}
#face[aria-face=SMILE] + span{
    background-image: url('gfx/SMILE.png') !important;
}
#face[aria-face=SMOKING]{
    background-image: url('gfx/SMOKING.png') !important;
}
/* Humo */
#face[aria-face=SMOKING][aria-blink=false] + span,
#face[aria-face=SMOKING][aria-blink=true] + span {
    background-image: url('gfx/smoking.gif') !important;
}
/* Cambiar parpadeo por zzz.... si está durmiendo */
#face[aria-status=sleeping][aria-blink=false] + span,
#face[aria-status=sleeping][aria-blink=true] + span {
    background-image: url('gfx/ZZZ.png') !important;
}
/* Cara de Tristeza */
#face[aria-face=CRY] {
    background-image: url('gfx/CRY.png') !important;
}
/* Cara de Amor */
#face[aria-face=LOVE] {
    background-image: url('gfx/LOVE.png') !important;
}
/* Corazones animados */
#face[aria-face=LOVE] + span{
    background-image: url('gfx/love.gif') !important;
}
/* ---------------------------------------
PHONEM OVERRIDES 
---------------------------------------*/ 
#face[aria-phonem=a] + span { background-image: url('gfx/A.png') !important; }
#face[aria-phonem=b] + span { background-image: url('gfx/BV.png') !important; }
#face[aria-phonem=c] + span { background-image: url('gfx/C.png') !important; }
#face[aria-phonem=d] + span { background-image: url('gfx/D.png') !important; }
#face[aria-phonem=e] + span { background-image: url('gfx/E.png') !important; }
#face[aria-phonem=f] + span { background-image: url('gfx/F.png') !important; }
#face[aria-phonem=g] + span { background-image: url('gfx/GJ.png') !important; }
#face[aria-phonem=h] + span { background-image: url('gfx/E.png') !important; }
#face[aria-phonem=i] + span { background-image: url('gfx/IY.png') !important; }
#face[aria-phonem=j] + span { background-image: url('gfx/GJ.png') !important; }
#face[aria-phonem=k] + span { background-image: url('gfx/KQ.png') !important; }
#face[aria-phonem=l] + span { background-image: url('gfx/LR.png') !important; }
#face[aria-phonem=m] + span { background-image: url('gfx/M.png') !important; }
#face[aria-phonem=ñ] + span { background-image: url('gfx/N.png') !important; }
#face[aria-phonem=n] + span { background-image: url('gfx/N.png') !important; }
#face[aria-phonem=o] + span { background-image: url('gfx/O.png') !important; }
#face[aria-phonem=p] + span { background-image: url('gfx/P.png') !important; }
#face[aria-phonem=q] + span { background-image: url('gfx/KQ.png') !important; }
#face[aria-phonem=r] + span { background-image: url('gfx/LR.png') !important; }
#face[aria-phonem=s] + span { background-image: url('gfx/STX.png') !important; }
#face[aria-phonem=t] + span { background-image: url('gfx/STX.png') !important; }
#face[aria-phonem=u] + span { background-image: url('gfx/UW.png') !important; }
#face[aria-phonem=v] + span { background-image: url('gfx/BV.png') !important; }
#face[aria-phonem=w] + span { background-image: url('gfx/UW.png') !important; }
#face[aria-phonem=x] + span { background-image: url('gfx/STX.png') !important; }
#face[aria-phonem=y] + span { background-image: url('gfx/IY.png') !important; }
#face[aria-phonem=z] + span { background-image: url('gfx/Z.png') !important; }

#face[aria-phonem=' '] + span { background-image: none !important; }

/* ---------------------------------------
              Debug Box 
---------------------------------------*/ 
.right {
    background          : #212031;
    width               : calc(100% - 320px);
    height              : 256px;
    overflow-x          : hidden;
    overflow-y          : hidden;
    perspective         : 1000px;
    right               : 28px;
    position            : absolute;
}
.disk {
    position            : sticky;   
    top                 : calc(50% - 124px);
    left                : calc(50% - 109px);
    display             : block;
    animation           : rotation 7s ease forwards infinite;
    background-image    : url('gfx/logo.png');
    background-size     : 218px 246px;
    width               : 218px;
    height              : 246px;
    z-index             : -1;
}
/* ---------------------------------------
              Chat Log 
---------------------------------------*/ 
.content {
    width       : 100%;
    height      : calc(100% - 32px);
    background  : #07020f;
    margin-bottom: 0;
    border      : none;
    overflow-x  : hidden;
    overflow-y  : auto;
}
/* ---------------------------------------
              Input Box 
---------------------------------------*/ 
.footer:hover,
.footer:active,
.footer::placeholder,
.footer {
    width: 100%;
    height: 32px;
    border: none;
    outline: none;
    background: #052009;
    color: #27b548;
}
.footer:hover,
.footer:focus{
    background: #0b4915;
}
/* ---------------------------------------
              Debugging 
---------------------------------------*/ 
#model {
    color           : #98c75c;
    top             : 236px;
    right           : 3px;
    position        : absolute;
}
#emotion{
    color           : #4d4c43;
    top             : 291px;
    left            : 30px;
    font-size       : 32px;
    position        : absolute;
    text-shadow     : 2px 2px 0px #dbdbd6 !important;
}
#state {
    color           : #4d4c43;
    top             : 291px;
    left            : 300px;
    font-size       : 32px;
    position        : absolute;
    text-shadow     : 2px 2px 0px #dbdbd6 !important;
}
#info {
    white-space     : pre;
    color           : #b7f467;
    top             : 288px;
    top             : 32px;
    right           : 32px;
    max-width       : 25%; 
    height          : 250px;
    font-size       : 12px;
    position        : absolute;
    overflow-x      : hidden;
    /* overflow-y      : hidden; */
    background      : #0008;
    /* padding         : 8px; */
    border-radius   : 2px ;
    line-height     : 10px;
    font-weight     : 800;
    text-shadow     : 0px 0px 3px #000 !important;
}

/* ---------------------------------------
              Typography 
---------------------------------------*/ 
#info , #state , #emotion , #model {
    text-shadow     : -1px -1px 0px #000;
    font-family     : 'tiny';
}
.left * { 
    font-size       : 16px;
    font-weight     : 400;
    color           : #0f0;
    font-family     : 'tiny';
}
.right * { 
    font-size       : 32px;
    font-weight     : 400;
    font-family     : 'tiny';
}
.footer {
    font-size       : 32px;
    font-family     : 'm4geek_caps';
    text-transform  : uppercase;
}
.content * {
    font-size       : 32px;
    font-weight     : 400;
    font-family     : 'ff6';
}

/* ---------------------------------------
              Message Styles 
---------------------------------------*/ 
.temporary {
    background-image: url('gfx/progress.gif');
    background-position: 0% 50%;
    background-size: 16px 16px;
    image-rendering: pixelated;
    padding-left: 32px;
    margin-left: 16px;
}
.right .message {
    color: #ffffff;
    text-shadow: 1px -2px 0px #000;
}
.message {
    z-index: 1;
    border: none;
    color:#2735b5;
    line-height: 18px;
    overflow: visible;
}
.message.user::before {
    content: '> ';
    color:#27a0b5;
}
.message.user {
    color:#10e4e4;
}
.message.error {
    color:#e4107a;
}
.message.bot {
    background-color: #061c0d;
    color:#27b548;
}


/* ---------------------------------------
              Animation 
---------------------------------------*/ 
@keyframes fadeout {
  0% {
    opacity: 1;
    display: block;
  }
  99% {
    opacity: 0;
    display: block; /* Keeps layout space occupied until the fade ends */
  }
  100% {
    opacity: 0;
    display: none;  /* Completely removes the element from the layout */
  }
}

@keyframes rotation {
    0% {
        transform: rotateY(0deg);
    }
    25% {
        transform: rotateY(90deg);
    }
    25.01% {
        transform: rotateY(270deg);
    }
    50% {
        transform: rotateY(360deg);
    }
    100% {
        transform: rotateY(360deg);
    }
}

audio {
    display:inline-block;
    background-color: #ff0000;
    margin-top: 3px;
    z-index: 0;
    height: 16px;
    min-height: 16px;
    max-height: 16px;
    line-height: 16px;
    border-radius: none;
    width: 100%;
    filter: invert(1) sepia(100%) contrast(97%) saturate(150%) hue-rotate(414deg) saturate(3.5) brightness(70%);
    background: #000;
    color: #0ff;
}