/* Кантина — styles lifted from the original chatname.ru frames
   (left.html / right.html / down.html). Colours, fonts and control metrics are
   reproduced verbatim. */

html, body { margin: 0; padding: 0; }

/* original scrollbar palette (IE/Win attributes -> webkit equivalents) */
* {
  scrollbar-face-color: #000000;
  scrollbar-shadow-color: #000000;
  scrollbar-highlight-color: #000000;
  scrollbar-3dlight-color: #808080;
  scrollbar-darkshadow-color: #808080;
  scrollbar-track-color: #292421;
  scrollbar-arrow-color: #FAEBD7;
}
::-webkit-scrollbar { width: 16px; height: 16px; }
::-webkit-scrollbar-track { background: #292421; }
::-webkit-scrollbar-thumb { background: #000000; border: 1px solid #808080; }
::-webkit-scrollbar-button {
  background: #000000; border: 1px solid #808080;
  display: block; height: 16px; width: 16px;
}
::-webkit-scrollbar-corner { background: #000000; }

/* ====== overall 3-region layout (mirrors frameset rows="*,50" / cols="*,230") */
#wrap { display: flex; flex-direction: column; height: 100vh; background: #000000; }
#top  { display: flex; flex: 1 1 auto; min-height: 0; }

/* ---- leftFrame : the conversation -------------------------------------- */
#chat {
  flex: 1 1 auto; min-width: 0; overflow-y: scroll; overflow-x: hidden;
  background: #000000; color: #DAA520;
  font-family: "Times New Roman", serif; font-size: 16px;
  padding: 0 4px;
}
#chat .title { text-align: center; margin: 16px 0; }
#chat a.leftnik { text-decoration: none; }
#chat a.leftnik:hover { text-decoration: none; }
#chat a.ssylka { text-decoration: none; color: #DAA520; }
#chat a.ssylka:hover { text-decoration: underline; color: #DAA520; }
#chat img { vertical-align: middle; border: 0; }

/* Messages addressed to me (a mention or an incoming private) stand out with a
   warm gold highlight. box-decoration-break keeps the tint on every wrapped line. */
.cz-hit {
  background: rgba(255, 200, 60, 0.16);
  box-shadow: -3px 0 0 0 #FFC83C, 3px 0 0 0 rgba(255, 200, 60, 0.16);
  border-radius: 2px;
  padding: 1px 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---- rightFrame : logo, user list, admin ------------------------------- */
#side {
  width: 230px; flex: 0 0 230px; overflow-y: auto; overflow-x: hidden;
  background: #000000; color: #DAA520; padding: 2px;
  box-sizing: border-box;
}
#side .newsbox { text-align: center; }
#side .newsbox img { display: inline-block; }
#side hr { color: #DAA520; background: #DAA520; height: 1px; border: 0; width: 95%; }
#side .admin { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #DAA520; }
#side .admin b { font-weight: bold; }

/* the grey-bordered section header bar ("Сейчас в чате N чел:" / "Смайлики") */
.barhead { width: 100%; border-collapse: separate; border-spacing: 1px; background: #808080; }
.barhead td.t { height: 19px; background: #000000; text-align: center; }
.barhead td.t .lbl { font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: bold; color: #DEB887; }
.barhead td.x { width: 1%; background: #000000; }
.barhead a.close { color: #DEB887; text-decoration: none; font-weight: bold; padding: 0 3px; }
.barhead a.close:hover { color: #DEB887; text-decoration: none; }

/* user rows — spaced apart vertically like the original sidebar */
.userrow { width: 100%; border-collapse: collapse; margin-bottom: 9px; }
.userrow td { padding: 0; vertical-align: middle; }
.userrow td.av { width: 1%; }
.userrow td.av img { display: block; border: 0; }
.userrow td.nk { width: 96%; padding-left: 6px; }
.userrow td.ig { width: 1%; padding-right: 2px; }
a.kontactnik { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; color: #DAA520; }
a.kontactnik:hover { color: #FAFAD2; text-decoration: underline; }
a.gr { color: #FAEBD7; text-decoration: none; font-family: Verdana, sans-serif; font-size: 12px; }
a.gr:hover { color: #FAEBD7; text-decoration: none; }

/* shame stars + mute badge + mod action links */
.userrow .stars { color: #FF8C00; font-size: 11px; letter-spacing: -1px; }
.userrow .muted { color: #888; font-size: 10px; font-family: Verdana, sans-serif; }
.userrow .dr { font-size: 11px; }
.userrow td.modacts { white-space: nowrap; text-align: right; }
.userrow td.modacts a.ma { color: #FFD700; text-decoration: none; font-family: Arial, sans-serif; font-size: 11px; padding: 0 2px; }
.userrow td.modacts a.ma:hover { color: #FAFAD2; text-decoration: underline; }

/* smiley picker grid (injected into the sidebar) */
#smbox { text-align: center; }
#smbox a { cursor: pointer; }
#smbox img { vertical-align: middle; border: 0; margin: 1px; }

/* ---- downFrame : input row + toolbar ----------------------------------- */
#bottom {
  flex: 0 0 auto; min-height: 50px; background: #000000; color: #FFD700;
  padding-top: 8px; padding-bottom: 2px;
}
#bottom form { margin: 0; }
.downmenu { font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-decoration: none; color: #FFD700; }
a.downmenu { font-family: Arial, Helvetica, sans-serif; font-size: 13px; text-decoration: none; color: #FFD700; }
a.downmenu:hover { color: #FAFAD2; text-decoration: underline; }
.toolbar { text-align: center; font-family: Arial, sans-serif; font-size: 13px; color: #DAA520; padding-top: 2px; }

select.name, input.name {
  font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif; font-weight: bold; font-size: 12px;
  background: #000000; color: #DEB887;
  border: 1px solid #DAA520;
}
select.name { width: 160px; height: 20px; }
input.name { height: 18px; }
#outxx { width: 500px; } /* desktop conversation input (mobile overrides to fill width) */
select.name:focus, input.name:focus { color: #DEB887; border-color: #FFD700; background: #000000; outline: none; }
input.ok {
  font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif; font-weight: bold; font-size: 12px;
  background: #000000; color: #DEB887; border: 1px solid #DAA520;
  width: 30px; height: 18px; cursor: pointer;
}
input.ok:active { color: #515151; border-color: #FFD700; }
.inrow td { vertical-align: middle; }

/* =======================================================================
   MOBILE / PWA — desktop & tablet (>=768px) stay pixel-identical to the
   original; phones (<=767px) and the installed app get an adapted layout.
   Everything below is inert on desktop. */

/* chrome that only exists on the small layout — hidden by default */
#mtop, #sideBackdrop, #modal { display: none; }

/* ---- full-screen modal (replaces window.open popups on mobile/standalone) */
#modal {
  position: fixed; inset: 0; z-index: 1000; flex-direction: column;
  background: #000000;
}
body.modal-open { overflow: hidden; }
body.modal-open #modal { display: flex; }
#modalBar {
  flex: 0 0 auto; height: 46px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 12px; background: #000000; border-bottom: 1px solid #DAA520;
  font-family: Arial, Helvetica, sans-serif;
}
#modalTitle { color: #DEB887; font-weight: bold; font-size: 15px; }
#modalClose {
  background: #000000; color: #FFD700; border: 1px solid #DAA520; border-radius: 4px;
  font-size: 18px; line-height: 1; width: 38px; height: 32px; cursor: pointer;
}
#modalFrame { flex: 1 1 auto; width: 100%; border: 0; background: #000000; }

/* the in-drawer action menu + its left drawer (mobile only) — hidden on desktop */
#sideMenu { display: none; }
#sideLeft { display: none; }

/* gold credit coin mark used next to the wallet balance */
.coin { width: 1.05em; height: 1.05em; vertical-align: -0.16em; }

@media (max-width: 767px) {
  html, body { -webkit-text-size-adjust: 100%; overflow-x: hidden; } /* no stray sideways scroll */
  body { -webkit-tap-highlight-color: rgba(218,165,32,.25); }
  #wrap { height: 100vh; height: 100dvh; }

  /* generic helpers so the popup pages reflow inside the modal */
  .cols { flex-direction: column !important; gap: 0 !important; }
  .palette { grid-template-columns: repeat(9, 1fr) !important; }
  .scrollx { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ===== CHAT PAGE =================================================== */
  /* fixed top bar with the drawer toggle + online count */
  body.chatpage #mtop {
    display: flex; align-items: center; justify-content: space-between;
    position: fixed; top: 0; left: 0; right: 0; height: 46px; z-index: 40;
    background: #000000; border-bottom: 1px solid #DAA520; padding: 0 8px;
    font-family: Arial, Helvetica, sans-serif;
    padding-top: env(safe-area-inset-top); height: calc(46px + env(safe-area-inset-top));
  }
  #mtop button {
    background: #000000; color: #FFD700; border: 1px solid #DAA520; border-radius: 4px;
    height: 34px; min-width: 44px; font-size: 17px; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    font-family: Arial, sans-serif;
  }
  #mtop #mTitle { color: #DAA520; font-weight: bold; font-size: 15px; }
  #mtop #mUsers { font-size: 14px; padding: 0 10px; }

  body.chatpage #top { box-sizing: border-box; padding-top: calc(46px + env(safe-area-inset-top)); }
  body.chatpage #chat { font-size: 16px; }
  body.chatpage #chat .title { margin: 8px 0; }

  /* right sidebar becomes an off-canvas drawer (the burger menu) */
  body.chatpage #side {
    position: fixed; top: 0; right: 0; height: 100%;
    width: min(86vw, 320px); flex: none; overflow-y: auto;
    transform: translateX(100%); transition: transform .25s ease;
    z-index: 60; border-left: 1px solid #DAA520; box-shadow: -6px 0 20px rgba(0,0,0,.7);
    padding: 10px 10px calc(16px + env(safe-area-inset-bottom));
    padding-top: calc(10px + env(safe-area-inset-top));
  }
  body.chatpage.side-open #side { transform: none; }
  body.chatpage #sideBackdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55); }
  body.chatpage.side-open #sideBackdrop,
  body.chatpage.left-open #sideBackdrop { display: block; }

  /* right drawer holds the logo + user list + smileys — the actions and the
     admin block live in the left drawer / are dropped here on phones. */
  body.chatpage #side > hr,
  body.chatpage #side > br,
  body.chatpage #side #adminBox { display: none; }

  /* left off-canvas drawer: the action menu (бар, магазин, настройки …) */
  body.chatpage #sideLeft {
    display: block;
    position: fixed; top: 0; left: 0; height: 100%;
    width: min(78vw, 290px); overflow-y: auto;
    transform: translateX(-100%); transition: transform .25s ease;
    z-index: 60; border-right: 1px solid #DAA520; box-shadow: 6px 0 20px rgba(0,0,0,.7);
    background: #000000; color: #DAA520;
    padding: 10px 10px calc(16px + env(safe-area-inset-bottom));
    padding-top: calc(46px + env(safe-area-inset-top));
  }
  body.chatpage.left-open #sideLeft { transform: none; }
  body.chatpage #sideLeft #sideMenu { display: block; margin-top: 0; border-top: 0; }

  /* bigger tap targets in the user list / smiley grid */
  a.kontactnik { font-size: 15px; }
  .userrow { margin-bottom: 13px; }
  .userrow td.modacts a.ma { font-size: 15px; padding: 0 6px; }
  #smbox img { transform: scale(1.15); margin: 4px; }

  /* the toolbar moves into the drawer; the bottom keeps only the input row */
  body.chatpage .toolbarrow { display: none !important; } /* beats the id-heavy #bottom #form1 td rule */
  body.chatpage #sideMenu { display: block; }

  /* input row: nick label drops, input fills the width */
  body.chatpage #bottom { padding-bottom: calc(4px + env(safe-area-inset-bottom)); }
  #bottom #form1 > table { width: 100%; }
  #bottom #form1 > table > tbody > tr > td { display: block; width: 100%; }
  #inputControls { width: 100%; }
  #inputControls > tbody { display: block; width: 100%; }
  #inputControls > tbody > tr { display: flex; align-items: center; gap: 6px; width: 100%; }
  #inputControls > tbody > tr > td { padding: 0; }
  #myNick { display: none; }
  #tip { flex: 0 0 auto; width: 96px; height: 38px; }
  #outxx {
    flex: 1 1 auto; width: auto !important; min-width: 0; height: 38px;
    font-size: 16px; box-sizing: border-box; /* >=16px keeps iOS from zooming on focus */
  }
  #okCell { flex: 0 0 auto; width: auto !important; }
  #okCell > table { width: auto; }
  #okCell > table > tbody > tr:first-child { display: none; } /* drop the 1px spacer row */
  #okCell .ok { width: 50px; height: 38px; font-size: 14px; }

  /* ===== ENTRANCE (login) =========================================== */
  /* stack the sidebar (logo + news + menu) above the greeting so it's all visible */
  body.entrance #top { flex-direction: column; overflow-y: auto; }
  body.entrance #chat { flex: none; overflow: visible; }
  body.entrance #side { order: -1; width: auto; flex: none; padding: 8px 8px 4px; }
  body.entrance #side .newswin, body.entrance #side .menu,
  body.entrance #side .barhead { max-width: 460px; margin-left: auto; margin-right: auto; }
  body.entrance #login input.name { width: 150px; }
}

/* notifications opt-in pill (shown until permission granted) */
a.notifBtn.downmenu { color: #7CFC00; }
a.notifBtn.downmenu:hover { color: #b6ff8a; }

/* ignored user marker + unread-mail highlight on the «sms» link */
.userrow td.ig a.gr.ign { color: #FF6347; }
a.downmenu.smsnew { color: #7CFC00; font-weight: bold; }

/* language switcher (RU | UK) */
.langsw { font-family: Arial, Helvetica, sans-serif; font-size: 13px; }
.langsw a { color: #DAA520; text-decoration: none; font-weight: bold; padding: 0 4px; cursor: pointer; }
.langsw a.on { color: #FFD700; text-decoration: underline; }
.langsw a:hover { color: #FAFAD2; }
.langsw .sep { color: #5a4a20; }
/* sidebar variant: small, centred, Cantina style.
   On the entrance page the sidebar is a flex column so margin-top:auto
   pushes the switcher down into the empty space below the admin block. */
.langsw.side { font-size: 11px; text-align: center; padding: 12px 0; }
body.entrance #side { display: flex; flex-direction: column; }
body.entrance .langsw.side { margin-top: auto; }

/* in-drawer action menu (mobile burger): a vertical list of the toolbar actions */
#sideMenu { margin-top: 4px; border-top: 1px solid #5a4a20; padding-top: 4px; }
#sideMenu a { display: block; color: #FFD700; text-decoration: none; font-family: Arial, Helvetica, sans-serif;
  font-size: 15px; padding: 10px 6px; border-bottom: 1px solid #161616; }
#sideMenu a:active { color: #FAFAD2; background: #161208; }
#sideMenu a.smsnew { color: #7CFC00; font-weight: bold; }
#sideMenu a.notifBtn { color: #7CFC00; }
#sideMenu a.danger { color: #FF8C00; }

/* ---- shop: faction badge + premium nick effects --------------------------- */
/* the little faction icon shown next to a nick in the list and in messages */
.facic { font-size: 13px; line-height: 1; }
.facic img { vertical-align: middle; border: 0; }

/* purchasable nick effects. The nick text sits in a child <font> with an inline
   colour; text-shadow inherits so glow/neon/frost just work, while the gradient
   effects (rainbow/holo) must force the fill transparent on the <font> too. */
.fx { display: inline-block; }
.fx-glow, .fx-glow font { text-shadow: 0 0 5px currentColor, 0 0 9px currentColor; }
.fx-neon, .fx-neon font { text-shadow: 0 0 3px #fff, 0 0 7px currentColor, 0 0 12px currentColor; }
.fx-neon { animation: fx-flicker 2.6s infinite; }
@keyframes fx-flicker { 0%,16%,20%,52%,56%,100% { opacity: 1; } 18%,54% { opacity: .55; } }
.fx-frost, .fx-frost font { color: #bfe6ff !important; text-shadow: 0 0 5px #7fd3ff, 0 0 10px #4aa8e0; }
.fx-rainbow, .fx-holo {
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; animation: fx-slide 4s linear infinite;
}
.fx-rainbow font, .fx-holo font { -webkit-text-fill-color: transparent; color: transparent; }
.fx-rainbow { background-image: linear-gradient(90deg,#ff4d4d,#ffb24d,#ffe14d,#4dff88,#4dd2ff,#b24dff,#ff4d4d); }
.fx-holo { background-image: linear-gradient(90deg,#7fffd4,#88c0ff,#d0a0ff,#7fffd4); animation-duration: 3s; }
@keyframes fx-slide { to { background-position: 200% center; } }