@import url("/css/shared/gallery.css?update=202507202240");
/* form#reply */
form#reply{
  display:flex;padding:20px 0px;margin-top:20px;
  position:sticky;bottom:0px;
  background-color:white;
  border-top:1px solid var(--light-gray-4);
}
form#reply>img.avatar{
  width:40px;height:40px;border-radius:50%;margin-right:10px;
}
form#reply>.editor{
  flex:auto;
  display:flex;align-items:flex-end;
  border-radius:20px;border:1px solid var(--light-gray-4);
}
form#reply>.editor:has(>textarea:focus),
form#reply>.editor:has(>div[contentEditable]:focus){
  border-color:var(--normal-gray);
}
form#reply>.editor>textarea{
  width:calc(100% - 20px);max-height:300px;
  border-radius:20px;padding:10px 16px;
}
form#reply>.editor>div[contentEditable]{
  width:calc(100% - 20px);
  border-radius:20px;padding:10px 16px;
}
form#reply>.editor>div[contentEditable]::before{
  content:attr(data-placeholder);color:var(--normal-gray);position:absolute;
}
form#reply>.editor>div[contentEditable]>.mention{
  color:var(--brand-light-color);
}
form#reply>.editor>img.enter{
  width:30px;height:30px;padding:5px;opacity:0.6;
  cursor:pointer;
}
form#reply>.editor>img.enter:hover,
form#reply>.editor>img.enter:active{
  opacity:1;
}
/* section>.post */
section>.post{
	display:grid;grid-template:40px auto auto auto auto / 50px auto 32px;
	grid-template-areas:
		"picture name-time-accsss manage"
		"content content content"
    "images images images"
    "repost repost repost"
    "tools tools tools";
  padding-bottom:20px;
}
section>.post>img.picture{
	grid-area:picture;align-self:start;border:1px solid var(--light-gray-4);
	width:40px;height:40px;object-fit:cover;border-radius:50%;
}
section>.post>.name-time-access{
	grid-area:name-time-accsss;font-size:0.9rem;
}
section>.post>.name-time-access>.name{
	font-weight:bold;line-height:25px;display:block;
}
section>.post>.name-time-access>.time-access{
  display:flex;align-items:center;
	line-height:15px;color:var(--normal-gray)
}
section>.post>.name-time-access>.time-access>img.access{
  width:15px;height:15px;margin-left:5px;
}
section>.post>.manage{
  grid-area:manage;position:relative;cursor:pointer;
}
section>.post>.manage>img{
  width:100%;
}
section>.post>.manage>img:hover,
section>.post>.manage>img:active{
  background-color:var(--light-gray-5);
}
section>.post>.content{
	grid-area:content;margin:10px 0px;color:var(--text-light-color);
  overflow-wrap:anywhere;
}
section>.post>.content>.mention{
  color:var(--brand-light-color);
}
section>.post>.imgs{
	grid-area:images;height:150px;width:100%;white-space:nowrap;overflow-x:auto;overflow-y:hidden;
  display:flex;gap:5px;
}
section>.post>.imgs>.img{
  display:inline-block;height:100%;
}
section>.post>.imgs>.img>img{
  height:100%;
}
section>.post>.repost{
  grid-area:repost;
	display:block;grid-template:40px auto auto auto / 50px auto 32px;
	grid-template-areas:
		"picture name-time"
		"content content"
    "images images";
  margin:10px 0px;padding:10px;border:1px solid var(--light-gray-5);background-color:var(--light-gray-6);
}
section>.post>.repost>.waiting{
  width:5px;height:5px;aspect-ratio:1;border-radius:50%;
  animation:waiting 1s infinite linear alternate;
  margin-left:10px;
}
@keyframes waiting{
  0%  {box-shadow: 10px 0 #000, -10px 0 #0002;background: #000 }
  33% {box-shadow: 10px 0 #000, -10px 0 #0002;background: #0002}
  66% {box-shadow: 10px 0 #0002,-10px 0 #000; background: #0002}
  100%{box-shadow: 10px 0 #0002,-10px 0 #000; background: #000 }
}
section>.post>.repost>.inaccessible{
	font-size:0.9rem;
}
section>.post>.repost>img.picture{
	grid-area:picture;align-self:start;border:1px solid var(--light-gray-4);
	width:40px;height:40px;object-fit:cover;border-radius:50%;
}
section>.post>.repost>.name-time{
	grid-area:name-time;font-size:0.9rem;
}
section>.post>.repost>.name-time>.name{
	font-weight:bold;line-height:25px;position:relative;
}
section>.post>.repost>.name-time>.time{
  display:flex;align-items:center;
	line-height:15px;color:var(--normal-gray)
}
section>.post>.repost>.content{
	grid-area:content;margin:10px 0px;color:var(--text-light-color);overflow-wrap:anywhere;
  font-size:0.9rem;line-height:var(--text-line-height);
}
section>.post>.repost>.content-hide{
  position:relative;overflow-y:hidden;
}
section>.post>.repost>.content-hide>.continue{
	position:absolute;bottom:0px;right:0px;
  width:100%;font-weight:bold;background-color:var(--light-gray-6);cursor:pointer;
}
section>.post>.repost>.content-hide>.continue:hover,
section>.post>.repost>.content-hide>.continue:active{
  text-decoration:underline;
}
section>.post>.repost>.imgs{
	grid-area:images;height:150px;width:100%;white-space:nowrap;overflow-x:auto;overflow-y:hidden;
  display:flex;gap:5px;
}
section>.post>.repost>.imgs>.img{
  display:inline-block;height:100%;
}
section>.post>.repost>.imgs>.img>img{
  height:100%;
}
section>.post>.tools{
  grid-area:tools;display:flex;align-items:center;
  height:32px;margin-top:5px;user-select:none;
}
section>.post>.tools>.tool{
  display:flex;align-items:center;
  margin-right:6px;padding:5px;cursor:pointer;
  color:var(--normal-gray);font-size:0.9rem;
}
section>.post>.tools>.tool:hover,
section>.post>.tools>.tool:active{
  background-color:var(--light-gray-5);
}
section>.post>.tools>.tool>img,
section>.post>.tools>.tool>svg{
  width:22px;height:22px;margin-right:3px;
}
section>.post>.tools>.react{
  position:relative;touch-action:none;
}
section>.post>.tools>.react>.react-types{
  display:flex;background-color:white;border:1px solid var(--light-gray-3);border-radius:20px;padding:0px 8px;
  opacity:0;transition:opacity 0.5s 0.5s;pointer-events:none;
  position:absolute;top:-40px;left:-8px;z-index:-1;
}
section>.post>.tools>.react>.react-types-show{
  opacity:1;pointer-events:auto;z-index:1;
}
section>.post>.tools>.react>.react-types>img{
  width:30px;height:30px;padding:5px 3px;transition:transform 0.3s;
}
section>.post>.tools>.react>.react-types>img:hover,
section>.post>.tools>.react>.react-types>img:active{
  transform:scale(1.5);
}
section>.post>.tools>.summary>img{
  width:18px;height:18px;margin-right:0px;
}
section>.post>.tools>.summary>span{
  font-size:0.8rem;margin-left:3px;
}
/* #dialog form.post */
#dialog form.post{
  height:100%;
}
#dialog form.post>.head{
  display:flex;align-items:center;height:30px;margin-bottom:5px;
}
#dialog form.post>.head>img.picture{
  width:30px;height:30px;border-radius:50%;margin-left:5px;margin-right:5px;
}
#dialog form.post>.head>.name{
  font-weight:bold;margin-right:5px;
}
#dialog form.post>.head>img.arrow{
  height:50%;margin-right:5px;
}
#dialog form.post>.head>.access{
  color:var(--normal-gray);
}
#dialog form.post>.editor{
  display:flex;flex-direction:column;height:calc(100% - 35px);
}
#dialog form.post>.editor>.content{
  flex:auto;overflow-y:auto;
}
#dialog form.post>.editor>.content>div[contentEditable]{
  width:calc(100% - 12px);
}
#dialog form.post>.editor>.content>div[contentEditable]::before{
  content:attr(data-placeholder);color:var(--normal-gray);position:absolute;
}
#dialog form.post>.editor>.content>div[contentEditable]>.mention{
  color:var(--brand-light-color);
}
#dialog form.post>.editor>.content>.post-container{
	display:grid;grid-template:40px auto auto / 50px auto;
	grid-template-areas:
		"picture name-time"
		"content content"
    "images images";
  padding:10px;border:1px solid var(--light-gray-5);background-color:var(--light-gray-6);
}
#dialog form.post>.editor>.content>.post-container>img.picture{
	grid-area:picture;align-self:start;border:1px solid var(--light-gray-4);
	width:40px;height:40px;object-fit:cover;border-radius:50%;
}
#dialog form.post>.editor>.content>.post-container>.name-time{
	grid-area:name-time;font-size:0.9rem;
}
#dialog form.post>.editor>.content>.post-container>.name-time>.name{
	font-weight:bold;line-height:25px;position:relative;
}
#dialog form.post>.editor>.content>.post-container>.name-time>.time{
  display:flex;align-items:center;
	line-height:15px;color:var(--normal-gray)
}
#dialog form.post>.editor>.content>.post-container>.content{
	grid-area:content;margin:10px 0px;color:var(--text-light-color);overflow-wrap:anywhere;
  font-size:0.9rem;line-height:var(--text-line-height);
}
#dialog form.post>.editor>.content>.post-container>.content>.mention{
  color:var(--brand-light-color);pointer-events:none;
}
#dialog form.post>.editor>.content>.post-container>.content-hide{
  position:relative;overflow-y:hidden;
}
#dialog form.post>.editor>.content>.post-container>.content-hide>.continue{
	position:absolute;bottom:0px;right:0px;
  width:100%;font-weight:bold;background-color:var(--light-gray-6);cursor:pointer;
}
#dialog form.post>.editor>.content>.post-container>.content-hide>.continue:hover,
#dialog form.post>.editor>.content>.post-container>.content-hide>.continue:active{
  text-decoration:underline;
}
#dialog form.post>.editor>.content>.post-container>.imgs{
	grid-area:images;height:150px;width:100%;white-space:nowrap;overflow-x:auto;overflow-y:hidden;
  display:flex;gap:5px;
}
#dialog form.post>.editor>.content>.post-container>.imgs>.img{
  display:inline-block;height:100%;
}
#dialog form.post>.editor>.content>.post-container>.imgs>.img>img{
  height:100%;
}
/* #popup>.mention-suggs */
#popup>.mention-suggs>.sugg{
  display:grid;grid-template:20px 20px / 50px auto;
	grid-template-areas:
		"picture name"
		"picture username";
  padding:5px;cursor:pointer;
}
#popup>.mention-suggs>.sugg:hover,
#popup>.mention-suggs>.sugg:active{
  background-color:var(--light-gray-5);
}
#popup>.mention-suggs>.sugg>.picture{
  grid-area:picture;width:40px;height:40px;border-radius:50%;
}
#popup>.mention-suggs>.sugg>.name{
  grid-area:name;font-size:0.9rem;
  overflow-x:hidden;text-overflow:ellipsis;
  overflow-y:visible;
}
#popup>.mention-suggs>.sugg>.username{
  grid-area:username;font-size:0.85rem;line-height:20px;color:var(--normal-gray);
  overflow-x:hidden;text-overflow:ellipsis;
  overflow-y:visible;
}
/* #popup>.post-menu */
#popup>.post-menu>.item{
  padding:0px 5px;
}
#popup>.post-menu>.item:hover,
#popup>.post-menu>.item:active{
  background-color:var(--light-gray-5);
}
#popup>.post-menu>.item-disabled{
  color:var(--normal-gray);
}
#popup>.post-menu>.item-disabled:hover,
#popup>.post-menu>.item-disabled:active{
  background-color:transparent;
}
#popup>.post-menu>.separator{
  height:1px;margin:5px 0px;background-color:var(--light-gray-4);
}
/* #replys */
#replys>.reply{
	display:grid;grid-template:30px auto auto / 40px auto 24px;row-gap:10px;
	grid-template-areas:
		"picture name-time delete"
		"content content content"
    "tools tools tools";
  padding-top:15px;border-top:1px solid var(--light-gray-5);
  margin-top:15px;
}
#replys>.reply>img.picture{
	grid-area:picture;align-self:start;border:1px solid var(--light-gray-4);
	width:30px;height:30px;object-fit:cover;border-radius:50%;
}
#replys>.reply>.name-time{
	grid-area:name-time;display:flex;align-items:center;
  font-size:0.9rem;
}
#replys>.reply>.name-time>.name{
	font-weight:bold;margin-right:5px;display:block;
}
#replys>.reply>.name-time>.time{
  color:var(--normal-gray)
}
#replys>.reply>.delete{
  grid-area:delete;cursor:pointer;
}
#replys>.reply>.delete>img{
  width:100%;opacity:0.6;
}
#replys>.reply>.delete>img:hover,
#replys>.reply>.delete>img:active{
  opacity:1;
}
#replys>.reply>.content{
	grid-area:content;color:var(--text-light-color);
  overflow-wrap:anywhere;
}
#replys>.reply>.content>.mention{
	color:var(--brand-light-color);
}
#replys>.reply>.tools{
  grid-area:tools;display:flex;align-items:center;
  height:32px;user-select:none;
}
#replys>.reply>.tools>.tool{
  display:flex;align-items:center;
  margin-right:6px;padding:5px;cursor:pointer;
  color:var(--normal-gray);font-size:0.9rem;
}
#replys>.reply>.tools>.tool:hover,
#replys>.reply>.tools>.tool:active{
  background-color:var(--light-gray-5);
}
#replys>.reply>.tools>.tool>img,
#replys>.reply>.tools>.tool>svg{
  width:22px;height:22px;margin-right:3px;
}
#replys>.reply>.tools>.react{
  position:relative;touch-action:none;
}
#replys>.reply>.tools>.react>.react-types{
  display:flex;background-color:white;border:1px solid var(--light-gray-3);border-radius:20px;padding:0px 8px;
  opacity:0;transition:opacity 0.5s 0.5s;pointer-events:none;
  position:absolute;top:-40px;left:-8px;z-index:-1;
}
#replys>.reply>.tools>.react>.react-types-show{
  opacity:1;pointer-events:auto;z-index:1;
}
#replys>.reply>.tools>.react>.react-types>img{
  width:30px;height:30px;padding:5px 3px;transition:transform 0.3s;
  touch-action:none;
}
#replys>.reply>.tools>.react>.react-types>img:hover,
#replys>.reply>.tools>.react>.react-types>img:active{
  transform:scale(1.5);
}
#replys>.reply>.tools>.summary>img{
  width:18px;height:18px;margin-right:0px;
}
#replys>.reply>.tools>.summary>span{
  font-size:0.8rem;margin-left:3px;
}