/* The tutor's chat panel and the reader's pinned notes, laid over a page by tutor/server.py.
   Everything is prefixed tutor-. */

/* ---------- the reader's changes: a line in the margin, as a diff has ---------- */
.tutor-fresh{position:relative}
.tutor-hidden{display:none !important}
.tutor-line{
  position:absolute;left:-20px;top:0;bottom:0;box-sizing:content-box;width:4px;padding:0;margin:0;cursor:pointer;
  border:0 solid transparent;border-width:0 6px;background-clip:padding-box;border-radius:8px;
}
.tutor-line:hover{filter:brightness(.8)}
.tutor-aside>.tutor-line{background-color:#4a9d4a}
.tutor-reword>.tutor-line{background-color:#d9a514}
.tutor-hide>.tutor-line{background-color:var(--blood,#bf4a26)}
.tutor-own>.tutor-line{background-color:var(--aegean,#2e88b5)}
p.tutor-own{margin:0 0 .9rem;font-family:var(--serif,Georgia,serif);font-size:.95em;font-style:italic;color:#4a3d30;text-align:left}
.tutor-gone{height:0;margin:0;padding:0}
.tutor-gone>.tutor-line{top:-.95rem;bottom:auto;height:1.1rem}

.tutor-diff,.tutor-note{
  box-sizing:border-box;padding:.75rem .95rem .8rem;text-align:left;
  background:#fffaf0;color:#1c1512;border:1px solid #b9a77e;border-radius:4px;
  font-family:var(--serif,Georgia,serif);font-size:.95rem;font-style:normal;font-weight:normal;line-height:1.5;letter-spacing:0;
}
.tutor-diff{position:absolute;z-index:65;width:min(30rem,calc(100vw - 16px));box-shadow:0 6px 22px rgba(0,0,0,.3)}
.tutor-note{margin:1rem 0;max-width:40em}
.tutor-shelf{margin:2.4rem auto 0;max-width:40em}
.tutor-head{margin-bottom:.45rem;font-family:var(--sans,Optima,'Gill Sans',sans-serif);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:#7a6a55}
.tutor-on{margin:0 0 .5rem;padding:0 0 0 .7rem;border-left:2px solid #b9a77e;font-style:italic;font-size:.9rem;color:#5a4a3a}
.tutor-q{margin:0 0 .5rem;font-weight:bold}
.tutor-body p,.tutor-words{margin:0 0 .7rem}
.tutor-words del{background:#f6d5cc;color:#7a2a12}
.tutor-words ins{background:#d6ecd0;color:#1f5a1f;text-decoration:none}
.tutor-undo{border:0;background:none;padding:0;cursor:pointer;color:var(--aegean-d,#136f9e);
  font-family:var(--sans,Optima,'Gill Sans',sans-serif);font-size:.74rem;letter-spacing:.03em}
.tutor-undo:hover{text-decoration:underline}
.tutor-undo+.tutor-undo{margin-left:1rem}
.tutor-menu{position:fixed;right:12px;bottom:52px;width:min(20rem,calc(100vw - 24px))}
.tutor-menu .tutor-undo{display:block;margin:.45rem 0 0;font-size:.8rem}
.tutor-menu .tutor-undo[hidden]{display:none}
.tutor-told{margin:0 0 .3rem}
.tutor-chip.tutor-notes::before{display:none}
.tutor-notes.tutor-above{bottom:52px}
.tutor-menu.tutor-above{bottom:92px}
.tutor-diff textarea{display:block;width:100%;box-sizing:border-box;margin:0 0 .6rem;resize:vertical;border:1px solid #b9a77e;border-radius:4px;padding:6px 8px;background:#fff;color:#1c1512;font-family:var(--serif,Georgia,serif);font-size:.95rem}
.tutor-diff .tutor-send{padding:5px 14px;margin-right:1rem;font-family:var(--sans,Optima,'Gill Sans',sans-serif);font-size:.8rem}

/* ---------- the chat panel ---------- */
.tutor-chip,.tutor-ask,.tutor-panel,.tutor-panel button,.tutor-panel textarea{
  font-family:var(--sans,Optima,'Gill Sans',sans-serif);font-size:.8rem;letter-spacing:.03em;
}
.tutor-chip{
  position:fixed;right:12px;bottom:12px;z-index:60;border:0;padding:8px 14px;border-radius:999px;cursor:pointer;
  background:#241a10;color:#f0e6cc;box-shadow:0 3px 10px rgba(0,0,0,.3);
}
.tutor-chip::before,.tutor-top span::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#8a7a66}
.tutor-chip.tutor-live::before,.tutor-live .tutor-top span::before{background:#9cb648}
.tutor-chip.tutor-new::after{content:" · new reply";color:#e0b84a}
.tutor-away{display:none}
.tutor-ask{position:absolute;z-index:70;display:flex;gap:4px;padding:4px;border-radius:6px;background:#241a10;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.tutor-ask button{border:0;border-radius:4px;padding:5px 10px;cursor:pointer;background:#3a2a1a;color:#f0e6cc;font:inherit}
.tutor-ask button[hidden]{display:none}
.tutor-ask button:hover,.tutor-chip:hover{background:var(--aegean-d,#136f9e)}

.tutor-panel{
  position:fixed;right:12px;bottom:12px;z-index:60;display:none;flex-direction:column;
  width:min(380px,calc(100vw - 24px));height:min(560px,calc(100svh - 80px));
  background:#fffaf0;color:#1c1512;border:1px solid #241a10;border-radius:6px;overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,.35);text-align:left;
}
.tutor-panel.tutor-open{display:flex}
.tutor-top{display:flex;align-items:center;padding:7px 8px 7px 12px;background:#241a10;color:#f0e6cc;
  letter-spacing:.14em;text-transform:uppercase;font-size:.7rem}
.tutor-top span{flex:1}
.tutor-top button{border:0;background:none;color:inherit;padding:2px 9px;border-radius:3px;cursor:pointer;font-size:1rem;line-height:1}
.tutor-top button:hover{background:rgba(255,255,255,.15)}
.tutor-turns{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain}
.tutor-empty{margin:auto 0;color:#7a6a55;font-family:var(--serif,Georgia,serif);font-style:italic;font-size:.95rem;text-align:center}
.tutor-turn{max-width:92%;padding:8px 11px;border-radius:8px;font-family:var(--serif,Georgia,serif);font-size:.95rem;line-height:1.45;letter-spacing:0}
.tutor-turn p{margin:0 0 .55rem}
.tutor-turn>:last-child{margin-bottom:0}
.tutor-turn ul,.tutor-turn ol{margin:0 0 .55rem;padding-left:1.2rem}
.tutor-mine{align-self:flex-end;background:#e9dcb6}
.tutor-theirs{align-self:flex-start;background:#fff;border:1px solid #d9cdb0}
.tutor-waiting{color:#7a6a55;font-style:italic;animation:tutor-wait 1.6s ease-in-out infinite}
@keyframes tutor-wait{50%{opacity:.45}}
.tutor-turn .tutor-on,.tutor-context .tutor-on{font-size:.82rem;margin-bottom:.4rem}
.tutor-where{display:block;margin-bottom:.3rem;font-family:var(--sans,Optima,'Gill Sans',sans-serif);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--aegean-d,#136f9e)}
.tutor-panel .tutor-pin{display:block;margin:.5rem 0 0;border:0;background:none;padding:0;color:var(--aegean-d,#136f9e);font-size:.72rem;cursor:pointer}
.tutor-panel p.tutor-pin{color:#7a6a55;cursor:default;font-family:var(--sans,Optima,'Gill Sans',sans-serif)}
.tutor-panel button.tutor-pin:hover{text-decoration:underline}
.tutor-compose{display:grid;grid-template-columns:1fr auto;gap:6px;margin:0;padding:8px;border-top:1px solid #d9cdb0;background:#f6eed6}
.tutor-context,.tutor-quick{grid-column:1 / -1;display:none}
.tutor-context.tutor-has{display:flex;align-items:flex-start;gap:6px}
.tutor-context .tutor-on{flex:1;margin:0}
.tutor-context button{border:0;background:none;color:#7a6a55;cursor:pointer;padding:0 4px}
.tutor-quick.tutor-has{display:flex;gap:5px;flex-wrap:wrap}
.tutor-quick button{border:1px solid #b9a77e;border-radius:999px;background:#fffaf0;color:#1c1512;padding:3px 10px;cursor:pointer}
.tutor-quick button:hover{background:#e9dcb6}
.tutor-compose textarea{resize:none;border:1px solid #b9a77e;border-radius:4px;padding:6px 8px;background:#fff;color:#1c1512;font-family:var(--serif,Georgia,serif);font-size:.95rem;letter-spacing:0}
.tutor-compose textarea:disabled{background:#eee6cf;color:#7a6a55}
.tutor-send{border:0;border-radius:4px;padding:0 14px;background:#241a10;color:#f0e6cc;cursor:pointer}
.tutor-send:disabled{opacity:.4;cursor:default}
.tutor-panel:not(.tutor-live) .tutor-quick{display:none}