/* MindSpring — "Snap & Solve" image tutor widget.
   A floating launcher (bottom-right) that pops open a chat panel. Uses the
   shared brand tokens from base.css; no purple. Self-contained so a page only
   needs this stylesheet + tutor.js. */

.ttr-launch{
  position:fixed; right:clamp(16px,3vw,26px);
  bottom:calc(clamp(16px,3vw,26px) + env(safe-area-inset-bottom,0px));
  z-index:1200;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 18px 13px 15px; border:none; border-radius:100px; cursor:pointer;
  background:var(--evergreen); color:#f4f2e8;
  font-family:inherit; font-weight:600; font-size:14.5px; letter-spacing:.01em;
  box-shadow:0 10px 28px -8px rgba(20,40,30,.45), 0 2px 6px rgba(20,40,30,.18);
  transition:transform .18s ease, box-shadow .18s ease, opacity .2s ease;
}
.ttr-launch:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(20,40,30,.5), 0 3px 8px rgba(20,40,30,.2); }
.ttr-launch:active{ transform:translateY(0); }
.ttr-launch svg{ width:22px; height:22px; flex:none; }
.ttr-launch .ttr-launch-label{ white-space:nowrap; }
@media(max-width:520px){
  .ttr-launch{ padding:14px; }
  .ttr-launch .ttr-launch-label{ display:none; }
}
/* Hidden while the panel is open */
.ttr-launch[hidden]{ display:none; }

/* ---- panel --------------------------------------------------------------- */
.ttr-panel{
  position:fixed; right:clamp(16px,3vw,26px);
  bottom:calc(clamp(16px,3vw,26px) + env(safe-area-inset-bottom,0px));
  z-index:1201;
  width:min(400px, calc(100vw - 32px));
  height:min(620px, calc(100vh - 40px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg,18px);
  box-shadow:0 24px 60px -18px rgba(20,40,30,.5), 0 4px 14px rgba(20,40,30,.16);
  transform-origin:bottom right;
  animation:ttr-pop .22s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes ttr-pop{ from{ opacity:0; transform:translateY(12px) scale(.96); } to{ opacity:1; transform:none; } }
.ttr-panel[hidden]{ display:none; }
@media(max-width:520px){
  .ttr-panel{ right:8px; left:8px; width:auto; height:min(88vh, calc(100vh - 24px)); bottom:8px; }
}

.ttr-head{
  display:flex; align-items:center; gap:11px; padding:15px 16px;
  border-bottom:1px solid var(--line); background:var(--paper);
}
.ttr-head .ttr-mark{ width:34px; height:34px; border-radius:10px; flex:none; display:grid; place-items:center; background:var(--evergreen); color:var(--honey); }
.ttr-head .ttr-mark svg{ width:19px; height:19px; }
.ttr-head .ttr-ttl{ flex:1; min-width:0; }
.ttr-head h3{ font-family:"Bricolage Grotesque",sans-serif; font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.1; }
.ttr-head .ttr-sub{ margin-top:2px; font-size:12px; color:var(--ink-soft); }
.ttr-close{ flex:none; width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); cursor:pointer; display:grid; place-items:center; }
.ttr-close:hover{ color:var(--ink); border-color:var(--line-strong,var(--line)); }
.ttr-close svg{ width:15px; height:15px; }

.ttr-log{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:13px; background:var(--paper); }

/* intro / gate states */
.ttr-intro{ margin:auto; text-align:center; color:var(--ink-soft); font-size:14px; line-height:1.6; padding:14px; }
.ttr-intro .ttr-intro-icon{ width:46px; height:46px; margin:0 auto 12px; border-radius:14px; display:grid; place-items:center; background:var(--sage); color:var(--spring-deep); }
.ttr-intro .ttr-intro-icon svg{ width:24px; height:24px; }
.ttr-intro b{ color:var(--ink); font-weight:600; }
.ttr-intro a{ color:var(--spring-deep); font-weight:600; }

/* messages */
.ttr-msg{ max-width:88%; font-size:14px; line-height:1.55; }
.ttr-msg.me{ align-self:flex-end; background:var(--evergreen); color:#f2f0e6; border-radius:14px 14px 4px 14px; padding:10px 13px; }
.ttr-msg.me img{ display:block; max-width:180px; border-radius:9px; margin:0 0 7px; }
.ttr-msg.bot{ align-self:flex-start; background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:14px 14px 14px 4px; padding:11px 14px; box-shadow:var(--shadow-sm); }
.ttr-msg.bot p{ margin:0 0 8px; }
.ttr-msg.bot p:last-child{ margin-bottom:0; }
.ttr-msg.bot ul{ margin:6px 0; padding-left:18px; }
.ttr-msg.bot li{ margin:3px 0; }
.ttr-msg.bot strong{ font-weight:700; color:var(--ink); }
.ttr-msg.bot code, .ttr-msg.me code{ font-family:"IBM Plex Mono",monospace; font-size:12.5px; background:var(--sage); padding:1px 5px; border-radius:5px; }
.ttr-msg.sys{ align-self:center; text-align:center; font-size:12.5px; color:var(--ink-soft); background:var(--sage); border-radius:100px; padding:5px 13px; }

/* typing indicator */
.ttr-typing{ align-self:flex-start; display:inline-flex; gap:4px; padding:12px 14px; background:var(--card); border:1px solid var(--line); border-radius:14px 14px 14px 4px; box-shadow:var(--shadow-sm); }
.ttr-typing span{ width:7px; height:7px; border-radius:50%; background:var(--spring-deep); opacity:.5; animation:ttr-bounce 1s infinite; }
.ttr-typing span:nth-child(2){ animation-delay:.15s; }
.ttr-typing span:nth-child(3){ animation-delay:.3s; }
@keyframes ttr-bounce{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-4px); opacity:.9; } }

