/* Shared retro (late-2000s) component styles. Layout is done with Tailwind utilities in the HTML.
   Selectors are prefixed with `body` so they win over Tailwind's preflight reset. */

:root {
  --orange-hi: #ffc21a;
  --orange-lo: #f47a00;
  --link: #2a5db0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  line-height: 1.25;
  color: #000;
  background: #fff;
}

/* ---------- Buttons ---------- */
body .btn {
  display: inline-block;
  padding: 2px 14px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  color: #000;
  background: linear-gradient(#fdfdfd, #cfcfcf);
  border: 1px solid #8a8a8a;
  border-radius: 2px;
  cursor: pointer;
}
body .btn:hover { background: linear-gradient(#fff, #e4e4e4); }
body .btn-white { background: #fff; }
body .btn-dark { color: #fff; background: linear-gradient(#5a5a5a, #000 55%); border-color: #000; }
body .btn-dark:hover { background: linear-gradient(#777, #222 55%); }
body .btn-orange { background: linear-gradient(var(--orange-hi), var(--orange-lo)); border-color: #d96a00; }
body .btn-orange:hover { background: linear-gradient(#ffd24d, #ff8a14); }
body .btn[disabled] { color: #aaa; cursor: default; }

/* ---------- Bars & panels ---------- */
body .gloss { background: linear-gradient(#f4f4f4, #bfbfbf); border: 1px solid #b5b5b5; }
body .gloss-soft { background: linear-gradient(#fff, #e3e3e3); }
body .panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 6px;
  font-weight: bold;
  color: #fff;
  background: #000;
}
body .panel-head a { font-weight: normal; font-size: 11px; color: #fff; }
body .panel-head a:hover { text-decoration: underline; }

body .nav-link {
  padding: 0 17px;
  font-size: 15px;
  font-weight: bold;
  line-height: 30px;
  color: #000;
  border-right: 1px solid #a3a3a3;
  box-shadow: 1px 0 0 #f1f1f1;
  white-space: nowrap;
}
body .nav-link:hover, body .nav-link.is-active { background: linear-gradient(#fff, #d6d6d6); }

/* ---------- Thumbnails ---------- */
/* Generic "signal" placeholder. Replace by putting an <img> inside the thumb. */
body .thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid #9a9a9a;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cg fill='none' stroke='%23a3a3a3' stroke-width='2.5'%3E%3Cpath d='M23 14a13 13 0 0 0 0 20M41 14a13 13 0 0 1 0 20M16 8a22 22 0 0 0 0 32M48 8a22 22 0 0 1 0 32'/%3E%3C/g%3E%3Ccircle cx='32' cy='24' r='5' fill='%23a3a3a3'/%3E%3C/svg%3E") center / 75% no-repeat,
    linear-gradient(#dedede, #b9b9b9);
}
body .thumb img { width: 100%; height: 100%; object-fit: cover; }
body .thumb-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2px 3px;
  font-size: 11px;
  font-weight: bold;
  color: #fff;
  background: rgba(0, 0, 0, .78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body .live-badge {
  position: absolute;
  left: 3px; top: 3px;
  padding: 0 2px;
  font-size: 8px;
  font-weight: bold;
  line-height: 9px;
  letter-spacing: .3px;
  color: #000;
  background: #fff;
  border: 1px solid #000;
}

/* ---------- Placeholders for your own artwork ---------- */
body .ph {
  display: grid;
  place-items: center;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #888;
  border: 1px dashed #999;
}

/* ---------- Chunky old-school scrollbars ---------- */
body .scroll-retro { scrollbar-color: #2b2b2b #c9c9c9; }
body .scroll-retro::-webkit-scrollbar { width: 14px; height: 14px; }
body .scroll-retro::-webkit-scrollbar-track { background: #c9c9c9; border-radius: 7px; }
body .scroll-retro::-webkit-scrollbar-thumb { background: #2b2b2b; border-radius: 7px; border: 2px solid #c9c9c9; }

/* ---------- Profile theme (per-user customisable: override the variables) ---------- */
body .pf {
  --pf-bg: #000;
  --pf-head: #2f6bff;
  --pf-text: #4d8dff;
  padding: 10px;
  color: var(--pf-text);
  background: var(--pf-bg);
}
body .pf h2, body .pf h3, body .pf b, body .pf dt { font-weight: bold; color: var(--pf-head); }
body .pf h2, body .pf h3 { font-size: 13px; }
body .pf a { color: var(--pf-head); text-decoration: underline; }
body .pf a:hover { color: #fff; }
body .pf .ph { border-color: #555; color: #777; }

/* Yellow-green buttons used in the sign-up dialog */
body .btn-lime {
  padding: 3px 0;
  color: #fff;
  background: linear-gradient(#dfe22a, #b3b800 50%, #a1a600);
  border-color: #8f9400;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
body .btn-lime:hover { background: linear-gradient(#eef04a, #c4c900 50%, #b0b500); }

/* ---------- Channel page: broadcaster controls ---------- */
body .ctl {
  height: 22px;
  padding: 0 8px;
  font-size: 9px;
  font-weight: bold;
  letter-spacing: .4px;
  color: #444;
  background: linear-gradient(#fff, #dcdcdc);
  border: 1px solid #a9a9a9;
  border-radius: 2px;
  white-space: nowrap;
}
body .ctl:hover:not(:disabled) { background: linear-gradient(#fff, #ececec); color: #000; }
body .ctl:disabled { color: #aaa; cursor: default; }

/* ---------- Channel page: chat ---------- */
body .chat-line { font-size: 14px; line-height: 19px; padding-left: 10px; text-indent: -10px; overflow-wrap: anywhere; }
body .chat-line b { color: #111; }
body .chat-system { font-size: 12px; font-style: italic; color: #777; }
body .chat-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 20px;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(#5a5a5a, #2b2b2b);
  border-radius: 5px;
  white-space: nowrap;
}
body .chatter { display: flex; align-items: center; gap: 4px; padding: 1px 2px; font-size: 12px; }
body .chatter-avatar {
  flex: none;
  width: 20px;
  height: 20px;
  border: 1px solid #a5a000;
  border-radius: 2px;
  background: linear-gradient(#f3ee6a, #c9c300); /* AVATAR PLACEHOLDER */
}
body .chatter-name { flex: 1; min-width: 0; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .chatter-pick { cursor: pointer; background: #fff6c2; outline: 1px solid #d9b400; }
body .chatter-pick:hover { background: #ffe873; }

/* ---------- Channel page: chat tools and icons ---------- */
body .tool {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  color: #fff;
  background: linear-gradient(#6a6a6a, #2b2b2b);
  border: 1px solid #1c1c1c;
  border-radius: 4px;
}
body .tool svg { width: 17px; height: 17px; }
body .tool:hover { background: linear-gradient(#858585, #3d3d3d); }
body .tool.on { background: linear-gradient(var(--orange-hi), var(--orange-lo)); border-color: #b35900; }
body #chat-log .chat-line { font-size: var(--chat-size, 14px); line-height: 1.36; }
body .chat-time { display: none; font-size: .78em; color: #888; }
body .show-times .chat-time { display: inline; }
/* Default avatar: a plain face. Replace with member pictures once uploads exist. */
body .chatter-avatar {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%236b6600' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M7 7.500v1.500M13 7.500v1.500M6.500 12.500c2 2 5 2 7 0'/%3E%3C/g%3E%3C/svg%3E") center / 100% no-repeat,
    linear-gradient(#f6f17a, #cfc900);
}

/* ---------- Channel page: roles, statuses, moderation ---------- */
body .role-owner .chatter-name { color: #0b2a8a; font-weight: bold; }   /* broadcaster: dark blue */
body .role-op .chatter-name { color: #2f93e0; font-weight: bold; }      /* chat operators: light blue */
body .chat-op { background: #e3f1ff; box-shadow: -2px 0 0 #e3f1ff, 2px 0 0 #e3f1ff; }  /* operator messages */
body .chat-owner b { color: #0b2a8a; }

/* Status icons next to each name. Online is the plain yellow face. */
body .chatter-avatar.st-away {
  border-color: #8a8a8a;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%23555' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='10' r='6'/%3E%3Cpath d='M10 6.500V10l2.500 1.500'/%3E%3C/g%3E%3C/svg%3E") center / 100% no-repeat,
    linear-gradient(#eee, #bdbdbd);
}
body .chatter-avatar.st-dnd {
  border-color: #8f0000;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.500 10h9' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% no-repeat,
    linear-gradient(#ff5a4d, #c40000);
}

body .status-menu {
  position: absolute;
  right: 4px;
  bottom: 100%;
  z-index: 20;
  width: 142px;
  padding: 3px;
  background: #fff;
  border: 1px solid #777;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
body .status-menu button { display: flex; align-items: center; gap: 6px; width: 100%; padding: 3px; font-size: 12px; text-align: left; }
body .status-menu button:hover { background: #e3f1ff; }

body .chatter-click { cursor: pointer; }
body .chatter-click:hover { background: #dcdcdc; }
body .chatter-actions { display: flex; gap: 2px; padding: 2px; background: #cfcfcf; }
body .chatter-actions button {
  flex: 1;
  padding: 1px 0;
  font-size: 10px;
  font-weight: bold;
  background: linear-gradient(#fff, #dcdcdc);
  border: 1px solid #999;
  border-radius: 2px;
}
body .chatter-actions button:hover { background: #fff; }
body .unban { flex: none; padding: 0 3px; font-size: 10px; color: #2a5db0; text-decoration: underline; }
body #ban-box:not(.hidden) { display: flex; }

/* ---------- People page ---------- */
body .member { display: flex; align-items: center; gap: 8px; padding: 4px; border: 1px solid transparent; }
body .member:hover { background: #f2f2f2; border-color: #ccc; }