/*
2026 miredo

this is the CSS for //cybernetic hell//
which is where I dump all my thoughts on AI lol
heavily based on my normal CSS but I changed shit
*/

html {
	background-color: #eee;
}

body {
	min-width:512px;
	max-width:50%;
	border: 2px solid black;
	color: #000;
	margin: 8px;
	padding:8px;
	overflow-y: scroll;
	background-color: #fff;
	line-height: 1.24;
	font-size: 1.1em;
}

.border {
  border: 1px solid white;
  margin: 2px;
  padding: 2px;
}

pre {
  	overflow-x: auto;
}

pre, blockquote {
	border: 1px solid black;
	border-left: 8px solid black;
	color: #111;
	background-color: #f4f4f4;
	margin: 8px;
	padding: 12px;
	padding-left: 1em;
	line-height: 1.1;
	font-family: monospace;
}
hr {
	border: 0;
	border-top: 1px solid black;
}

p {
  margin-top: 1.15em;
  margin-bottom: 1.15em;
}

hr.break {
	border: 0;
	border-top: 1px dotted black;
}

hr.digestend {
  border: 0;
	border-top: 1px dashed #ccf;
}

a:link, a:visited {
	color: #22c;
}

a[target="_blank"] {
  text-decoration: underline dashed;
}

/* greetz to https://mouseling.net/posts/2025-08-09-outlinks
but I don't know if I'm going to use this lol
a[href^="http"]:not(:has(img))::after {
    content: "↗"
} */

a[href^="https://pomf.lain.la/f/"], a[href^="https://pomf2.lain.la/f/"] {
  background-color: #322;
  color: #822;
  text-decoration: line-through;
}

a[href^="https://fileditchfiles.me/"] {
  /*background-color: #322;*/
  color: #822;
  text-decoration: line-through;
}

/* anything really important to mention */
.warning {
  color: #000;
  background-color: #fd0;
}

/* reasonable expectation of safety */
.safe {
  color: #000;
  background-color: #1e1;
}

a:hover {
	background-color: #eef;
	color: #111;
}

a.cw:hover, a.cw2:hover { /* R-18, R-15, etc, etc - might mark cw2 as r18 and cw as r15; tried animating it but it looked dumb/distracting */
	background-color: #fa2;
	color: #111;
}

/* a:active really should match as the latest rule for a.cw but it doesn't seem to do so in Chrome; what a dumb browser */
a:active, a.cw:active, a.cw2:active {
	background-color: #111;
	color: #eef;
}

li {
	margin: 4px 0;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
}

h3, h4, h5, h6 {
	margin-top:12px;
	margin-bottom:8px;
}


.ayashii {
	font-family: "ＭＳ ゴシック", "MS Gothic", "BIZ UDゴシック", "Noto Sans Mono CJK JP", "IPAゴシック", "HGゴシックM", "Noto Sans Mono", monospace;
	font-size: 14px;
}

.fav {
	color: #ffc;
	font-size:0.65em;
}

a:hover img {
	filter: brightness(1.2);
}

a:active img {
	filter: invert(1) saturate(0.75);
}

big, .big {
	font-size: 2em;
}

small, .small {
	font-size: 0.5em;
}

llm-msg, llm-system {
	display: block;
	white-space: pre-wrap;
	overflow-wrap: break-word;
	margin: 12px;
	margin-right: auto;
	padding: 8px;
	border: 2px solid black;
	max-width: 70%;
	border-radius:16px 16px 16px 0px;
}

llm-msg:before {
	content: "[" attr(char) "/" attr(mood) "/" attr(intent) "]";
	font-weight: bold;
}

llm-system:before {
	content: "(system directive)";
	font-weight: bold;
}

llm-msg[char="miredo"], llm-system {
	background-color: #ffe;
	margin: 12px;
	margin-left: auto;
	border-radius:16px 16px 0px 16px;
}

llm-msg[type="editor-note"] {
	margin: 12px;
	max-width: 100%;
	background-color: #fff;
}

llm-msg[char="Tamimin"] {
	background-color: #fee;
}

llm-msg[char="Kukoka"] {
	background-color: #eef;
}

llm-msg[char="Amimi"] {
	background-color: #eee;
}

llm-msg[type="log"] {
	border-style: dashed;
}

div.empty {
	margin: 0;
	border: 0;
	padding: 0;
}


@media screen and (max-width: 580px) {
  body {
    min-width:unset;
    max-width:90%;
  }
  .ayashii {
    font-size: 10px;
    /*white-space: pre-wrap;*/
  }
}

@media screen and (min-width: 1560px) {
  body {
    max-width: 780px;
  }
}

.hide {
	display: none;
}

span.bgwindow {
  display: block;
  border: 2px solid black;
  width: 100%;
  height:1em;
}