#chatbox {
max-width: 100%;
border: 1px solid #ccc;
border-radius: 10px;
padding: 12px;
font-family: sans-serif;
position: relative;
background: #fff;
}
#chatlog {
min-height: 520px;
max-height: 520px;
height: 520px;
overflow-y: auto;
background: #f9f9f9;
padding: 8px;
border-radius: 6px;
margin-bottom: 8px;
transition: height 0.25s cubic-bezier(.6, .2, .4, 1);
}
#chatlog div {
margin: 4px 0;
max-width: 90%;
padding: 6px 10px;
border-radius: 8px;
line-height: 1.4em;
clear: both;
word-break: break-word;
white-space: pre-wrap;
}
#chatlog .user {
background: #cde3ff;
float: right;
text-align: right;
}
#chatlog .bot {
background: #eee;
float: left;
text-align: left;
}
.orc-pre-wrapper {
position: relative;
margin-top: 6px
}
.orc-copy-btn {
position: absolute;
top: 6px;
right: 6px;
padding: 3px 6px;
font-size: 11px;
border-radius: 4px;
border: none;
background: #0069d9;
color: #fff;
opacity: 0.8;
cursor: pointer
}
.orc-copy-btn:hover {
opacity: 1
}
#chatlog p {
margin: 4px 0;
line-height: 1.4;
}
#chatlog pre {
background: #222;
color: #eee;
padding: 10px;
border-radius: 6px;
margin-top: 6px;
overflow: auto;
}
#chatlog pre code {
color: #eee
}
#userinput {
width: 100%;
padding: 6px;
border: 1px solid #ccc;
border-radius: 6px;
margin-bottom: 6px;
box-sizing: border-box;
font-family: inherit;
}
#sendbtn, #hackermode-btn {
padding: 8px 12px;
border: none;
border-radius: 6px;
background: #007cba;
color: #fff;
cursor: pointer;
}
#sendbtn:hover, #hackermode-btn:hover {
background: #005b8a;
}
#resetbtn.orc-btn-reset {
padding: 8px 12px;
border: none;
border-radius: 6px;
background: #dc3545;
color: #fff;
cursor: pointer;
margin-bottom: 10px;
transition: background 0.15s;
}
#resetbtn.orc-btn-reset:hover {
background: #a71d2a;
}
@keyframes orc-blink {
0%, 50%, 100% {
opacity: 1
}
25%, 75% {
opacity: 0
}
}
#chatlog em.blinking {
animation: orc-blink 2s infinite;
} #chatbox.hacker-mode,
body.hacker-mode #chatbox {
background: #000 !important;
border: 1.5px solid #37ff37 !important;
box-shadow: 0 0 35px #33ff33bb;
color: #33ff33 !important;
font-family: 'Fira Mono', 'Consolas', monospace !important;
}
#chatbox.hacker-mode #chatlog,
body.hacker-mode #chatbox #chatlog {
background: #000 !important; color: #37ff37 !important;
min-height: 75vh !important;
max-height: 80vh !important;
font-size: 1em !important;
}
#chatbox.hacker-mode #chatlog .bot,
body.hacker-mode #chatbox #chatlog .bot {
background: transparent !important;
color: #33ff33 !important;
border-left: 2.7px solid #15ff15;
font-size: 1em;
}
#chatbox.hacker-mode #chatlog .user,
body.hacker-mode #chatbox #chatlog .user {
background: none !important;
color: #39ff39 !important;
border: none !important;
float: right;
text-align: right;
font-size: 1em;
}
#chatbox.hacker-mode #chatlog .bot b,
#chatbox.hacker-mode #chatlog .bot strong,
body.hacker-mode #chatbox #chatlog .bot b,
body.hacker-mode #chatbox #chatlog .bot strong {
color: #2fff2f !important;
font-weight: bold !important;
}
#chatbox.hacker-mode .orc-copy-btn,
body.hacker-mode #chatbox .orc-copy-btn {
background: #222;
color: #37ff37;
border: 1px solid #37ff37;
}
#chatbox.hacker-mode #chatlog pre,
body.hacker-mode #chatbox #chatlog pre {
background: #003300;
color: #33ff33;
}
#chatbox.hacker-mode,
body.hacker-mode #chatbox {
box-shadow: 0 0 80px #00ff60aa !important;
}
#chatbox.hacker-mode #userinput-wrap,
body.hacker-mode #chatbox #userinput-wrap {
position: relative;
width: 100%;
}
#chatbox.hacker-mode #matyi-hackerprompt,
body.hacker-mode #chatbox #matyi-hackerprompt {
display: inline-block;
font-family: inherit;
font-size: 1.02rem;
color: #2fff2f;
background: transparent;
margin: 0;
margin-right: 2px;
user-select: none;
letter-spacing: .04em;
} #chatbox.hacker-mode #userinput,
body.hacker-mode #chatbox #userinput {
background: #000 !important;
color: #33ff33 !important;
font-family: inherit;
caret-color: #39ff39;
font-weight: 600;
font-size: 1.09rem;
border: 1.5px solid #21e621 !important;
outline: none;
padding-left: 20px;
padding-right: 20px;
position: relative;
z-index: 1;
} #chatbox.hacker-mode #userinput-blink {
display: inline-block;
width: 1ch;
height: 1.2em;
background: #33ff33;
vertical-align: middle;
margin-left: -2px;
border-radius: 2px;
animation: blink-block 1s steps(1, start) infinite;
z-index: 2;
position: absolute;
}
@keyframes blink-block {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
#chatbox.hacker-mode #userinput::placeholder {
color: #1bff1b;
opacity: 0.4;
}
#chatbox.hacker-mode #userinput:focus {
outline: 2px solid #1bff1b;
} #exit-hacker-btn {
background: #300;
color: #fff;
border: 1px solid #3f3;
margin: 9px 0 0 0;
border-radius: 5px;
padding: 7px 14px;
font-weight: 700;
box-shadow: 0 0 10px #0f0d, 0 0 2px #900;
font-family: inherit;
cursor: pointer;
display: none;
}
#exit-hacker-btn:hover {
background: #f33;
color: #fff;
border-color: #fff;
}
.fullscreen-btn {
background: #222;
color: #26ffae;
border: 1.5px solid #26ffae;
border-radius: 6px;
padding: 7px 18px;
margin: 8px 0 0 8px;
font-size: 1em;
font-family: inherit;
cursor: pointer;
box-shadow: 0 0 8px #26ffae44;
transition: background 0.2s, color 0.2s;
display: none;
}
.fullscreen-btn:hover {
background: #26ffae;
color: #111;
}
#chatbox.hacker-mode.fullscreen,
body.hacker-mode #chatbox.fullscreen {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 99999 !important;
border-radius: 0 !important;
max-width: none !important;
max-height: none !important;
box-shadow: 0 0 180px #33ff33cc !important;
display: flex !important;
flex-direction: column !important;
padding: 12px 2vw 16px 2vw !important;
}
#chatbox.hacker-mode.fullscreen #chatlog,
body.hacker-mode #chatbox.fullscreen #chatlog {
min-height: 75vh !important;
max-height: 80vh !important;
font-size: 1.11em !important;
} #matyi-boot-overlay {
position: absolute;
left: 1;
top: 2;
width: calc(100% - 25px);
height: 358px;
border-radius: 10px;
top: 8px;
min-height: 420px;
background: #000;
color: #33ff33;
font-family: monospace;
font-size: 1.1rem;
z-index: 10000;
padding: 2.5rem 1.5rem 2.5rem 1.5rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
transition: opacity 0.7s cubic-bezier(.7, .2, .3, 1);
opacity: 1;
pointer-events: none;
}
#matyi-boot-overlay.hide {
opacity: 0;
transition: opacity 1.2s cubic-bezier(.7, .2, .4, 1);
}
#matyi-boot-terminal .line {
opacity: 0;
animation: showLine 1.3s forwards;
}
#matyi-boot-terminal .line:nth-child(1) { animation-delay: 0.2s; }
#matyi-boot-terminal .line:nth-child(2) { animation-delay: 0.4s; }
#matyi-boot-terminal .line:nth-child(3) { animation-delay: 1.0s; }
#matyi-boot-terminal .line:nth-child(4) { animation-delay: 1.8s; }
#matyi-boot-terminal .line:nth-child(5) { animation-delay: 2.3s; }
#matyi-boot-terminal .line:nth-child(6) { animation-delay: 2.8s; }
#matyi-boot-terminal .line:nth-child(7) { animation-delay: 3.1s; }
#matyi-boot-terminal .line:nth-child(8) { animation-delay: 3.7s; }
#matyi-boot-terminal .line:nth-child(9) { animation-delay: 4.2s; }
#matyi-boot-terminal .line:nth-child(10) { animation-delay: 4.5s; }
#matyi-boot-terminal .line:nth-child(11) { animation-delay: 5.0s; }
#matyi-boot-terminal .line:nth-child(12) { animation-delay: 7.0s; }
#matyi-boot-terminal .line:nth-child(13) { animation-delay: 7.0s; }
#matyi-boot-terminal .line:nth-child(14) { animation-delay: 7.0s; }
@keyframes showLine {
to { opacity: 1; }
} .matyi-btnrow {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 12px;
margin-top: 8px;
flex-wrap: wrap;
}
#resetbtn.orc-btn-reset,
#hackermode-btn {
height: 26px;
font-size: 12px;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1.2;
}
#resetbtn {order:4;}
#sendbtn {order:3;}
#hackermode-btn {order:2;} #matyi-modelstatus.model-flash.flash-on {
background: #ffffa6 !important;
transition: background 0.18s;
}
#matyi-modelstatus.model-flash { transition: background 0.18s; } .matyi-system-msg {
color: #006699;
font-style: italic;
font-weight: bold;
background: #e6f2ff;
border-radius: 8px;
padding: 4px 12px;
display: inline-block;
margin-bottom: 4px;
margin-top: 2px;
border-left: 4px solid #3399cc;
}