:root {
    --main-background: #000000;
    --main-color: #d9d9d9;
    --sidebar-background: #10151c;
    --expander-background: #1e2530;
    --expander-background-hover: #2d3748;
    --button-background: #3a4270;
    --button-background-hover: #525db5;
    --button-border: #10151c;
    --danger-button-background: #b91c1c;
    --danger-button-background-hover: #dc2626;
    --danger-button-border: #10151c;
    --green: #45ff90;
    --gray: #94a3b8;
    --red: #ff5e5e;
  }


html {
  scrollbar-color: #4a5568 transparent;
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

body {
  display: grid;
  grid-template-rows: auto 1fr max-content;
  grid-template-columns: max-content 1fr max-content;
  font-family: Inconsolata, Consolas, Monaco, "Ubuntu Mono", monospace;
  font-size: 14px;
  background: var(--main-background);
  color: var(--main-color);
}

noscript {
  display: block;
  margin: 0 auto;
  max-width: 600px;
  grid-column-start: 2;
}

button {
  background: var(--button-background);
  transition: background 0.25s linear, box-shadow 0.18s ease;
  color: var(--button-color);
  padding: 0.25rem 0.5rem;
  border-style: solid;
  border-color: var(--button-border);
  border-width: 1px;
  font-size: 0.8rem;
  cursor: pointer;
  border-radius: 3px;
}

button:hover {
  background: var(--button-background-hover);
  box-shadow: 0 0 8px rgba(90, 98, 160, 0.35);
}

button.danger {
  background: var(--danger-button-background);
  color: var(--danger-button-color);
  border-color: var(--danger-button-border);
}

button.danger:hover {
  background: var(--danger-button-background-hover);
  box-shadow: 0 0 12px rgba(220, 38, 38, 0.45);
}

#buffer, #connect {
  color: var(--main-color);
  background: var(--main-background);
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

#buffer-list, #member-list {
  color: var(--main-color);
  background: #090909;
  width: auto;
  height: auto;
  grid-column: 1;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: row;
}


@media (min-width: 640px) {
  #buffer-list, #member-list {
    max-width:100px;
  }
  #buffer .logline:not(.talk) {
    text-indent:8ch;
    color: var(--gray);
  }
  #buffer .logline:not(.talk) .timestamp:first-child {
    text-indent:0ch;
    float:left;
    position: static;
    display: inline;
    padding-right: 0.5em;
  }
}

@media (max-width: 640px) {
  #buffer .logline:not(.talk) {
    padding-left:9ch!important;
    text-indent:-1ch;
    color: var(--gray);
  }
  #buffer .logline:not(.talk) .timestamp:first-child {
    text-indent:0ch;
    float:left;
    position: static;
    display: inline;
    padding-right: 0.5em;
  }
  /* Server / status buffer */
  #buffer .logline-list[data-buffer-type="server"] .logline {
    margin-left:-9ch !important;
  }
}

.expander {
  display: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
  background: var(--expander-background);
  transition: background 0.2s linear;
  border: none;
  width: 10px;
}

.expander:hover {
  background: var(--expander-background-hover);
}

.expander span {
  display: block;
  width: 100%;
  height: 2px;
  margin-bottom: 2px;
  border-style: solid;
  border-width: 1px 0;
  border-color: var(--expander-border);
}

#buffer-list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex: 1 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

#buffer-list li a {
  display: inline-block;
  width: 100%;
  padding: 8px 20px 8px 15px;
  box-sizing: border-box;
  color: var(--main-color);
  text-decoration: none;
}

#buffer-list li.error a {
  color: #ff5e5e;
}

#buffer-list li.unread-message a {
  color: #56d5ff;
  font-weight: 500;
}

#buffer-list li.unread-highlight a {
  color: #bd93f9;
  font-weight: bold;
}

#buffer-list li.active a {
  color: white;
  background-color: #3c3c3c;
}

#buffer-list li:not(.type-server) a {
  padding-left: 20px;
}

#member-list-header {
  color: var(--main-color);
  background-color: var(--main-background);
  box-sizing: border-box;
  padding: 5px 10px;
  border-bottom: 1px solid var(--sidebar-background);
}

#buffer-header {
  color: var(--main-color);
  background-color: #15181d;
  box-sizing: border-box;
  border-bottom: 1px solid var(--sidebar-background);
  grid-row: 1;
  grid-column: 2;
  display: grid;
  grid-template-rows: 1fr auto;
  grid-template-columns: 1fr auto;
}

#buffer-header .title {
  display: none;
  padding: 5px 10px;
  font-weight: bold;
  grid-row: 1;
  grid-column: 1;
}

#buffer-header .description {
  background-color:#090909;
  padding: 5px 10px;
  grid-row: 2;
  grid-column: 1;
  max-height: 20vh;
  overflow-y: auto;
  overflow-wrap: break-word;
}

#buffer-header .actions {
  grid-row: 1 / 3;
  grid-column: 2;
}

#buffer-header .status-here {
  color: var(--green);
}

