/* Tulcea.home.ro - mIRC32 inspired web client */
:root{
  color-scheme:light;
  --face:#f0f0f0;
  --face2:#e8e8e8;
  --line:#d1d1d1;
  --shadow:#9d9d9d;
  --dark:#5b5b5b;
  --white:#fff;
  --text:#000;
  --select:#cce8ff;
  --select-border:#99d1ff;
  --blue:#0a246a;
  --title1:#0a246a;
  --title2:#2a86d1;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#fff;color:var(--text);font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:14px}
button,input{font:inherit}
button{color:#000}
.mirc-app{width:100vw;height:100vh;display:grid;grid-template-rows:30px 30px 39px minmax(0,1fr) 25px;background:var(--face);overflow:hidden}
.mirc-titlebar{display:flex;align-items:center;justify-content:space-between;padding:0 4px 0 8px;background:linear-gradient(90deg,#effbfb,#f5f5f5);border-bottom:1px solid #dedede;user-select:none}
.title-left{display:flex;align-items:center;gap:7px;min-width:0}
.app-icon{width:18px;height:18px;display:grid;place-items:center;background:#ff8a00;color:#111;border:1px solid #888;font-size:12px;font-weight:700}
#windowTitle{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.title-buttons{display:flex;height:100%}
.title-buttons button{width:42px;height:100%;border:0;background:transparent;font-size:15px;line-height:1}
.title-buttons button:hover{background:#ddd}
.title-buttons button:last-child:hover{background:#e81123;color:#fff}

.menubar{display:flex;align-items:center;gap:1px;padding:0 5px;background:#fafafa;border-bottom:1px solid #e0e0e0;user-select:none}
.menubar>button{height:26px;padding:0 9px;border:1px solid transparent;background:transparent}
.menubar>button:hover,.menubar>button.active{background:#e5f3ff;border-color:#cce8ff}

.toolbar{display:flex;align-items:center;padding:3px 7px;background:#f4f4f4;border-bottom:1px solid #ddd;box-shadow:inset 0 1px #fff;user-select:none;overflow:hidden}
.tool{width:28px;height:28px;margin-right:3px;border:1px solid transparent;background:transparent;display:grid;place-items:center;padding:2px}
.tool:hover{background:#e5f3ff;border-color:#cce8ff}
.tool:active{background:#cce8ff;border-color:#99c9ef}
.sep{height:25px;width:1px;background:#d4d4d4;margin:0 6px 0 3px;box-shadow:1px 0 #fff}
.ico{position:relative;width:18px;height:18px;display:block}
.ico:before,.ico:after{content:"";position:absolute}
.ico.plug:before{left:3px;top:5px;width:9px;height:8px;border:1px solid #777;background:#f6f6f6}
.ico.plug:after{right:1px;top:1px;width:7px;height:7px;border-radius:50%;background:#51c451;border:1px solid #2b8c2b}
.ico.unplug:before{left:3px;top:5px;width:9px;height:8px;border:1px solid #777;background:#f6f6f6}
.ico.unplug:after{right:1px;top:1px;width:7px;height:7px;border-radius:50%;background:#ef5b5b;border:1px solid #ad2f2f}
.ico.folder:before{left:1px;top:5px;width:16px;height:10px;background:#f1c94b;border:1px solid #9a7a12}
.ico.folder:after{left:3px;top:2px;width:7px;height:5px;background:#f8dc72;border:1px solid #9a7a12}
.ico.person:before{left:6px;top:1px;width:7px;height:7px;border-radius:50%;background:#f2c3a2;border:1px solid #77523f}
.ico.person:after{left:3px;top:9px;width:13px;height:8px;border-radius:7px 7px 2px 2px;background:#4b94d8;border:1px solid #285c89}
.ico.whois:before{left:0;top:2px;width:12px;height:12px;border-radius:50%;border:2px solid #888;background:#fff}
.ico.whois:after{right:0;bottom:0;width:7px;height:2px;background:#555;transform:rotate(45deg);transform-origin:right center}
.ico.clear:before{left:2px;top:2px;width:14px;height:14px;border:1px solid #999;background:linear-gradient(#fff,#eee)}
.ico.clear:after{left:5px;top:8px;width:8px;height:2px;background:#d34;transform:rotate(-35deg)}
.ico.users:before{left:1px;top:3px;width:7px;height:7px;border-radius:50%;background:#62a6de;border:1px solid #306a98;box-shadow:8px 2px 0 -1px #70b873}
.ico.users:after{left:0;bottom:1px;width:17px;height:7px;border:1px solid #777;background:linear-gradient(90deg,#7bb9e8 0 50%,#8ac78c 50%)}
.ico.tree:before{left:2px;top:2px;width:5px;height:5px;background:#79a95a;border:1px solid #476c32;box-shadow:9px 0 0 -1px #f0c14b,9px 9px 0 -1px #5b9bd5}
.ico.tree:after{left:6px;top:4px;width:7px;height:10px;border-left:1px solid #777;border-bottom:1px solid #777}
.ico.prev:before{left:2px;top:4px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:8px solid #3aa73a}
.ico.prev:after{left:9px;top:4px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:8px solid #78cf78}
.ico.next:before{right:2px;top:4px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #3aa73a}
.ico.next:after{right:9px;top:4px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #78cf78}
.ico.info:before{left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#4f98df;border:1px solid #27669f}
.ico.info:after{content:"i";left:7px;top:0;color:#fff;font:bold 14px Georgia,serif}

.workspace{min-height:0;display:grid;grid-template-columns:136px minmax(320px,1fr) 250px 112px;background:#fff;border-top:1px solid #ddd;overflow:hidden}
.tree-pane,.nick-pane,.switch-pane{min-width:0;min-height:0;background:#fff}
.tree-pane{border-right:1px solid #e2e2e2}
.nick-pane{border-left:1px solid #e1e1e1;border-right:1px solid #e1e1e1}
.switch-pane{background:#f7f7f7}
.tree,.nick-list,.switch-list{height:100%;overflow:auto;padding:8px 5px}
.tree{padding-left:7px}
.tree-row,.switch-row,.nick-row{display:flex;align-items:center;min-height:25px;padding:2px 4px;white-space:nowrap;cursor:default;user-select:none}
.tree-row:hover,.switch-row:hover,.nick-row:hover{background:#eef6fc}
.tree-row.active,.switch-row.active{background:#d9ecfb;border:1px solid #afd7f6;padding:1px 3px}
.tree-row.indent1{padding-left:22px}
.tree-row.indent2{padding-left:42px}
.tree .server:before{content:"🌐";font-size:12px;margin-right:5px}
.tree .folder-row:before{content:"📁";font-size:12px;margin-right:5px}
.tree .channel:before,.switch-row.channel:before{content:"▣";font-size:10px;color:#5a85b4;margin-right:5px}
.tree .query:before,.switch-row.query:before{content:"●";font-size:8px;color:#d068a5;margin-right:6px}
.switch-row.server:before{content:"🌐";font-size:11px;margin-right:5px}
.nick-row{font-size:17px;line-height:1.1;min-height:34px;padding-left:7px}
.nick-row .prefix{display:inline-block;min-width:18px;font-weight:700}
.nick-row.owner,.nick-row.admin,.nick-row.op{font-weight:600}

.chat-pane{min-width:0;min-height:0;display:grid;grid-template-rows:0 minmax(0,1fr) 34px;background:#fff}
.channel-strip{display:none}
.messages{min-width:0;min-height:0;overflow:auto;padding:46px 12px 12px 0;background:#fff;font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:18px;line-height:1.45;scrollbar-gutter:stable}
.line{display:flex;align-items:flex-start;min-width:0}
.ts{flex:0 0 auto;color:#6a6a6a;width:74px;text-align:right;padding-right:8px;font-size:13px;line-height:25px;user-select:none}
.msg{min-width:0;overflow-wrap:anywhere;white-space:pre-wrap}
.line.info .msg{color:#008000}
.line.join .msg,.line.part .msg,.line.nick .msg{color:#008000}
.line.topic .msg{color:#008000}
.line.notice .msg{color:#7f5500}
.line.error .msg{color:#c00000}
.line.action .msg{color:#000080}
.line.server .msg{color:#000}
.line.highlight .msg{background:#fff4b8}
.input-row{display:flex;align-items:center;border-top:1px solid #d7d7d7;background:#fff}
#input{width:100%;height:31px;border:0;padding:4px 7px;font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:18px;outline:none;background:#fff;color:#000}

.statusbar{display:grid;grid-template-columns:minmax(0,1fr) 190px 85px;align-items:center;border-top:1px solid #d2d2d2;background:#f6f6f6;font-size:12px;min-width:0}
.statusbar>div{height:21px;padding:3px 7px;border-right:1px solid #dedede;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#clockText{text-align:center;border-right:0}

.popup-menu{position:fixed;z-index:10000;min-width:190px;padding:3px;background:#f5f5f5;border:1px solid #b9b9b9;box-shadow:3px 3px 8px rgba(0,0,0,.18)}
.popup-menu button{display:flex;width:100%;height:27px;align-items:center;text-align:left;padding:0 24px 0 28px;border:1px solid transparent;background:transparent;white-space:nowrap}
.popup-menu button:hover{background:#e5f3ff;border-color:#cce8ff}
.popup-menu .menu-sep{height:1px;background:#d2d2d2;margin:3px 5px}
.popup-menu button.checked:before{content:"✓";position:absolute;margin-left:-18px}

.modal-backdrop{position:fixed;inset:0;z-index:20000;background:rgba(0,0,0,.15);display:grid;place-items:center}
.hidden{display:none!important}
.classic-dialog{width:min(430px,calc(100vw - 30px));background:#f0f0f0;border:1px solid #666;box-shadow:6px 6px 18px rgba(0,0,0,.25)}
.dialog-titlebar{height:30px;display:flex;align-items:center;justify-content:space-between;padding-left:9px;background:linear-gradient(90deg,var(--title1),var(--title2));color:#fff;font-weight:600}
.dialog-titlebar button{width:33px;height:28px;border:0;background:transparent;color:#fff;font-size:18px}
.dialog-titlebar button:hover{background:#e81123}
.dialog-body{padding:20px 22px;background:#fff;line-height:1.55;min-height:140px}
.dialog-body h2{font-size:18px;margin:0 0 12px}
.dialog-body p{margin:8px 0}
.dialog-buttons{display:flex;justify-content:flex-end;padding:10px;background:#f0f0f0}
.dialog-buttons button{min-width:86px;height:30px;background:#f6f6f6;border:1px solid #888}
.dialog-buttons button:hover{background:#e5f3ff;border-color:#7eb4e6}

.context-menu{position:fixed;z-index:30000;min-width:165px;padding:3px;background:#f5f5f5;border:1px solid #aaa;box-shadow:3px 3px 8px rgba(0,0,0,.22)}
.context-menu button{display:block;width:100%;height:26px;text-align:left;padding:0 10px;border:1px solid transparent;background:transparent}
.context-menu button:hover{background:#e5f3ff;border-color:#cce8ff}

a.chat-link{color:#0000ee;text-decoration:underline}

@media(max-width:1000px){
  .workspace{grid-template-columns:120px minmax(260px,1fr) 190px 0}
  .switch-pane{display:none}
  .messages{font-size:16px}
  #input{font-size:16px}
}
@media(max-width:760px){
  .mirc-app{grid-template-rows:29px 30px 39px minmax(0,1fr) 24px}
  .workspace{grid-template-columns:minmax(0,1fr)}
  .tree-pane,.switch-pane{display:none}
  .nick-pane{display:none;position:fixed;z-index:9000;top:98px;right:0;bottom:24px;width:min(72vw,280px);border-left:1px solid #888;box-shadow:-4px 0 10px rgba(0,0,0,.2)}
  .nick-pane.mobile-open{display:block}
  .messages{padding-top:14px;font-size:15px}
  #input{font-size:16px}
  .title-buttons{display:none}
  .menubar{overflow:auto}
  .menubar>button{padding:0 6px}
  .statusbar{grid-template-columns:minmax(0,1fr) 86px}
  #serverText{display:none}
  .toolbar{overflow-x:auto}
}

/* ===== FIX INPUT BAR mIRC - 20260918 ===== */

.chat-pane{
    position:relative !important;
    display:block !important;
    min-width:0 !important;
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
    background:#fff !important;
}

/* zona mesajelor ocupa tot spatiul, mai putin bara de scriere */
.messages{
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:34px !important;

    width:auto !important;
    height:auto !important;

    margin:0 !important;
    padding:8px 12px 8px 8px !important;

    overflow-x:hidden !important;
    overflow-y:auto !important;

    background:#fff !important;
}

/* bara de scriere fix jos */
.input-row{
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:34px !important;

    display:flex !important;
    align-items:center !important;

    padding:2px !important;

    background:#f0f0f0 !important;

    border-top:1px solid #808080 !important;
    box-shadow:inset 0 1px #fff !important;

    z-index:100 !important;
}

/* campul unde se scrie */
#input{
    display:block !important;

    width:100% !important;
    height:28px !important;
    min-height:28px !important;

    margin:0 !important;
    padding:3px 6px !important;

    background:#fff !important;
    color:#000 !important;

    border-top:2px solid #808080 !important;
    border-left:2px solid #808080 !important;
    border-right:2px solid #fff !important;
    border-bottom:2px solid #fff !important;

    border-radius:0 !important;
    outline:none !important;

    font-family:"Segoe UI",Tahoma,Arial,sans-serif !important;
    font-size:16px !important;
    line-height:20px !important;

    caret-color:#000 !important;
}

/* cand dai click sa se vada clar ca scrii acolo */
#input:focus{
    background:#fff !important;
    color:#000 !important;
    outline:1px dotted #555 !important;
    outline-offset:-4px !important;
}

@media(max-width:760px){
    .messages{
        bottom:42px !important;
    }

    .input-row{
        height:42px !important;
        padding:3px !important;
    }

    #input{
        height:36px !important;
        min-height:36px !important;
        font-size:16px !important;
    }
}

/* ===== END FIX INPUT BAR ===== */

/* ===== ACTIVITATE CANAL - mIRC ===== */

/* canal cu mesaje noi */
.tree-row.channel.unread,
.switch-row.channel.unread {
    color:#ff0000 !important;
    font-weight:700 !important;
}

/* ramane rosu si iconita canalului */
.tree-row.channel.unread::before,
.switch-row.channel.unread::before {
    color:#ff0000 !important;
}

/* canalul pe care esti acum ramane normal */
.tree-row.channel.active,
.switch-row.channel.active {
    color:#000000 !important;
    font-weight:400 !important;
}

/* ===== END ACTIVITATE CANAL ===== */

/* ===== INCHIDERE QUERY ===== */

.tree-row.query,
.switch-row.query {
    display:flex !important;
    align-items:center !important;
}

.query-label,
.switch-label {
    flex:1 1 auto !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
}

.query-close {
    flex:0 0 20px !important;
    width:20px !important;
    height:20px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    margin-left:4px !important;

    color:#555 !important;
    font-weight:700 !important;
    font-size:15px !important;

    cursor:pointer !important;
}

.query-close:hover {
    color:#fff !important;
    background:#e81123 !important;
}

/* ===== END INCHIDERE QUERY ===== */

/* ===== CANAL IRC DUBLU-CLICK ===== */

.chat-channel-name {
    color:#0000cc !important;
    cursor:pointer !important;
}

.chat-channel-name:hover {
    text-decoration:underline !important;
}

/* ===== END CANAL IRC DUBLU-CLICK ===== */

/* ===== BUTON UNIC CONNECT / DISCONNECT ===== */

.connection-toggle {
    width:32px !important;
    height:30px !important;
    padding:3px !important;
}

.mirc-lightning {
    width:20px !important;
    height:20px !important;
    display:block !important;
}

/* conectat: butonul ramane acelasi, dar apare usor apasat */
.connection-toggle.connected {
    background:#dfefff !important;
    border-color:#9bc6ea !important;
}

/* ===== END CONNECT BUTTON ===== */

/* ===== CONNECT BUTTON STATUS COLORS ===== */

.connection-toggle {
    transition: none !important;
}

/* CONECTAT = VERDE */
.connection-toggle.connected {
    background:#b9f2b9 !important;
    border-color:#4c9a4c !important;
}

.connection-toggle.connected .mirc-lightning polygon {
    fill:#20b020 !important;
    stroke:#0b650b !important;
}

/* DECONECTAT = ROSU */
.connection-toggle.disconnected {
    background:#f6c2c2 !important;
    border-color:#b84a4a !important;
}

.connection-toggle.disconnected .mirc-lightning polygon {
    fill:#e53935 !important;
    stroke:#8b1111 !important;
}

/* IN CURS DE CONECTARE = GALBEN */
.connection-toggle.connecting {
    background:#fff0a8 !important;
    border-color:#c6a43c !important;
}

.connection-toggle.connecting .mirc-lightning polygon {
    fill:#f2c500 !important;
    stroke:#8a6c00 !important;
}

/* ===== END CONNECT BUTTON STATUS COLORS ===== */

/* ===== NICKLIST WIDTH AUTO ===== */

:root {
    --nick-pane-width: 145px;
}

/* Desktop */
@media (min-width:1001px) {
    .workspace {
        grid-template-columns:
            136px
            minmax(320px, 1fr)
            var(--nick-pane-width)
            165px !important;
    }

    .nick-pane {
        width:var(--nick-pane-width) !important;
        min-width:var(--nick-pane-width) !important;
        max-width:var(--nick-pane-width) !important;
    }

    .nick-list {
        width:100% !important;
        padding-left:5px !important;
        padding-right:5px !important;
    }

    .nick-row {
        width:max-content !important;
        min-width:100% !important;
        padding-right:4px !important;
    }
}

/* ===== END NICKLIST WIDTH AUTO ===== */

/* ===== mIRC CHANNEL CENTRAL ===== */

.cc-backdrop {
    position:fixed;
    inset:0;
    z-index:50000;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.08);
}

.cc-backdrop.hidden {
    display:none !important;
}

.cc-dialog {
    width:530px;
    max-width:calc(100vw - 25px);

    background:#f0f0f0;

    border:1px solid #999;
    border-radius:8px;

    box-shadow:
        0 8px 24px rgba(0,0,0,.22);

    overflow:hidden;

    color:#000;

    font-family:"Segoe UI",Tahoma,Arial,sans-serif;
    font-size:13px;
}

.cc-titlebar {
    height:34px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding-left:11px;

    background:#f8f8f8;
    border-bottom:1px solid #ddd;

    font-size:14px;
}

.cc-titlebar button {
    width:38px;
    height:32px;

    border:0;
    background:transparent;

    font-size:20px;
}

.cc-titlebar button:hover {
    background:#e81123;
    color:#fff;
}

.cc-body {
    padding:12px;
}

.cc-label {
    display:block;
    margin:0 0 4px;
}

.cc-topic-row {
    display:flex;
    margin-bottom:12px;
}

#ccTopic {
    width:100%;
    height:28px;

    padding:3px 6px;

    border:1px solid #aaa;
    background:#fff;
}

.cc-tabs {
    display:flex;
    gap:8px;

    margin-bottom:8px;
}

.cc-tabs button {
    min-width:76px;
    height:29px;

    border:1px solid #aaa;

    background:#f5f5f5;
}

.cc-tabs button.active {
    background:#fff;
    border-color:#1683dc;

    box-shadow:
        inset 0 0 0 1px #fff;
}

.cc-list {
    height:150px;

    overflow:auto;

    border:1px solid #aaa;

    background:#fff;
}

.cc-list-row {
    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        145px;

    min-height:25px;

    padding:3px 6px;

    cursor:default;
}

.cc-list-row:hover {
    background:#eef6fc;
}

.cc-list-row.selected {
    background:#0078d7;
    color:#fff;
}

.cc-mask {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.cc-setter {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;

    color:inherit;
}

.cc-list-buttons {
    display:flex;
    justify-content:flex-end;
    gap:8px;

    margin-top:8px;
}

.cc-list-buttons button {
    min-width:76px;
    height:29px;

    border:1px solid #aaa;
    background:#f5f5f5;
}

.cc-modes {
    display:grid;

    grid-template-columns:
        1fr 1fr;

    gap:25px;

    margin-top:16px;
}

.cc-mode-col {
    display:flex;
    flex-direction:column;

    gap:8px;
}

.cc-mode-col label {
    display:flex;
    align-items:center;

    min-height:24px;
}

.cc-mode-col input[type="checkbox"] {
    margin-right:7px;
}

.cc-key-line #ccKey {
    width:115px;
    margin-left:6px;
}

.cc-limit-line #ccLimit {
    width:70px;
    margin:0 6px;
}

.cc-key-line input[type="text"],
.cc-limit-line input[type="number"] {
    height:25px;

    border:1px solid #aaa;
    background:#fff;
}

.cc-status {
    height:23px;

    padding-top:8px;

    color:#555;

    font-size:12px;
}

.cc-footer {
    display:flex;
    justify-content:flex-end;
    gap:9px;

    padding:10px 12px 12px;

    border-top:1px solid #ddd;
}

.cc-footer button {
    width:92px;
    height:30px;

    border:1px solid #aaa;
    background:#f8f8f8;
}

.cc-footer button:hover,
.cc-list-buttons button:hover,
.cc-tabs button:hover {
    background:#e5f3ff;
    border-color:#74b2e8;
}

@media(max-width:600px) {

    .cc-dialog {
        width:calc(100vw - 12px);
        max-height:calc(100vh - 15px);

        overflow:auto;
    }

    .cc-modes {
        grid-template-columns:1fr;
        gap:8px;
    }

    .cc-list {
        height:115px;
    }
}

/* ===== END mIRC CHANNEL CENTRAL ===== */

/* ===== NICK SELECTAT ===== */

.nick-row.selected {
    background:#d9ecfb !important;
    color:#000 !important;

    box-shadow:
        inset 0 0 0 1px #8fc5ed !important;
}

.nick-row.selected:hover {
    background:#cfe7fa !important;
}

/* ===== END NICK SELECTAT ===== */

/* ===== mIRC WINDOW BUTTONS ===== */

#btnWinClose:hover {
    background:#e81123 !important;
    color:#fff !important;
}

/* ===== END mIRC WINDOW BUTTONS ===== */

/* ===== STARTUP NICK DIALOG ===== */

.startup-nick-backdrop {
    position:fixed;
    inset:0;
    z-index:99999;

    display:flex;
    align-items:center;
    justify-content:center;

    background:rgba(0,0,0,.18);
}

.startup-nick-dialog {
    width:390px;
    max-width:calc(100vw - 24px);

    background:#f0f0f0;
    border:1px solid #888;
    border-radius:7px;

    box-shadow:0 10px 30px rgba(0,0,0,.30);

    color:#111;
    font-family:"Segoe UI",Tahoma,Arial,sans-serif;
    font-size:14px;

    overflow:hidden;
}

.startup-nick-title {
    height:36px;

    display:flex;
    align-items:center;

    padding:0 12px;

    background:#fafafa;
    border-bottom:1px solid #ccc;

    font-weight:600;
}

.startup-nick-body {
    padding:18px;
}

.startup-nick-body label {
    display:block;
    margin-bottom:7px;
}

#startupNickInput {
    box-sizing:border-box;

    width:100%;
    height:34px;

    padding:4px 8px;

    border:1px solid #888;
    background:#fff;

    font-size:16px;
    outline:none;
}

#startupNickInput:focus {
    border-color:#1683dc;
    box-shadow:0 0 0 1px #1683dc;
}

.startup-nick-info {
    margin-top:6px;

    color:#666;
    font-size:12px;
}

.startup-nick-error {
    min-height:19px;

    margin-top:5px;

    color:#c00000;
    font-size:12px;
}

.startup-nick-footer {
    display:flex;
    justify-content:flex-end;

    padding:10px 14px 13px;

    border-top:1px solid #d0d0d0;
}

.startup-nick-ok {
    min-width:90px;
    height:31px;

    border:1px solid #888;
    background:#f8f8f8;

    font-size:13px;
}

.startup-nick-ok:hover {
    background:#e5f3ff;
    border-color:#1683dc;
}

/* ===== END STARTUP NICK DIALOG ===== */

/* ==================================================
   MOBILE SAFE - nu modifica structura chatului
   ================================================== */

@media (max-width:760px) {

    html,
    body {
        margin:0 !important;
        width:100% !important;
        height:100% !important;
        overflow:hidden !important;
    }

    .mirc-app {
        width:100% !important;
        height:100dvh !important;
        max-width:100vw !important;

        grid-template-rows:
            29px
            32px
            44px
            minmax(0,1fr)
            24px !important;
    }

    /* TITLU */
    .mirc-titlebar {
        min-width:0 !important;
        padding-left:6px !important;
    }

    #windowTitle {
        font-size:13px !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }

    .app-icon {
        flex:0 0 20px !important;
    }

    /* Pe telefon nu avem nevoie de patrat/X din interfata web */
    .title-buttons {
        display:none !important;
    }

    /* MENIU - scroll lateral */
    .menubar {
        display:flex !important;
        flex-wrap:nowrap !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        white-space:nowrap !important;

        padding:0 3px !important;

        scrollbar-width:none !important;
        -webkit-overflow-scrolling:touch;
    }

    .menubar::-webkit-scrollbar {
        display:none !important;
    }

    .menubar > button {
        flex:0 0 auto !important;

        height:31px !important;

        padding:0 9px !important;

        font-size:14px !important;
    }

    /* TOOLBAR - scroll lateral */
    .toolbar {
        display:flex !important;
        flex-wrap:nowrap !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        padding:4px 5px !important;

        scrollbar-width:none !important;
        -webkit-overflow-scrolling:touch;
    }

    .toolbar::-webkit-scrollbar {
        display:none !important;
    }

    .tool {
        flex:0 0 36px !important;

        width:36px !important;
        height:35px !important;

        margin-right:4px !important;
    }

    .ico {
        transform:scale(1.08);
    }

    .sep {
        flex:0 0 1px !important;
        margin-left:4px !important;
        margin-right:5px !important;
    }

    /* WORKSPACE */
    .workspace {
        min-width:0 !important;
        min-height:0 !important;

        grid-template-columns:minmax(0,1fr) !important;

        overflow:hidden !important;
    }

    /* lista din stanga ascunsa pe mobil */
    .tree-pane {
        display:none !important;
    }

    /* switchbar dreapta ascunsa */
    .switch-pane {
        display:none !important;
    }

    /* CHAT - nu schimbam pozitionarea */
    .chat-pane {
        min-width:0 !important;
        min-height:0 !important;
    }

    .messages {
        min-width:0 !important;
        min-height:0 !important;

        padding-left:0 !important;
        padding-right:7px !important;
        padding-top:10px !important;
        padding-bottom:8px !important;

        font-size:15px !important;
        line-height:1.38 !important;

        -webkit-overflow-scrolling:touch;
    }

    .line {
        min-width:0 !important;
    }

    .ts {
        width:59px !important;

        padding-right:7px !important;

        font-size:12px !important;
        line-height:21px !important;
    }

    .msg {
        min-width:0 !important;

        font-size:15px !important;

        overflow-wrap:anywhere !important;
        word-break:normal !important;
    }

    /* INPUT - ramane EXACT jos */
    .input-row {
        min-height:34px !important;

        background:#fff !important;

        border-top:1px solid #aaa !important;
    }

    #input {
        box-sizing:border-box !important;

        width:100% !important;
        height:33px !important;

        padding:4px 7px !important;

        font-size:16px !important;

        background:#fff !important;
        color:#000 !important;
    }

    /* LISTA UTILIZATORI - overlay dreapta */
    .nick-pane {
        position:fixed !important;

        top:105px !important;
        right:0 !important;
        bottom:24px !important;

        z-index:9000 !important;

        width:min(72vw,280px) !important;

        background:#fff !important;

        border-left:1px solid #999 !important;

        box-shadow:-4px 0 12px rgba(0,0,0,.22) !important;
    }

    .nick-pane.mobile-open {
        display:block !important;
    }

    .nick-list {
        padding:5px !important;
    }

    .nick-row {
        min-height:33px !important;

        font-size:16px !important;
    }

    /* STATUS JOS */
    .statusbar {
        grid-template-columns:minmax(0,1fr) 72px !important;

        font-size:11px !important;
    }

    #serverText {
        display:none !important;
    }

    #clockText {
        font-size:11px !important;
    }

    /* DIALOGURI */
    .classic-dialog,
    .startup-nick-dialog,
    .cc-dialog {
        max-width:calc(100vw - 16px) !important;
    }
}

/* ==================================================
   END MOBILE SAFE
   ================================================== */

/* ===== MOBILE CHANNELS / CHAT / USERS ===== */

.mobile-nav {
    display:none;
}

.mobile-drawer-backdrop {
    display:none;
}

@media (max-width:760px) {

    /* loc pentru bara Canale / Chat / Useri */
    .mirc-app {
        grid-template-rows:
            29px
            32px
            44px
            minmax(0,1fr)
            42px
            24px !important;
    }

    .mobile-nav {
        display:grid !important;

        grid-template-columns:
            1fr
            1fr
            1fr;

        height:42px;

        background:#f2f2f2;

        border-top:1px solid #aaa;
        border-bottom:1px solid #ccc;

        z-index:14000;
    }

    .mobile-nav button {
        min-width:0;

        border:0;
        border-right:1px solid #ccc;

        background:#f2f2f2;
        color:#222;

        font-size:14px;
        font-weight:500;
    }

    .mobile-nav button:last-child {
        border-right:0;
    }

    .mobile-nav button.active {
        background:#d9ecfb;
        color:#000;

        box-shadow:
            inset 0 0 0 1px #8fc5ed;
    }

    .mobile-drawer-backdrop {
        position:fixed;

        inset:0;

        z-index:14900;

        display:block;

        background:rgba(0,0,0,.20);
    }

    .mobile-drawer-backdrop.hidden {
        display:none !important;
    }

    /* CANALE + QUERY */
    .tree-pane {
        position:fixed !important;

        top:105px !important;
        left:0 !important;
        bottom:66px !important;

        width:min(82vw,320px) !important;

        z-index:15000 !important;

        display:none !important;

        background:#fff !important;

        border-right:1px solid #999 !important;

        box-shadow:
            5px 0 15px rgba(0,0,0,.24) !important;
    }

    .tree-pane.mobile-open {
        display:block !important;
    }

    .tree {
        width:100% !important;
        height:100% !important;

        overflow:auto !important;

        padding:8px 6px !important;

        background:#fff !important;

        -webkit-overflow-scrolling:touch;
    }

    .tree-row {
        min-height:34px !important;

        font-size:16px !important;

        padding-top:5px !important;
        padding-bottom:5px !important;
    }

    .tree-row.indent1 {
        padding-left:20px !important;
    }

    .tree-row.indent2 {
        padding-left:35px !important;
    }

    /* USERS */
    .nick-pane {
        position:fixed !important;

        top:105px !important;
        right:0 !important;
        bottom:66px !important;

        width:min(78vw,300px) !important;

        z-index:15000 !important;

        display:none !important;

        background:#fff !important;

        border-left:1px solid #999 !important;

        box-shadow:
            -5px 0 15px rgba(0,0,0,.24) !important;
    }

    .nick-pane.mobile-open {
        display:block !important;
    }

    .nick-list {
        width:100% !important;
        height:100% !important;

        overflow:auto !important;

        padding:6px !important;

        background:#fff !important;

        -webkit-overflow-scrolling:touch;
    }

    .nick-row {
        min-height:36px !important;

        padding:6px 7px !important;

        font-size:16px !important;
    }

    /* pe mobil switchbar-ul mare din dreapta nu e necesar;
       canalele si query-urile sunt in butonul Canale */
    .switch-pane {
        display:none !important;
    }

    /* Chatul ramane curat si foloseste tot ecranul */
    .workspace {
        grid-template-columns:minmax(0,1fr) !important;
    }

    /* bara de scris ramane jos in chat */
    .input-row {
        display:flex !important;
    }

    #input {
        display:block !important;
        width:100% !important;
    }
}

/* ===== END MOBILE CHANNELS / CHAT / USERS ===== */

/* =====================================================
   MOBILE IRC - CANALE JOS / USERI DREAPTA
   ===================================================== */

#mobileBottomTabs {
    display:none;
}

@media (max-width:760px) {

    /*
       WORKSPACE:
       ┌──────────────┬─────────┐
       │ CHAT         │ USERI   │
       │              │         │
       ├──────────────┴─────────┤
       │ #Tulcea #Romania Chat │
       └────────────────────────┘
    */

    .workspace {
        display:grid !important;

        grid-template-columns:
            minmax(0,1fr)
            118px !important;

        grid-template-rows:
            minmax(0,1fr)
            38px !important;

        min-width:0 !important;
        min-height:0 !important;

        overflow:hidden !important;
    }

    /* bara veche din stanga nu mai este necesara */
    .tree-pane {
        display:none !important;
    }

    /* switchbar desktop nu mai este necesara */
    .switch-pane {
        display:none !important;
    }

    /*
       Chat-ul ocupa stanga sus.
       Nu atingem structura lui interna.
    */
    .chat-pane {
        grid-column:1 !important;
        grid-row:1 !important;

        min-width:0 !important;
        min-height:0 !important;

        border-right:1px solid #bbb !important;
    }

    /*
       USERII - permanent dreapta vertical
    */
    .nick-pane {
        display:flex !important;

        position:relative !important;

        grid-column:2 !important;
        grid-row:1 !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        width:auto !important;
        min-width:0 !important;
        max-width:none !important;

        height:auto !important;

        flex-direction:column !important;

        background:#fff !important;

        border-left:0 !important;
        border-right:0 !important;

        box-shadow:none !important;

        overflow:hidden !important;

        z-index:auto !important;
    }

    .nick-pane::before {
        content:"Useri";

        display:block;

        flex:0 0 27px;

        box-sizing:border-box;

        padding:5px 5px;

        background:#f3f3f3;

        border-bottom:1px solid #bbb;

        font-size:12px;
        font-weight:600;

        color:#333;
    }

    .nick-list {
        flex:1 1 auto !important;

        height:auto !important;
        min-height:0 !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        padding:3px 2px !important;

        -webkit-overflow-scrolling:touch;
    }

    .nick-row {
        box-sizing:border-box !important;

        min-height:27px !important;

        padding:2px 3px !important;

        font-size:13px !important;

        overflow:hidden !important;

        white-space:nowrap !important;

        text-overflow:ellipsis !important;
    }

    .nick-row .prefix {
        min-width:13px !important;
    }

    /*
       Bara CANALE / CHATURI jos
    */
    #mobileBottomTabs {
        display:flex !important;

        grid-column:1 / 3 !important;
        grid-row:2 !important;

        min-width:0 !important;

        align-items:stretch !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        background:#ededed !important;

        border-top:1px solid #999 !important;

        scrollbar-width:none !important;

        -webkit-overflow-scrolling:touch;
    }

    #mobileBottomTabs::-webkit-scrollbar {
        display:none !important;
    }

    .mobile-bottom-tab {
        flex:0 0 auto !important;

        min-width:82px !important;
        max-width:145px !important;

        height:37px !important;

        padding:0 10px !important;

        border:0 !important;
        border-right:1px solid #bbb !important;

        background:#ededed !important;

        color:#111 !important;

        font-size:13px !important;

        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

    .mobile-bottom-tab.channel::before {
        content:"▣ ";
        color:#4e7eae;
    }

    .mobile-bottom-tab.query::first-letter {
        color:#c55096;
    }

    .mobile-bottom-tab.active {
        background:#cfe8fb !important;

        box-shadow:
            inset 0 0 0 1px #79b9e8 !important;

        font-weight:600 !important;
    }

    .mobile-bottom-tab.unread {
        color:#e00000 !important;
        font-weight:700 !important;
    }

    /*
       Zona de mesaje ramane normala.
    */
    .messages {
        padding-top:8px !important;
        padding-right:4px !important;

        font-size:14px !important;
    }

    .ts {
        width:49px !important;

        padding-right:5px !important;

        font-size:11px !important;
    }

    .msg {
        font-size:14px !important;
    }

    /*
       INPUTUL ramane jos in chat.
    */
    .input-row {
        min-height:35px !important;
    }

    #input {
        height:34px !important;

        font-size:16px !important;
    }
}

/*
   Pe telefoane foarte inguste reducem putin nicklist-ul.
*/
@media (max-width:390px) {

    .workspace {
        grid-template-columns:
            minmax(0,1fr)
            105px !important;
    }

    .nick-row {
        font-size:12px !important;
    }

    .mobile-bottom-tab {
        min-width:76px !important;
        padding:0 7px !important;
    }
}

/* =====================================================
   END MOBILE IRC
   ===================================================== */

/* ===== REMOVE OLD MOBILE QUICK NAV ===== */

#mobileQuickNav,
.mobile-panel-backdrop,
#mobilePanelBackdrop {
    display:none !important;
}

/* ===== END REMOVE OLD MOBILE QUICK NAV ===== */

/* ===== RIDIC BARA CANALE / CHAT / USERI PE MOBIL ===== */

@media (max-width:760px) {

    .mirc-app {
        box-sizing:border-box !important;
        padding-bottom:26px !important;
    }

    #mobileQuickNav {
        display:grid !important;

        height:48px !important;

        align-items:stretch !important;

        background:#f3f3f3 !important;

        z-index:20000 !important;
    }

    #mobileQuickNav button {
        height:48px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        padding:0 5px !important;

        font-size:14px !important;
        line-height:1 !important;
    }
}

/* ===== END RIDICARE BARA MOBILE ===== */

/* ===== MENIU CLICK DREAPTA - SELECTIE CLARA ===== */

.context-menu button {
    transition:none !important;
}

/* OP / DEOP / VOICE / WHOIS / PRIVATE etc. */
.context-menu button:hover,
.context-menu button:focus-visible {
    background:#cfe8ff !important;
    border:1px solid #5aa9e6 !important;
    color:#000 !important;
    font-weight:600 !important;
    outline:none !important;
}

/* Cand este apasat */
.context-menu button:active {
    background:#9fd2f5 !important;
    border-color:#2788cf !important;
}

/* KICK - il diferentiem pentru ca este actiune mai importanta */
.context-menu button[data-nick-action="kick"]:hover,
.context-menu button[data-nick-action="kick"]:focus-visible {
    background:#ffd9d9 !important;
    border-color:#e05a5a !important;
    color:#b00000 !important;
    font-weight:700 !important;
}

/* ===== END MENIU CLICK DREAPTA ===== */

/* ===== KICK / KICKBAN ===== */

.context-menu button[data-nick-action="kick"],
.context-menu button[data-nick-action="kickban"] {
    color:#b00000 !important;
    font-weight:600 !important;
}

.context-menu button[data-nick-action="kick"]:hover,
.context-menu button[data-nick-action="kick"]:focus-visible,
.context-menu button[data-nick-action="kickban"]:hover,
.context-menu button[data-nick-action="kickban"]:focus-visible {
    background:#ffd6d6 !important;
    border-color:#e04444 !important;
    color:#b00000 !important;
    font-weight:700 !important;
}

.context-menu button[data-nick-action="kick"]:active,
.context-menu button[data-nick-action="kickban"]:active {
    background:#ffbaba !important;
    border-color:#c00000 !important;
}

/* ===== END KICK / KICKBAN ===== */

/* ===== QUERY NUMAI IN DREAPTA ===== */

/*
   Chaturile private raman in switchbar-ul din dreapta,
   exact sub canale.
*/
.switch-pane {
    display:block;
}

.switch-row.query {
    display:flex !important;
}

/* Privat selectat */
.switch-row.query.active {
    background:#d9ecfb !important;
    border:1px solid #8fc5ed !important;
    color:#000 !important;
}

/* Privat necitit */
.switch-row.query.unread {
    color:#e00000 !important;
    font-weight:700 !important;
}

/* Mesajele private folosesc acelasi aspect cu cele de canal */
.line.server .msg {
    color:#000;
}

/* ===== END QUERY NUMAI IN DREAPTA ===== */

/* ===== DESKTOP SWITCHBAR CANALE + QUERY PERMANENT ===== */

@media (min-width:761px) {

    .switch-pane {
        display:block !important;
        visibility:visible !important;
        min-width:150px !important;
        overflow:hidden !important;
    }

    .switch-list {
        display:block !important;
        height:100% !important;
        overflow-y:auto !important;
        overflow-x:hidden !important;
    }

    .switch-row.channel,
    .switch-row.query,
    .switch-row.server {
        display:flex !important;
    }

    /* query selectat ramane vizibil */
    .switch-row.query.active {
        background:#d9ecfb !important;
        border:1px solid #8fc5ed !important;
        color:#000 !important;
    }
}

/* ===== END DESKTOP SWITCHBAR ===== */

/* =====================================================
   mIRC STYLE - MESAJELE CRESC DE JOS IN SUS
   ===================================================== */

.messages {
    display:flex !important;
    flex-direction:column !important;
}

/*
   Cand sunt putine mesaje, spatiul liber ramane DEASUPRA lor.
   Astfel primul mesaj apare langa casuta de scris.
   Cand se umple fereastra, mesajele vechi urca normal.
*/
.messages::before {
    content:"";
    margin-top:auto;
    flex:0 0 auto;
}

.messages > .line {
    flex:0 0 auto !important;
}

/* =====================================================
   END mIRC MESSAGE FLOW
   ===================================================== */