body {
  width: 700px;
  margin: 15px auto 150px auto;
}

.msg {
  box-sizing: border-box;
  float: left;
  width: auto;
  max-width: 80%;
  position: relative;
  clear: both;

  background: #dcebfe;
  background-image: linear-gradient(bottom, #bee2ff 15%, #dcebfe 100%);
  border: solid 1px rgba(0,0,0,0.5);
  border-radius: 20px;
  box-shadow: inset 0 8px 5px rgba(255,255,255,0.65), 0 1px 2px rgba(0,0,0,0.2);

  margin-bottom: 10px;
  padding: 6px 20px;
  word-wrap: break-word;
}

.msg:before, .msg:after {
  border-radius: 20px / 5px;
  content: '';
  display: block;
  position: absolute;
}
.msg:before {
  border: 10px solid transparent;
  border-bottom-color: rgba(0,0,0,0.5);
  bottom: 0px;
  left: -7px;
  z-index: -2;
}
.msg:after {
  border: 8px solid transparent;
  border-bottom-color: #bee2ff;
  bottom: 1px;
  left: -5px;
}

.out {
  float: right;
  background: #bcf6a6;
  background-image: linear-gradient(bottom, #bee2ff 15%, #bcf6a6 100%);
}
.out:before {
  left: auto;
  right: -7px;
}
.out:after {
  left: auto;
  right: -5px;

  border-bottom-color: #d9ffbe;
}

.dialog {
  float: left !important;
}

.dialog .icon {
  width: 23px;
  height: 20px;
  display: inline-block;
}

.navigation {
  clear: both;
}

.icon {
  background-size: 100% 100%;
}

/* Credits: http://www.flaticon.com/free-icon/multiple-users-silhouette_33308 */
.img-group {
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgODAuMTMgODAuMTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDgwLjEzIDgwLjEzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxnPgoJPHBhdGggZD0iTTQ4LjM1NSwxNy45MjJjMy43MDUsMi4zMjMsNi4zMDMsNi4yNTQsNi43NzYsMTAuODE3YzEuNTExLDAuNzA2LDMuMTg4LDEuMTEyLDQuOTY2LDEuMTEyICAgYzYuNDkxLDAsMTEuNzUyLTUuMjYxLDExLjc1Mi0xMS43NTFjMC02LjQ5MS01LjI2MS0xMS43NTItMTEuNzUyLTExLjc1MkM1My42NjgsNi4zNSw0OC40NTMsMTEuNTE3LDQ4LjM1NSwxNy45MjJ6IE00MC42NTYsNDEuOTg0ICAgYzYuNDkxLDAsMTEuNzUyLTUuMjYyLDExLjc1Mi0xMS43NTJzLTUuMjYyLTExLjc1MS0xMS43NTItMTEuNzUxYy02LjQ5LDAtMTEuNzU0LDUuMjYyLTExLjc1NCwxMS43NTJTMzQuMTY2LDQxLjk4NCw0MC42NTYsNDEuOTg0ICAgeiBNNDUuNjQxLDQyLjc4NWgtOS45NzJjLTguMjk3LDAtMTUuMDQ3LDYuNzUxLTE1LjA0NywxNS4wNDh2MTIuMTk1bDAuMDMxLDAuMTkxbDAuODQsMC4yNjMgICBjNy45MTgsMi40NzQsMTQuNzk3LDMuMjk5LDIwLjQ1OSwzLjI5OWMxMS4wNTksMCwxNy40NjktMy4xNTMsMTcuODY0LTMuMzU0bDAuNzg1LTAuMzk3aDAuMDg0VjU3LjgzMyAgIEM2MC42ODgsNDkuNTM2LDUzLjkzOCw0Mi43ODUsNDUuNjQxLDQyLjc4NXogTTY1LjA4NCwzMC42NTNoLTkuODk1Yy0wLjEwNywzLjk1OS0xLjc5Nyw3LjUyNC00LjQ3LDEwLjA4OCAgIGM3LjM3NSwyLjE5MywxMi43NzEsOS4wMzIsMTIuNzcxLDE3LjExdjMuNzU4YzkuNzctMC4zNTgsMTUuNC0zLjEyNywxNS43NzEtMy4zMTNsMC43ODUtMC4zOThoMC4wODRWNDUuNjk5ICAgQzgwLjEzLDM3LjQwMyw3My4zOCwzMC42NTMsNjUuMDg0LDMwLjY1M3ogTTIwLjAzNSwyOS44NTNjMi4yOTksMCw0LjQzOC0wLjY3MSw2LjI1LTEuODE0YzAuNTc2LTMuNzU3LDIuNTktNy4wNCw1LjQ2Ny05LjI3NiAgIGMwLjAxMi0wLjIyLDAuMDMzLTAuNDM4LDAuMDMzLTAuNjZjMC02LjQ5MS01LjI2Mi0xMS43NTItMTEuNzUtMTEuNzUyYy02LjQ5MiwwLTExLjc1Miw1LjI2MS0xMS43NTIsMTEuNzUyICAgQzguMjgzLDI0LjU5MSwxMy41NDMsMjkuODUzLDIwLjAzNSwyOS44NTN6IE0zMC41ODksNDAuNzQxYy0yLjY2LTIuNTUxLTQuMzQ0LTYuMDk3LTQuNDY3LTEwLjAzMiAgIGMtMC4zNjctMC4wMjctMC43My0wLjA1Ni0xLjEwNC0wLjA1NmgtOS45NzFDNi43NSwzMC42NTMsMCwzNy40MDMsMCw0NS42OTl2MTIuMTk3bDAuMDMxLDAuMTg4bDAuODQsMC4yNjUgICBjNi4zNTIsMS45ODMsMTIuMDIxLDIuODk3LDE2Ljk0NSwzLjE4NXYtMy42ODNDMTcuODE4LDQ5Ljc3MywyMy4yMTIsNDIuOTM2LDMwLjU4OSw0MC43NDF6IiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

/* Credits: http://www.flaticon.com/free-icon/user-black-close-up-shape_32438 */
.img-single-user {
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjUxMnB4IiBoZWlnaHQ9IjUxMnB4IiB2aWV3Qm94PSIwIDAgNDY2LjE0NiA0NjYuMTQ2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0NjYuMTQ2IDQ2Ni4xNDY7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPGc+Cgk8cGF0aCBkPSJNMjg5LjI4NSwxOTEuODZjMjguODQ0LTE4LjUzOSw0Ny45OTUtNTAuODMsNDcuOTk1LTg3LjY1NEMzMzcuMjgsNDYuNjU5LDI5MC42MjEsMCwyMzMuMDg4LDAgICBjLTU3LjU1OSwwLTEwNC4yMDcsNDYuNjU5LTEwNC4yMDcsMTA0LjIwN2MwLDM2LjgyNCwxOS4xNTEsNjkuMTIxLDQ3Ljk5Niw4Ny42NTRjLTY3Ljk1OSw2LjA4Mi0xMjEuNDIyLDYzLjMzMS0xMjEuNDIyLDEzMi44NTQgICB2MTA4LjE1NWwwLjI3NCwxLjY5bDcuNDU3LDIuMzI4YzcwLjE5NiwyMS45MjksMTMxLjE5NSwyOS4yNTksMTgxLjQwMSwyOS4yNTljOTguMDQ4LDAsMTU0Ljg4Ni0yNy45NywxNTguNDA4LTI5Ljc0M2w2Ljk2My0zLjUzNCAgIGgwLjczMlYzMjQuNzE0QzQxMC42OTgsMjU1LjE5NywzNTcuMjUzLDE5Ny45NTcsMjg5LjI4NSwxOTEuODZ6IiBmaWxsPSIjMDAwMDAwIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
}

.author {
  font-style: italic;
  display: inline-block;
  color: #666152;
}

.msg img, .msg video {
  max-width: 525px;
  max-height: 500px;
}

.msg .webpage, .msg .geo, .msg .contact {
  border-left: 3px solid #bbb;
  padding-left: 5px;
}

.msg-service {
  clear: both;
  text-align: center;
}

.msg-service .inner {
  margin-bottom: 10px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px;
  display: inline-block;
  border-radius: 6px;
}

.navigation-bottom {
  clear: both;
  padding-top: 15px;
}

.fwd-name {
  font-style: normal;
  font-weight: bold;
}

/* ---- Additions for the 2026 archive (Telegram_logs_site); everything above is the 2018
   telegram-history-dump stylesheet (MIT, https://github.com/tvdstaaij/telegram-history-dump). */
/* Chat pages: up to 980 px on a desktop screen (the 2018 pages were 700 px); bubbles keep a
   readable width; on phones the page takes the full width. */
body { width: auto; max-width: 980px; padding: 0 16px; }
.msg { max-width: min(80%, 720px); }
@media (max-width: 700px) { body { padding: 0 8px; } .msg { max-width: 92%; padding: 6px 14px; } }
.msg img, .msg video { max-width: 100%; }
.msg pre { white-space: pre-wrap; background: rgba(0,0,0,0.06); padding: 4px 6px; border-radius: 4px; }
.msg code { background: rgba(0,0,0,0.06); padding: 0 2px; border-radius: 3px; }
.msg blockquote { margin: 4px 0; padding-left: 8px; border-left: 3px solid #999; }
.msg .reply { font-size: 85%; color: #555; border-left: 3px solid #7aa7d8; padding-left: 6px; margin: 2px 0 4px; }
.msg .reply a { color: inherit; text-decoration: none; }
.msg .file.missing, .masked { color: #777; font-style: italic; }
.msg .poll ul { margin: 2px 0; }
.spoiler { background: #555; color: #555; }
.spoiler:hover { color: inherit; background: transparent; }
.msg.deleted { opacity: 0.6; }
.deleted-note { font-size: 85%; font-style: italic; color: #a33; }
.msg:target { outline: 3px solid #f5b400; }
.index-info { clear: both; padding-top: 15px; }
table.pages { border-collapse: collapse; }
table.pages td, table.pages th { padding: 2px 10px; text-align: left; }

/* search box on the index page (search.html is built by search_index.py) */
form.search-box { margin: 1em 0; display: flex; gap: .5em; }
form.search-box input { flex: 1; font-size: 1em; padding: .4em; }
form.search-box button { font-size: 1em; padding: .4em .8em; }

/* Senders: everyone gets the same left-hand bubble, tinted with their own colour (build.py
   sets --h, a hue fixed per user id), and an avatar (profile photo, else initials). */
.msg[style] { background: hsl(var(--h) 60% 93%); background-image: none; }
.msg[style]:after { border-bottom-color: hsl(var(--h) 60% 93%); }
.msg .author { display: flex; align-items: center; gap: 6px; font-style: normal; color: inherit; margin: 2px 0 3px -10px; }
.msg .author .name { color: hsl(var(--h) 55% 30%); font-weight: bold; }
.msg img.avatar, .msg .avatar { width: 28px; height: 28px; max-width: none; border-radius: 50%; object-fit: cover; flex: none; margin: 0; }
.msg .avatar.initials { display: inline-flex; align-items: center; justify-content: center;
  background: hsl(var(--h) 40% 45%); color: #fff; font-size: 11px; font-weight: bold; }
.msg .fwd { font-style: italic; color: #666152; }

/* ---- Site style (2026-11): the look of the photo gallery (arqueologiadigital.org/galeria.html)
   on every page: dark background, serif text, green links, cards. It overrides the colours of
   the rules above; the markup of the chat pages is unchanged. */
:root { --bg: #14171a; --card: #1e2327; --line: #2c3338; --ink: #e8e6e1; --dim: #9aa0a6; --accent: #7fd38a; }
html { background: var(--bg); }
body { background: var(--bg); color: var(--ink); font: 16px/1.5 Georgia, "Times New Roman", serif; margin-top: 0; }
a { color: var(--accent); }
h1 { font-weight: normal; font-size: 1.7em; letter-spacing: .01em; }
header.site { padding: 22px 0 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 28px; }
header.site .brand { color: var(--ink); text-decoration: none; font-size: 1.35em; }
header.site nav { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .95em; }
header.site nav a { text-decoration: none; border-bottom: 1px solid transparent; }
header.site nav a:hover { border-bottom-color: var(--accent); }
.navigation-top, .navigation-bottom { color: var(--dim); font-size: .9em; padding: 4px 0 10px; }
/* message bubbles become cards tinted with the sender's colour */
.msg { background: var(--card); background-image: none; border: 1px solid var(--line); border-radius: 10px;
       box-shadow: 0 1px 3px rgba(0,0,0,.5); padding: 7px 16px 8px; }
.msg:before, .msg:after { display: none; }
.msg[style] { background: hsl(var(--h) 26% 16%); border-color: hsl(var(--h) 22% 26%);
              border-left: 3px solid hsl(var(--h) 45% 52%); }
.msg .author { margin-left: -4px; }
.msg .author .name { color: hsl(var(--h) 62% 74%); }
.msg .avatar.initials { background: hsl(var(--h) 40% 40%); }
.msg-service .inner { background: #23292e; color: var(--dim); font-size: .85em; padding: 3px 10px; }
.msg pre, .msg code { background: rgba(255,255,255,.07); }
.msg blockquote { border-left-color: #556; }
.msg .reply { color: var(--dim); border-left-color: #4f6f8f; }
.msg .webpage, .msg .geo, .msg .contact { border-left-color: #4a5258; color: #cfcdc7; }
.msg .file.missing, .masked, .msg .fwd { color: var(--dim); }
.msg img:not(.avatar), .msg video { border-radius: 6px; }
.deleted-note { color: #e08a8a; }
.spoiler { background: #666; color: #666; }
.msg:target { outline: 3px solid var(--accent); }
table.pages td, table.pages th { border-bottom: 1px solid var(--line); padding: 4px 14px; }
.dialog.msg { background: var(--card); }
.dialog .icon { filter: invert(1); }
.index-info, .index-info p { color: var(--ink); }
form.search-box input, form.search-box button { background: var(--card); color: var(--ink); border: 1px solid #3a4248;
  border-radius: 4px; font-family: inherit; }
form.search-box button { background: var(--accent); color: var(--bg); border-color: var(--accent); cursor: pointer; }
@media (max-width: 700px) { h1 { font-size: 1.3em; } header.site { padding: 14px 0 8px; } }
