/* XenonZcar forum + chat — styled to match the main site
   (gray page, white rounded cards with shadow, blue actions, black header/footer).
   The chat uses the same dark panel colors as the site's registry forms. */
:root {
  --xz-bg:     #f3f4f6;   /* gray-100 */
  --xz-panel:  #ffffff;
  --xz-soft:   #f9fafb;   /* gray-50 */
  --xz-line:   #e5e7eb;   /* gray-200 */
  --xz-text:   #1f2937;   /* gray-800 */
  --xz-muted:  #6b7280;   /* gray-500 */
  --xz-blue:   #3b82f6;   /* blue-500 */
  --xz-blue-d: #2563eb;   /* blue-600 */
  --xz-red:    #dc2626;
  --xz-green:  #16a34a;
  --xz-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);
  --xz-mono:   ui-monospace, "Cascadia Mono", "SFMono-Regular", Menlo, Consolas, monospace;
}

.xz-body { background: var(--xz-bg); color: var(--xz-text); margin: 0; }
.xz-body *:focus-visible { outline: 2px solid var(--xz-blue); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---- Forum bar (sits under the site header) ---- */
.xz-forumbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; background: var(--xz-panel);
               border-radius: 8px; box-shadow: var(--xz-shadow); padding: .8rem 1.25rem; margin-bottom: 1.5rem; }
.xz-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem;
            border-radius: 9999px; background: var(--xz-red); color: #fff; font-size: .72rem; font-weight: 700; line-height: 1; }
.xz-brand { font-weight: 700; font-size: 1.15rem; color: var(--xz-blue-d); text-decoration: none; }
.xz-nav   { color: var(--xz-muted); text-decoration: none; background: none; border: 0; cursor: pointer; font: inherit; padding: .15rem 0; }
.xz-nav:hover, .xz-nav.is-active { color: var(--xz-text); }
.xz-nav.is-active { box-shadow: inset 0 -2px 0 var(--xz-blue); }

/* ---- Type ---- */
.xz-h1 { font-size: 1.875rem; line-height: 2.25rem; font-weight: 700; margin: 0; }
.xz-h2 { font-size: 1.25rem; font-weight: 600; margin: 0; }
.xz-label { display: block; font-size: .8rem; font-weight: 500; color: var(--xz-muted); margin-bottom: .25rem; }
.xz-link { color: var(--xz-blue-d); text-decoration: underline; text-underline-offset: 2px; }