#buffer-header .status-gone {
  color: #ffb86c;
}

#buffer-header .status-offline {
  color: var(--red);
}

.actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.actions button {
  border-width: 0 0 0px 1px;
}

#buffer {
  grid-row: 2;
  grid-column: 2;
}

#buffer:focus {
  outline: none;
}

#member-list {
  grid-row: 1 / 4;
  grid-column: 3;

  display: flex;
  flex-direction: row;
}

#member-list > section {
  display: flex;
  flex-direction: column;
}

#member-list-header {
  border-left: 1px solid var(--sidebar-background);
}

@media (max-width: 640px) {
  #buffer-list ul {
    width: 0px;
  }
  #buffer-list.expand {
    z-index: 999;
    grid-column: 1 / 4;
  }
  #buffer-list.expand ul {
    width: auto;
  }
    #buffer-list ul {
    padding-top:50px;
    }

}

#member-list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

#member-list li a {
  display: inline-block;
  width: 100%;
  padding: 2px 10px;
  box-sizing: border-box;
}

#member-list li a.away {
  color: var(--gray);
}

.membership.owner {
  color: #e09690;
}

.membership.admin {
  color: #56d5ff;
}

.membership.operator {
  color: #cdee69;
}

.membership.halfop {
  color: #ffb86c;
}

.membership.voice {
  color: #ffe377;
}

#composer {
  color: var(--main-color);
  background: var(--main-background);
  grid-row: 3;
  grid-column: 2 / 3;
  height:37px; /* 2px of overflow for the bottom border on focus */
}

#composer input, textarea {
  display: inline;
  height: 35px;
  margin-left:5px;
  width:calc(100% - 40px);
  box-sizing: border-box;
  padding: 10px;
  resize: none;
  border: none;
  background: none;
  scrollbar-width: none;               /* hides scrollbar completely */
}

#composer > textarea::placeholder {
  font-size:0; /* remove default text */
}

#composer > textarea:focus {
  outline:none;
  height:35px;
  border-bottom: 2px solid #808080;          /* gray border */
  animation: settle-to-gray 0.2s forwards;
  scrollbar-width: none;               /* hides scrollbar completely */
}

@keyframes settle-to-gray {
  0%   { border-bottom-color: white; }
  20%  { border-bottom-color: white; }    /* hold white for ~0.12s (20% of 0.6s) */
  100% { border-bottom-color: #808080; }  /* fade to gray */
}

#composer.read-only {
  display: none;
}

#connect {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}

#connect form {
  margin: 0 auto;
  max-width: 350px;
  padding: 10px;
  box-sizing: border-box;
}

form textarea[type="text"],
form input[type="username"],
form input[type="password"],
form input[type="url"],
form input[type="email"],
form input[type="search"] {
  box-sizing: border-box;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
}

form label input[type="checkbox"], form label input[type="radio"] {
  margin-right: 0.5em;
}

a {
  color: #337ab7;
  text-decoration:none;
}

#buffer-list li a, a.timestamp, a.nick {
  text-decoration: none;
}

#buffer-list li a,
a.nick {
  color: var(--main-color);
}

a.timestamp {
  color: var(--gray);
}



details summary[role="button"] {
  user-select: none;
  cursor: pointer;
}

#buffer {
  box-sizing: border-box;
  color: var(--gray);
  word-wrap: break-word;
}

#buffer .logline-list {
  padding: 10px;
}

#buffer .logline {
  white-space: pre-wrap;
  overflow: auto;
}

#buffer .talk, #buffer .motd, #buffer .nag {
  color: var(--main-color);
}

#buffer .error {
  color: var(--red);
}

#buffer .me-tell {
  color: #ffb86c;
}

#buffer .highlight .nick {
  color: #000814;
  background-color: #ff79c6;
  border-radius: 3px;
}

#buffer .nick-1  { color: #c75646; }    /* cwf-red          ~ vivid coral red replacement */
#buffer .nick-2  { color: #e09690; }    /* cwf-lightred     ~ softer bright red */
#buffer .nick-3  { color: #b27232; }    /* cwf-brown        ~ strong orange/brown */
#buffer .nick-4  { color: #ffe377; }    /* cwf-yellow       ~ warm yellow */
#buffer .nick-16  { color: #8eb33b; }    /* cwf-green        ~ muted lime green */
#buffer .nick-5  { color: #cdee69; }    /* cwf-lightgreen   ~ fresh spring green */
#buffer .nick-8  { color: #77dfd8; }    /* cwf-lightcyan    ~ light turquoise */
#buffer .nick-14  { color: #218693; }    /* cwf-cyan         ~ deeper cyan */
#buffer .nick-9  { color: #9cd9f0; }    /* cwf-lightblue    ~ electric/light blue */
#buffer .nick-12 { color: #72b3cc; }    /* cwf-blue         ~ sky blue */
#buffer .nick-11 { color: #c8a0d1; }    /* cwf-magenta      ~ muted violet */
#buffer .nick-10 { color: #fbb1f9; }    /* cwf-lightmagenta ~ bright magenta */
#buffer .nick-13 { color: #e09690; }    /* cwf-lightred     ~ hot pink-ish fallback */
#buffer .nick-7 { color: #c75646; }    /* cwf-red          ~ strong rose fallback */
#buffer .nick-15 { color: #5d5d5d; }    /* cwf-darkgray     ~ soft neutral red replacement */
#buffer .nick-6 { color: #b0b0b0; }    /* cwf-gray         ~ peachy/neutral coral replacement */
#buffer .separator {
  display: flex;
  align-items: center;
  text-align: center;
  text-transform: lowercase;
  font-variant: small-caps;
}

