@layer page {
  .felwyn-chat-host { font-family: var(--fw-font); }
  .felwyn-chat-panel {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--fw-rule-strong);
    border-radius: var(--fw-radius);
    background: var(--fw-canvas);
    box-shadow: var(--fw-shadow-soft);
    color: var(--fw-ink);
  }
  .felwyn-chat-header {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 9px 8px 11px;
    border-bottom: 1px solid var(--fw-rule);
    background: var(--fw-canvas-2);
  }
  .felwyn-chat-title { display: flex; align-items: center; gap: 8px; }
  .felwyn-chat-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fw-coral); box-shadow: 0 0 0 4px rgba(221,84,63,.10); }
  .felwyn-chat-title strong { font-family: var(--fw-serif); font-size: 16px; font-weight: 600; }
  .felwyn-chat-live {
    padding: 1px 5px;
    border-radius: 999px;
    background: var(--fw-coral-soft);
    color: var(--fw-coral);
    font-family: var(--fw-mono);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .felwyn-chat-header-actions { display: flex; align-items: center; gap: 5px; }
  .felwyn-chat-help, .felwyn-chat-clear, .felwyn-chat-close {
    min-height: 28px;
    padding: 4px 7px;
    border: 1px solid var(--fw-rule);
    border-radius: 6px;
    background: var(--fw-canvas);
    color: var(--fw-muted);
    font-size: 10px;
  }
  .felwyn-chat-help:hover { border-color: var(--fw-blue); color: var(--fw-blue-deep); background: var(--fw-blue-soft); }
  .felwyn-chat-clear:hover, .felwyn-chat-close:hover { border-color: #e3b3b0; color: var(--fw-danger); background: var(--fw-danger-soft); }
  .felwyn-chat-close { font-size: 16px; line-height: 1; }

  .felwyn-chat-roombar {
    display: grid;
    gap: 5px;
    padding: 7px 9px 6px;
    border-bottom: 1px solid var(--fw-rule);
    background: var(--fw-canvas-2);
  }
  .felwyn-chat-room-tabs { display: flex; align-items: center; gap: 5px; }
  .felwyn-chat-room {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border: 1px solid var(--fw-rule);
    border-radius: 6px;
    background: var(--fw-canvas);
    color: var(--fw-muted);
    font-size: 10.5px;
    font-weight: 750;
  }
  .felwyn-chat-room:hover { border-color: var(--fw-blue); color: var(--fw-blue-deep); }
  .felwyn-chat-room.is-active { border-color: var(--fw-blue); background: var(--fw-blue-soft); color: var(--fw-blue-deep); }
  .felwyn-chat-room span {
    padding: 1px 4px;
    border-radius: 999px;
    background: rgba(36,72,216,.10);
    font-family: var(--fw-mono);
    font-size: 7px;
    text-transform: uppercase;
    letter-spacing: .05em;
  }
  .felwyn-chat-room-note { color: var(--fw-muted); font-size: 9px; line-height: 1.35; }
  .felwyn-chat-room-note code, .felwyn-chat-command-help code { font-family: var(--fw-mono); font-size: .95em; }
  .felwyn-chat-command-help {
    display: grid;
    gap: 3px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--fw-rule);
    background: var(--fw-blue-soft);
    color: var(--fw-ink-2);
    font-size: 9.5px;
    line-height: 1.35;
  }
  .felwyn-chat-command-help strong { color: var(--fw-blue-deep); font-size: 10px; }

  .felwyn-chat-messages {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 5px 6px 8px;
    background: var(--fw-canvas);
    scrollbar-width: thin;
    scrollbar-color: #bbb5aa transparent;
  }
  .felwyn-chat-loading, .felwyn-chat-empty { padding: 28px 8px; color: var(--fw-muted); font-family: var(--fw-mono); font-size: 9px; text-align: center; }

  /* Dense stream-style lines: role badge + name + message stay together. */
  .felwyn-chat-message {
    position: relative;
    margin: 0;
    padding: 5px 7px;
    border: 0;
    border-radius: 4px;
    background: transparent;
    line-height: 1.55;
    transition: background .1s ease;
  }
  .felwyn-chat-message:hover { background: rgba(24,26,32,.035); }
  .felwyn-chat-message.is-own { background: rgba(36,72,216,.045); }
  .felwyn-chat-message.is-own:hover { background: rgba(36,72,216,.075); }
  .felwyn-chat-message.is-mentioned { background: var(--fw-amber-soft); box-shadow: inset 2px 0 0 var(--fw-amber); }
  .felwyn-chat-message.is-announcement { background: var(--fw-blue-soft); box-shadow: inset 3px 0 0 var(--fw-blue); }
  .felwyn-chat-message.is-announcement .felwyn-chat-text { font-weight: 700; color: var(--fw-blue-deep); }
  .felwyn-chat-message.can-delete { padding-right: 27px; }
  .felwyn-chat-message-line { display: block; min-width: 0; overflow-wrap: anywhere; }

  .felwyn-chat-time {
    display: inline;
    margin-right: 6px;
    color: var(--fw-faint);
    font-family: var(--fw-mono);
    font-size: 9.5px;
    white-space: nowrap;
    vertical-align: 1px;
  }
  .felwyn-chat-role {
    margin-right: 5px;
    display: inline-flex;
    align-items: center;
    padding: 2px 5px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background: var(--fw-canvas-2);
    color: var(--fw-muted);
    font-family: var(--fw-mono);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    vertical-align: 1px;
  }
  .felwyn-chat-role.role-administrator { color: #a32828; background: var(--fw-danger-soft); border-color: #e3aaa8; }
  .felwyn-chat-role.role-moderator { color: var(--fw-blue-deep); background: var(--fw-blue-soft); }
  .felwyn-chat-role.role-vip { color: #795514; background: var(--fw-amber-soft); }
  .felwyn-chat-role.role-registriert { color: #5f6670; background: #f0f1f3; }

  .felwyn-chat-name {
    display: inline;
    color: var(--fw-ink);
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    text-decoration: none;
  }
  .felwyn-chat-name:hover, .felwyn-chat-name:focus-visible { text-decoration: underline; text-underline-offset: 2px; outline: none; }
  .felwyn-chat-message.role-administrator .felwyn-chat-name { color: #a32828; }
  .felwyn-chat-message.role-moderator .felwyn-chat-name { color: var(--fw-blue-deep); }
  .felwyn-chat-message.role-vip .felwyn-chat-name { color: #795514; }
  .felwyn-chat-message.role-registriert .felwyn-chat-name { color: #5f6670; }
  .felwyn-chat-separator { margin-right: 4px; color: var(--fw-muted); font-weight: 700; }
  .felwyn-chat-text { display: inline; color: var(--fw-ink-2); font-size: 12.5px; white-space: pre-wrap; overflow-wrap: anywhere; }
  .felwyn-chat-delete {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--fw-faint);
    font-size: 13px;
    opacity: 0;
    transition: opacity .1s ease, color .1s ease, background .1s ease;
  }
  .felwyn-chat-message:hover .felwyn-chat-delete, .felwyn-chat-delete:focus-visible { opacity: 1; }
  .felwyn-chat-delete:hover { color: var(--fw-danger); background: var(--fw-danger-soft); }
.felwyn-chat-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 6px; padding: 7px; border-top: 1px solid var(--fw-rule); background: var(--fw-canvas-2); }
  .felwyn-chat-input { min-height: 38px !important; max-height: 108px; padding: 8px 10px !important; resize: none; border-radius: 7px !important; font-size: 12.5px; }
  .felwyn-chat-send { min-width: 62px; border: 1px solid var(--fw-blue-deep); border-radius: 7px; background: var(--fw-blue); color: white; font-size: 11.5px; font-weight: 800; }
  .felwyn-chat-send:hover { background: var(--fw-blue-deep); }

  .felwyn-chat-toggle {
    position: fixed;
    z-index: 80;
    right: 14px;
    bottom: 14px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--fw-rule-strong);
    border-radius: 999px;
    background: var(--fw-canvas);
    color: var(--fw-ink);
    font-size: 11px;
    font-weight: 800;
    box-shadow: var(--fw-shadow-soft);
  }
  .felwyn-chat-toggle:hover { border-color: var(--fw-blue); color: var(--fw-blue-deep); }
  .felwyn-chat-unread { min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--fw-coral); color: white; font-family: var(--fw-mono); font-size: 8px; text-align: center; }
  .felwyn-chat-disabled-label {
    padding: 2px 6px;
    border: 1px solid var(--fw-rule);
    border-radius: 999px;
    background: var(--fw-canvas-2);
    color: var(--fw-muted);
    font-family: var(--fw-mono);
    font-size: 8px;
    font-weight: 700;
  }
  .felwyn-chat-dock.is-feature-disabled .felwyn-chat-panel {
    opacity: .56;
    filter: grayscale(.72) saturate(.45);
    box-shadow: none;
    background: #f1efe9;
  }
  .felwyn-chat-dock.is-feature-disabled .felwyn-chat-header,
  .felwyn-chat-dock.is-feature-disabled .felwyn-chat-form {
    background: #ece9e2;
  }
  .felwyn-chat-disabled-messages {
    display: grid;
    place-items: center;
  }
  .felwyn-chat-disabled-state {
    max-width: 220px;
    color: var(--fw-muted);
    font-family: var(--fw-mono);
    font-size: 9px;
    line-height: 1.5;
    text-align: center;
  }
  .felwyn-chat-host.is-feature-disabled textarea:disabled,
  .felwyn-chat-host.is-feature-disabled button:disabled {
    cursor: default;
  }
  .felwyn-chat-host.is-feature-disabled .felwyn-chat-input:disabled {
    color: var(--fw-faint);
    -webkit-text-fill-color: var(--fw-faint);
    background: #e8e6df !important;
  }
  .felwyn-chat-host.is-feature-disabled .felwyn-chat-send:disabled {
    border-color: var(--fw-rule-strong);
    background: #d9d6ce;
    color: #8f8d87;
    opacity: 1;
  }
  .felwyn-chat-unread.is-hidden, .is-hidden { display: none !important; }

  /* Popup is reserved for the player. */
  .felwyn-chat-popup .felwyn-chat-panel {
    position: fixed;
    z-index: 79;
    right: 14px;
    bottom: 60px;
    width: min(370px, calc(100vw - 28px));
    height: min(520px, calc(100dvh - 86px));
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px) scale(.99);
    transition: opacity .16s ease, transform .16s cubic-bezier(.2,.8,.2,1);
  }
  .felwyn-chat-popup.is-open .felwyn-chat-panel { opacity: 1; pointer-events: auto; transform: none; }

  /* Dock is the standard chat presentation on every non-player page. */
  .felwyn-chat-dock { position: static; min-width: 0; height: auto; }
  .felwyn-chat-dock .felwyn-chat-panel {
    position: relative;
    inset: auto;
    width: 100%;
    height: var(--felwyn-chat-dock-height, min(720px, calc(100dvh - 32px)));
    min-height: min(440px, calc(100dvh - 24px));
    max-height: none;
    transition: height .14s ease-out;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
  .felwyn-chat-dock .felwyn-chat-toggle,
  .felwyn-chat-dock .felwyn-chat-close { display: none; }

  /* Same geometry as Explorer: full-width header first, content + chat below. */
  .felwyn-page-shell > .felwyn-page-header-stack { margin-bottom: 12px; }
  .felwyn-page-content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(390px, 26vw, 640px);
    gap: 12px;
    align-items: start;
  }
  .felwyn-page-content-layout > .felwyn-page-surface { min-width: 0; margin-top: 0; }
  .felwyn-page-chat-rail { min-width: 0; align-self: start; position: sticky; top: 16px; }
  .felwyn-page-chat-rail:empty { display: none; }
  .felwyn-page-content-layout:has(.felwyn-page-chat-rail:empty) { grid-template-columns: minmax(0, 1fr); }

  /* Error/access pages use the same embedded chat without importing the full app chrome. */
  .auth-chat-layout {
    width: min(920px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 460px) minmax(360px, 430px);
    gap: 12px;
    align-items: start;
    justify-content: center;
  }
  .auth-chat-layout > .auth-window { width: 100%; }
  .auth-chat-layout:not(:has(.auth-chat-rail)) { grid-template-columns: minmax(0, 460px); }
  .auth-chat-rail { min-width: 0; }
  .auth-page .felwyn-chat-host {
    --fw-font: var(--font);
    --fw-serif: var(--serif);
    --fw-mono: var(--mono);
    --fw-canvas: var(--canvas);
    --fw-canvas-2: #faf7f0;
    --fw-ink: var(--ink);
    --fw-ink-2: #333641;
    --fw-muted: var(--muted);
    --fw-faint: #a3a4aa;
    --fw-rule: var(--rule);
    --fw-rule-strong: var(--rule2);
    --fw-blue: var(--blue);
    --fw-blue-deep: var(--blue2);
    --fw-blue-soft: var(--blueSoft);
    --fw-coral: #dd543f;
    --fw-green: var(--green);
    --fw-green-soft: #eef8f3;
    --fw-amber: #9a6a18;
    --fw-amber-soft: #fff6dc;
    --fw-danger: var(--danger);
    --fw-danger-soft: #fff0f0;
    --fw-shadow-soft: 0 8px 24px rgba(31,29,23,.07);
    --fw-radius: 10px;
  }


  @media (min-width: 2200px) {
    .felwyn-chat-header { min-height: 54px; padding: 10px 12px; }
    .felwyn-chat-title strong { font-size: 18px; }
    .felwyn-chat-message { padding: 6px 8px; }
    .felwyn-chat-time { font-size: 10px; }
    .felwyn-chat-role { font-size: 10.5px; padding: 3px 6px; }
    .felwyn-chat-name, .felwyn-chat-text { font-size: 13.5px; }
    .felwyn-chat-input { min-height: 42px !important; font-size: 13.5px; }
  }

  @media (max-width: 1179px) {
    .felwyn-page-content-layout { grid-template-columns: minmax(0, 1fr); }
    .felwyn-page-chat-rail { position: static; }
    .felwyn-chat-dock .felwyn-chat-panel {
      height: clamp(400px, 62dvh, 620px);
      --felwyn-chat-dock-height: initial;
      min-height: 380px;
      max-height: 620px;
    }
  }

  @media (max-width: 900px) {
    .auth-chat-layout { grid-template-columns: minmax(0, 500px); width: 100%; }
    .auth-chat-rail { width: 100%; }
  }

  @media (max-width: 560px) {
    .felwyn-chat-popup .felwyn-chat-panel { right: 4px; bottom: 50px; width: calc(100vw - 8px); height: min(500px, calc(100dvh - 58px)); }
    .felwyn-chat-popup .felwyn-chat-toggle { right: 7px; bottom: 7px; }
    .felwyn-page-content-layout { gap: 8px; }
    .felwyn-chat-dock .felwyn-chat-panel { height: clamp(360px, 58dvh, 500px); min-height: 340px; --felwyn-chat-dock-height: initial; }
  }
}