:root{
  --paper:#f3ebdd; --panel:#fbf6ec; --ink:#241d1a; --ink-soft:#6f5f51;
  --line:#e2d4bf; --terra:#c65a37; --teal:#2d8a82; --bad:#b8331f;
  --display:"Fraunces",serif; --body:"Hanken Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0}
body{font-family:var(--body); color:var(--ink);
  background:radial-gradient(130% 90% at 50% 0%,#f7f0e3,#e6d8c2 90%); min-height:100vh;}
.topbar{display:flex; align-items:center; gap:12px; padding:12px 18px;
  background:var(--panel); border-bottom:1px solid var(--line);}
.topbar .brand{font-family:var(--display); font-weight:700; color:var(--terra);
  text-decoration:none; font-size:18px; display:flex; align-items:center; gap:8px;}
.brand-icon{display:inline-block; width:26px; height:24px; flex-shrink:0;
  background:var(--terra);
  -webkit-mask:url('/static/talking-turkey.svg') no-repeat center/contain;
  mask:url('/static/talking-turkey.svg') no-repeat center/contain;}
.topbar .spacer{flex:1}
.topbar .vpn{font-size:12px; background:rgba(45,138,130,.12); color:var(--teal);
  border:1px solid #9ccfca; border-radius:999px; padding:4px 10px; font-weight:600;}
.topbar .who{font-size:13px; color:var(--ink-soft)}
.inline{display:inline} .link{background:none;border:0;color:var(--terra);cursor:pointer;font:inherit}
.wrap{max-width:680px; margin:0 auto; padding:22px 16px 60px;}
.flash{border-radius:10px; padding:9px 13px; margin-bottom:12px; font-size:14px;}
.flash.error{background:rgba(184,51,31,.1); color:var(--bad); border:1px solid #e7a99b;}
.flash.warn{background:rgba(198,90,55,.1); color:#7a5a48; border:1px dashed #e7b49b;}
.flash.ok{background:rgba(45,138,130,.1); color:var(--teal); border:1px solid #9ccfca;}
.card{background:var(--panel); border:1px solid var(--line); border-radius:18px;
  padding:24px; box-shadow:0 20px 50px -30px rgba(60,40,28,.6);}
.card.auth{max-width:380px; margin:40px auto;}
h1{font-family:var(--display); font-weight:700;}
form label{display:block; font-size:13px; color:var(--ink-soft); margin:12px 0 4px;}
input[type=email],input[type=password],input[type=text],textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font:inherit; background:#fff;}
button.primary{margin-top:16px; width:100%; padding:12px; border:0; border-radius:12px;
  background:var(--terra); color:#fff; font-weight:700; font-size:15px; cursor:pointer;}
.muted{color:var(--ink-soft); font-size:13px; margin-top:14px;}
.muted a{color:var(--terra)}
.contact{display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--panel);
  border:1px solid var(--line); border-radius:14px; margin-bottom:8px; text-decoration:none; color:var(--ink);}
.contact .badge{margin-left:auto; background:var(--terra); color:#fff; border-radius:999px;
  font-size:12px; padding:2px 9px; font-weight:700;}
.thread{display:flex; flex-direction:column; gap:8px; padding:14px 0 8px;
  flex:1; overflow-y:auto; min-height:0;}
.msg{max-width:78%; position:relative;}
.msg.in{align-self:flex-start} .msg.out{align-self:flex-end}
.bubble{padding:9px 13px; border-radius:14px; font-size:15px; line-height:1.4; word-wrap:break-word;}
.msg.in .bubble{background:#fff; border:1px solid var(--line);}
.msg.out .bubble{background:var(--teal); color:#fff;}
.msgmenu{position:absolute; top:-4px; right:-8px; border:0; background:none; cursor:pointer;
  color:var(--ink-soft); font-size:16px; opacity:.5;}
.menu{display:none; position:absolute; z-index:5; top:16px; right:0; background:#fff;
  border:1px solid var(--line); border-radius:10px; box-shadow:0 8px 20px -8px rgba(0,0,0,.3);}
.menu button{display:block; border:0; background:none; padding:8px 14px; width:100%; text-align:left;
  cursor:pointer; font:inherit; white-space:nowrap;}
.msg.menu-open .menu{display:block;}
mark.hg{background:none; color:inherit;}
.msg.revealed mark.hg{background:#ffe08a; color:#241d1a; border-radius:3px; padding:0 1px;}
.msg.revealed mark.hg::after{content:"("attr(data-orig)")"; font-size:.7em; vertical-align:super; color:var(--terra);}
/* composer bar (sticky bottom of conversation page) */
.composer-bar{flex-shrink:0; display:flex; align-items:flex-end; gap:8px;
  background:var(--bg,#f3ebdd); border-top:1px solid var(--line);
  padding:8px 16px 12px; padding-bottom:max(12px,env(safe-area-inset-bottom));}
.attach-wrap{position:relative; flex-shrink:0;}
.attach-trigger{width:38px; height:38px; border-radius:50%;
  background:var(--panel); border:1px solid var(--line);
  font-size:22px; line-height:1; color:var(--terra); font-weight:400;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s;}
.attach-trigger:hover{background:#f0e5d4;}
.attach-popup{position:absolute; bottom:calc(100% + 8px); left:0;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 4px 18px rgba(0,0,0,.12); overflow:hidden; min-width:140px; z-index:50;}
.attach-opt{display:block; padding:10px 16px; font-size:14px; font-weight:600;
  color:var(--ink); text-decoration:none; transition:background .1s;}
.attach-opt:hover{background:#f5efe3;}
.composer-form{flex:1; margin:0;}
.composer-box{border:1.5px solid var(--line); border-radius:18px;
  background:#fff; display:flex; flex-direction:column; overflow:hidden;
  transition:border-color .15s;}
.composer-box:focus-within{border-color:var(--terra);}
.composer-ta{width:100%; border:none; outline:none; resize:none;
  font:inherit; font-size:15px; line-height:1.4;
  padding:10px 14px 4px; background:transparent;
  min-height:40px; max-height:180px; overflow-y:auto;}
.composer-foot{display:flex; align-items:center; justify-content:space-between;
  padding:4px 8px 6px 14px; gap:8px;}
.msg-counter{font-size:11px; color:var(--ink-soft); flex-shrink:0;}
.send-btn{width:32px; height:32px; border-radius:50%; border:none;
  background:var(--terra); color:#fff; font-size:16px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; transition:background .15s;}
.send-btn:hover{background:#a84a2c;}
.hint{font-size:12px; color:var(--ink-soft); text-align:center; margin-top:6px;}
.msg-meta{display:flex; align-items:center; gap:6px; margin-top:2px; padding:0 4px;}
.ts{font-size:11px; color:var(--ink-soft);}
.msg.out .ts{text-align:right;}
.msg-status{font-size:10px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.03em;}
.media-pill{display:inline-block; background:var(--line); border-radius:8px;
  padding:4px 10px; font-size:13px; color:var(--ink-soft);}
.media-caption{font-size:13px; color:var(--ink-soft);}
.load-older{font-size:13px; color:var(--terra); text-decoration:none; font-weight:600;
  padding:6px 14px; border:1px dashed var(--terra); border-radius:20px; display:inline-block;}
.sync-status{display:inline-flex; align-items:center;}
/* conversation header */
.convohead{display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0 8px; flex-shrink:0; border-bottom:1px solid var(--line); margin-bottom:0;}
.attach{font-size:14px; font-weight:600; color:#fff; background:var(--terra); border-radius:999px;
  padding:7px 14px; text-decoration:none; white-space:nowrap;}
.unhide-btn{background:none;border:1px solid var(--line);border-radius:8px;
  padding:4px 11px;font-size:12px;font-weight:600;color:var(--ink-soft);
  cursor:pointer;font-family:inherit;transition:background .1s,color .1s;}
.unhide-btn:hover{background:var(--terra);color:#fff;border-color:var(--terra);}
.srcadd{display:flex; gap:8px; align-items:center; margin:14px 0; flex-wrap:wrap;}
.srcadd #urlInput{flex:1; min-width:180px;}
.srcadd button,.filebtn{border:1px solid var(--line); background:#fff; border-radius:10px; padding:9px 13px;
  font-weight:600; color:var(--ink); cursor:pointer;}
.srclist{list-style:none; padding:0; margin:0 0 16px; display:flex; flex-direction:column; gap:6px;}
.srclist li{display:flex; align-items:center; gap:8px; background:var(--panel); border:1px solid var(--line);
  border-radius:11px; padding:8px 11px; font-size:13.5px; word-break:break-all;}
.srclist li .ord{display:flex; gap:3px; margin-left:auto;}
.srclist li button{border:0; background:none; cursor:pointer; color:var(--ink-soft); font-size:15px; padding:0 4px;}
.preview{display:flex; flex-direction:column; align-items:center; gap:8px; margin:18px 0;}
.bumpercard{width:160px; padding:14px; text-align:center; font-family:var(--display); font-size:13px;
  color:#fff; background:linear-gradient(150deg,var(--terra),#8f3a22); border-radius:12px;}
.preview .tube{position:relative; width:120px; height:300px; border-radius:20px; overflow:hidden;
  background:#120e0c; border:1px solid var(--line);}
.preview .tube canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.jobbox{text-align:center; margin-top:30px;}
.spinner{width:42px; height:42px; margin:0 auto 14px; border:4px solid var(--line);
  border-top-color:var(--terra); border-radius:50%; animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.jobbox .stage{font-family:var(--display); font-size:18px;}
/* Talking Turkey indefinite progress indicator — prismatic color cycle */
.turkey-spinner{display:inline-block; width:52px; height:48px;
  background:#e85d2a;
  -webkit-mask:url('/static/talking-turkey.svg') no-repeat center/contain;
  mask:url('/static/talking-turkey.svg') no-repeat center/contain;
  animation:turkey-cycle 1.8s linear infinite;}
.turkey-spinner.sm{width:32px; height:29px;}
@keyframes turkey-cycle{
  from{filter:hue-rotate(0deg) saturate(2.5) brightness(1.1);}
  to  {filter:hue-rotate(360deg) saturate(2.5) brightness(1.1);}
}