#buffer .separator::before, #buffer .separator::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid transparent;
}

#buffer .date-separator {
  color: #64748b;
}

#buffer .date-separator::before, #buffer .date-separator::after {
  border-color: #373737;
}

#buffer .unread-separator {
  color: var(--green);
}

#buffer .unread-separator::before, #buffer .unread-separator::after {
  border-color: var(--green);
}

#error-msg {
  color: white;
  background-color: #c62839;
  position: fixed;
  bottom: 2rem;
  right: 0;
  padding: 0.5rem;
  margin: 0.5rem;
}

#error-msg button, .dialog button.dialog-close {
  border: none;
  background: transparent;
  color: inherit;
  font-size: inherit;
  padding: 0;
}

.error-text {
  color: #ff5e5e;
}

.dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.65);
  overflow: auto;
}

.dialog .dialog-body {
  background-color: var(--main-background);
  color: var(--main-color);
  margin: 20px auto;
  max-width: 500px;
  padding: 15px;
  border: 1px solid rgba(86, 213, 255, 0.25);
}

.dialog .dialog-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 1em;
}

.dialog .dialog-header h2 {
  flex-grow: 1;
  margin: 0;
}

.dialog .dialog-header button.dialog-close {
  font-size: 1.5em;
  padding: 0 5px;
}

.dialog h2 {
  margin-top: 0;
}

.dialog form button:not([type="button"]) {
  float: right;
}

.dialog form {
  overflow: auto;
}

.dialog .protocol-handler {
  display: flex;
  flex-direction: row;
}

.dialog .protocol-handler .left {
  flex-grow: 1;
}

kbd {
  background-color: #21262d;
  border: 1px solid #444d56;
  box-shadow: inset 0 1px 0 0 #30363d, inset 0 -2px 0 0 #161b22;
  display: inline-block;
  font-size: 80%;
  margin: 3px;
  min-width: 1em;
  text-align: center;
  white-space: nowrap;
  padding: 2px 4px;
  font-family: monospace;
  border-radius: 3px;
}

ul.switcher-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-top: 10px;
}

ul.switcher-list li a {
  display: inline-block;
  width: 100%;
  padding: 5px 10px;
  margin: 4px 0;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}

ul.switcher-list li a.selected {
  background-color: rgba(86, 213, 255, 0.12);
}

ul.switcher-list .server {
  float: right;
  opacity: 0.8;
}

@media (prefers-color-scheme: dark) {
  html {
    scrollbar-color: var(--gray) transparent;
  }

  #buffer-list li.unread-message a {
    color: var(--green);
  }

  #buffer-list li.unread-highlight a {
    color: #bd93f9;
  }

  #buffer-header .status-gone {
    color: #ffb86c;
  }

  #buffer-header .status-offline {
    color: var(--red);
  }

  form textarea[type="text"],
  form input[type="username"],
  form input[type="password"],
  form input[type="url"],
  form input[type="email"],
  form input[type="search"] {
    color: #e2e8f0;
    background: var(--sidebar-background);
    border: 1px solid #2d3748;
    padding: 0.25rem 0.375rem;
  }

  form textarea[type="text"]:focus,
  form input[type="username"]:focus,
  form input[type="password"]:focus,
  form input[type="url"]:focus,
  form input[type="email"]:focus,
  form input[type="search"]:focus {
    outline: 0;
    border-color: #56d5ff;
    box-shadow: 0 0 0 3px rgba(86, 213, 255, 0.25);
  }

  #buffer {
    background: var(--main-background);
  }

  #buffer .error {
    color: var(--red);
  }

  #buffer .me-tell {
    color: #ff79c6;
  }

  #buffer .date-separator {
    color: #64748b;
  }

  #buffer .date-separator::before,
  #buffer .date-separator::after {
    border-color: #2d3748;
  }

  #buffer .unread-separator {
    color: var(--green);
  }

  #buffer .unread-separator::before,
  #buffer .unread-separator::after {
    border-color: var(--green);
  }

  #error-msg {
    color: #0a0e14;
    background-color: #ff5e5e;
  }

  #error-msg a {
    color: #0a0e14;
  }

  .error-text {
    color: #ff5e5e;
  }

  kbd {
    background-color: #1e2530;
    border-color: #444d56;
  }

  ul.switcher-list li a.selected {
    background-color: rgba(69, 255, 144, 0.15);
  }
}

