/* Shared interface for the five MailOld tools. */
.mailold-tool {
  --accent:#2458be; --accent-deep:#173969; --soft:#edf4ff; --page:#edf3fa;
  --ink:#172946; --muted:#52667f; --line:#cad8e9; --card:#fff;
  --gap:1rem; --pad:1.05rem; --radius:.85rem;
  margin:0; background:var(--page); color:var(--ink);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
}
.mailold-tool--green {
  --accent:#1c6a43; --accent-deep:#154931; --soft:#e8f6ee; --page:#eef6f1;
  --ink:#15352a; --muted:#48665a; --line:#c9dfd2;
}
.mailold-tool--slate {
  --accent:#43556f; --accent-deep:#243148; --soft:#e8edf4; --page:#eff2f6;
  --ink:#1f2937; --muted:#516176; --line:#cbd4e0;
}
.mailold-tool--compact { --gap:.65rem; --pad:.75rem; }
.mailold-tool *, .mailold-tool *::before, .mailold-tool *::after { box-sizing:border-box; }
.mailold-tool [hidden] { display:none !important; }
.mailold-tool-shell { max-width:94rem; margin:auto; padding:clamp(.75rem,2.5vw,1.75rem); }
.mailold-tool-header { background:var(--accent-deep); color:#fff; border-radius:var(--radius); padding:clamp(1rem,3vw,1.65rem); margin-bottom:var(--gap); }
.mailold-tool-header p { margin:.3rem 0 0; }
.mailold-tool-header .mailold-tool-brand { margin:0 0 .25rem; font-size:.77rem; font-weight:750; letter-spacing:.08em; }
.mailold-tool-header h1 { margin:0; font-size:clamp(1.5rem,3vw,2.15rem); line-height:1.2; }
.mailold-tool .mailold-menu, .mailold-tool .mailold-banner { margin-bottom:var(--gap); }
.mailold-tool .mailold-menu { background:var(--card); border-color:var(--line); }
.mailold-tool .mailold-menu a { color:var(--accent-deep); }
.mailold-tool .mailold-menu a:hover { background:var(--soft); }
.mailold-tool .mailold-banner { background:var(--soft); color:var(--accent-deep); }
.mailold-tool-input, .mailold-tool .flex > div, .mailold-tool #mailContent {
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:var(--pad);
}
.mailold-tool-input { margin-bottom:var(--gap); }
.mailold-tool-input h3 { font-size:1rem; margin:0 0 .6rem; overflow-wrap:anywhere; }
.mailold-tool label { display:block; margin:.45rem 0 .25rem; font-size:.92rem; font-weight:600; overflow-wrap:anywhere; }
.mailold-tool :is(input,textarea,select,button) { font:inherit; }
.mailold-tool :is(input,textarea,select) {
  color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:.48rem; padding:.48rem .6rem;
}
.mailold-tool :is(input,textarea) { display:block; width:100%; margin:.25rem 0 .6rem; }
.mailold-tool textarea { min-height:5rem; resize:vertical; font:14px/1.5 ui-monospace,monospace; }
.mailold-tool #emailList { min-height:7.5rem; }
.mailold-tool #proxyList { min-height:6rem; }
.mailold-tool :is(#successBox,#errorBox) { min-height:12rem; }
.mailold-tool--reader #errorBox { min-height:6rem; }
.mailold-tool #errorBox { background:#fff7f7; }
.mailold-tool #successBox { background:#f3fbf6; }
.mailold-tool button {
  border:1px solid var(--line); border-radius:.48rem; background:var(--soft); color:var(--accent-deep);
  font-weight:650; padding:.4rem .7rem; cursor:pointer;
}
.mailold-tool :is(#readButton,#runButton) { background:var(--accent); color:#fff; border-color:var(--accent); }
.mailold-tool :is(#stopReadButton,#stopButton) { background:#fff5f4; color:#922a24; border-color:#f0c6c1; }
.mailold-tool button:disabled { opacity:.55; cursor:default; }
.mailold-tool :is(button,a,select,input,textarea):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mailold-tool-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.mailold-tool :is(#status,#readStatus) { font-weight:650; overflow-wrap:anywhere; }
.mailold-tool #status { margin-top:.7rem; color:var(--accent-deep); }
.mailold-tool progress { max-width:100%; accent-color:var(--accent); }
.mailold-tool .flex { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(16rem,.85fr); gap:var(--gap); align-items:start; }
.mailold-tool .flex > div { min-width:0; overflow-wrap:anywhere; }
.mailold-tool .flex h4 { margin:0 0 .65rem; font-size:1rem; }
.mailold-tool .flex h4 button { font-size:.8rem; }
.mailold-tool--reader :is(#emailBox,#subjectBox) { min-height:10rem; max-height:24rem; overflow-y:auto; }
.mailold-tool #mailContent { margin-top:var(--gap); min-height:7rem; max-height:80vh; overflow:auto; white-space:pre-wrap; overflow-wrap:anywhere; }
.mailold-tool #mailContent iframe { max-width:100%; }
.mailold-tool :is(.email-item,.subject-item) { cursor:pointer; padding:.4rem .5rem; border-bottom:1px solid var(--line); }
.mailold-tool :is(.email-item,.subject-item):hover { background:var(--soft); }
.mailold-tool .email-item.is-current { background:var(--soft); color:var(--accent-deep); box-shadow:inset 3px 0 var(--accent); }
.mailold-tool .email-item .opened-badge { margin-left:.5rem; color:#166534; font-size:.8em; font-weight:650; }
.mailold-tool .hint { color:var(--muted); font-size:.78rem; margin:.15rem 0 .55rem; }
@media (max-width:64rem) {
  .mailold-tool .flex { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .mailold-tool .flex .right { grid-column:1/-1; }
}
@media (max-width:40rem) {
  .mailold-tool .flex { grid-template-columns:minmax(0,1fr); }
  .mailold-tool .flex .right { grid-column:auto; }
  .mailold-tool--reader :is(#emailBox,#subjectBox) { min-height:5rem; max-height:15rem; }
}

.mailold-tool-telegram {
  position:fixed;
  right:calc(20px + env(safe-area-inset-right,0px));
  bottom:calc(20px + env(safe-area-inset-bottom,0px));
  z-index:9999;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  max-width:calc(100vw - 3rem);
  padding:.78rem 1rem;
  border-radius:999px;
  background:#007cae;
  color:#fff;
  font:600 .9rem/1.4 system-ui,sans-serif;
  text-decoration:none;
  box-shadow:0 4px 14px #0003;
}
.mailold-tool-telegram:hover { background:#00658f; }
.mailold-tool-telegram svg { flex:none; }
@media (max-width:900px) {
  .mailold-tool-telegram { bottom:calc(84px + env(safe-area-inset-bottom,0px)); }
}