/* ---- Surfaces ---- */
.xz-card, .xz-table { background: var(--xz-panel); border-radius: 8px; box-shadow: var(--xz-shadow); }
.xz-table { overflow: hidden; }
.xz-row   { padding: .85rem 1.1rem; border-top: 1px solid var(--xz-line); }
.xz-row:first-child { border-top: 0; }
.xz-row:hover { background: var(--xz-soft); }
.xz-tag { display: inline-block; font-size: .72rem; font-weight: 600; padding: .05rem .45rem; margin-right: .35rem; border-radius: 4px; background: #fef3c7; color: #92400e; vertical-align: 2px; }
.xz-tag-muted { background: #e5e7eb; color: #4b5563; }

/* ---- Forms ---- */
.xz-input { background: #fff; color: var(--xz-text); border: 1px solid #d1d5db; border-radius: 6px; padding: .5rem .7rem; font: inherit; }
.xz-input:focus { border-color: var(--xz-blue); outline: none; box-shadow: 0 0 0 3px rgb(59 130 246 / .25); }
.xz-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--xz-blue); color: #fff; font: inherit; font-weight: 600;
          border: 1px solid var(--xz-blue); border-radius: 6px; padding: .5rem 1rem; cursor: pointer; text-decoration: none; transition: background-color .15s; }
.xz-btn:hover { background: var(--xz-blue-d); border-color: var(--xz-blue-d); }
.xz-btn-sm { padding: .25rem .7rem; font-size: .85rem; }
.xz-btn-ghost { background: #fff; color: var(--xz-text); border-color: #d1d5db; }
.xz-btn-ghost:hover { background: var(--xz-soft); border-color: #9ca3af; }
.xz-btn-danger { background: #fff; color: var(--xz-red); border-color: #fca5a5; }
.xz-btn-danger:hover { background: #fef2f2; border-color: var(--xz-red); }
.xz-tool { font-size: .78rem; padding: .15rem .55rem; border: 1px solid #d1d5db; border-radius: 4px; background: var(--xz-soft); color: #374151; cursor: pointer; }
.xz-tool:hover { background: #e5e7eb; }
.xz-tool-upload { background: #eff6ff; border-color: #bfdbfe; color: var(--xz-blue-d); font-weight: 600; }
.xz-tool-upload:hover { background: #dbeafe; }
.xz-tool:disabled { opacity: .6; cursor: wait; }
.xz-upload-status { min-height: 1.1rem; margin: .3rem 0 0; font-size: .8rem; color: var(--xz-blue-d); }
.xz-upload-status.is-error { color: var(--xz-red); }
.xz-input.is-dragging { border-color: var(--xz-blue); border-style: dashed; background: #eff6ff; }
.xz-img-link { display: inline-block; }
.xz-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.xz-flash { padding: .7rem 1rem; border-radius: 6px; margin-bottom: 1rem; background: #eff6ff; border: 1px solid #bfdbfe; color: #1e3a8a; }
.xz-flash-error   { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.xz-flash-success { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }

/* ---- Avatars ---- */
.xz-avatar { display: inline-block; border-radius: 9999px; object-fit: cover; flex-shrink: 0; background: #e5e7eb; }
.xz-avatar-letter { display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; line-height: 1; user-select: none; }
.xz-av0 { background: #2563eb; } .xz-av1 { background: #059669; } .xz-av2 { background: #d97706; } .xz-av3 { background: #db2777; }
.xz-av4 { background: #7c3aed; } .xz-av5 { background: #0891b2; } .xz-av6 { background: #dc2626; } .xz-av7 { background: #4b5563; }
.xz-post-avatar { display: block; margin-bottom: .6rem; }

/* ---- Private messages ---- */
.xz-pm { background: var(--xz-panel); border-radius: 8px; box-shadow: var(--xz-shadow); padding: 1rem 1.25rem; max-width: 52rem; }
.xz-pm-mine { margin-left: auto; background: #eff6ff; }
a.xz-row { color: inherit; text-decoration: none; }
.xz-pm-unread { background: #f0f7ff; box-shadow: inset 3px 0 0 var(--xz-blue); }

/* ---- Unread, solved, reactions, polls ---- */
.xz-dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 9999px; background: var(--xz-blue); margin-right: .45rem; vertical-align: 1px; }
.xz-unread { background: #f8fbff; }
.xz-tag-solved { background: #dcfce7; color: #166534; }
.xz-solution { background: #f0fdf4; border: 1px solid #bbf7d0; border-left: 4px solid var(--xz-green); border-radius: 8px; padding: 1rem 1.25rem; }
.xz-post-solution { box-shadow: 0 0 0 2px #86efac, var(--xz-shadow); }
.xz-post-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; }
.xz-react { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border: 1px solid #d1d5db; border-radius: 9999px;
            background: #fff; color: #374151; font-size: .8rem; cursor: pointer; }
.xz-react:hover { background: var(--xz-soft); border-color: #9ca3af; }
.xz-react.is-on { background: #eff6ff; border-color: #93c5fd; color: var(--xz-blue-d); }
.xz-react.is-solved { background: #f0fdf4; border-color: #86efac; color: #166534; font-weight: 600; }
.xz-react.is-static { cursor: default; }
.xz-react.is-static:hover { background: #fff; border-color: #d1d5db; }
.xz-react.is-solved.is-static:hover { background: #f0fdf4; border-color: #86efac; }
.xz-pollbar { height: .55rem; background: #e5e7eb; border-radius: 9999px; overflow: hidden; }
.xz-pollbar span { display: block; height: 100%; background: var(--xz-blue); border-radius: 9999px; }
.xz-details > summary { cursor: pointer; font-weight: 600; color: var(--xz-blue-d); }

/* ---- Classifieds ---- */
.xz-listing { display: block; background: var(--xz-panel); border-radius: 8px; box-shadow: var(--xz-shadow); overflow: hidden; color: inherit; text-decoration: none; }
.xz-listing:hover { box-shadow: 0 0 0 2px #bfdbfe, var(--xz-shadow); }
.xz-listing-photo { position: relative; aspect-ratio: 4 / 3; background: #e5e7eb; display: flex; align-items: center; justify-content: center; color: var(--xz-muted); font-size: .85rem; }
.xz-listing-photo img { width: 100%; height: 100%; object-fit: cover; }
.xz-sold { position: absolute; top: .6rem; left: .6rem; background: var(--xz-red); color: #fff; font-weight: 700; font-size: .8rem; padding: .15rem .55rem; border-radius: 4px; }
.xz-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.xz-gallery a { display: block; border-radius: 6px; overflow: hidden; background: #e5e7eb; aspect-ratio: 1; }
.xz-gallery a.is-main { grid-column: span 4; aspect-ratio: 4 / 3; }
.xz-gallery img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Events ---- */
.xz-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-top: 1px solid var(--xz-line); border-left: 1px solid var(--xz-line); }
.xz-cal-head { padding: .35rem; font-size: .75rem; font-weight: 600; color: var(--xz-muted); text-align: center; border-right: 1px solid var(--xz-line); border-bottom: 1px solid var(--xz-line); background: var(--xz-soft); }
.xz-cal-day { min-height: 5.5rem; padding: .3rem; border-right: 1px solid var(--xz-line); border-bottom: 1px solid var(--xz-line); overflow: hidden; }
.xz-cal-day.is-empty { background: var(--xz-soft); }
.xz-cal-day.is-today .xz-cal-num { background: var(--xz-blue); color: #fff; }
.xz-cal-num { display: inline-flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; border-radius: 9999px; font-size: .78rem; font-weight: 600; }
.xz-cal-ev { display: block; margin-top: .2rem; padding: .1rem .35rem; border-radius: 4px; background: #dbeafe; color: #1e3a8a; font-size: .72rem; line-height: 1.3;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; }
.xz-cal-ev:hover { background: #bfdbfe; }
.xz-cal-ev.is-cancelled { background: #f3f4f6; color: var(--xz-muted); text-decoration: line-through; }
.xz-datebox { flex-shrink: 0; width: 3.1rem; text-align: center; border-radius: 6px; overflow: hidden; border: 1px solid #bfdbfe; background: #fff; }
.xz-datebox span { display: block; background: var(--xz-blue); color: #fff; font-size: .68rem; font-weight: 700; padding: .1rem 0; }
.xz-datebox b { display: block; font-size: 1.25rem; padding: .1rem 0; color: var(--xz-text); }
@media (max-width: 640px) {
  .xz-cal-day { min-height: 3.2rem; }
  .xz-cal-ev { font-size: 0; height: .4rem; padding: 0; margin-top: .15rem; background: var(--xz-blue); }
}

/* ---- Garage ---- */
.xz-specs { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem 1rem; }
.xz-specs dt { font-size: .72rem; color: var(--xz-muted); }
.xz-specs dd { font-size: .9rem; font-weight: 500; margin: 0; }

/* ---- Social links ---- */
.xz-social { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem; border-radius: 9999px; font-size: .85rem; font-weight: 600;
             text-decoration: none; border: 1px solid currentColor; background: #fff; }
.xz-social:hover { background: var(--xz-soft); }
.xz-social-facebook  { color: #1877f2; }
.xz-social-instagram { color: #c13584; }
.xz-social-youtube   { color: #ff0000; }

/* ---- Posts ---- */
.xz-post      { background: var(--xz-panel); border-radius: 8px; box-shadow: var(--xz-shadow); overflow: hidden; }
.xz-post-side { padding: 1rem; background: var(--xz-soft); border-right: 1px solid var(--xz-line); }
.xz-post-main { padding: 1rem 1.25rem; }
.xz-post-body { line-height: 1.7; max-width: 75ch; overflow-wrap: anywhere; }
.xz-quote { margin: .75rem 0; padding: .5rem .9rem; border-left: 3px solid var(--xz-blue); background: var(--xz-soft); color: #374151; }
.xz-quote cite { display: block; font-style: normal; font-size: .8rem; font-weight: 600; color: var(--xz-muted); margin-bottom: .25rem; }
.xz-code { font-family: var(--xz-mono); font-size: .85rem; background: #1e1e1e; color: #f0f0f0; border-radius: 6px; padding: .8rem; overflow-x: auto; white-space: pre; margin: .5rem 0; }
.xz-img  { max-width: 100%; height: auto; border-radius: 6px; margin: .5rem 0; }
.xz-video { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9; margin: .75rem 0; border-radius: 8px; overflow: hidden; background: #000; }
.xz-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.xz-sig  { margin-top: 1rem; padding-top: .6rem; border-top: 1px dashed #d1d5db; font-size: .82rem; color: var(--xz-muted); }
@media (max-width: 767px) {
  .xz-post-side { border-right: 0; border-bottom: 1px solid var(--xz-line); padding: .6rem 1rem; display: flex; gap: .75rem; align-items: center; }
  .xz-post-avatar { margin-bottom: 0; }
  .xz-post-avatar .xz-avatar { width: 40px !important; height: 40px !important; font-size: 18px !important; }
}

/* ---- Chat: dark IRC-style panel (same colors as the site's registry forms) ---- */
.xz-chat { --c-bg: #1e1e1e; --c-panel: #2c2c2c; --c-line: #444; --c-text: #f0f0f0; --c-muted: #a3a3a3; --c-accent: #60a5fa;
           display: grid; grid-template-columns: 10rem 1fr 10rem; height: calc(100vh - 14rem); min-height: 28rem;
           border-radius: 8px; overflow: hidden; background: var(--c-bg); color: var(--c-text); box-shadow: var(--xz-shadow); }
.xz-chat .xz-label { color: var(--c-muted); }
.xz-chat .xz-link  { color: var(--c-accent); }
.xz-chat-rooms, .xz-chat-users { background: var(--c-panel); overflow-y: auto; }
.xz-chat-rooms { border-right: 1px solid var(--c-line); }
.xz-chat-users { border-left: 1px solid var(--c-line); }
.xz-chat-rooms ul, .xz-chat-users ul { list-style: none; margin: 0; padding: .25rem 0; font-family: var(--xz-mono); font-size: .85rem; }
.xz-chat-rooms a { display: block; padding: .3rem .75rem; color: var(--c-muted); text-decoration: none; }
.xz-chat-rooms a:hover { color: var(--c-text); }
.xz-chat-rooms a.is-active { color: #fff; background: rgb(96 165 250 / .15); box-shadow: inset 3px 0 0 var(--c-accent); }
.xz-chat-users li { padding: .15rem .75rem; }

.xz-chat-main  { display: flex; flex-direction: column; min-width: 0; }
.xz-chat-topic { padding: .55rem .9rem; border-bottom: 1px solid var(--c-line); background: var(--c-panel); font-size: .9rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.xz-chat-topic .text-gray-500 { color: var(--c-muted); }
.xz-chat-log   { flex: 1; overflow-y: auto; padding: .5rem .9rem; font-family: var(--xz-mono); font-size: .88rem; line-height: 1.55; }
.xz-line       { position: relative; padding: 0 1.5rem 0 3.6rem; text-indent: -3.6rem; overflow-wrap: anywhere; }
.xz-line:hover { background: rgb(255 255 255 / .04); }
.xz-time       { color: #fbbf24; opacity: .75; margin-right: .6rem; display: inline-block; text-indent: 0; width: 3rem; }
.xz-line-sys   { color: var(--c-muted); }
.xz-line-me    { color: #e9d5ff; font-style: italic; }
.xz-line-mention { background: rgb(251 191 36 / .14); }
.xz-line-local { color: var(--c-accent); }
.xz-sys        { color: var(--c-muted); }
.xz-del        { position: absolute; right: .25rem; top: 0; text-indent: 0; background: none; border: 0; color: var(--c-muted); cursor: pointer; opacity: 0; }
.xz-line:hover .xz-del, .xz-del:focus { opacity: 1; }
.xz-del:hover  { color: #f87171; }

.xz-nick { font-weight: 600; }
.xz-nick.n0 { color: #60a5fa; } .xz-nick.n1 { color: #4ade80; } .xz-nick.n2 { color: #fbbf24; } .xz-nick.n3 { color: #f472b6; }
.xz-nick.n4 { color: #c084fc; } .xz-nick.n5 { color: #22d3ee; } .xz-nick.n6 { color: #facc15; } .xz-nick.n7 { color: #fb923c; }

.xz-chat-input  { display: flex; gap: .5rem; align-items: center; padding: .5rem .6rem; border-top: 1px solid var(--c-line); background: var(--c-panel); }
.xz-chat-input input { flex: 1; min-width: 0; background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 4px; color: var(--c-text); font-family: var(--xz-mono); font-size: .9rem; padding: .45rem .6rem; }
.xz-chat-input input:focus { outline: none; border-color: var(--c-accent); }
.xz-chat-prompt { font-family: var(--xz-mono); font-size: .85rem; color: var(--c-accent); }
.xz-chat-status { min-height: 1.2rem; margin: 0; padding: 0 .9rem .3rem; font-size: .78rem; color: var(--c-muted); background: var(--c-panel); }
.xz-chat-status.is-error { color: #fca5a5; }

@media (max-width: 900px) {
  .xz-chat { grid-template-columns: 1fr; grid-template-rows: auto 1fr; height: calc(100vh - 10rem); }
  .xz-chat-users { display: none; }
  .xz-chat-rooms { border-right: 0; border-bottom: 1px solid var(--c-line); }
  .xz-chat-rooms .xz-label { display: none; }
  .xz-chat-rooms ul { display: flex; overflow-x: auto; }
  .xz-chat-rooms a.is-active { box-shadow: inset 0 -3px 0 var(--c-accent); }
  .xz-chat-prompt { display: none; }
}
@media (prefers-reduced-motion: reduce) { .xz-btn { transition: none; } }