@media (max-width: 640px) {
  .expander {
    display: block;
  }
  #buffer-list ul, #member-list > section {
    width: 0px;
  }
  #buffer-list.expand, #member-list.expand {
    z-index: 999;
    grid-column-start: 1;
    grid-column-end: 4;
    width:100%!important;
  }
  #buffer-list.expand ul {
    width: auto;
    font-size:2em;
  }
  #member-list.expand > section {
    width: 100%;
  }
  #member-list-header {
    border-left: none;
  }
  #buffer-header {
    grid-template-columns: 1fr min-content;
  }
  #buffer-header .title {
    display: block;
  }

  #buffer-list > .expander {
    position:absolute;
    top:0px;
    left:0px;
    height:50px;
    width:40px;
  }

  #buffer-list > .expander svg {
    margin-top:4px;
  }
  #member-list > .expander svg {
    margin-top:3px;
    margin-left:1px;
  }  
  #buffer-list ul, a, li {
    /* this is nicks in the buffer*/
  }
  #member-list > .expander {
    position:absolute;
    top:0px;
    right:0px;
    height:50px;
    width:40px;
  }

  #member-list section ul li {
    background:solid;
    z-index:10!important;
  }
  #buffer > .logline-list {
    width:100%;
    padding-left:0px;
    padding-right:0px;
    z-index:-10;
  }
  #buffer-header {
    margin:auto;
    width:calc(100vw - 80px);
    height:50px;
  }
  /* If you actually want the opposite — styles ONLY when member-list is ABSENT */
  body:not(:has(#member-list)) #buffer-header {
    margin-left:40px;
    width:calc(100vw - 40px);
  }
  .settings-btn {
    padding-top:10px;
    font-size: 0;
    width:40px;
  }
  /* Then add icon however you prefer */
  .settings-btn::after {
    content: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='white' d='M12 21a8.985 8.985 0 0 1-1.755-.173 1 1 0 0 1-.791-.813l-.273-1.606a6.933 6.933 0 0 1-1.32-.762l-1.527.566a1 1 0 0 1-1.1-.278 8.977 8.977 0 0 1-1.756-3.041 1 1 0 0 1 .31-1.092l1.254-1.04a6.979 6.979 0 0 1 0-1.524L3.787 10.2a1 1 0 0 1-.31-1.092 8.977 8.977 0 0 1 1.756-3.042 1 1 0 0 1 1.1-.278l1.527.566a6.933 6.933 0 0 1 1.32-.762l.274-1.606a1 1 0 0 1 .791-.813 8.957 8.957 0 0 1 3.51 0 1 1 0 0 1 .791.813l.273 1.606a6.933 6.933 0 0 1 1.32.762l1.527-.566a1 1 0 0 1 1.1.278 8.977 8.977 0 0 1 1.756 3.041 1 1 0 0 1-.31 1.092l-1.254 1.04a6.979 6.979 0 0 1 0 1.524l1.254 1.04a1 1 0 0 1 .31 1.092 8.977 8.977 0 0 1-1.756 3.041 1 1 0 0 1-1.1.278l-1.527-.566a6.933 6.933 0 0 1-1.32.762l-.273 1.606a1 1 0 0 1-.791.813A8.985 8.985 0 0 1 12 21zm-.7-2.035a6.913 6.913 0 0 0 1.393 0l.247-1.451a1 1 0 0 1 .664-.779 4.974 4.974 0 0 0 1.696-.975 1 1 0 0 1 1.008-.186l1.381.512a7.012 7.012 0 0 0 .7-1.206l-1.133-.939a1 1 0 0 1-.343-.964 5.018 5.018 0 0 0 0-1.953 1 1 0 0 1 .343-.964l1.124-.94a7.012 7.012 0 0 0-.7-1.206l-1.38.512a1 1 0 0 1-1-.186 4.974 4.974 0 0 0-1.688-.976 1 1 0 0 1-.664-.779l-.248-1.45a6.913 6.913 0 0 0-1.393 0l-.25 1.45a1 1 0 0 1-.664.779A4.974 4.974 0 0 0 8.7 8.24a1 1 0 0 1-1 .186l-1.385-.512a7.012 7.012 0 0 0-.7 1.206l1.133.939a1 1 0 0 1 .343.964 5.018 5.018 0 0 0 0 1.953 1 1 0 0 1-.343.964l-1.128.94a7.012 7.012 0 0 0 .7 1.206l1.38-.512a1 1 0 0 1 1 .186 4.974 4.974 0 0 0 1.688.976 1 1 0 0 1 .664.779zm.7-3.725a3.24 3.24 0 0 1 0-6.48 3.24 3.24 0 0 1 0 6.48zm0-4.48A1.24 1.24 0 1 0 13.24 12 1.244 1.244 0 0 0 12 10.76z'/></svg>");
    font-size: 1.6rem;
  }
  #buffer-header .danger {
    font-size: 0;
    width:40px;
  }
  /* Then add icon however you prefer */
 #buffer-header .danger::after {
    content: "⨯";
    font-size: 1.6rem;
  }
  #member-list li a {
    display: inline-block;
    width: 100%;
    padding: 8px 15px;
    box-sizing: border-box;
    font-size:2em;
  }
  #member-list-header {
    font-size:2em;
    height:50px!important;
    padding-top:15px;
  }
  #buffer-header .title {
    display:none;
  }
  #buffer-header .description {
    height:40px;
    scrollbar-width: none;
  }

}

