/* Olie Chat — AOL/Win95-style. Scoped to .oc-app to avoid clashing with host pages.
   The chat itself runs inside an iframe so host CSS can't bleed in either way;
   these styles apply inside that iframe.
*/

:root {
  --oc-bg: #c0c0c0;
  --oc-panel: #d4d0c8;
  --oc-text: #000;
  --oc-muted: #444;
  --oc-accent: #000080;       /* AOL navy */
  --oc-accent-fg: #fff;
  --oc-link: #0000ee;
  --oc-shadow-light: #fff;
  --oc-shadow-dark: #808080;
  --oc-shadow-darker: #404040;
  --oc-input: #fff;
  --oc-host: #008000;          /* hosts in green */
  --oc-admin: #c00000;         /* admins in dark red */
  --oc-system: #808080;
  --oc-prayer: #6a0dad;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--oc-bg);
  font-family: "MS Sans Serif", "Geneva", "Tahoma", sans-serif;
  font-size: 12px;
  color: var(--oc-text);
}

.oc-app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  min-height: 0;
}

.oc-titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, var(--oc-accent), #1084d0);
  color: var(--oc-accent-fg);
  font-weight: bold;
  padding: 4px 6px;
  font-size: 12px;
  user-select: none;
}
.oc-titlebar .oc-logo {
  height: 18px;
  vertical-align: middle;
  image-rendering: pixelated;
}

.oc-toolbar {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--oc-panel);
  border-bottom: 1px solid var(--oc-shadow-dark);
}

