/* ==========================================================================
   chat.exe - AIM-era chat room window styling for Nicholai OS.
   Loaded on os.html after xp.css. Styling pair for assets/js/chat.js.
   ========================================================================== */

/* ---------- AIM-era chat room (chat.exe) ---------- */
.xp-desktop .window--chat .window-body {
  flex-direction: column;
  padding: 0;
  background: #ece9d8;
}

.aim {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  font-family: Tahoma, "Pixelated MS Sans Serif", Arial, sans-serif;
  font-size: 11px;
  color: #000;
  background: #ece9d8;
}

/* Menu strip */
.aim__menu {
  flex: none;
  display: flex;
  gap: 14px;
  padding: 4px 9px 5px;
  background: linear-gradient(180deg, #fdfdfd 0%, #eef1f7 100%);
  border-bottom: 1px solid #b7c1d8;
  cursor: default;
  user-select: none;
}

.aim__menu span:hover {
  color: #1c3f8f;
  text-decoration: underline;
}

/* Format toolbar */
.aim__toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  background: linear-gradient(180deg, #f6f7fb 0%, #e2e7f1 100%);
  border-bottom: 1px solid #a9b4cc;
  user-select: none;
}

.aim__combo {
  height: 20px;
  line-height: 18px;
  padding: 0 17px 0 5px;
  border: 1px solid #7f9db9;
  background: #fff
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 4'%3E%3Cpath d='M0 0h7L3.5 4z' fill='%23000'/%3E%3C/svg%3E")
    no-repeat right 3px center;
  background-size: 7px 4px;
  color: #000;
  cursor: default;
  white-space: nowrap;
}

.aim__combo--font {
  width: 74px;
}

.aim__combo--size {
  width: 34px;
}

.aim__fmt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid #8794b2;
  border-radius: 2px;
  background: linear-gradient(180deg, #fbfcfe 0%, #d8deee 100%);
  box-shadow: inset 0 1px 0 #fff;
  color: #24365f;
  cursor: default;
}

.aim__fmt--b {
  font-weight: 700;
}

.aim__fmt--i {
  font-style: italic;
}

.aim__fmt--u {
  text-decoration: underline;
}

.aim__fmt--color {
  font-weight: 700;
  color: #c00;
}

.aim__swatch {
  width: 24px;
  height: 15px;
  border: 1px solid #7f9db9;
  background: linear-gradient(90deg,
    #cc0000 0 16.6%, #e07000 16.6% 33.3%, #c9c900 33.3% 50%,
    #009300 50% 66.6%, #0060cc 66.6% 83.3%, #6600aa 83.3% 100%);
  cursor: default;
}

.aim__spacer {
  flex: 1 1 auto;
}

.aim__tool {
  height: 20px;
  padding: 0 7px;
  border: 1px solid #8794b2;
  border-radius: 2px;
  background: linear-gradient(180deg, #fbfcfe 0%, #d8deee 100%);
  box-shadow: inset 0 1px 0 #fff;
  font-family: inherit;
  font-size: 11px;
  color: #24365f;
  cursor: pointer;
}

.aim__tool:hover {
  background: linear-gradient(180deg, #fff 0%, #e7edf9 100%);
}

.aim__tool:active,
.aim__tool[aria-pressed="true"] {
  background: linear-gradient(180deg, #c9d8f5 0%, #a9c0e8 100%);
  border-color: #5b7bbd;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.25);
}

.aim__tool--smiley {
  font-family: "Courier New", monospace;
  letter-spacing: -0.5px;
}

/* Transcript + roster */
.aim__main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

.aim__log {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: 7px 9px;
  background: #fff;
  border-right: 1px solid #b7c1d8;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.08);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.aim__line {
  margin: 0 0 3px;
}

.aim__time {
  margin-right: 5px;
  color: #7c7c7c;
  font-size: 10px;
}

.aim__name {
  font-weight: 700;
}

.aim__text {
  color: #111;
}

.aim__line--self {
  background: #f4f7ff;
}

.aim__line--system,
.aim__line--system .aim__text {
  margin: 5px 0;
  color: #6a6a6a;
  font-style: italic;
}

.aim__line--join,
.aim__line--join .aim__text {
  margin: 5px 0;
  color: #7a2ea0;
}

.aim__line--leave,
.aim__line--leave .aim__text {
  margin: 5px 0;
  color: #9c1b1b;
}

/* Roster */
.aim__roster {
  flex: none;
  width: 152px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: linear-gradient(180deg, #f2f5fb 0%, #dde4f2 100%);
}

.aim__roster-head {
  flex: none;
  margin: 0;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
  background: linear-gradient(90deg, #5572cf 0%, #7b9de8 55%, #9db8f2 100%);
}

.aim__roster-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 5px 6px;
  list-style: none;
}

.aim__person {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  padding: 2px 4px;
  border-radius: 2px;
}

.aim__person:hover {
  background: rgba(49, 106, 197, 0.14);
}

.aim__person-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}

.aim__person-name {
  font-weight: 700;
  overflow-wrap: anywhere;
}

.aim__person-status {
  color: #5c5c5c;
  font-size: 10px;
  font-style: italic;
  overflow-wrap: anywhere;
}

.aim__person--away .aim__person-name {
  color: #8a8a8a;
}

.aim__bullet {
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: 4px;
  border-radius: 50%;
  background: #39b54a;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}

.aim__person--away .aim__bullet {
  background: #e0a800;
}

/* Composer */
.aim__compose {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 6px 7px;
  background: #ece9d8;
  border-top: 1px solid #b7c1d8;
}

.aim__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 4px 5px;
  resize: none;
  border: 1px solid #7f9db9;
  border-radius: 0;
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.4;
}

.aim__input:focus-visible {
  outline: 1px dotted #000;
  outline-offset: -3px;
}

.aim__send {
  flex: none;
  width: 66px;
  height: 26px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: linear-gradient(180deg, #fff 0%, #f0f4fb 45%, #dfe6f2 46%, #c9d4e8 100%);
  color: #000;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.aim__send:hover {
  background: linear-gradient(180deg, #fff 0%, #eaf0fa 45%, #d5dff0 46%, #bccbe4 100%);
}

.aim__send:active {
  background: linear-gradient(180deg, #c3d0e8 0%, #dfe7f5 100%);
}

/* Status bar */
.xp-desktop .window--chat .status-bar {
  flex: none;
  margin: 0;
}

.aim__status-people {
  flex: 1 1 auto;
}

.aim__status-typing {
  flex: none;
  min-width: 120px;
  color: #5a5a5a;
  font-style: italic;
  text-align: right;
}

/* Keep the roster visible beside the transcript, even on phones: the chat
   column narrows instead of the people list disappearing. */
@media (max-width: 560px) {
  .aim__roster {
    width: 118px;
  }

  .aim__status-typing {
    min-width: 96px;
  }

  .aim__status-people {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

@media (max-width: 480px) {
  /* Format controls add up to ~375px, so let them wrap on a phone-width window */
  .aim__toolbar {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  .aim__combo--font {
    width: 62px;
  }
}

@media (max-width: 420px) {
  .aim__roster {
    width: 92px;
  }

  .aim__roster-head {
    padding: 4px 6px;
  }

  .aim__roster-list {
    padding: 4px 3px;
  }

  .aim__person {
    gap: 4px;
    padding: 2px 2px;
  }
}