@media (pointer: none), (pointer: coarse) {
  #buffer-list li a, #member-list li a {
    padding: 7px 10px;
  }
}



.media-toggle {
  float: right;
}


.inline-media-container {
  max-width:800px;
}

.inline-media-container iframe {
  width: 100%;
  height: auto;
  max-width: 800px;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  float:left;
}

.inline-media-container img {
  float:left;
  height: auto;
  max-height: 400px;
  border-radius: 6px;
  overflow: hidden;
}

.inline-media-container video {
  width: 99%;
  float:left;
  height: auto;
  max-width: 600px!important;
  aspect-ratio: auto;
  border-radius: 6px;
}


#buffer .logline {
  position: relative !important;
  box-sizing: border-box !important;
  min-height: 1.2em !important;
  white-space: pre-wrap !important;
  overflow-wrap: break-word !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Talk lines: absolute timestamp + nick in the left gutter (desktop/default) */
#buffer .logline.talk .timestamp,
#buffer .logline.talk .nick-caret,
#buffer .logline.talk .nick {
  position: absolute !important;
  top: 0 !important;
  white-space: nowrap !important;
}

#buffer .logline.talk .timestamp {
  left: 0 !important;
  width: 7ch !important;
  text-align: left !important;
  color: var(--gray) !important;
}

#buffer .logline.talk .nick-caret {
  display: none !important; /* hides < and > */
}

#buffer .logline.talk .nick {
  left: 9ch !important; /* timestamp 7ch + 2ch gap */
  display: inline !important;
  text-align: right !important;
  min-width: 8ch !important;
  max-width: 8ch !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* message content settings */
:root {
  --text-indent-enabled: -2ch;
  --padding-left-enabled: 18ch;
  --text-indent-disabled: 16ch;
  --padding-left-disabled: 0;
  --text-indent-disabled-mobile: 7ch;
  --padding-left-disabled-mobile: 0;
  --text-indent-enabled-mobile: -2ch;
  --padding-left-enabled-mobile: 9ch;
}

/* Apply based on data attribute (only override when false) */
#buffer .logline.talk {
  text-indent: var(--text-indent-enabled) !important;
  padding-left: var(--padding-left-enabled) !important;
  padding-right: 0.5em !important;
}
#text,
[data-overflow-respects-margin="false"] #buffer .logline.talk {
  text-indent: var(--text-indent-disabled) !important;
  padding-left: var(--padding-left-disabled) !important;
  padding-right: 0.5em !important;
}

/* Reset indent on child elements so timestamp/nick aren't affected */
#buffer .logline.talk .timestamp,
#buffer .logline.talk .nick,
#buffer .logline.talk .nick-caret,
#buffer .logline.talk a:not(.timestamp):not(.nick),
#buffer .logline.talk span {
  text-indent: 0 !important;
}

