/* GHOSTS CONTINGENCY / COMPACT 2.0 — tylko wygląd, API pozostaje bez zmian */
:root {
  color-scheme: dark;
  --ink: #03121b;
  --panel: #061d29;
  --cyan: #1bcce5;
  --orange: #ffac2b;
  --green: #54e7a7;
  --text: #e7f3f8;
  --muted: #84aab9;
  --border: #1c6479;
}
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background: radial-gradient(ellipse at 50% 40%, #162330 0%, #071018 55%, #02060b 100%);
  color: var(--text);
  font-family: Consolas, "Courier New", monospace;
}
button, input { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible, input:focus-visible { outline: 2px solid #83f1ff; outline-offset: 2px; }
[hidden] { display: none !important; }
.tablet {
  isolation: isolate;
  position: relative;
  width: min(1200px, calc(100vw - 48px));
  height: min(690px, calc(100dvh - 56px));
  min-height: 590px;
  padding: 8px;
  overflow: hidden;
  border: 2px solid #475865;
  border-radius: 13px;
  background: linear-gradient(145deg, #29343e, #0a121a 31%, #0a141c 70%, #28353e);
  box-shadow: 0 20px 55px #000b, inset 0 0 0 1px #647682, 0 0 32px #0ab9e01c;
}
/* Wewnętrzny ekran i dużo subtelniejsze narożniki. */
.tablet::before {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: -1;
  border: 1px solid #187d91;
  border-radius: 4px;
  background: radial-gradient(ellipse at 51% 36%, #083241a0, #021620 64%, #03121c 100%);
}
.tech-frame { display: none; }
.frame-corner { position: absolute; width: 39px; height: 28px; z-index: 4; pointer-events: none; }
.corner-tl { left: 7px; top: 7px; border-top: 3px solid var(--orange); border-left: 3px solid var(--orange); }
.corner-tr { right: 7px; top: 7px; border-top: 3px solid var(--orange); border-right: 3px solid var(--orange); }
.corner-bl { left: 7px; bottom: 7px; border-bottom: 3px solid var(--orange); border-left: 3px solid var(--orange); }
.corner-br { right: 7px; bottom: 7px; border-bottom: 3px solid var(--orange); border-right: 3px solid var(--orange); }
.gridlines {
  position: absolute; inset: 8px; z-index: -1; pointer-events: none; opacity: .35;
  background-image: radial-gradient(#0099bb90 .7px, transparent 1px),
    linear-gradient(#17627824 1px, transparent 1px),
    linear-gradient(90deg, #17627824 1px, transparent 1px);
  background-size: 22px 22px, 44px 44px, 44px 44px;
}
.scanline {
  position: absolute; left: 8px; right: 8px; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #1bd9f052, transparent);
  animation: gc-scan 12s linear infinite; z-index: 4; pointer-events: none;
}
@keyframes gc-scan { to { top: 100%; } }

/* Ekran dostępu */
.login-screen { position: relative; height: 100%; min-height: 0; display: grid; place-items: center; }
.login-center { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; width: min(100%, 790px); padding: 27px 26px 43px; }
.emblem-large { width: 92px; height: 107px; filter: drop-shadow(0 0 13px #bdefff35); }
.logo-word { font: 900 clamp(38px, 4vw, 52px)/1 Impact, "Arial Narrow", Arial, sans-serif; letter-spacing: 5px; margin: 6px 0 0; text-shadow: 0 2px #72838f; }
.logo-word span { display: block; font: 900 clamp(18px, 2vw, 24px)/1.3 Arial, sans-serif; letter-spacing: 2px; }
.three-slashes { color: var(--orange); font: 900 27px/1 Consolas, monospace; letter-spacing: 6px; margin: 7px 0 20px; }
.secure-banner {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  width: min(100%, 610px); padding: 14px 18px;
  border: 1px solid var(--cyan); background: #072d3b97;
  font-size: clamp(15px, 2.2vw, 23px); letter-spacing: 2px;
  text-align: center; box-shadow: inset 0 0 23px #00b6dc19;
  clip-path: polygon(13px 0,calc(100% - 13px) 0,100% 13px,100% calc(100% - 13px),calc(100% - 13px) 100%,13px 100%,0 calc(100% - 13px),0 13px);
}
.lock-icon { width: 26px; height: 29px; color: #e8faff; flex-shrink: 0; }
.login-form { display: flex; width: min(100%, 635px); min-height: 58px; gap: 8px; margin-top: 27px; }
.password-field { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding: 9px 14px; border: 1px solid var(--cyan); background: #071e2ae6; }
.key-icon { width: 29px; height: 29px; flex-shrink: 0; }
.password-field input { background: transparent; border: 0; outline: 0; flex: 1; min-width: 0; color: var(--text); font-size: 16px; }
.password-field input::placeholder { color: #86a1b0; }
.arrow-button, .send-button { background: #392914; color: #ffd497; border: 1px solid var(--orange); font: 400 30px/1 Arial, sans-serif; }
.arrow-button { min-width: 65px; }
.arrow-button:hover, .send-button:hover { background: #6e4717; }
.login-error { min-height: 22px; margin-top: 13px; color: #ffc079; font-size: 12px; }
.login-bottom { position: absolute; left: 5%; right: 5%; bottom: 24px; text-align: center; font-size: 11px; letter-spacing: 2px; color: #86a7b6; white-space: nowrap; }
.login-bottom span { color: var(--orange); font-size: 1.4em; font-weight: 900; }
.diag-code { position: absolute; left: 5%; top: 13%; width: 18%; height: 26%; padding: 10px; font-size: 8px; line-height: 2; color: #3b9db4; opacity: .4; overflow: hidden; border-left: 1px solid #176378; }
.diag-code i { display: block; height: 2px; width: 70%; background: #176d83; margin: 6px 0; }
.diag-code span { display: block; }
.fake-map { position: absolute; right: 3%; top: 12%; width: 29%; opacity: .25; }
.fake-map svg { width: 100%; }
.hex-blocks { position: absolute; left: 6%; bottom: 24%; display: grid; grid-template-columns: repeat(3,10px); gap: 6px; opacity: .38; }
.hex-blocks i { width: 10px; height: 10px; background: #096e82; }
.hex-blocks i:nth-child(3n) { background: #a87022; }

/* CRIME CHAT / COMPACT */
.chat-screen { position: relative; z-index: 1; height: 100%; min-height: 0; display: flex; flex-direction: column; }
.chat-top { min-height: 80px; height: 80px; padding: 10px 30px; display: flex; align-items: center; gap: 17px; flex-shrink: 0; background: linear-gradient(90deg, #061b26d9, #08222dd2); border-bottom: 1px solid #207b91; }
.chat-brand { flex-shrink: 0; display: flex; align-items: center; gap: 9px; padding-right: 19px; border-right: 1px solid #bf892d; }
.emblem-small { width: 43px; height: 55px; filter: drop-shadow(0 0 5px #bceaff25); }
.chat-word { font: 900 22px/1 Impact, "Arial Narrow", Arial, sans-serif; letter-spacing: 1px; }
.chat-word span { display: block; font: 900 10px/1.6 Arial, sans-serif; letter-spacing: 1px; }
.chat-word b { display: none; }
.chat-top-title { flex: 1; min-width: 0; }
.chat-top-title h2 { font: 900 clamp(16px, 2vw, 23px)/1.18 Arial, sans-serif; letter-spacing: .6px; margin: 0 0 6px; }
.header-subtitle { color: #89aebd; font-size: 10px; letter-spacing: .7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-slashes { font-size: 10px; color: #65e9af; white-space: nowrap; letter-spacing: .4px; }
.online-indicator { display: inline-block; background: #53e9a0; height: 7px; width: 7px; border-radius: 50%; box-shadow: 0 0 9px #54d9a2; margin-right: 4px; }
.columns { display: grid; grid-template-columns: 177px minmax(0,1fr) 197px; gap: 11px; padding: 12px 12px 10px; flex: 1; min-height: 0; }
.panel { position: relative; min-width: 0; min-height: 0; border: 1px solid #247d91; background: #061c28cb; border-radius: 3px; box-shadow: inset 0 0 16px #008ca614; }
.panel::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 2px; background: var(--cyan); pointer-events: none; }
.left-panel { display: flex; flex-direction: column; gap: 8px; padding: 17px 11px 13px; }
.side-title { padding-left: 7px; margin-bottom: 6px; font-size: 9px; letter-spacing: 1.5px; font-weight: 800; color: #699dae; }
.room-nav { display: flex; flex-direction: column; gap: 5px; }
.room-nav button { width: 100%; padding: 10px 9px; text-align: left; color: #95b4c1; background: transparent; border: 1px solid transparent; border-left: 2px solid transparent; font-size: 12px; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.room-nav button.current { color: #ffcf8d; background: linear-gradient(90deg, #493118dd, #102834cc); border-left-color: var(--orange); }
.room-nav button:hover { color: white; background: #0e3544; }
.room-nav button.current:hover { background: #523a1b; }
.channel-symbol { display: inline-block; width: 16px; color: #a0bbca; text-align: center; font-size: 15px; flex-shrink: 0; }
.room-nav button.current .channel-symbol { color: var(--orange); }
.left-watermark { width: 95px; height: 125px; margin: auto; opacity: .11; align-self: center; }
.left-bottom { margin-top: auto; padding: 11px 4px 0; border-top: 1px solid #1b4f64; color: #6497a9; font-size: 9px; line-height: 1.9; }

.chat-panel { display: flex; flex-direction: column; overflow: hidden; }
.room-heading { display: flex; gap: 12px; align-items: center; padding: 13px 17px; min-height: 65px; flex-shrink: 0; border-bottom: 1px solid #1c596c; }
.room-icon { width: 28px; height: 28px; color: var(--orange); flex-shrink: 0; }
.room-heading h3 { font: 800 16px Arial, sans-serif; letter-spacing: .5px; margin: 0; }
.room-heading p { margin: 3px 0 0; color: #a1bdc9; font-size: 10px; line-height: 1.3; }
.messages { display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 0; overflow-y: auto; padding: 14px; scrollbar-width: thin; scrollbar-color: #17677c #03141d; }
.message { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 10px; padding: 10px 13px; border: 1px solid #1b5267; border-left: 3px solid var(--cyan); background: #061e2bcf; border-radius: 2px; overflow-wrap: anywhere; }
.message.system { border-left-color: var(--orange); }
.message time { grid-column: 2; grid-row: 1; align-self: start; color: #739cad; font-size: 10px; }
.message > div { grid-column: 1; grid-row: 1 / span 2; min-width: 0; }
.message .author { color: #57dcf1; font: 800 13px Arial, sans-serif; margin-bottom: 6px; }
.message.system .author { color: #ffb95d; }
.message .body { color: #dfedf3; font: 13px/1.55 Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-empty { text-align: center; color: #75a2b5; margin: auto; max-width: 300px; line-height: 1.9; font-size: 11px; }
.message-form { flex-shrink: 0; display: flex; gap: 7px; padding: 10px; border-top: 1px solid #245b6e; background: #051b27; min-height: 63px; }
.chat-input-wrap { flex: 1; display: flex; align-items: center; min-width: 0; border: 1px solid #276e84; background: #041622; }
.message-icon { flex-shrink: 0; width: 43px; height: 40px; padding: 10px; border-right: 1px solid #19576c; color: #bfeaf3; }
.chat-input-wrap input { flex: 1; min-width: 0; padding: 10px 11px; outline: none; border: 0; background: transparent; color: #e4f7fb; font-size: 12px; }
.chat-input-wrap input::placeholder { color: #7395a5; }
.send-button { min-width: 47px; font-size: 23px; }

.users-panel { display: flex; flex-direction: column; overflow: hidden; }
.users-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-height: 57px; padding: 13px 12px; border-bottom: 1px solid #206176; }
.users-icon { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; }
.users-heading h3 { font: 800 12px Arial, sans-serif; margin: 0; white-space: nowrap; }
.users-heading small { color: #87a9b9; font-size: 10px; }
.users-list { padding: 6px 12px; flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: #1c6678 #061a25; }
.user { display: flex; align-items: center; gap: 8px; padding: 11px 3px; font: 12px Arial, sans-serif; border-bottom: 1px solid #1d4f60; }
.user .status { display: block; flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #49ec90; box-shadow: 0 0 6px #43eba14a; }
.user .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user .crown { color: var(--orange); font-size: 17px; }
.user-status { padding: 8px 9px; text-align: center; color: #76abbe; font-size: 9px; overflow-wrap: anywhere; border-top: 1px solid #15465a; }
.settings-button { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 9px 11px 11px; padding: 11px; min-height: 42px; border: 1px solid #28798c; background: #0a2a38; color: #d0edf5; font-size: 11px; }
.settings-button:hover { border-color: var(--orange); color: #ffd597; }
.settings-icon { font: normal 19px/1 Arial, sans-serif; }

/* Przypisanie lub zmiana nazwy przez zębatkę */
.modal-overlay { position: absolute; inset: 8px; z-index: 10; display: grid; place-items: center; padding: 20px; background: #000c; border-radius: 4px; }
.identity-dialog { width: min(100%, 410px); padding: 23px; border: 1px solid #2bb1ca; background: linear-gradient(145deg,#103442,#041720); box-shadow: 0 20px 55px #000b, 0 0 20px #00bede17; }
.dialog-kicker { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; color: var(--orange); }
.identity-dialog h3 { font: 900 20px Arial, sans-serif; margin: 9px 0; }
.identity-dialog p { color: #adc8d3; font-size: 11px; line-height: 1.7; }
.identity-dialog label { display: block; margin: 18px 0 7px; font-size: 10px; color: #8cd0de; font-weight: 800; }
.identity-dialog input { width: 100%; padding: 11px; background: #061d29; color: white; border: 1px solid #28788c; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.dialog-actions button { padding: 10px 12px; border: 1px solid var(--orange); font-weight: 800; font-size: 10px; }
.gold-button { background: #533a1b; color: #ffe0ae; }
.dark-button { background: #092a38; color: #bde6ef; border-color: #2e7084 !important; }
.dialog-error { min-height: 18px; margin-top: 9px; color: #ffb36c; font-size: 11px; }
.dialog-foot { padding-top: 12px; border-top: 1px solid #21556a; color: #78a0ae; font-size: 9px; letter-spacing: .5px; }

@media (max-width: 1000px) and (min-width: 761px) {
  .tablet { width: calc(100vw - 28px); }
  .chat-top { padding: 10px 22px; }
  .columns { grid-template-columns: 152px minmax(0,1fr) 165px; gap: 8px; padding: 9px; }
  .left-panel { padding: 15px 6px; }
  .room-nav button { font-size: 10px; padding: 10px 6px; gap: 5px; }
  .chat-word { font-size: 18px; }
  .chat-word span { font-size: 9px; }
  .chat-brand { padding-right: 12px; }
  .users-heading { padding: 12px 7px; gap: 3px; }
  .users-heading h3 { font-size: 10px; }
  .users-list { padding: 5px 7px; }
  .user { font-size: 10px; padding: 10px 1px; gap: 6px; }
  .room-heading { padding: 12px; }
  .message { padding: 9px 10px; }
}

@media (max-width: 760px) {
  body { display: block; padding: 0; }
  .tablet { height: 100dvh; width: 100vw; min-height: 540px; padding: 4px; border-radius: 0; border-width: 0; box-shadow: none; }
  .tablet::before { inset: 4px; }
  .frame-corner { width: 23px; height: 18px; }
  .corner-tl { top: 3px; left: 3px; }.corner-tr { top: 3px; right: 3px; }
  .corner-bl { bottom: 3px; left: 3px; }.corner-br { bottom: 3px; right: 3px; }
  .login-center { padding: 24px 13px 45px; }
  .emblem-large { width: 76px; height: 88px; }
  .logo-word { font-size: 38px; letter-spacing: 3px; }
  .logo-word span { font-size: 17px; letter-spacing: 1.5px; }
  .three-slashes { font-size: 22px; margin: 6px 0 18px; }
  .secure-banner { font-size: 15px; letter-spacing: .7px; gap: 7px; padding: 11px 6px; }
  .lock-icon { width: 20px; height: 22px; }
  .login-form { gap: 6px; margin-top: 25px; min-height: 52px; }
  .password-field { gap: 8px; padding: 7px 8px; }
  .password-field input { font-size: 14px; }
  .key-icon { width: 22px; height: 22px; }
  .arrow-button { min-width: 48px; font-size: 24px; }
  .login-bottom { bottom: 22px; font-size: 9px; letter-spacing: .6px; }
  .diag-code { display: none; }.fake-map { opacity: .15; width: 60%; }.hex-blocks { opacity: .15; }
  .chat-top { height: 67px; min-height: 67px; gap: 9px; padding: 8px 13px; }
  .emblem-small { width: 29px; height: 39px; }
  .chat-brand { gap: 5px; padding-right: 9px; }
  .chat-word { font-size: 15px; letter-spacing: 0; }.chat-word span { font-size: 7px; letter-spacing: .5px; }
  .chat-top-title h2 { font-size: clamp(12px, 3.3vw, 18px); letter-spacing: 0; }
  .header-subtitle { font-size: 7px; letter-spacing: 0; }
  .top-slashes { display: none; }
  .columns { grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(0,1fr) auto; gap: 6px; padding: 6px; }
  .left-panel { display: block; padding: 6px; }
  .side-title, .left-watermark, .left-bottom { display: none; }
  .room-nav { display: flex; flex-direction: row; gap: 3px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .room-nav button { flex: 0 0 auto; width: auto; padding: 8px; font-size: 10px; }
  .channel-symbol { width: auto; font-size: 12px; }
  .room-heading { min-height: 51px; padding: 9px 12px; gap: 8px; }
  .room-icon { width: 24px; height: 24px; }
  .room-heading h3 { font-size: 14px; }
  .room-heading p { font-size: 9px; }
  .messages { padding: 9px; gap: 7px; }
  .message { padding: 9px 10px; }
  .message .author { font-size: 11px; }.message .body { font-size: 11px; }
  .message time { font-size: 9px; }
  .message-form { min-height: 51px; padding: 7px; gap: 5px; }
  .message-icon { width: 31px; height: 32px; padding: 7px; }
  .chat-input-wrap input { padding: 8px; font-size: 12px; }
  .send-button { min-width: 40px; font-size: 20px; }
  .users-panel { display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 4px 7px; min-height: 47px; }
  .users-heading { min-height: 0; padding: 3px 8px; border: 0; }
  .users-heading h3 { font-size: 11px; }
  .users-icon { width: 16px; height: 16px; }
  .users-list, .user-status { display: none; }
  .settings-button { margin: 0; padding: 6px 11px; min-height: 34px; font-size: 10px; }
  .settings-icon { font-size: 16px; }
  .identity-dialog { padding: 17px; }
}
@media (max-width: 360px) {
  .room-nav button { padding: 7px 5px; font-size: 9px; gap: 3px; }
  .chat-word { font-size: 13px; }
  .chat-top-title h2 { font-size: 12px; }
  .login-bottom { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) { .scanline { animation: none; } }