/* ============================================================
   Discord Backup SPA — Combined Stylesheet
   1. Original chatlog CSS (verbatim from export)
   2. SPA chrome (header, toolbar, pagination, loading)
   3. Mobile responsive overrides
   ============================================================ */

/* --- Font faces --- */
@font-face{src:url("https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-400.woff2");font-family:gg sans;font-weight:400;font-style:normal}
@font-face{src:url("https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-500.woff2");font-family:gg sans;font-weight:500;font-style:normal}
@font-face{src:url("https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-600.woff2");font-family:gg sans;font-weight:600;font-style:normal}
@font-face{src:url("https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-700.woff2");font-family:gg sans;font-weight:700;font-style:normal}
@font-face{src:url("https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-normal-800.woff2");font-family:gg sans;font-weight:800;font-style:normal}
@font-face{src:url("https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-400.woff2");font-family:gg sans;font-weight:400;font-style:italic}
@font-face{src:url("https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-500.woff2");font-family:gg sans;font-weight:500;font-style:italic}
@font-face{src:url("https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-600.woff2");font-family:gg sans;font-weight:600;font-style:italic}
@font-face{src:url("https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-700.woff2");font-family:gg sans;font-weight:700;font-style:italic}
@font-face{src:url("https://cdn.jsdelivr.net/gh/Tyrrrz/DiscordFonts@master/ggsans-italic-800.woff2");font-family:gg sans;font-weight:800;font-style:italic}