@media screen and (min-width:769px) {
    /* Server / status buffer */
  #buffer .logline-list[data-buffer-type="server"] .logline {
    text-indent:-10px !important;
  }
  #buffer-header .description {
    position:relative;
    font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
    padding:0px 10px!important;
    line-height:35px!important;
    height:35px!important;
  }
  button.settings-btn:hover {
    box-shadow: none;
  }
  #buffer-header .actions .settings-btn {
    font-size:0!important;
    position:absolute!important;
    top:0;
    right:0;
    background:none;
    box-shadow: none;
    border:none;
  }
  #buffer-header .actions .settings-btn::after {
    content: url("data:image/svg+xml;utf8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path fill='white' d='M12 21a8.985 8.985 0 0 1-1.755-.173 1 1 0 0 1-.791-.813l-.273-1.606a6.933 6.933 0 0 1-1.32-.762l-1.527.566a1 1 0 0 1-1.1-.278 8.977 8.977 0 0 1-1.756-3.041 1 1 0 0 1 .31-1.092l1.254-1.04a6.979 6.979 0 0 1 0-1.524L3.787 10.2a1 1 0 0 1-.31-1.092 8.977 8.977 0 0 1 1.756-3.042 1 1 0 0 1 1.1-.278l1.527.566a6.933 6.933 0 0 1 1.32-.762l.274-1.606a1 1 0 0 1 .791-.813 8.957 8.957 0 0 1 3.51 0 1 1 0 0 1 .791.813l.273 1.606a6.933 6.933 0 0 1 1.32.762l1.527-.566a1 1 0 0 1 1.1.278 8.977 8.977 0 0 1 1.756 3.041 1 1 0 0 1-.31 1.092l-1.254 1.04a6.979 6.979 0 0 1 0 1.524l1.254 1.04a1 1 0 0 1 .31 1.092 8.977 8.977 0 0 1-1.756 3.041 1 1 0 0 1-1.1.278l-1.527-.566a6.933 6.933 0 0 1-1.32.762l-.273 1.606a1 1 0 0 1-.791.813A8.985 8.985 0 0 1 12 21zm-.7-2.035a6.913 6.913 0 0 0 1.393 0l.247-1.451a1 1 0 0 1 .664-.779 4.974 4.974 0 0 0 1.696-.975 1 1 0 0 1 1.008-.186l1.381.512a7.012 7.012 0 0 0 .7-1.206l-1.133-.939a1 1 0 0 1-.343-.964 5.018 5.018 0 0 0 0-1.953 1 1 0 0 1 .343-.964l1.124-.94a7.012 7.012 0 0 0-.7-1.206l-1.38.512a1 1 0 0 1-1-.186 4.974 4.974 0 0 0-1.688-.976 1 1 0 0 1-.664-.779l-.248-1.45a6.913 6.913 0 0 0-1.393 0l-.25 1.45a1 1 0 0 1-.664.779A4.974 4.974 0 0 0 8.7 8.24a1 1 0 0 1-1 .186l-1.385-.512a7.012 7.012 0 0 0-.7 1.206l1.133.939a1 1 0 0 1 .343.964 5.018 5.018 0 0 0 0 1.953 1 1 0 0 1-.343.964l-1.128.94a7.012 7.012 0 0 0 .7 1.206l1.38-.512a1 1 0 0 1 1 .186 4.974 4.974 0 0 0 1.688.976 1 1 0 0 1 .664.779zm.7-3.725a3.24 3.24 0 0 1 0-6.48 3.24 3.24 0 0 1 0 6.48zm0-4.48A1.24 1.24 0 1 0 13.24 12 1.244 1.244 0 0 0 12 10.76z'/></svg>");
  }
  button.danger:hover {
    box-shadow: none;
  }
  #buffer-header .actions .danger {
    font-size:0;
    position:absolute;
    top:-4px;
    right:40px;
    background:none;
    box-shadow: none;
    border:none;
  }
 #buffer-header .danger::after {
    content: "⨯";
    font-size: 1.6rem;
  }
  .joinch-btn:hover {
    box-shadow: none;
  }
  #buffer-header .joinch-btn {
    position:absolute;
    top:6px;
    right:40px;
    background:none;
    box-shadow: none;
    border:none;
  }
  #member-list {
    padding-top:35px!important;
  }
  #buffer-list {
    width:100px!important;
    padding-right:10px!important;
  }
  #buffer-list ul{
    position:relative!important;
    padding-top:35px;
    left:-42px;
    width:110%;
  }
  #buffer-list::before {
    margin-left:10px;
    content:url(/icons/favicon-32.png);
  }
  #member-list ul {
    background:black;
  }
}



@media screen and (max-width: 768px) {
  /* Hide all timestamps */
  #buffer .logline .timestamp {
    display: none !important;
  }
  div > a.timestamp {
    color:#ff000000!important;
  }
  #buffer .logline.talk {
    text-indent: var(--text-indent-enabled-mobile) !important;
    padding-left: var(--padding-left-enabled-mobile) !important;
    padding-right: 0.5em !important;
  }
  #text,
  body[data-overflow-respects-margin="false"] #buffer .logline.talk {
    text-indent: var(--text-indent-disabled-mobile) !important;      /* adjust this value to control where message text starts */
    padding-left: var(--padding-left-disabled-mobile) !important;
    padding-right: 0.5em !important;
  }
  /* Nick: absolute, flush left, fixed width, right-aligned */
  #buffer .logline.talk .nick {
    position: absolute !important;
    left: 0px !important;
    width: 8ch !important;
    max-width: 8ch !important;
    text-align: right !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    min-width: 0 !important;           /* allow shorter nicks to not force width */
  }

  /* Ensure caret stays hidden */
  #buffer .logline.talk .nick-caret {
    display: none;
  }

  #buffer .logline:not(.talk)::before {
    content: none;
  }
  .logline.motd >.timestamp {
    display:none;
  }
  #buffer .logline.motd:not(.talk) .timestamp:first-child {
    display: none;
  }
  /* Server / status buffer */
  #buffer .logline-list[data-buffer-type="server"] .logline {
    text-indent:0ch !important;
  }
  /* Server / status buffer */
  #buffer .logline-list[data-buffer-type="server"] .logline .timestamp {
    display:none !important;
  }
  #buffer a.nick {
    font-weight:bold;
  }
}

#buffer .logline .media-toggle {
  text-align: center ;
  margin: 0.5em 0 0.3em 0 ;
}

.logline:hover {
  background-color:#2e2e2e;
}

#buffer-list li a:hover, #buffer-list li a:active,
a.timestamp:hover, a.timestamp:active,
a.nick:hover, a.nick:active {
  background-color:#2e2e2e;
}

.upload-btn {
  width:35px;
  height:35px;
  float:right;
  background:none;
  border:none;
}
.upload-btn:hover {
  background:none;
  border:none;
  box-shadow:none;
}

