/* Modernized styles by Phil - Applet restored to full height; widget size handled in site.css */
* { box-sizing: border-box; }
:root {
  --primary-color: #616d5a;
  --background-color: #616d5a;
  --panel-bg: #616d5a;
  --border-radius: 8px;
  --padding: 18px;
  --gap: 8px;
  --max-width: 60vw;
  --top-bottom-margin: 2vh;
}

html, body { 
  height: calc(var(--vh) * 100);
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body {
  /* more human, friendly system stack */
  font-family: "Inter", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Helvetica Neue", NotoSans, Arial, sans-serif;
  line-height: 1.4;
  color: #111;
  background-color: var(--background-color);
}

/* Applet layout (full height restored) */
.applet {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--vh) * 100);
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
}

.header {
  width: 100%;
  margin: var(--top-bottom-margin) auto 0 auto;
  padding: var(--padding);
  background-color: var(--primary-color);
  color: #fff;
  font-size: 1.1rem; /* slightly softer */
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--gap);
}
.header_logo { width: 24px; height: 24px; }
.header_avatar { width: 300px; height: 71px; }
.header_title { flex: 1; font-weight: 600; letter-spacing: 0.1px; }

.textarea {
  width: 100%;
  padding: var(--padding);
  background-color: var(--panel-bg);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.textarea_span { max-width: 80%; width: fit-content; margin: 0 0 6px 0; padding: 6px 8px; border-radius: 7px; }

.inputarea {
  width: 100%;
  margin: var(--gap) auto;
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: var(--padding);
  background-color: var(--panel-bg);
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.input_elem {
  flex: 10;
  padding: 10px 12px;
  font-size: 0.95rem; /* slightly friendlier */
  border: 1px solid #edf4e6;
  border-radius: 10px;
  box-sizing: border-box;
  overflow-y: hidden;
  resize: none;
}

.footer {
  width: 100%;
  min-height: calc(0.3em + 2 * var(--padding));
  margin: 0 0 var(--top-bottom-margin) 0;
  padding: var(--padding);
  text-align: center;
  color: #fff;
  font-size: 0.9rem;
  background-color: var(--primary-color);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}

/* hide unused floating div */
#floating-div { display:none; }

/* highlight plugin configuration */
pre code.hljs { background:#282c34; color:#e0e0e0; padding:1rem; border-radius:6px; overflow-x:auto; }

@keyframes saturationPulse { 0%, 100% { filter: saturate(1);} 50% { filter: saturate(3);} }
.header.saturation-animation, .footer.saturation-animation { animation:saturationPulse 1.5s infinite alternate; }

@media (max-width: 600px) {
  :root { --max-width: 95vw; --top-bottom-margin: 0; }
  .applet { min-height: calc(var(--vh) * 100); }
}


/* Scroll containment: keep widget height stable and scroll only in .textarea */
.applet{display:flex;flex-direction:column;height:calc(var(--vh)*100);width:var(--max-width);max-width:var(--max-width);margin:0 auto;overflow:hidden}
.textarea{flex:1 1 auto;min-height:0;overflow-y:auto}