/* --- Base --- */
html,body{margin:0;padding:0;background-color:#36393e;color:#dcddde;font-family:"gg sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:17px;font-weight:400;scroll-behavior:smooth}
a{color:#00aff4;text-decoration:none}
a:hover{text-decoration:underline}
img{object-fit:contain;image-rendering:high-quality;image-rendering:-webkit-optimize-contrast}

/* --- Preamble (original) --- */
.preamble{display:grid;grid-template-columns:auto 1fr;max-width:100%;padding:1rem}
.preamble__guild-icon-container{grid-column:1}
.preamble__guild-icon{max-width:88px;max-height:88px}
.preamble__entries-container{grid-column:2;margin-left:1rem}
.preamble__entry{margin-bottom:0.15rem;color:#ffffff;font-size:1.4rem}
.preamble__entry--small{font-size:1rem}

/* --- Chatlog (original) --- */
.chatlog{padding:1rem 0;width:100%;border-top:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1)}
.chatlog__message-group{margin-bottom:1rem;content-visibility:auto;contain-intrinsic-size:auto 80px}
.chatlog__message-container{background-color:transparent;transition:background-color 1s ease}
.chatlog__message-container--highlighted{background-color:rgba(114,137,218,0.2)}
.chatlog__message-container--pinned{background-color:rgba(249,168,37,0.05)}
.chatlog__message{display:grid;grid-template-columns:auto 1fr;padding:0.15rem 0;direction:ltr;unicode-bidi:bidi-override}
.chatlog__message:hover{background-color:#32353b}
.chatlog__message:hover .chatlog__short-timestamp{display:block}
.chatlog__message-aside{grid-column:1;width:72px;padding:0.15rem 0.15rem 0 0.15rem;text-align:center}
.chatlog__reply-symbol{height:10px;margin:6px 4px 4px 36px;border-left:2px solid #4f545c;border-top:2px solid #4f545c;border-radius:8px 0 0 0}
.chatlog__avatar{width:40px;height:40px;border-radius:50%}
.chatlog__short-timestamp{display:none;color:#a3a6aa;font-size:0.75rem;font-weight:500;direction:ltr;unicode-bidi:bidi-override}
.chatlog__message-primary{grid-column:2;min-width:0}
.chatlog__reply{display:flex;margin-bottom:0.15rem;align-items:center;color:#b5b6b8;font-size:0.875rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chatlog__reply-avatar{width:16px;height:16px;margin-right:0.25rem;border-radius:50%}
.chatlog__reply-author{margin-right:0.3rem;font-weight:600}
.chatlog__reply-content{overflow:hidden;text-overflow:ellipsis}
.chatlog__reply-link{cursor:pointer}
.chatlog__reply-link *{display:inline;pointer-events:none}
.chatlog__reply-link .chatlog__markdown-quote{display:inline}
.chatlog__reply-link .chatlog__markdown-pre{display:inline}
.chatlog__reply-link:hover{color:#ffffff}
.chatlog__reply-link:hover *:not(.chatlog__markdown-spoiler){color:inherit}
.chatlog__reply-edited-timestamp{margin-left:0.25rem;color:#a3a6aa;font-size:0.75rem;font-weight:500;direction:ltr;unicode-bidi:bidi-override}
.chatlog__system-notification-icon{width:18px;height:18px}
.chatlog__system-notification-author{font-weight:500;color:#ffffff}
.chatlog__system-notification-content{color:#96989d}
.chatlog__system-notification-link{font-weight:500;color:#ffffff}
.chatlog__system-notification-timestamp{margin-left:0.3rem;color:#a3a6aa;font-size:0.75rem;font-weight:500;direction:ltr;unicode-bidi:bidi-override}
.chatlog__system-notification-timestamp a{color:inherit}
.chatlog__header{margin-bottom:0.1rem}
.chatlog__author{font-weight:500;color:#ffffff}
.chatlog__author-tag{position:relative;top:-0.1rem;margin-left:0.3rem;padding:0.05rem 0.3rem;border-radius:3px;background-color:#5865F2;color:#ffffff;font-size:0.625rem;font-weight:500;line-height:1.3}
.chatlog__timestamp{margin-left:0.3rem;color:#a3a6aa;font-size:0.75rem;font-weight:500;direction:ltr;unicode-bidi:bidi-override}
.chatlog__timestamp a{color:inherit}
.chatlog__content{padding-right:1rem;font-size:0.95rem;word-wrap:break-word}
.chatlog__edited-timestamp{margin-left:0.15rem;color:#a3a6aa;font-size:0.75rem;font-weight:500}
.chatlog__attachment{position:relative;width:fit-content;margin-top:0.3rem;border-radius:3px;overflow:hidden}
.chatlog__attachment--hidden{cursor:pointer;box-shadow:0 0 1px 1px rgba(0,0,0,0.1)}
.chatlog__attachment--hidden *{pointer-events:none}
.chatlog__attachment-spoiler-caption{display:none;position:absolute;left:50%;top:50%;z-index:999;padding:0.4rem 0.8rem;border-radius:20px;transform:translate(-50%,-50%);background-color:rgba(0,0,0,0.9);color:#dcddde;font-size:0.9rem;font-weight:600;letter-spacing:0.05rem}
.chatlog__attachment--hidden .chatlog__attachment-spoiler-caption{display:block}
.chatlog__attachment--hidden:hover .chatlog__attachment-spoiler-caption{color:#fff}
.chatlog__attachment-media{max-width:45vw;max-height:500px;vertical-align:top;border-radius:3px}
.chatlog__attachment--hidden .chatlog__attachment-media{filter:blur(44px)}
.chatlog__attachment-generic{max-width:520px;width:100%;height:40px;padding:10px;border:1px solid #292b2f;border-radius:3px;background-color:#2f3136;overflow:hidden}
.chatlog__attachment--hidden .chatlog__attachment-generic{filter:blur(44px)}
.chatlog__attachment-generic-icon{float:left;width:30px;height:100%;margin-right:10px}
.chatlog__attachment-generic-size{color:#72767d;font-size:12px}
.chatlog__attachment-generic-name{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.chatlog__embed{display:flex;margin-top:0.3rem;max-width:520px}
.chatlog__embed-color-pill{flex-shrink:0;width:0.25rem;border-top-left-radius:3px;border-bottom-left-radius:3px}
.chatlog__embed-color-pill--default{background-color:#202225}
.chatlog__embed-content-container{display:flex;flex-direction:column;padding:0.5rem 0.6rem;border:1px solid rgba(46,48,54,0.6);border-top-right-radius:3px;border-bottom-right-radius:3px;background-color:rgba(46,48,54,0.3)}
.chatlog__embed-content{display:flex;width:100%}
.chatlog__embed-text{flex:1}
.chatlog__embed-author-container{display:flex;margin-bottom:0.5rem;align-items:center}
.chatlog__embed-author-icon{width:20px;height:20px;margin-right:0.5rem;border-radius:50%}
.chatlog__embed-author{color:#ffffff;font-size:0.875rem;font-weight:600;direction:ltr;unicode-bidi:bidi-override}
.chatlog__embed-author-link{color:#ffffff}
.chatlog__embed-title{margin-bottom:0.5rem;color:#ffffff;font-size:0.875rem;font-weight:600}
.chatlog__embed-description{color:#dcddde;font-weight:500;font-size:0.85rem}
.chatlog__embed-fields{display:flex;flex-wrap:wrap;gap:0 0.5rem}
.chatlog__embed-field{flex:0;min-width:100%;max-width:506px;padding-top:0.6rem;font-size:0.875rem}
.chatlog__embed-field--inline{flex:1;flex-basis:auto;min-width:50px}
.chatlog__embed-field-name{margin-bottom:0.2rem;color:#ffffff;font-weight:600}
.chatlog__embed-field-value{color:#dcddde;font-weight:500}
.chatlog__embed-thumbnail{flex:0;max-width:80px;max-height:80px;margin-left:1.2rem;border-radius:3px}
.chatlog__embed-images{display:grid;margin-top:0.6rem;grid-template-columns:repeat(2,1fr);gap:0.25rem}
.chatlog__embed-images--single{display:block}
.chatlog__embed-image{object-fit:cover;object-position:center;max-width:500px;max-height:400px;width:100%;height:100%;border-radius:3px}
.chatlog__embed-footer{margin-top:0.6rem;color:#dcddde}
.chatlog__embed-footer-icon{width:20px;height:20px;margin-right:0.2rem;border-radius:50%;vertical-align:middle}
.chatlog__embed-footer-text{vertical-align:middle;font-size:0.75rem;font-weight:500}
.chatlog__embed-invite-container{min-width:320px;padding:0.6rem 0.7rem;border:1px solid rgba(46,48,54,0.6);border-radius:3px;background-color:rgba(46,48,54,0.3)}
.chatlog__embed-invite-title{margin:0 0 0.8rem 0;color:#b9bbbe;font-size:0.75rem;font-weight:700;text-transform:uppercase}
.chatlog__embed-invite{display:flex}
.chatlog__embed-invite-guild-icon{width:50px;height:50px;border-radius:0.85rem}
.chatlog__embed-invite-info{margin-left:1rem}
.chatlog__embed-invite-guild-name{color:#ffffff;font-weight:600}
.chatlog__embed-invite-guild-name a{color:inherit}
.chatlog__embed-invite-channel-icon{width:18px;height:18px;vertical-align:bottom}
.chatlog__embed-invite-channel-name{font-size:0.9rem;font-weight:600}
.chatlog__embed-generic-image{object-fit:contain;object-position:left;max-width:45vw;max-height:500px;vertical-align:top;border-radius:3px}
.chatlog__embed-generic-video{object-fit:contain;object-position:left;max-width:45vw;max-height:500px;vertical-align:top;border-radius:3px}
.chatlog__embed-generic-gifv{object-fit:contain;object-position:left;max-width:45vw;max-height:500px;vertical-align:top;border-radius:3px}
.chatlog__embed-spotify{border:0}
.chatlog__embed-twitch{border:0}
.chatlog__embed-youtube-container{margin-top:0.6rem}
.chatlog__embed-youtube{border:0;border-radius:3px}
.chatlog__sticker{width:180px;height:180px}
.chatlog__sticker--media{max-width:100%;max-height:100%}
.chatlog__reactions{display:flex}
.chatlog__reaction{display:flex;margin:0.35rem 0.1rem 0.1rem 0;padding:0.125rem 0.375rem;border:1px solid transparent;border-radius:8px;background-color:#2f3136;align-items:center}
.chatlog__reaction:hover{border:1px solid hsla(0,0%,100%,.2);background-color:transparent}
.chatlog__reaction-count{min-width:9px;margin-left:0.35rem;color:#b9bbbe;font-size:0.875rem}
.chatlog__reaction:hover .chatlog__reaction-count{color:#dcddde}

/* --- Markdown (original) --- */
.chatlog__markdown{max-width:100%;line-height:1.3;overflow-wrap:break-word}
.chatlog__markdown h1{margin:1rem 0 0.5rem;color:#f2f3f5;font-size:1.5rem;line-height:1}
.chatlog__markdown h2{margin:1rem 0 0.5rem;color:#f2f3f5;font-size:1.25rem;line-height:1}
.chatlog__markdown h3{margin:1rem 0 0.5rem;color:#f2f3f5;font-size:1rem;line-height:1}
.chatlog__markdown h1:first-child,h2:first-child,h3:first-child{margin-top:0.5rem}
.chatlog__markdown ul,ol{margin:0 0 0 1rem;padding:0}
.chatlog__markdown-preserve{white-space:pre-wrap}
.chatlog__markdown-spoiler{background-color:rgba(255,255,255,0.1);padding:0 2px;border-radius:3px}
.chatlog__markdown-spoiler--hidden{cursor:pointer;background-color:#202225;color:rgba(0,0,0,0)}
.chatlog__markdown-spoiler--hidden:hover{background-color:rgba(32,34,37,0.8)}
.chatlog__markdown-spoiler--hidden::selection{color:rgba(0,0,0,0)}
.chatlog__markdown-quote{display:flex;margin:0.05rem 0}
.chatlog__markdown-quote-border{margin-right:0.5rem;border:2px solid #4f545c;border-radius:3px}
.chatlog__markdown-pre{background-color:#2f3136;font-family:"Consolas","Courier New",Courier,monospace;font-size:0.85rem;text-decoration:inherit}
.chatlog__markdown-pre--multiline{display:block;margin-top:0.25rem;padding:0.5rem;border:2px solid #282b30;border-radius:5px;color:#b9bbbe}
.chatlog__markdown-pre--multiline.hljs{background-color:#2f3136;color:#b9bbbe}
.chatlog__markdown-pre--inline{display:inline-block;padding:2px;border-radius:3px}
.chatlog__markdown-mention{border-radius:3px;padding:0 2px;background-color:rgba(88,101,242,.3);color:#dee0fc;font-weight:500}
.chatlog__markdown-mention:hover{background-color:#5865f2;color:#ffffff}
.chatlog__markdown-timestamp{background-color:rgba(255,255,255,0.1);padding:0 2px;border-radius:3px}
.chatlog__emoji{width:1.325rem;height:1.325rem;margin:0 0.06rem;vertical-align:-0.4rem}
.chatlog__emoji--small{width:1rem;height:1rem}
.chatlog__emoji--large{width:2.8rem;height:2.8rem}

/* --- Postamble (original) --- */
.postamble{padding:1.25rem}
.postamble__entry{color:#ffffff}

/* --- Search highlight (original) --- */
mark.search-highlight{background:#aa8800;color:inherit;border-radius:2px;padding:0 1px}
mark.search-highlight.active{background:#e67e00;color:#fff}


/* ============================================================
   2. SPA Chrome
   ============================================================ */

/* --- App header (fixed) --- */
.app-header{
  position:sticky;
  top:0;
  z-index:100;
  background-color:#2f3136;
  border-bottom:1px solid rgba(255,255,255,0.06);
  padding:0.6rem 1rem;
}
.app-header__inner{
  display:flex;
  align-items:center;
  max-width:1200px;
  margin:0 auto;
}
.app-header__icon{
  width:40px;
  height:40px;
  border-radius:50%;
  margin-right:0.75rem;
}
.app-header__info{
  display:flex;
  flex-direction:column;
}
.app-header__guild{
  color:#ffffff;
  font-size:1rem;
  font-weight:600;
}
.app-header__channel{
  display:flex;
  align-items:center;
  color:#8e9297;
  font-size:0.8rem;
}
.app-header__channel-icon{
  width:16px;
  height:16px;
  margin-right:0.25rem;
}

/* --- Toolbar --- */
.toolbar{
  display:flex;
  align-items:center;
  gap:0.75rem;
  padding:0.6rem 1rem;
  background-color:#2f3136;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:sticky;
  top:53px;
  z-index:99;
}
.toolbar__search{
  display:flex;
  align-items:center;
  flex:1;
  max-width:400px;
  gap:0.5rem;
}
.toolbar__search-input{
  flex:1;
  padding:0.4rem 0.6rem;
  border:none;
  border-radius:4px;
  background:#383a40;
  color:#dcddde;
  font-family:inherit;
  font-size:0.85rem;
  outline:none;
}
.toolbar__search-input::placeholder{color:#72767d}
.toolbar__search-input:focus{box-shadow:0 0 0 2px #5865f2}
.toolbar__search-count{
  color:#b5b6b8;
  font-size:0.75rem;
  white-space:nowrap;
  min-width:60px;
}
.toolbar__search-hint{
  display:inline-block;
  padding:0.1rem 0.4rem;
  border:1px solid #4f545c;
  border-radius:3px;
  background:transparent;
  color:#72767d;
  font-family:inherit;
  font-size:0.65rem;
}
.toolbar__filters{
  display:flex;
  align-items:center;
  gap:0.5rem;
}
.toolbar__select{
  padding:0.4rem 0.6rem;
  border:none;
  border-radius:4px;
  background:#383a40;
  color:#dcddde;
  font-family:inherit;
  font-size:0.85rem;
  outline:none;
  cursor:pointer;
}
.toolbar__select:focus{box-shadow:0 0 0 2px #5865f2}
.toolbar__btn{
  padding:0.4rem 0.75rem;
  border:none;
  border-radius:4px;
  background:#383a40;
  color:#dcddde;
  font-family:inherit;
  font-size:0.85rem;
  cursor:pointer;
  white-space:nowrap;
}
.toolbar__btn:hover{background:#40444b}
.toolbar__btn:active{background:#4f545c}

/* --- Pagination --- */
.pagination{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1rem;
  padding:0.5rem 1rem;
  background-color:#36393e;
}
.pagination__btn{
  padding:0.4rem 1rem;
  border:none;
  border-radius:4px;
  background:#5865f2;
  color:#ffffff;
  font-family:inherit;
  font-size:0.85rem;
  font-weight:500;
  cursor:pointer;
}
.pagination__btn:hover{background:#4752c4}
.pagination__btn:disabled{background:#383a40;color:#72767d;cursor:default}
.pagination__info{
  color:#b5b6b8;
  font-size:0.85rem;
  min-width:120px;
  text-align:center;
}

/* --- Loading skeleton --- */
.loading-skeleton{
  padding:1rem;
}
.loading-skeleton__row{
  height:16px;
  margin-bottom:1rem;
  border-radius:4px;
  background:linear-gradient(90deg,#2f3136 25%,#383a40 50%,#2f3136 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.5s ease-in-out infinite;
}
.loading-skeleton__row--short{
  width:60%;
}
@keyframes skeleton-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}

/* --- Empty state --- */
.empty-state{
  text-align:center;
  padding:3rem 1rem;
  color:#72767d;
  font-size:1rem;
}


/* ============================================================
   3. Mobile Responsive Overrides
   ============================================================ */

@media (max-width: 768px) {
  .chatlog__message-aside{width:52px}
  .chatlog__avatar{width:32px;height:32px}
  .chatlog__attachment-media{max-width:100%;max-height:400px}
  .chatlog__embed{max-width:100%}
  .chatlog__embed-generic-image,
  .chatlog__embed-generic-video,
  .chatlog__embed-generic-gifv{max-width:100%}
  .chatlog__embed-youtube{width:100%;aspect-ratio:16/9;height:auto}
  .chatlog__embed-spotify{width:100%}
  .chatlog__embed-invite-container{min-width:auto}

  .toolbar{
    flex-direction:column;
    align-items:stretch;
    top:53px;
  }
  .toolbar__search{max-width:none}
  .toolbar__search-hint{display:none}
  .toolbar__filters{flex-wrap:wrap}
}

@media (max-width: 480px) {
  .chatlog__message-aside{width:44px}
  .chatlog__avatar{width:28px;height:28px}
  .chatlog__content{font-size:0.875rem}
  .chatlog__reply-symbol{margin-left:20px}

  .pagination__btn{
    min-width:44px;
    min-height:44px;
    padding:0.4rem 0.6rem;
    font-size:0.8rem;
  }

  .app-header{padding:0.5rem 0.6rem}
  .app-header__icon{width:32px;height:32px}
  .app-header__guild{font-size:0.9rem}

  .toolbar{padding:0.5rem 0.6rem}
  .toolbar__search-input{font-size:16px} /* prevent iOS zoom */
}