/*
  Add after room-devices.css. The final section may also be loaded by
  tavern.html; room-devices.js injects that link into its same-origin iframe.
*/

.room-phone-object {
  background-image: url("assets/phone-era-atlas-v20.webp") !important;
}

.device-app-chrome {
  flex: 0 0 auto;
  color: #111;
  background: #d4d0c8;
  border-bottom: 1px solid #717171;
  box-shadow: inset 0 1px #fff;
}

.device-app-chrome[hidden] {
  display: none !important;
}

#room-device[data-app="aol"] .device-toolbar {
  display: none !important;
}

#room-device[data-view="aol-suspended"] .device-body {
  grid-template-columns: minmax(0, 1fr);
}

#room-device[data-view="aol-suspended"] .device-apps {
  display: none !important;
}

#room-device[data-app="aol"] .device-browser-title {
  color: #fff;
  background: linear-gradient(90deg, #00006f, #1672b8);
  text-shadow: 1px 1px #000;
}

#room-device[data-app="aol"][data-year="1998"] .device-browser-title {
  background: linear-gradient(90deg, #00126f, #0081c8);
}

#room-device[data-app="aol"][data-year="2001"] .device-browser-title {
  background: linear-gradient(90deg, #053570, #29a9a0);
}

#room-device[data-app="aol"][data-year="2002"] .device-browser-title {
  background: linear-gradient(90deg, #101b2a, #cf5517);
}

#room-device[data-app="aol"][data-year="2003"] .device-browser-title {
  background: linear-gradient(90deg, #2a0e60, #c12a87);
}

.device-aol-menu,
.device-aol-toolbar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px 6px;
}

.device-aol-menu {
  min-height: 28px;
  border-bottom: 1px solid #8e8e8e;
}

.device-aol-menu button,
.device-aol-toolbar button {
  min-height: 25px;
  padding: 2px 8px !important;
  color: #111 !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  font-size: 12px !important;
}

.device-aol-menu button:hover,
.device-aol-menu button:focus-visible {
  color: #fff !important;
  background: #000080 !important;
  border-color: #000080 !important;
}

.device-aol-toolbar {
  min-height: 45px;
  gap: 5px;
  overflow-x: auto;
  background: linear-gradient(#f7f6f2, #c7c4bd);
}

.device-aol-toolbar button {
  flex: 0 0 auto;
  min-height: 34px;
  background: linear-gradient(#fff, #d5d2cb) !important;
  border: 2px outset #fff !important;
  font-weight: 700 !important;
}

.device-aol-toolbar button:active {
  border-style: inset !important;
}

.device-desktop-shortcuts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  max-width: 680px;
  margin-top: 20px;
}

.device-desktop-shortcuts button {
  min-height: 86px;
  padding: 15px !important;
  color: #fff !important;
  background: #00605f !important;
  border: 1px solid #fff !important;
  text-align: left;
  text-shadow: 1px 1px #000;
}

#room-device[data-skin="xp"] .device-desktop-shortcuts button {
  background: #2868b2 !important;
}

.device-aol-signon {
  display: grid;
  gap: 12px;
  align-content: start;
  width: min(100%, 560px);
  min-height: 390px;
  margin: 10px auto;
  padding: clamp(20px, 5vw, 42px);
  color: #182131;
  background: linear-gradient(#fffdf5, #ece7d8);
  border: 2px solid #111820;
  border-radius: 8px;
  box-shadow: 8px 10px 24px #0003, inset 1px 1px #fff;
  text-align: center;
}

.device-aol-mark {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-inline: auto;
  color: #102c79;
  background: #fff;
  border: 3px solid #102c79;
  border-radius: 50%;
  font-size: 34px;
  font-weight: 800;
}

.device-aol-kicker {
  margin: 0 !important;
  color: #114f85;
  font-size: 11px !important;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.device-aol-profile {
  display: grid;
  gap: 4px;
  width: min(100%, 390px);
  margin: 5px auto;
  text-align: left;
}

.device-aol-profile > div {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 8px;
  padding: 6px 8px;
  background: #fff;
  border: 1px inset #ddd;
}

.device-aol-profile dt,
.device-aol-profile dd {
  margin: 0;
}

.device-aol-profile dt {
  font-weight: 700;
}

#room-device .device-aol-primary {
  min-width: 145px;
  margin: 8px auto 0;
  padding: 9px 18px !important;
  color: #fff !important;
  background: linear-gradient(#176ba8, #073b70) !important;
  border: 2px outset #9edcff !important;
  font-weight: 800;
}

.device-aol-welcome {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

#room-device .device-aol-welcome-button {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 2px 9px;
  min-height: 86px;
  padding: 13px !important;
  color: #111 !important;
  background: linear-gradient(#fff, #e4e1d8) !important;
  border: 2px outset #fff !important;
  text-align: left;
}

.device-aol-welcome-button > span {
  grid-row: 1 / span 2;
  color: #153d88;
  font-size: 28px;
  line-height: 1;
}

.device-aol-welcome-button b,
.device-aol-welcome-button small {
  display: block;
}

.device-aol-welcome-button small {
  color: #555;
  line-height: 1.35;
}

.device-aol-mail {
  margin: 14px 0;
  padding: 0;
  border: 2px inset #ddd;
  list-style: none;
}

.device-aol-mail li {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(100px, .7fr) minmax(150px, 1.3fr);
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border-bottom: 1px solid #bbb;
}

.device-aol-mail small,
.device-aol-mail span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-aol-private-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  max-width: 620px;
  margin-top: 20px;
  padding: 16px;
  background: #d4d0c8;
  border: 2px outset #fff;
}

.device-aol-private-form label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  font-weight: 700;
}

.device-aol-private-form input {
  width: 100%;
  padding: 6px;
  background: #fff;
  border: 2px inset #fff;
}

.device-aol-private-response {
  grid-column: 1 / -1;
  margin: 0 !important;
  color: #7a1313;
}

.device-aol-favorites {
  display: grid;
  gap: 5px;
  max-width: 720px;
  margin-top: 16px;
  padding: 7px;
  background: #fff;
  border: 2px inset #ddd;
}

#room-device .device-aol-favorites button {
  padding: 8px 10px !important;
  color: #000080 !important;
  background: #fff !important;
  border: 1px solid transparent !important;
  text-align: left;
  text-decoration: underline;
}

