/*
 * The mIRC 6.x window on Windows XP (Luna). A skin is a block of variables under [data-skin]; "xp" is the
 * first. The chrome is CSS and the tool icons are inline SVG data, drawn here. The one picture of the client
 * is the icon of mIRC itself (assets/irc/icons/), which the user asked for on 2026-09-20.
 */
@font-face {
    font-family: 'Fixedsys Excelsior';
    src: url("fonts/FSEX302-TywPHBC.ttf") format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

:root {
    --text-font: 'Fixedsys Excelsior', Fixedsys, 'Lucida Console', Consolas, monospace;
    --text-size: 16px;
    --ui-font: Tahoma, 'Segoe UI', Verdana, sans-serif;
    --ui-size: 11px;
}

[data-skin="xp"] {
    --title-a: #0a5fea; --title-b: #3d8bf7; --title-c: #0250dd; --title-text: #ffffff;
    --frame: #0831d9; --face: #ece9d8; --face-dark: #aca899; --face-light: #ffffff; --face-shadow: #716f64;
    --menu-hi: #316ac5; --menu-hi-text: #ffffff; --menu-text: #000000; --menu-disabled: #aca899;
    --btn-a: #3c7fe1; --btn-b: #1d5cd0; --btn-close-a: #e6795c; --btn-close-b: #c8462c;
    --mdi-bg: #808080; --win-bg: #ffffff; --win-text: #000000; --splitter: #ece9d8;
    --c-normal: #000000; --c-join: #008000; --c-part: #008000; --c-quit: #000080; --c-action: #800080;
    --c-notice: #800000; --c-mode: #008000; --c-topic: #008000; --c-kick: #008000; --c-info: #008000;
    --c-error: #ff0000; --c-own: #000000; --c-highlight: #ff0000; --c-timestamp: #000000;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body { background: #3a6ea5; font: var(--ui-size)/1.3 var(--ui-font); color: var(--menu-text); overflow: hidden;
    -webkit-font-smoothing: none; }
button { font: inherit; }
[hidden] { display: none !important; }

/* The program window */
.mirc { display: grid; grid-template-rows: 30px 20px 28px 1fr 25px; height: 100%; background: var(--face);
    border: 3px solid var(--frame); border-top: 0; border-radius: 8px 8px 0 0; }
.mirc.no-toolbar { grid-template-rows: 30px 20px 0 1fr 25px; }
.mirc.no-toolbar .toolbar { display: none; }
.mirc.no-switchbar { grid-template-rows: 30px 20px 28px 1fr 0; }
.mirc.no-switchbar .switchbar { display: none; }

/* The titlebar stacks above a dialog backdrop: the window closes, minimises and drags while the nick dialog is open. */
.titlebar { display: flex; align-items: center; gap: 4px; padding: 0 4px 0 6px; margin: 0 -3px; position: relative; z-index: 101;
    background: linear-gradient(to bottom, var(--title-a) 0, var(--title-b) 8%, var(--title-a) 40%, var(--title-c) 100%);
    border-radius: 8px 8px 0 0; color: var(--title-text); font: bold 13px/30px 'Trebuchet MS', Tahoma, sans-serif;
    text-shadow: 1px 1px 0 #0c2a80; user-select: none; }
.titlebar-icon { width: 16px; height: 16px; image-rendering: pixelated; }
.titlebar-text { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.titlebar-buttons { display: flex; gap: 2px; }
.titlebar-buttons button, .dialog-title .tb-close { width: 21px; height: 21px; padding: 0; border: 1px solid #ffffff; border-radius: 3px;
    background: linear-gradient(to bottom, var(--btn-a), var(--btn-b)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); cursor: default; position: relative; }
.titlebar-buttons button::before, .titlebar-buttons button::after, .dialog-title .tb-close::before, .dialog-title .tb-close::after { content: ''; position: absolute; background: #ffffff; }
.tb-min::before { left: 5px; bottom: 5px; width: 7px; height: 3px; }
.tb-max::before { left: 4px; top: 4px; width: 11px; height: 11px; background: transparent !important; border: 1px solid #ffffff; border-top-width: 3px; }
.tb-close, .dialog-title .tb-close { background: linear-gradient(to bottom, var(--btn-close-a), var(--btn-close-b)) !important; }
.tb-close::before, .dialog-title .tb-close::before { left: 9px; top: 4px; width: 2px; height: 11px; transform: rotate(45deg); }
.tb-close::after, .dialog-title .tb-close::after { left: 9px; top: 4px; width: 2px; height: 11px; transform: rotate(-45deg); }
.titlebar-buttons button:active { filter: brightness(.85); }

.menubar { display: flex; align-items: center; padding: 0 2px; user-select: none; position: relative; }
.menu { padding: 2px 6px; cursor: default; }
.menu.open, .menu:hover { background: var(--menu-hi); color: var(--menu-hi-text); }
.menu.open u, .menu:hover u { color: inherit; }
.mdi-buttons { margin-left: auto; display: flex; gap: 2px; padding-right: 2px; }
.mdi-buttons button { width: 16px; height: 14px; padding: 0; border: 1px solid; border-color: var(--face-light) var(--face-shadow) var(--face-shadow) var(--face-light);
    background: var(--face); position: relative; cursor: default; }
.mdi-buttons button::before { content: ''; position: absolute; left: 3px; top: 3px; width: 8px; height: 6px; border: 1px solid #000; border-top-width: 2px; }
.mdi-min::before { width: 6px !important; height: 2px !important; border: 0 !important; background: #000; top: 8px !important; left: 4px !important; }
.mdi-close::before { border: 0 !important; width: 2px !important; height: 9px !important; left: 6px !important; top: 1px !important; background: #000; transform: rotate(45deg); }
.mdi-close::after { content: ''; position: absolute; width: 2px; height: 9px; left: 6px; top: 1px; background: #000; transform: rotate(-45deg); }

.mirc { position: relative; }
.menus { position: absolute; inset: 0; z-index: 50; pointer-events: none; }
.menus .dropdown { display: none; position: absolute; min-width: 150px; padding: 2px; background: var(--face-light); pointer-events: auto;
    border: 1px solid var(--face-shadow); box-shadow: 2px 2px 2px rgba(0,0,0,.3); user-select: none; }
.menus .dropdown.open { display: block; }
.dropdown .item { padding: 3px 24px 3px 26px; white-space: nowrap; position: relative; cursor: default; }
.dropdown .item:hover { background: var(--menu-hi); color: var(--menu-hi-text); }
.dropdown .item.disabled { color: var(--menu-disabled); }
.dropdown .item.disabled:hover { background: transparent; color: var(--menu-disabled); }
.dropdown .sep { height: 1px; margin: 3px 2px; background: var(--face-dark); }
.dropdown .check { position: absolute; left: 8px; top: 3px; width: 12px; height: 12px; }
.dropdown .check.checked::before { content: ''; position: absolute; left: 2px; top: 1px; width: 4px; height: 8px; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); }

.toolbar { display: flex; align-items: center; gap: 1px; padding: 2px 4px; border-top: 1px solid var(--face-light); border-bottom: 1px solid var(--face-dark); }
.tool { width: 24px; height: 22px; padding: 0; border: 1px solid transparent; background: transparent; display: grid; place-items: center; cursor: default; }
.tool:hover { border-color: var(--menu-hi); background: #c1d2ee; }
.tool.disabled { opacity: .45; pointer-events: none; }
.tool-sep { width: 1px; height: 18px; margin: 0 3px; background: var(--face-dark); border-right: 1px solid var(--face-light); }
.ico { width: 16px; height: 16px; display: block; background-repeat: no-repeat; background-size: 16px 16px; image-rendering: pixelated; }
.ico-connect { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M9 1h4l-3 5h3L5 15l2-6H4z' fill='%23ffd21f' stroke='%23806000'/%3E%3C/svg%3E"); }
.ico-options { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='1' y='2' width='14' height='12' fill='%23fff' stroke='%23000'/%3E%3Crect x='2' y='3' width='12' height='2' fill='%230a246a'/%3E%3Crect x='3' y='7' width='4' height='1' fill='%23000'/%3E%3Crect x='3' y='9' width='6' height='1' fill='%23000'/%3E%3Crect x='3' y='11' width='5' height='1' fill='%23000'/%3E%3Crect x='10' y='7' width='3' height='3' fill='%23008000'/%3E%3C/svg%3E"); }
.ico-address { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='2' y='2' width='12' height='12' fill='%23c0392b' stroke='%23000'/%3E%3Crect x='4' y='2' width='1' height='12' fill='%23fff'/%3E%3Crect x='7' y='5' width='5' height='1' fill='%23fff'/%3E%3Crect x='7' y='8' width='5' height='1' fill='%23fff'/%3E%3C/svg%3E"); }
.ico-url { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%2354a0ff' stroke='%23000'/%3E%3Cpath d='M2 8h12M8 2c-3 4-3 8 0 12M8 2c3 4 3 8 0 12' stroke='%23000' fill='none'/%3E%3C/svg%3E"); }
.ico-send { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M3 1h7l3 3v11H3z' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M6 7h4M8 5v6' stroke='%23008000' stroke-width='2'/%3E%3C/svg%3E"); }
.ico-chat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='1' y='2' width='9' height='6' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M3 8v3l3-3' fill='%23fff' stroke='%23000'/%3E%3Crect x='6' y='7' width='9' height='6' fill='%23ffd21f' stroke='%23000'/%3E%3C/svg%3E"); }
.ico-join { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M5 2v12M11 2v12M2 6h12M2 10h12' stroke='%23000080' stroke-width='2'/%3E%3C/svg%3E"); }
.ico-users { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Ccircle cx='5' cy='5' r='3' fill='%23ffd21f' stroke='%23000'/%3E%3Cpath d='M1 15v-3a4 4 0 018 0v3z' fill='%230a246a' stroke='%23000'/%3E%3Ccircle cx='11' cy='6' r='2.5' fill='%23ffd21f' stroke='%23000'/%3E%3Cpath d='M9 15v-2a3 3 0 016 0v2z' fill='%23800000' stroke='%23000'/%3E%3C/svg%3E"); }
.ico-script { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='10' height='14' fill='%23fff' stroke='%23000'/%3E%3Cpath d='M4 4h6M4 6h6M4 8h4' stroke='%23000'/%3E%3Cpath d='M9 14l5-5 1 1-5 5z' fill='%23ffd21f' stroke='%23000'/%3E%3C/svg%3E"); }
.ico-help { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7' fill='%23316ac5' stroke='%23000'/%3E%3Ctext x='8' y='12' font-family='Tahoma,sans-serif' font-size='11' font-weight='bold' text-anchor='middle' fill='%23fff'%3E?%3C/text%3E%3C/svg%3E"); }

/* The MDI area with maximised child windows */
.mdi { position: relative; background: var(--mdi-bg); overflow: hidden; border: 1px solid; border-color: var(--face-shadow) var(--face-light) var(--face-light) var(--face-shadow); }
.win { position: absolute; inset: 0; display: none; grid-template-rows: 1fr auto; background: var(--face); }
.win.active { display: grid; }
.win-body { display: grid; grid-template-columns: 1fr auto; min-height: 0; }
.text { overflow-y: auto; overflow-x: hidden; background: var(--win-bg); color: var(--win-text); font: var(--text-size)/1 var(--text-font);
    padding: 1px 2px; border: 1px solid; border-color: var(--face-shadow) var(--face-light) var(--face-light) var(--face-shadow); outline: none;
    overflow-wrap: anywhere; white-space: pre-wrap; }
.text .line { min-height: 16px; }
.nicks { width: 128px; overflow-y: auto; background: var(--win-bg); font: var(--text-size)/1 var(--text-font); color: var(--win-text);
    border: 1px solid; border-color: var(--face-shadow) var(--face-light) var(--face-light) var(--face-shadow); border-left: 3px solid var(--splitter); user-select: none; }
.nicks div { padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nicks div.selected { background: var(--menu-hi); color: var(--menu-hi-text); }
.input { padding: 2px 1px 1px; }
.input input { width: 100%; height: 22px; padding: 1px 3px; margin: 0; border: 1px solid; border-color: var(--face-shadow) var(--face-light) var(--face-light) var(--face-shadow);
    background: var(--win-bg); color: var(--win-text); font: var(--text-size)/1 var(--text-font); outline: none; border-radius: 0; }

/* mIRC 6 default colours */
.c-normal { color: var(--c-normal); }
.c-join { color: var(--c-join); }
.c-part { color: var(--c-part); }
.c-quit { color: var(--c-quit); }
.c-action { color: var(--c-action); }
.c-notice { color: var(--c-notice); }
.c-mode { color: var(--c-mode); }
.c-topic { color: var(--c-topic); }
.c-kick { color: var(--c-kick); }
.c-info { color: var(--c-info); }
.c-error { color: var(--c-error); }
.c-highlight { color: var(--c-highlight); }
.ts { color: var(--c-timestamp); }
.text a { color: inherit; text-decoration: underline; }

/* The switchbar */
.switchbar { display: flex; align-items: center; gap: 2px; padding: 2px 3px; border-top: 1px solid var(--face-light); overflow-x: auto; scrollbar-width: none; }
.switchbar button { height: 19px; min-width: 96px; max-width: 160px; padding: 0 6px 0 22px; border: 1px solid; border-color: var(--face-light) var(--face-shadow) var(--face-shadow) var(--face-light);
    background: var(--face) no-repeat 3px center / 14px 14px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.switchbar button.active { border-color: var(--face-shadow) var(--face-light) var(--face-light) var(--face-shadow); background-color: #f1efe2; font-weight: bold; }
.switchbar button.unread { color: #ff0000; }
.switchbar button.status { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Crect x='1' y='2' width='14' height='11' fill='%23fff' stroke='%23000'/%3E%3Crect x='2' y='3' width='12' height='2' fill='%230a246a'/%3E%3C/svg%3E"); }
.switchbar button.channel { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath d='M5 2v12M11 2v12M2 6h12M2 10h12' stroke='%23000080' stroke-width='2'/%3E%3C/svg%3E"); }

/* Dialogs: mIRC Options, a prompt, About */
.dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: rgba(0,0,0,.02); }
.dialog { width: 520px; max-width: calc(100vw - 16px); background: var(--face); border: 1px solid var(--frame); border-radius: 8px 8px 0 0; box-shadow: 2px 4px 10px rgba(0,0,0,.4); }
.dialog.small { width: 320px; }
.dialog-title { display: flex; align-items: center; justify-content: space-between; padding: 0 5px 0 8px; height: 26px;
    background: linear-gradient(to bottom, var(--title-a) 0, var(--title-b) 8%, var(--title-a) 40%, var(--title-c) 100%); border-radius: 7px 7px 0 0;
    color: var(--title-text); font: bold 13px 'Trebuchet MS', Tahoma, sans-serif; text-shadow: 1px 1px 0 #0c2a80; user-select: none; }
.dialog-title .tb-close { width: 19px; height: 19px; }
.dialog-body { display: grid; grid-template-columns: 150px 1fr; gap: 8px; padding: 8px; }
.dialog-body.column { grid-template-columns: 1fr; }
.tree { background: var(--win-bg); border: 1px solid; border-color: var(--face-shadow) var(--face-light) var(--face-light) var(--face-shadow); padding: 2px; user-select: none; }
.tree-item { padding: 1px 2px; color: var(--face-shadow); }
.tree-node { padding: 1px 2px 1px 14px; position: relative; }
.tree-node::before { content: '+'; position: absolute; left: 1px; top: 1px; width: 9px; height: 9px; border: 1px solid var(--face-shadow); font: 9px/8px monospace; text-align: center; background: #fff; }
.tree-node.open::before { content: '-'; }
.tree-node.open { background: var(--menu-hi); color: var(--menu-hi-text); }
.tree-leaf { padding: 1px 2px 1px 28px; }
.page fieldset { border: 1px solid var(--face-dark); border-radius: 4px; padding: 6px 8px 8px; margin: 0 0 6px; }
.page legend { padding: 0 3px; color: #0046d5; }
.page label { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 6px; margin: 4px 0; }
.page input[type="text"], #prompt-input { height: 21px; padding: 1px 3px; border: 1px solid #7f9db9; background: #fff; font: var(--ui-size) var(--ui-font); outline: none; border-radius: 0; }
.page input[type="text"]:disabled { background: var(--face); color: var(--face-shadow); }
.page input[type="text"]:focus, #prompt-input:focus { border-color: var(--menu-hi); }
.page .row { margin-top: 6px; }
.page label.check { display: block; }
.hint { min-height: 16px; color: var(--c-error); padding: 0 2px; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }
.btn { min-width: 75px; white-space: nowrap; height: 23px; padding: 0 10px; border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(to bottom, #ffffff, #ece9d8 85%, #d8d2bd); cursor: default; }
.btn:hover { box-shadow: inset 0 0 0 2px #f8b330; }
.btn:active { background: #e3e0d3; }
.btn:disabled { color: var(--face-dark); border-color: var(--face-dark); box-shadow: none; }
.about { text-align: center; }
.about p { margin: 4px 0; }

/* In the floating window of a site page: the page shows through the rounded corners, and the titlebar drags. */
body.embedded { background: transparent; }
body.embedded .titlebar { touch-action: none; }

/* A phone: the nick list toggles, the toolbar goes. */
@media (max-width: 600px) {
    .mirc { grid-template-rows: 30px 20px 0 1fr 25px; }
    .toolbar { display: none; }
    .nicks { width: 96px; }
    .mirc.hide-nicks .nicks { display: none; }
    .dialog-body { grid-template-columns: 1fr; }
    .tree { display: none; }
    .switchbar button { min-width: 70px; }
}