/* Independent entry using the existing semantic FreeChat design tokens. */
:root { --oc-content-width: 1280px; --oc-sidebar-width: 208px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0;
  color: var(--fc-text-primary);
  background: var(--fc-bg-canvas);
  font-family: "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  font-size: var(--fc-font-body-size);
  line-height: var(--fc-font-body-line-height);
}
button, input, textarea, select { font: inherit; }
button, summary { cursor: pointer; }
button {
  min-height: var(--fc-space-48);
  padding: var(--fc-space-8) var(--fc-space-16);
  border: var(--fc-hairline) solid var(--fc-line-subtle);
  border-radius: var(--fc-radius-md);
  background: var(--fc-bg-surface);
  color: var(--fc-text-primary);
}
button:hover { background: var(--fc-bg-hover); }
button:disabled { opacity: 0.6; cursor: wait; }
button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, summary:focus-visible, a:focus-visible {
  outline: calc(var(--fc-hairline) * 3) solid var(--fc-focus-ring);
  outline-offset: var(--fc-space-4);
}
.oc-primary { background: var(--fc-brand-solid); color: var(--fc-text-on-brand); border-color: var(--fc-brand-solid); }
.oc-primary:hover { background: var(--fc-brand-hover); }
.oc-danger { color: var(--fc-danger); }
input, select, textarea {
  width: 100%;
  min-width: 0;
  min-height: var(--fc-space-48);
  padding: var(--fc-space-8) var(--fc-space-12);
  border: var(--fc-hairline) solid var(--fc-line-strong);
  border-radius: var(--fc-radius-md);
  color: var(--fc-text-primary);
  background: var(--fc-bg-surface);
}
textarea { min-height: calc(var(--fc-space-48) * 2); resize: vertical; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: var(--fc-font-display-size); letter-spacing: -0.02em; }
h2 { font-size: var(--fc-font-title-size); line-height: var(--fc-font-title-line-height); }
h3 { font-size: var(--fc-font-heading-size); line-height: var(--fc-font-heading-line-height); }
p:last-child { margin-bottom: 0; }
code, p, h3, .oc-preview { overflow-wrap: anywhere; }
.oc-skip {
  position: absolute; top: -200%; left: var(--fc-space-16);
  padding: var(--fc-space-12); background: var(--fc-bg-surface); z-index: 10;
}
.oc-skip:focus { top: 0; }
.oc-topbar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--fc-space-12);
  max-width: var(--oc-content-width);
  padding: var(--fc-space-24) var(--fc-space-24) var(--fc-space-16);
  margin: 0 auto;
  border-bottom: var(--fc-hairline) solid var(--fc-line-subtle);
}
.oc-brand { display: flex; align-items: baseline; gap: var(--fc-space-12); flex-wrap: wrap; }
.oc-brand p { margin: 0; color: var(--fc-text-tertiary); font-size: var(--fc-font-label-size); }
.oc-identity { display: flex; align-items: center; gap: var(--fc-space-12); flex-wrap: wrap; min-width: 0; }
.oc-identity span { overflow-wrap: anywhere; max-width: 24ch; }
.oc-status {
  max-width: var(--oc-content-width);
  margin: var(--fc-space-12) auto;
  padding: var(--fc-space-12) var(--fc-space-24);
  border-left: var(--fc-space-4) solid var(--fc-brand-solid);
  background: var(--fc-bg-surface);
}
.oc-status[data-tone="error"] { border-color: var(--fc-danger); color: var(--fc-danger); }
.oc-auth {
  max-width: calc(var(--fc-bubble-max-w) + var(--fc-space-48));
  margin: var(--fc-space-40) auto;
  padding: var(--fc-space-24);
}
.oc-auth .oc-intro {
  padding: var(--fc-space-24);
  margin-bottom: var(--fc-space-24);
  border-left: var(--fc-space-4) solid var(--fc-brand-solid);
  background: var(--fc-bg-surface);
}
.oc-app {
  max-width: var(--oc-content-width);
  margin: 0 auto;
  padding: var(--fc-space-24);
  display: grid;
  grid-template-columns: var(--oc-sidebar-width) minmax(0, 1fr);
  gap: var(--fc-space-32);
}
.oc-nav { display: flex; flex-direction: column; gap: var(--fc-space-8); }
.oc-nav button { text-align: left; border-color: transparent; background: transparent; }
.oc-nav button[aria-current="page"] {
  color: var(--fc-primary-7); background: var(--fc-bg-selected);
  border-left: var(--fc-space-4) solid var(--fc-brand-solid);
}
.oc-nav .oc-boundary { margin-top: var(--fc-space-16); }
.oc-main { min-width: 0; }
.oc-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--fc-space-16); margin-bottom: var(--fc-space-24); }
.oc-heading h2 { margin: 0; }
.oc-feed-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--fc-space-24); }
.oc-card, .oc-composer, .oc-profile, .oc-group-form {
  padding: var(--fc-space-20);
  margin-bottom: var(--fc-space-16);
  border: var(--fc-hairline) solid var(--fc-line-subtle);
  border-radius: var(--fc-radius-lg);
  background: var(--fc-bg-surface);
}
.oc-form { display: grid; gap: var(--fc-space-8); }
.oc-post-editor {
  margin-top: var(--fc-space-16);
  padding-top: var(--fc-space-16);
  border-top: var(--fc-hairline) solid var(--fc-line-subtle);
}
.oc-post-editor h3 { margin-bottom: var(--fc-space-4); }
.oc-post-editor .oc-actions > button { flex: 1 1 10ch; }
.oc-topic-form { border-left: var(--fc-space-4) solid var(--fc-brand-solid); }
.oc-topic-reference { display: grid; gap: var(--fc-space-8); }
.oc-topic-reference button { text-align: left; overflow-wrap: anywhere; }
.oc-form label { font-size: var(--fc-font-label-size); color: var(--fc-text-secondary); }
.oc-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--fc-space-16); }
.oc-form-row > div { display: grid; gap: var(--fc-space-8); min-width: 0; }
.oc-actions { display: flex; flex-wrap: wrap; gap: var(--fc-space-8); margin-top: var(--fc-space-12); }
.oc-meta { font-size: var(--fc-font-caption-size); color: var(--fc-text-tertiary); margin-bottom: var(--fc-space-8); }
.oc-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.oc-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--fc-space-8); }
.oc-gallery:empty { display: none; }
.oc-image { min-width: 0; overflow-wrap: anywhere; font-size: var(--fc-font-caption-size); }
.oc-image img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: contain; border-radius: var(--fc-radius-md); background: var(--fc-bg-sunken); }
.oc-comment { padding: var(--fc-space-12); margin-bottom: var(--fc-space-8); background: var(--fc-bg-canvas); border-radius: var(--fc-radius-md); }
.oc-comments { padding: var(--fc-space-16); border-left: var(--fc-space-4) solid var(--fc-line-subtle); }
.oc-state { padding: var(--fc-space-24); border: var(--fc-hairline) dashed var(--fc-line-subtle); border-radius: var(--fc-radius-md); color: var(--fc-text-secondary); }
.oc-state--loading { border-style: solid; background: var(--fc-bg-sunken); animation: oc-pulse 1.6s ease-in-out infinite alternate; }
.oc-state--error { border-style: solid; border-left: var(--fc-space-4) solid var(--fc-danger); background: var(--fc-bg-surface); color: var(--fc-danger); }
.oc-person { padding-block: var(--fc-space-12); border-bottom: var(--fc-hairline) solid var(--fc-line-subtle); }
.oc-person:last-child { border: 0; }
.oc-person p { margin-bottom: var(--fc-space-4); }
.oc-person code { display: block; }
.oc-messaging-layout { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); gap: var(--fc-space-16); }
.oc-thread { display: block; width: 100%; margin-bottom: var(--fc-space-8); text-align: left; overflow-wrap: anywhere; }
.oc-conversation { min-width: 0; background: var(--fc-bg-surface); padding: var(--fc-space-20); border-radius: var(--fc-radius-lg); }
.oc-members { padding: var(--fc-space-8); margin-bottom: var(--fc-space-16); background: var(--fc-bg-canvas); border-radius: var(--fc-radius-md); }
.oc-message { padding: var(--fc-space-12); margin: var(--fc-space-12) var(--fc-space-24) var(--fc-space-12) 0; background: var(--fc-bubble-in-bg); border-radius: var(--fc-radius-md); }
.oc-message--own { margin-inline: var(--fc-space-24) 0; background: var(--fc-bubble-out-bg); }
.oc-message p { margin-bottom: var(--fc-space-4); }
.oc-messages { max-height: 560px; overflow-y: auto; margin-bottom: var(--fc-space-16); }
.oc-boundary { padding: var(--fc-space-16); color: var(--fc-text-tertiary); font-size: var(--fc-font-caption-size); border-top: var(--fc-hairline) solid var(--fc-line-subtle); }
.oc-boundary summary { min-height: var(--fc-space-48); display: flex; align-items: center; }
.oc-boundary p { margin-top: var(--fc-space-8); }
.oc-footer { max-width: var(--oc-content-width); margin: var(--fc-space-24) auto 0; padding: var(--fc-space-24); color: var(--fc-text-tertiary); font-size: var(--fc-font-caption-size); border-top: var(--fc-hairline) solid var(--fc-line-subtle); }
@keyframes oc-pulse { from { opacity: 1; } to { opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .oc-state--loading { animation: none; } }
@media (max-width: 960px) {
  .oc-app { grid-template-columns: minmax(0, 1fr); gap: var(--fc-space-16); }
  .oc-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .oc-nav button { text-align: center; padding: var(--fc-space-8); }
  .oc-nav .oc-boundary { display: none; }
  .oc-messaging-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .oc-topbar, .oc-app, .oc-status { padding-inline: var(--fc-space-12); }
  .oc-app { padding-top: var(--fc-space-12); }
  .oc-auth { margin-block: var(--fc-space-16); padding: var(--fc-space-12); }
  .oc-auth .oc-intro { padding: var(--fc-space-16); }
  .oc-nav { gap: var(--fc-space-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .oc-nav button { font-size: var(--fc-font-label-size); }
  .oc-card, .oc-composer, .oc-profile, .oc-group-form, .oc-conversation { padding: var(--fc-space-12); }
  .oc-form-row { gap: var(--fc-space-8); }
  .oc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .oc-heading { margin-bottom: var(--fc-space-16); }
}