#room-device .device-aol-favorites button:hover,
#room-device .device-aol-favorites button:focus-visible {
  background: #e8e8ff !important;
  border-color: #000080 !important;
}

.device-content[data-view="aol-tavern"] {
  padding: 0;
  overflow: hidden;
  background: #d4d0c8;
}

.device-aol-chat-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
}

.device-aol-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 45px;
  padding: 5px 7px 5px 10px;
  color: #111;
  background: linear-gradient(#fff, #d8d5df);
  border-bottom: 1px solid #868091;
}

.device-aol-chat-header div {
  min-width: 0;
}

.device-aol-chat-header b,
.device-aol-chat-header small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.device-aol-chat-header small {
  color: #625d68;
  font-size: 10px;
}

.device-aol-tavern-frame {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 420px;
  background: #fff;
  border: 0;
}

@media (max-width: 650px) {
  .device-desktop-shortcuts,
  .device-aol-welcome {
    grid-template-columns: 1fr;
  }

  .device-aol-menu,
  .device-aol-toolbar {
    overflow-x: auto;
  }

  .device-aol-mail li {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .device-aol-private-form,
  .device-aol-private-form label {
    grid-template-columns: 1fr;
  }
}

/*
  Embedded Tavern mode. This preserves the native transcript, roster, room
  header, and composer while the parent AOL client owns application chrome.
*/
body[data-embedded="aol"] {
  min-height: 100vh;
  color: #111;
  background: #d4d0c8;
}

body[data-embedded="aol"] .desktop {
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

body[data-embedded="aol"] .aol-window {
  min-height: 100vh;
  overflow: hidden;
  border: 0;
  box-shadow: none;
}

body[data-embedded="aol"] .titlebar,
body[data-embedded="aol"] .menubar,
body[data-embedded="aol"] .sim-notice,
body[data-embedded="aol"] .tavern-masthead,
body[data-embedded="aol"] .places-panel,
body[data-embedded="aol"] .era-switcher,
body[data-embedded="aol"] .statusbar,
body[data-embedded="aol"] noscript {
  display: none !important;
}

body[data-embedded="aol"] .chat-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(145px, 190px);
  gap: 5px;
  min-height: 100vh;
  padding: 5px;
}

body[data-embedded="aol"] .conversation {
  min-height: calc(100vh - 10px);
}

body[data-embedded="aol"] .roster-panel {
  display: block;
  min-width: 0;
}

body[data-embedded="aol"] .conversation-bar {
  min-height: 34px;
}

body[data-embedded="aol"] .transcript {
  min-height: 260px;
}

@media (max-width: 620px) {
  body[data-embedded="aol"] .chat-layout {
    grid-template-columns: 1fr;
  }

  body[data-embedded="aol"] .roster-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  body[data-embedded="aol"] .roster-panel .panel-title,
  body[data-embedded="aol"] .roster-panel .roster-note {
    grid-column: 1;
  }

  body[data-embedded="aol"] .roster-panel .roster {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

/* Append to room-devices-aol-addon.css. */

.device-aol-listing-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 14px 0 10px;
  padding: 6px;
  background: #d4d0c8;
  border: 2px outset #fff;
}

#room-device .device-aol-category-button {
  flex: 1 1 150px;
  min-height: 36px;
  padding: 6px 9px !important;
  color: #111 !important;
  background: linear-gradient(#fff, #d5d2cb) !important;
  border: 2px outset #fff !important;
  font-weight: 700;
}

#room-device .device-aol-category-button[aria-pressed="true"] {
  color: #fff !important;
  background: #000080 !important;
  border-style: inset !important;
}

.device-aol-room-list {
  display: grid;
  gap: 0;
  max-width: 760px;
  background: #fff;
  border: 2px inset #ddd;
}

.device-aol-room-list h3 {
  margin: 0 !important;
  padding: 8px 10px;
  color: #fff;
  background: #000080;
  font-size: 13px !important;
}

#room-device .device-aol-room-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 3px 16px;
  width: 100%;
  min-height: 66px;
  padding: 10px 12px !important;
  color: #111 !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid #aaa !important;
  border-radius: 0 !important;
  text-align: left;
  text-decoration: none !important;
}

#room-device .device-aol-room-row:last-child {
  border-bottom: 0 !important;
}

#room-device .device-aol-room-row:hover,
#room-device .device-aol-room-row:focus-visible {
  color: #000080 !important;
  background: #eef1ff !important;
}

.device-aol-room-name {
  grid-column: 1;
  color: #000080;
  text-decoration: underline;
}

.device-aol-room-description {
  grid-column: 1;
  color: #4d4d4d;
  line-height: 1.35;
}

.device-aol-room-action {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: #333;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 650px) {
  #room-device .device-aol-room-row {
    grid-template-columns: 1fr;
  }

  .device-aol-room-action {
    grid-column: 1;
    grid-row: auto;
  }
}