/****************************************************************************/
/* STILE DELLA CHAT E DEI PANNELLI */

/* HELP: Da qui è possibile modificare:
- I font ed i colori della chat
- Le dimensioni e la posizione della chat
- Lo sfondo della chat*/

iframe.iframe_chat {
    font-family: 'Courier New', monospace !important;
    border: none;
    width: 1px;
    height: 1px;
    margin: 0px;
    background: rgba(0, 10, 15, 0.9);
}

div.chat_window {
    text-align: center;
}

/**	* Fix per layout elastico
	* @author Blancks
*/
div.chat_box {
    position: absolute;
    top: 75px;
    bottom: 130px;
    left: 10px;
    right: 10px;
    overflow: auto;
    font-size: 18px;
    text-align: left;
    font-family: 'Courier New', monospace;
}

div.chat_box a, div.chat_box a:visited {
font-weight: bolder;
    font-size: 20px;
    color: #00ffff;
}

div.chat_box a:over {
    font-weight: bolder;
    font-size: 20px;
    color: #00ffff;
    text-decoration: underline;
}

div.pagina_frame_chat div.page_body div.panels_box {
    flex-direction: column !important; /* Mantiene i due form uno sopra l'altro */
    align-items: center !important;    /* Centra i form orizzontalmente */
    justify-content: center !important;
    position: absolute;
    bottom: 9px;
    left: 5px;
    right: 5px;
    text-align: center;
}

span.prova  {
    color: #FF00A6;
}

span.prova2  {
    color: #FF00A6;
    font-weight:lighter;
}
/**	* Fine fix */
/** * Avatar di chat
	* @author Blancks
*/
img.chat_avatar {
    margin: 8px;
    display: block;
    float: left;
    position: relative;
    border-radius: 50%;
    border: 3px outset #00d9ff;
    animation: avatar-glow 3s infinite ease-in-out !important;
    transition: all 0.3s ease;
    object-fit: cover;
}

/***** testo della chat *****/
/* Tipi messaggio: (A azione, P parlato/OFF, N PNG, M Master, G MasterPVT, I Immagine, S sussurro, D dado, C skill check, O uso oggetto) */
div.chat_row_A {
    margin-top: 3px;
    color: #b4b4b4;
    /*text-shadow: 0 0 2px rgba(0, 255, 255, 0.4);*/
    z-index: 1;
    padding-left: 10px;
    padding-right: 5px;
}

div.chat_row_A span.color2 {
    margin-top: 3px;
    color: #ff0080;
    text-shadow: 0 0 2px rgba(255, 0, 255, 0.4);
    font-weight: bolder;
    z-index: 1;
}

div.chat_row_P {
    margin-top: 3px;
    color: #00d9ff;
}

div.chat_row_P span.color2 {
    margin-top: 3px;
    color: #00d9ff;
    font-weight: bolder;
}

div.chat_row_M {
    background: linear-gradient(90deg, rgba(10,0,255,0.1) 0%, transparent 100%) !important;
    border-left: 5px solid #ffaa00 !important;
    color: #ffaa00 !important;
    padding-left: 60px;
    padding-right: 60px;
    margin-left: 5px;
    text-align: justify;
}

div.chat_row_M span.color2 {
    margin-top: 3px;
    color: #9aa3ae;
    font-weight: bolder;
}

div.chat_row_G {
    background: linear-gradient(90deg, rgba(10,0,255,0.1) 0%, transparent 100%) !important;
    border-left: 5px solid #ffaa00 !important;
    color: #ffaa00 !important;
    padding-left: 15px;
    margin-left: 5px;
}

div.chat_row_G span.color2 {
    margin-top: 3px;
    color: #9aa3ae;
    font-weight: bolder;
}

div.chat_row_N {
    margin-top: 3px;
}

div.chat_row_N span.color2 {
    color: #b4b4b4;
    font-weight: bolder;
}

div.chat_row_I {
    margin-top: 3px;
    text-align: center;
}

div.chat_row_S {
    margin-top: 3px;
    color: #9AA3AE;
    padding-left: 5px;
    padding-right: 5px;
}

div.chat_row_D {
    margin-top: 3px;
    border-width: 2px;
    border-color: #00ffff;
    border-style: solid;
    color: cyan;
}

div.chat_row_C {
    margin-top: 3px;
    border-width: 2px;
    border-color: #00ffff;
    border-style: solid;
    color: cyan;
}

span.chat_time {
    font-size: 13px;
    color: #9AA3AE;
    margin-right: 3px;
}

span.chat_name {
    font-weight: bolder;
    font-size: 18px;
    color: #00ffff;
}

span.chat_msg {
    color: #b4b4b4;
    font-size: 18px;
}

span.chat_master {
}

span.chat_me, span.chat_me_master {
    text-decoration: underline;
}