.oc-btn {
  font-family: inherit;
  font-size: 12px;
  padding: 2px 10px;
  background: var(--oc-panel);
  color: var(--oc-text);
  border: 1px solid var(--oc-shadow-darker);
  border-top-color: var(--oc-shadow-light);
  border-left-color: var(--oc-shadow-light);
  cursor: pointer;
  user-select: none;
  min-height: 22px;
}
.oc-btn:active,
.oc-btn[aria-pressed="true"] {
  border-top-color: var(--oc-shadow-darker);
  border-left-color: var(--oc-shadow-darker);
  border-right-color: var(--oc-shadow-light);
  border-bottom-color: var(--oc-shadow-light);
  padding-top: 3px;
  padding-bottom: 1px;
}
.oc-btn:disabled { color: #888; cursor: default; }

.oc-main {
  flex: 1;
  display: flex;
  min-height: 0;
}

.oc-rooms {
  width: 180px;
  background: var(--oc-panel);
  border-right: 1px solid var(--oc-shadow-dark);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.oc-rooms h3, .oc-occupants h3 {
  margin: 0;
  padding: 4px 6px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: linear-gradient(90deg, var(--oc-accent), #4a6cb3);
  color: #fff;
}

.oc-rooms-list, .oc-occupants-list {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: #fff;
  border-top: 1px solid var(--oc-shadow-dark);
}

.oc-rooms-list li, .oc-occupants-list li {
  padding: 3px 6px;
  border-bottom: 1px dotted #ccc;
  cursor: pointer;
  font-size: 12px;
}
.oc-rooms-list li:hover, .oc-occupants-list li:hover { background: #ffffe1; }
.oc-rooms-list li.active { background: var(--oc-accent); color: #fff; }
.oc-rooms-list li.oc-room-locked { color: #888; font-style: italic; }
.oc-rooms-list li.oc-room-locked:hover { background: #fff8e1; }

.oc-rooms-actions {
  padding: 4px;
  border-top: 1px solid var(--oc-shadow-dark);
  background: var(--oc-panel);
}
.oc-rooms-actions .oc-btn { width: 100%; }

.oc-room-tag-prayer { color: var(--oc-prayer); font-style: italic; }

.oc-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.oc-room-header {
  background: var(--oc-panel);
  padding: 4px 8px;
  border-bottom: 1px solid var(--oc-shadow-dark);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.oc-room-header .oc-room-name { font-weight: bold; }
.oc-room-header .oc-room-topic { color: var(--oc-muted); font-style: italic; font-size: 11px; }

.oc-messages {
  flex: 1;
  overflow-y: auto;
  background: #fff;
  padding: 4px 8px;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 14px;
  line-height: 1.35;
}

.oc-msg {
  margin: 0 0 2px;
  word-wrap: break-word;
}
.oc-msg .oc-msg-ts {
  display: inline-block;
  min-width: 100px;
  font-size: 11px;
  color: var(--oc-muted);
  font-family: "Menlo", "Consolas", monospace;
  user-select: none;
}
.oc-msg .oc-handle {
  font-weight: bold;
  cursor: pointer;
}
.oc-msg .oc-handle:hover { text-decoration: underline; }
.oc-msg .oc-handle.role-host { color: var(--oc-host); }
.oc-msg .oc-handle.role-tenant_admin { color: var(--oc-admin); }
.oc-msg.oc-system { color: var(--oc-system); font-style: italic; }
.oc-msg.oc-emote { color: var(--oc-prayer); font-style: italic; }
.oc-msg.oc-deleted { color: #888; font-style: italic; text-decoration: line-through; }

.oc-msg .oc-reactions {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  color: var(--oc-muted);
  cursor: pointer;
}

.oc-occupants {
  width: 160px;
  background: var(--oc-panel);
  border-left: 1px solid var(--oc-shadow-dark);
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.oc-occupants-list .oc-occ-host { color: var(--oc-host); font-weight: bold; }
.oc-occupants-list .oc-occ-tenant_admin { color: var(--oc-admin); font-weight: bold; }

.oc-compose {
  background: var(--oc-panel);
  padding: 4px;
  border-top: 1px solid var(--oc-shadow-dark);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.oc-format {
  display: flex;
  gap: 2px;
}
.oc-format .oc-btn { padding: 2px 6px; font-weight: bold; min-height: 20px; }
.oc-format .oc-btn[data-format="i"] { font-style: italic; }
.oc-format .oc-btn[data-format="u"] { text-decoration: underline; }
.oc-format .oc-btn[aria-pressed="true"] {
  background: var(--oc-accent);
  color: var(--oc-accent-fg);
  border-top-color: var(--oc-shadow-darker);
  border-left-color: var(--oc-shadow-darker);
  border-right-color: var(--oc-shadow-light);
  border-bottom-color: var(--oc-shadow-light);
}
.oc-format select { font-family: inherit; font-size: 12px; }

.oc-compose-row {
  display: flex;
  gap: 4px;
}
.oc-compose-row textarea {
  flex: 1;
  resize: none;
  height: 44px;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 14px;
  border: 1px solid var(--oc-shadow-darker);
  border-top-color: var(--oc-shadow-darker);
  border-left-color: var(--oc-shadow-darker);
  border-right-color: var(--oc-shadow-light);
  border-bottom-color: var(--oc-shadow-light);
  padding: 4px 6px;
  background: var(--oc-input);
  color: var(--oc-text);
}
.oc-compose-row .oc-send {
  font-weight: bold;
  min-width: 64px;
}

.oc-typing { font-size: 11px; color: var(--oc-muted); font-style: italic; padding: 0 4px; height: 14px; }

/* Login screen */
.oc-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  background: var(--oc-bg);
  gap: 14px;
  padding: 20px;
}
.oc-login h2 { margin: 0; }
.oc-login .oc-card {
  background: var(--oc-panel);
  border: 2px solid var(--oc-shadow-darker);
  border-top-color: var(--oc-shadow-light);
  border-left-color: var(--oc-shadow-light);
  padding: 16px;
  min-width: 320px;
}
.oc-login label { display: block; margin: 6px 0 2px; font-weight: bold; }
.oc-login input {
  width: 100%;
  padding: 4px 6px;
  font: inherit;
  border: 1px solid var(--oc-shadow-darker);
  border-top-color: var(--oc-shadow-darker);
  border-left-color: var(--oc-shadow-darker);
  border-right-color: var(--oc-shadow-light);
  border-bottom-color: var(--oc-shadow-light);
  background: var(--oc-input);
}
.oc-login .oc-actions { display: flex; gap: 6px; margin-top: 12px; justify-content: flex-end; }
.oc-login .oc-error { color: #c00; font-size: 11px; margin-top: 6px; min-height: 14px; }

/* IM popups */
.oc-ims {
  position: fixed;
  bottom: 0;
  right: 8px;
  display: flex;
  gap: 6px;
  align-items: flex-end;
}
.oc-im {
  width: 280px;
  background: var(--oc-panel);
  border: 2px solid var(--oc-shadow-darker);
  border-top-color: var(--oc-shadow-light);
  border-left-color: var(--oc-shadow-light);
  display: flex;
  flex-direction: column;
  max-height: 320px;
}
.oc-im .oc-im-title {
  background: linear-gradient(90deg, var(--oc-accent), #1084d0);
  color: #fff;
  padding: 3px 6px;
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  font-size: 11px;
  cursor: default;
}
.oc-im .oc-im-title button { all: unset; cursor: pointer; padding: 0 4px; }
.oc-im .oc-im-log {
  flex: 1;
  background: #fff;
  overflow-y: auto;
  padding: 4px 6px;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 13px;
}
.oc-im .oc-im-input {
  display: flex;
  gap: 4px;
  padding: 4px;
}
.oc-im .oc-im-input input {
  flex: 1;
  padding: 3px 4px;
  font: inherit;
  border: 1px solid var(--oc-shadow-darker);
  background: #fff;
}

/* User context menu */
.oc-menu {
  position: absolute;
  background: var(--oc-panel);
  border: 1px solid var(--oc-shadow-darker);
  border-top-color: var(--oc-shadow-light);
  border-left-color: var(--oc-shadow-light);
  min-width: 160px;
  z-index: 10000;
  box-shadow: 1px 1px 0 var(--oc-shadow-darker);
}
.oc-menu button {
  all: unset;
  display: block;
  width: 100%;
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
}
.oc-menu button:hover { background: var(--oc-accent); color: #fff; }
.oc-menu .oc-sep { border-top: 1px solid var(--oc-shadow-dark); margin: 2px 0; }

/* Tiny modal for confirmations / prayer requests / etc. */
.oc-modal-back {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  display: flex; align-items: center; justify-content: center;
  z-index: 10001;
}
.oc-modal {
  background: var(--oc-panel);
  border: 2px solid var(--oc-shadow-darker);
  border-top-color: var(--oc-shadow-light);
  border-left-color: var(--oc-shadow-light);
  padding: 16px;
  min-width: 320px;
  max-width: 480px;
}
.oc-modal h3 { margin: 0 0 8px; }
.oc-modal .oc-actions { display: flex; gap: 6px; justify-content: flex-end; margin-top: 12px; }
.oc-modal textarea, .oc-modal input {
  width: 100%; padding: 4px 6px; font: inherit;
  border: 1px solid var(--oc-shadow-darker); background: #fff;
}

/* "Subtle" retro intensity — cleaner, modern but with retro accents. */
.oc-app[data-retro="subtle"] {
  --oc-bg: #f5f5f7;
  --oc-panel: #ececec;
  --oc-shadow-light: #ffffff;
  --oc-shadow-dark: #cfcfcf;
  --oc-shadow-darker: #a0a0a0;
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
}
.oc-app[data-retro="subtle"] .oc-messages,
.oc-app[data-retro="subtle"] .oc-im .oc-im-log {
  font-family: -apple-system, "Segoe UI", system-ui, sans-serif;
  font-size: 13px;
}

/* Mobile */
@media (max-width: 720px) {
  .oc-rooms, .oc-occupants { width: 130px; }
}
@media (max-width: 540px) {
  .oc-occupants { display: none; }
  .oc-rooms { width: 110px; }
}