/* INFLATION live chat sidebar (chat.mjs). Navy on white, Courier, small uppercase labels. */
.chat-tab { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: auto; min-height: 48px; padding: 12px 18px; display: inline-flex; align-items: center; gap: 10px; letter-spacing: .18em; font-size: 13px; background: var(--blue); color: #fff; border: 1px solid var(--blue); box-shadow: 0 6px 0 rgb(0 51 153 / .15); }
.chat-tab:hover:enabled { background: #fff; color: var(--blue); }
.chat-tab:focus-visible { outline-offset: -6px; outline-color: #fff; }
.chat-tab:hover:focus-visible { outline-color: var(--blue); }
.chat-badge { display: inline-block; min-width: 22px; padding: 2px 4px; letter-spacing: 0; text-align: center; font-size: 11px; background: #fff; color: var(--blue); border: 1px solid #fff; }
body.chat-open .chat-tab { display: none; }

/* Phones and tablets: the chat opens full screen from the bottom button. */
.chat-panel { position: fixed; z-index: 50; inset: 0; height: 100dvh; display: flex; flex-direction: column; background: #fff; color: var(--blue); }
.chat-panel[hidden] { display: none; }
@media (max-width: 1099px) { body { padding-bottom: 80px; } body.chat-open { overflow: hidden; } }

/* Wide screens: dashboard and chat share five equal, in-flow columns. */
@media (min-width: 1100px) {
  body { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-right: 0; }
  body > #preview { grid-column: 1 / 5; grid-row: 1; min-width: 0; }
  .chat-tab { display: none; }
  .chat-panel, .chat-panel[hidden] { display: flex; position: sticky; grid-column: 5; grid-row: 1; align-self: start; inset: auto; top: 0; width: auto; height: 100dvh; border-left: 1px solid var(--blue); }
  .chat-head { height: 114px; flex: none; box-sizing: border-box; }
  .chat-close { display: none; }
}

.chat-head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--blue); }
.chat-title { flex: 1; margin: 0; font-size: 12px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-online { opacity: .75; }
.chat-panel button { font-size: 12px; min-height: 36px; padding: 6px 10px; width: auto; }
.chat-icon { width: 36px !important; min-width: 36px; padding: 0 !important; text-align: center; font-size: 16px !important; line-height: 1; }

.chat-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 4px 14px 10px; }
.chat-empty { font-size: 12px; padding: 18px 0; opacity: .75; }
.chat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.chat-msg { padding: 10px 0; border-bottom: 1px dotted rgb(0 51 153 / .35); min-width: 0; }
.chat-meta { display: flex; align-items: baseline; gap: 8px; font-size: 11px; letter-spacing: .04em; }
.chat-name { font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.chat-time { font-size: 11px; opacity: .65; }
.chat-body { margin-top: 4px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
.chat-big { font-size: 40px; line-height: 1.15; }
.chat-mine { border-left: 3px solid var(--blue); padding-left: 10px; background: rgb(0 51 153 / .04); }
.chat-mine .chat-name::after { content: ' · YOU'; font-weight: normal; opacity: .7; }
.chat-tip-btn { margin-left: auto; min-height: 26px !important; padding: 2px 6px !important; font-size: 11px !important; border-color: rgb(0 51 153 / .45); }
.chat-tip-btn + .chat-tip-btn { margin-left: 0; }
.chat-system { font-size: 12px; letter-spacing: .03em; }
.chat-buzz .chat-system, .chat-tip .chat-system { display: inline; }
.chat-buzz .chat-time, .chat-tip .chat-time { margin-left: 8px; }
.chat-msg.chat-buzz { text-align: center; font-weight: bold; }
.chat-msg.chat-tip { padding: 10px; margin: 6px 0; background: var(--blue); color: #fff; border-bottom: 0; }

.chat-sheet { border-top: 1px solid var(--blue); padding: 10px 14px; background: #fff; }
.chat-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.chat-sheet h3 { margin: 0; font-size: 12px; font-weight: normal; letter-spacing: .06em; overflow-wrap: anywhere; }
.chat-emojis { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 2px; }
.chat-emoji { border: 0 !important; font-size: 20px !important; padding: 0 !important; min-height: 38px !important; width: 100% !important; }
.chat-emoji:hover:enabled { background: rgb(0 51 153 / .1) !important; }
.chat-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.chat-note-btn { width: 100% !important; text-align: left; }
.chat-note-btn small { font-size: 11px; opacity: .8; }
.chat-note { font-size: 12px; line-height: 1.5; margin: 6px 0; }

.chat-foot { border-top: 1px solid var(--blue); padding: 10px 14px 12px; display: grid; gap: 8px; }
.chat-foot[hidden], .chat-gate[hidden], .chat-form[hidden] { display: none; }
.chat-gate { display: grid; gap: 8px; }
.chat-wide { width: 100% !important; text-align: left; }
.chat-form { gap: 6px; }
.chat-input { font: inherit; font-size: 14px; color: inherit; border: 1px solid var(--blue); border-radius: 0; padding: 8px 10px; width: 100%; resize: none; min-height: 58px; max-height: 140px; background: #fff; }
.chat-counter { justify-self: end; font-size: 11px; opacity: .65; }
.chat-counter[data-over="true"] { opacity: 1; font-weight: bold; }
.chat-row { display: flex; gap: 6px; }
.chat-row .chat-buzz-btn { flex: 1; letter-spacing: .12em; text-align: center; }
.chat-row .chat-send { flex: 1.4; margin-top: 0; text-align: center; letter-spacing: .12em; background: var(--blue); color: #fff; }
.chat-row .chat-send:hover:enabled { background: #fff; color: var(--blue); }
.chat-name-form { gap: 8px; }
.chat-name-form label { margin: 0; letter-spacing: .06em; }
.chat-name-form input { min-height: 40px; }
.chat-name-form button { margin-top: 0; width: 100%; }
.chat-text { border: 0 !important; text-decoration: underline; text-align: left; padding: 4px 0 !important; min-height: 0 !important; }
.chat-text:hover:enabled { background: none !important; color: var(--blue) !important; }
.chat-status { font-size: 12px; min-height: 0; overflow-wrap: anywhere; }
.chat-status:empty { display: none; }
.chat-status[data-error="true"] { font-weight: bold; }

/* BUZZ: one MSN-style nudge. The page itself only twitches. */
@keyframes chat-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-9px, 3px); } 20% { transform: translate(8px, -4px); } 30% { transform: translate(-7px, -2px); }
  40% { transform: translate(7px, 4px); } 50% { transform: translate(-5px, 2px); } 60% { transform: translate(5px, -3px); }
  70% { transform: translate(-3px, 2px); } 80% { transform: translate(3px, -1px); } 90% { transform: translate(-1px, 1px); }
}
@keyframes chat-twitch { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
.chat-panel.chat-shake { animation: chat-shake .7s cubic-bezier(.36, .07, .19, .97) both; }
@keyframes chat-tab-twitch { 0%, 100% { transform: translateY(-50%); } 25% { transform: translate(-6px, -50%); } 50% { transform: translate(2px, -50%); } 75% { transform: translate(-4px, -50%); } }
.chat-tab.chat-shake { animation: chat-tab-twitch .35s 2 both; }
body.chat-shake > main { animation: chat-twitch .4s ease-in-out both; }

/* Emoji-only messages: a small float-up burst. */
.chat-burst { position: absolute; left: 0; bottom: 0; width: 48px; height: 0; pointer-events: none; }
.chat-burst i { position: absolute; left: 12px; bottom: 0; font-style: normal; font-size: 22px; opacity: 0; animation: chat-float 1.2s ease-out var(--delay, 0ms) forwards; }
@keyframes chat-float {
  0% { opacity: 0; transform: translate(0, 0) scale(.6); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), -120px) scale(1.2); }
}

@media (prefers-reduced-motion: reduce) {
  .chat-panel.chat-shake, .chat-tab.chat-shake, body.chat-shake > main { animation: none; }
  .chat-panel.chat-shake { outline: 4px solid var(--blue); outline-offset: -4px; }
  .chat-tab.chat-shake { outline: 3px solid #fff; outline-offset: -6px; }
  .chat-burst { display: none; }
}