/* Il contenitore di tutto il footer */
.form_row {
    display: flex !important;
    flex-direction: column !important; /* Mantiene i due form uno sopra l'altro */
    align-items: center !important;    /* Centra i form orizzontalmente */
    justify-content: center !important;
    background: rgba(0, 20, 30, 0.9) !important;
    border: 2px solid #0ff !important;
    padding: 2px !important;
    margin-top: 2px !important;
    clip-path: polygon(2% 0, 100% 0, 100% 70%, 98% 100%, 0 100%, 0 30%);
    display: block !important;
    height: auto !important; /* Fondamentale perché contenga tutto */
}

/* Ogni riga di form (Parlato e Azioni) */
.form_row form {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    gap: 8px !important;
    /*border-bottom: 1px dashed rgba(0, 255, 255, 0.2);*/
}

.form_row form:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.casella_chat {
    display: flex !important;
    flex-direction: column !important; /* Mette l'etichetta sopra il campo */
    float: none !important;
    margin: 0 !important;
    font-size: 14px;
}

/* L'etichetta descrittiva (es. "Canale", "Tag", "Dadi") */
.casella_info {
    color: #ff00ff !important; /* Magenta Cyber */
    font-size: 9px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px;
    margin-bottom: 2px;
    font-family: 'Courier New', sans-serif;
    display: block !important;
}

/* Stile universale per campi e bottoni */
.casella_chat input, .casella_chat select, .casella_chat textarea {
    background: #000 !important;
    border: 1px solid #0ff !important;
    color: #fff !important;
    padding: 4px 8px !important;
    font-family: 'Courier New', monospace;
    font-size: 13px !important;
    outline: none;
}

/* La Textarea ora ha una dimensione dignitosa ma contenuta */
textarea[name="message"] {
    width: 300px !important;
    height: 40px !important;
    resize: vertical;
}

/* Il campo TAG */
/* Campi Input e Select */
#type, #tag, #tag_2, #message, #action_text, .btn-cyber {
    background: #001a1a !important;
    border: 1px solid #0ff !important;
    color: #0ff !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    height: 30px !important;
    clip-path: polygon(5% 0, 100% 0, 100% 70%, 95% 100%, 0 100%, 0 30%);
    outline: none !important;
    margin-right: 15px;
}

#message { width: 150px !important; }
#tag, #tag_2 { width: 80px !important; }
#invia { width: 70px !important; font-weight: bold !important; cursor: pointer; background: rgba(0, 255, 255, 0.1) !important; }
#invia:hover { background: #0ff !important; color: #000 !important; }
/****************************************************************************/
/* La Textarea ora è una riga sola finché non ci scrivi dentro */
#action_text {
    width: 150px !important;
    height: 30px !important;
    resize: none !important;
    padding: 5px !important;
    overflow: hidden;
}

#action_text:focus {
    width: 300px !important; /* Si allarga quando la usi */
    height: 60px !important;
    position: absolute;
    bottom: 50px;
    z-index: 99;
}

.btn-cyber {
    cursor: pointer;
    font-weight: bold;
    padding: 0 10px !important;
}

.btn-cyber:hover {
    background: #0ff !important;
    color: #000 !important;
}
/* Il contenitore principale della chat */
.chat_box, .chat-container {
    position: relative;
    background-color: #050505; /* Sfondo nero profondo */
    overflow: hidden;
}

/* Creiamo la griglia come "strato" di sfondo */
.chat_box::before {
    content: " ";
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    /* Effetto scanline orizzontale molto sottile */
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 255, 255, 0.03) 50%), 
                linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
    background-size: 100% 3px, 3px 100%;
    z-index: 1; /* Livello basso: sta dietro al testo */
    pointer-events: none;
}
/* Fix per i dadi e selettori oggetti */
#id_oggetto, #dice, #stats {
    width: auto !important;
    min-width: 60px;
}

/* Il tasto INVIO */
input[type="submit"] {
    background: rgba(0, 255, 255, 0.1) !important;
    color: #0ff !important;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    height: 35px;
    align-self: flex-end; /* Lo allinea al fondo del modulo */
    margin-left: 5px;
}

input[type="submit"]:hover {
    background: #0ff !important;
    color: #000 !important;
    box-shadow: 0 0 10px #0ff;
}
/*Notepad*/
.notepad {
    background: rgba(0, 255, 255, 0.1) !important;
    color: #0ff !important;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    padding-top: 7px;
    height: 26px;
    align-self: flex-end; /* Lo allinea al fondo del modulo */
    margin-left: 5px;
    margin-bottom: 15px;
    width: 70px !important;
    border: 1px solid #00ffff;
    cursor: pointer;
}

.notepad:hover {
    background: #0ff !important;
    color: #000 !important;
    box-shadow: 0 0 10px #0ff;
}