/* composer */
.ttr-compose{ border-top:1px solid var(--line); background:var(--card); padding:11px 12px calc(11px + env(safe-area-inset-bottom,0px)); }
.ttr-attach-row{ display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.ttr-attach{ display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--spring-deep); background:var(--sage); border:1px dashed var(--spring); border-radius:10px; padding:8px 12px; cursor:pointer; }
.ttr-attach svg{ width:16px; height:16px; }
.ttr-attach input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.ttr-thumb{ display:none; align-items:center; gap:8px; font-size:12px; color:var(--ink-soft); }
.ttr-thumb.show{ display:inline-flex; }
.ttr-thumb img{ width:34px; height:34px; object-fit:cover; border-radius:7px; border:1px solid var(--line); }
.ttr-thumb button{ border:none; background:none; color:var(--ink-soft); cursor:pointer; font-size:16px; line-height:1; padding:2px; }
.ttr-cost{ margin-left:auto; font-size:11.5px; color:var(--ink-soft); font-family:"IBM Plex Mono",monospace; }

.ttr-input-row{ display:flex; align-items:flex-end; gap:8px; }
.ttr-input{ flex:1; resize:none; max-height:110px; min-height:42px; padding:11px 13px; border:1px solid var(--line); border-radius:12px; background:var(--paper); color:var(--ink); font-family:inherit; font-size:14px; line-height:1.4; }
.ttr-input:focus{ outline:none; border-color:var(--spring); box-shadow:0 0 0 3px rgba(62,156,108,.15); }
.ttr-send{ flex:none; width:42px; height:42px; border-radius:11px; border:none; background:var(--evergreen); color:#f4f2e8; cursor:pointer; display:grid; place-items:center; }
.ttr-send:disabled{ opacity:.45; cursor:not-allowed; }
.ttr-send svg{ width:18px; height:18px; }

@media(prefers-reduced-motion:reduce){
  .ttr-panel{ animation:none; }
  .ttr-launch{ transition:none; }
  .ttr-typing span{ animation:none; opacity:.6; }
}