.upload-btn svg {
  fill: #888888;  /* nice neutral grey – adjust as needed */
}

.upload-btn.uploading {
  animation: pulse-spin 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-spin {
  0%   { transform: rotate(0deg);   }
  25%  { transform: rotate(180deg); }
  50%  { transform: rotate(360deg); }
  75%  { transform: rotate(540deg); }
  100% { transform: rotate(720deg); }
}

span.ident {
  color:#5fe2ff;
}
span.joinmsg {
  color:#8eb33b;
}
span.quitmsg {
  color:#c75646;
}
span.leftmsg {
  color:#c75646;
}
span.lime {
  color: #cdee69;
}

#buffer .logline:not(.talk):has(.joinmsg)::before {
  margin-left:-3ch;
  content:"-->";
  color:#cdee69;
}
#buffer .logline:not(.talk):has(.quitmsg)::before {
  margin-left:-3ch;
  content:"<--";
  color:#c75646;
}
#buffer .logline:not(.talk):has(.leftmsg)::before {
  margin-left:-3ch;
  content:"<--";
  color:#c75646;
}

.nick-me {
  color: #ffffff!important;
  font-weight:bold!important;
}

.server-code {
  margin-right:1ch;
  color: #fbb1f9;
}
.server-nick {
  display:none!important;
}
.server-reply {
  margin-right:1ch;
  color: #b27232;
  font-weight: bold;
}
.server-reply::before {
  content:"[";
  color: #cdee69;
}
.server-reply::after {
  content:"]";
  color: #cdee69;
}


.twitter-tweet {
  contain: layout style paint;   /* or just 'layout paint' */
  contain-intrinsic-size: 550px 300px;  /* rough average tweet size; prevents parent reflow propagation */
}


blockquote.twitter-tweet {
  will-change: transform;  /* sometimes helps compositor ignore sub-iframe changes */
}




	:root {
	--color-fmt-white: white;
	--color-fmt-black: black;
	--color-fmt-blue: oklch(0.51 0.22 275.08);
	--color-fmt-green: oklch(0.57 0.17 142.17);
	--color-fmt-red: oklch(0.62 0.22 28.1);
	--color-fmt-brown: oklch(0.46 0.16 26.45);
	--color-fmt-magenta: oklch(0.7 0.28 328.4);
	--color-fmt-orange: oklch(0.7 0.15 71.15);
	--color-fmt-yellow: oklch(0.88 0.18 109.59);
	--color-fmt-light-green: oklch(from var(--color-fmt-fg-green) calc(l + 0.3) c h);
	--color-fmt-cyan: oklch(0.72 0.11 194.92);
	--color-fmt-light-cyan: oklch(from var(--color-fmt-fg-cyan) calc(l + 0.1) c h);
	--color-fmt-light-blue: oklch(from var(--color-fmt-fg-blue) calc(l + 0.3) c h);
	--color-fmt-pink: oklch(0.72 0.13 358.81);
	--color-fmt-grey: #777;
	--color-fmt-light-grey: #aaa;

	--color-fmt-fg-white: var(--color-fmt-white);
	--color-fmt-fg-black: var(--color-fmt-black);
	--color-fmt-fg-blue: var(--color-fmt-blue);
	--color-fmt-fg-green: var(--color-fmt-green);
	--color-fmt-fg-red: var(--color-fmt-red);
	--color-fmt-fg-brown: var(--color-fmt-brown);
	--color-fmt-fg-magenta: var(--color-fmt-magenta);
	--color-fmt-fg-orange: var(--color-fmt-orange);
	--color-fmt-fg-yellow: var(--color-fmt-yellow);
	--color-fmt-fg-light-green: var(--color-fmt-light-green);
	--color-fmt-fg-cyan: var(--color-fmt-cyan);
	--color-fmt-fg-light-cyan: var(--color-fmt-light-cyan);
	--color-fmt-fg-light-blue: var(--color-fmt-light-blue);
	--color-fmt-fg-pink: var(--color-fmt-pink);
	--color-fmt-fg-grey: var(--color-fmt-grey);
	--color-fmt-fg-light-grey: var(--color-fmt-light-grey);

	--color-fmt-bg-white: var(--color-fmt-white);
	--color-fmt-bg-black: var(--color-fmt-black);
	--color-fmt-bg-blue: var(--color-fmt-blue);
	--color-fmt-bg-green: var(--color-fmt-green);
	--color-fmt-bg-red: var(--color-fmt-red);
	--color-fmt-bg-brown: var(--color-fmt-brown);
	--color-fmt-bg-magenta: var(--color-fmt-magenta);
	--color-fmt-bg-orange: var(--color-fmt-orange);
	--color-fmt-bg-yellow: var(--color-fmt-yellow);
	--color-fmt-bg-light-green: var(--color-fmt-light-green);
	--color-fmt-bg-cyan: var(--color-fmt-cyan);
	--color-fmt-bg-light-cyan: var(--color-fmt-light-cyan);
	--color-fmt-bg-light-blue: var(--color-fmt-light-blue);
	--color-fmt-bg-pink: var(--color-fmt-pink);
	--color-fmt-bg-grey: var(--color-fmt-grey);
	--color-fmt-bg-light-grey: var(--color-fmt-light-grey);
}

@media (prefers-color-scheme: dark) {
	.fmt-fg:not(.fmt-bg) {
		--color-fmt-fg-blue: oklch(from var(--color-fmt-blue) calc(l + 0.2) c h);
		--color-fmt-fg-green: oklch(from var(--color-fmt-green) calc(l + 0.2) c h);
		--color-fmt-fg-brown: oklch(from var(--color-fmt-brown) calc(l + 0.2) c h);
		--color-fmt-fg-cyan: oklch(from var(--color-fmt-cyan) calc(l + 0.1) c h);
		--color-fmt-fg-grey: oklch(from var(--color-fmt-grey) calc(l + 0.2) c h);
		--color-fmt-fg-light-grey: oklch(from var(--color-fmt-light-grey) calc(l - 0.2) c h);
	}
}

.fmt-fg-white { color: var(--color-fmt-fg-white); }
.fmt-fg-black { color: var(--color-fmt-fg-black); }
.fmt-fg-blue { color: var(--color-fmt-fg-blue); }
.fmt-fg-green { color: var(--color-fmt-fg-green); }
.fmt-fg-red { color: var(--color-fmt-fg-red); }
.fmt-fg-brown { color: var(--color-fmt-fg-brown); }
.fmt-fg-magenta { color: var(--color-fmt-fg-magenta); }
.fmt-fg-orange { color: var(--color-fmt-fg-orange); }
.fmt-fg-yellow { color: var(--color-fmt-fg-yellow); }
.fmt-fg-light-green { color: var(--color-fmt-fg-light-green); }
.fmt-fg-cyan { color: var(--color-fmt-fg-cyan); }
.fmt-fg-light-cyan { color: var(--color-fmt-fg-light-cyan); }
.fmt-fg-light-blue { color: var(--color-fmt-fg-light-blue); }
.fmt-fg-pink { color: var(--color-fmt-fg-pink); }
.fmt-fg-grey { color: var(--color-fmt-fg-grey); }
.fmt-fg-light-grey { color: var(--color-fmt-fg-light-grey); }

.fmt-bg-white { background-color: var(--color-fmt-bg-white); }
.fmt-bg-black { background-color: var(--color-fmt-bg-black); }
.fmt-bg-blue { background-color: var(--color-fmt-bg-blue); }
.fmt-bg-green { background-color: var(--color-fmt-bg-green); }
.fmt-bg-red { background-color: var(--color-fmt-bg-red); }
.fmt-bg-brown { background-color: var(--color-fmt-bg-brown); }
.fmt-bg-magenta { background-color: var(--color-fmt-bg-magenta); }
.fmt-bg-orange { background-color: var(--color-fmt-bg-orange); }
.fmt-bg-yellow { background-color: var(--color-fmt-bg-yellow); }
.fmt-bg-light-green { background-color: var(--color-fmt-bg-light-green); }
.fmt-bg-cyan { background-color: var(--color-fmt-bg-cyan); }
.fmt-bg-light-cyan { background-color: var(--color-fmt-bg-light-cyan); }
.fmt-bg-light-blue { background-color: var(--color-fmt-bg-light-blue); }
.fmt-bg-pink { background-color: var(--color-fmt-bg-pink); }
.fmt-bg-grey { background-color: var(--color-fmt-bg-grey); }
.fmt-bg-light-grey { background-color: var(--color-fmt-bg-light-grey); }

.fmt-link {
	text-decoration: underline;
}

.fmt-reverse-color {
	color: var(--main-background);
	background: var(--main-color);
}

.fmt-spoiler:hover {
	background: inherit;
	color: inherit;
}

.fmt-monospace {
	background-color: rgb(50% 50% 50% / 25%);
	opacity: 0.75;
	padding: 0 0.25em;
}




/* mobile hamburger icon when theres an unread message */
#buffer-list ul[role="tablist"]:has(li.unread-highlight) ~ button.expander svg,
#buffer-list ul[role="tablist"]:has(li.unread-highlight) + button.expander svg {
    opacity: 0; /* make the hamburgie invizible */
}

/* Breathing chat bubble */
#buffer-list ul[role="tablist"]:has(li.unread-highlight) ~ button.expander::after,
#buffer-list ul[role="tablist"]:has(li.unread-highlight) + button.expander::after {
    content: "💬";
    position: absolute;
    top: 13px;
    right: 6px;
    font-size: 22px;
    color: #ff4d4d;
    animation: breathe 2s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(255, 77, 77, 0.8);
    pointer-events: none;
    z-index: 10;
}

/* The breathing animation */
@keyframes breathe {
    0%, 100% {
        transform: scale(1);
        opacity: 0.85;
    }
    50% {
        transform: scale(1.25);
        opacity: 1;
    }
}