/* pic.to.mesh – ruhiges, editoriales Design (hell/dunkel automatisch) */
:root{
  --bg:#f7f5f2; --surface:#ffffff; --surface2:#f1eee9;
  --text:#232220; --muted:#8c857b; --dim:#8c857b; --line:#e7e2da;
  --btn-bg:#2c2b27; --btn-fg:#faf8f4;
  --bub-in-bg:#ffffff; --bub-in-fg:#232220; --bub-in-bd:#e7e2da;
  --bub-out-bg:#2c2b27; --bub-out-fg:#f6f3ee;
  --accent:#6f6a60; --ok:#4f8268; --warn:#9a7a36; --err:#a8534c;
  --glass:var(--surface); --glass2:var(--surface2); --accent2:var(--accent);
  --shadow:0 1px 2px rgba(40,36,30,.06), 0 6px 24px rgba(40,36,30,.06);
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#161518; --surface:#1e1d21; --surface2:#26252a;
    --text:#eceae4; --muted:#989288; --dim:#989288; --line:rgba(255,255,255,.10);
    --btn-bg:#ece9e2; --btn-fg:#1c1b1e;
    --bub-in-bg:#26252a; --bub-in-fg:#eceae4; --bub-in-bd:rgba(255,255,255,.08);
    --bub-out-bg:#e7e3da; --bub-out-fg:#201f23;
    --accent:#b6afa3; --ok:#6fae8c; --warn:#c2a15c; --err:#cf7b74;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 8px 30px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{font-family:var(--sans);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;letter-spacing:.005em}
#app{height:100%;display:flex;flex-direction:column;max-width:720px;margin:0 auto;background:var(--bg)}
.screen{flex:1;min-height:0;display:none;flex-direction:column}
.screen.active{display:flex}
.glass{background:var(--surface);border:1px solid var(--line)}

header.bar{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
header.bar .title{font-family:var(--serif);font-weight:600;font-size:1.12rem;line-height:1.15;letter-spacing:.01em}
header.bar .sub{font-size:.74rem;color:var(--muted)}
.grow{flex:1;min-width:0}

.btn{border:1px solid transparent;border-radius:10px;padding:10px 16px;font-weight:600;font-size:.88rem;cursor:pointer;color:var(--btn-fg);background:var(--btn-bg);transition:opacity .15s,background .15s}
.btn:hover{opacity:.9}
.btn:active{opacity:.8}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--surface2)}
.btn.sm{padding:7px 12px;font-size:.8rem;border-radius:9px}
.btn.danger{background:transparent;color:var(--err);border:1px solid var(--line)}
.btn.danger:hover{background:var(--surface2)}
.icon{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:var(--surface);border:1px solid var(--line);color:var(--text);cursor:pointer;font-size:1.05rem}
.icon:hover{background:var(--surface2)}

.scroll{flex:1;min-height:0;overflow-y:auto;padding:14px}
.card{border-radius:12px;padding:16px;margin-bottom:12px;background:var(--surface);border:1px solid var(--line)}
.row{display:flex;gap:10px}
.row>*{flex:1}
label.lbl{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:10px 0 5px}
input,select,textarea{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:.95rem;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
textarea{resize:vertical}

.listitem{display:flex;align-items:center;gap:13px;padding:13px 14px;border-radius:11px;margin-bottom:6px;cursor:pointer;border:1px solid transparent;transition:background .12s}
.listitem:hover{background:var(--surface2)}
.avatar{width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--text);background:var(--surface2);border:1px solid var(--line);flex-shrink:0}
.avatar.contact{background:var(--surface2)}
.muted{color:var(--muted);font-size:.8rem}
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px;gap:12px}
.logo{font-family:var(--serif);font-size:2rem;font-weight:600;letter-spacing:.01em}
.pill{display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;padding:3px 9px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);color:var(--muted)}

/* Chat */
#chatlog{display:flex;flex-direction:column;gap:6px}
#chatlog .row{display:flex;gap:9px;margin:10px 0;align-items:flex-start}
#chatlog .row.out{flex-direction:row-reverse}
.avatar-sm{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:.76rem}
.msgcol{display:flex;flex-direction:column;max-width:80%;min-width:0}
.row.out .msgcol{align-items:flex-end}
.sender{font-weight:600;font-size:.8rem;margin:0 0 3px 4px;line-height:1.1;letter-spacing:.01em}
.bubble{padding:9px 13px;border-radius:14px;font-size:.97rem;line-height:1.4;word-break:break-word;white-space:pre-wrap}
.bubble.in{background:var(--bub-in-bg);color:var(--bub-in-fg);border:1px solid var(--bub-in-bd);border-bottom-left-radius:5px}
.bubble.out{background:var(--bub-out-bg);color:var(--bub-out-fg);border-bottom-right-radius:5px}
#chatlog .meta{font-size:.7rem;color:var(--muted);margin:4px 6px 0;line-height:1.2}
.row.out .meta{text-align:right}
.row .resend{margin:4px 6px 0;cursor:pointer;color:var(--accent);font-size:.78rem;font-weight:600;text-decoration:underline}
.sysmsg{text-align:center;color:var(--muted);font-size:.76rem;margin:10px 0}

/* Foto-Transfer-Karte */
.xfer{align-self:stretch;border-radius:12px;padding:13px;border:1px solid var(--line);background:var(--surface);margin:6px 0}
.xfer.out{border-color:var(--line)}
.xfer.done{border-color:var(--ok)}
.xfer.part{border-color:var(--warn)}
.xfer img{max-width:220px;width:100%;border-radius:8px;margin-top:8px;display:block;border:1px solid var(--line)}
.xfer a.dl{display:inline-block;margin:8px 10px 2px 0;padding:7px 13px;border-radius:9px;background:var(--surface2);border:1px solid var(--line);color:var(--text);font-size:.8rem;font-weight:600;text-decoration:none;cursor:pointer}
.xfer a.dl:hover{background:var(--bg)}
.xfer-time{font-size:.7rem;color:var(--muted);margin-top:8px;line-height:1.2}
.xfer.out .xfer-time{text-align:right}

/* Composer */
.composer{display:flex;gap:9px;align-items:flex-end;padding:11px 13px;border-top:1px solid var(--line);background:var(--surface)}
.composer .growcol{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.composer .growcol textarea{flex:1;min-height:42px;max-height:120px;border-radius:12px}
#imgTools{flex:0 0 auto;display:flex;align-items:flex-end}

.banner{padding:10px 13px;font-size:.82rem;border-top:1px solid var(--line)}
.banner.send{background:var(--surface2);color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:10px}
.scopebar{display:flex;align-items:center;justify-content:space-between;padding:8px 13px;font-size:.74rem;border-top:1px solid var(--line);color:var(--muted)}
.warn{color:var(--warn)}
a.dl{color:var(--accent);font-size:.78rem}

.seg{display:flex;gap:6px;margin-bottom:12px}
.seg button{flex:1;padding:9px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-weight:600;cursor:pointer;transition:background .12s}
.seg button:hover{background:var(--surface2)}
.seg button.on{background:var(--btn-bg);color:var(--btn-fg);border-color:transparent}

#p2m-build{position:fixed;right:7px;bottom:5px;z-index:99;font-size:10px;padding:3px 7px;border-radius:7px;color:var(--muted);background:var(--surface);border:1px solid var(--line);font-family:var(--mono);pointer-events:none;opacity:.8}
.hidden{display:none!important}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:9px}

/* Debug-Panel */
#dbg{position:fixed;left:0;right:0;bottom:0;height:46%;z-index:200;display:flex;flex-direction:column;background:var(--surface);border-top:1px solid var(--line)}
#dbg .dbgbar{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--line);font-size:.82rem}
#dbglog{flex:1;margin:0;padding:9px 11px;overflow:auto;font-family:var(--mono);font-size:11px;line-height:1.4;color:var(--muted);white-space:pre-wrap;word-break:break-all}

/* Badges */
.badge{flex:0 0 auto;min-width:21px;height:21px;padding:0 6px;border-radius:11px;background:var(--btn-bg);color:var(--btn-fg);font-size:.7rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-left:8px}
.badge.img{background:var(--surface2);color:var(--text);border:1px solid var(--line)}

/* Fragment-Raster + Legende */
.fraggrid{display:flex;flex-wrap:wrap;gap:3px;margin-top:8px}
.fragcell{width:11px;height:11px;border-radius:2px;background:var(--surface2);border:1px solid var(--line)}
.fragcell.sent{background:var(--accent);border-color:transparent}
.fragcell.heard{background:var(--ok);border-color:transparent}
.fragcell.fail{background:var(--err);border-color:transparent}
.fraglegend{display:flex;gap:12px;margin-top:7px;font-size:.68rem;color:var(--muted);flex-wrap:wrap}
.fraglegend i.lc{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.lc.sent{background:var(--accent)}.lc.heard{background:var(--ok)}.lc.fail{background:var(--err)}
.fraglist{margin-top:7px;max-height:170px;overflow:auto;font-family:var(--mono);font-size:.62rem;color:var(--muted);background:var(--surface2);border-radius:8px;padding:7px}
.fragrow{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:1px 0}

/* Zeichenzähler */
.charinfo{font-size:.66rem;color:var(--muted);text-align:right;padding:0 4px;min-height:.9em}
.charinfo.warn{color:var(--warn)}
.charinfo.over{color:var(--err);font-weight:700}

/* Kontakt-Suche + Favoriten */
.search{width:100%;box-sizing:border-box;margin-bottom:11px;padding:10px 13px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);font-size:.9rem;outline:none}
.search::placeholder{color:var(--muted)}
.search:focus{border-color:var(--accent)}
.starbtn{flex:0 0 auto;background:none;border:none;font-size:1.2rem;line-height:1;cursor:pointer;color:var(--muted);opacity:.5;padding:4px 6px;margin-left:6px}
.starbtn.on{color:var(--warn);opacity:1}

/* Foto-Popup */
.modal{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(30,26,22,.42)}
@media (prefers-color-scheme:dark){ .modal{background:rgba(0,0,0,.6)} }
.modal-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;max-height:90vh}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line)}
.modal-title{font-family:var(--serif);font-size:1.1rem;font-weight:600}
.modal-x{background:none;border:none;color:var(--muted);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 4px}
.modal-x:hover{color:var(--text)}
.modal-body{padding:18px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:14px 18px;border-top:1px solid var(--line)}
.modal-foot .btn{min-width:108px}
.pickbtn{width:100%;padding:14px;border-radius:11px;border:1px dashed var(--line);background:var(--surface2);color:var(--text);font-size:.9rem;font-weight:600;cursor:pointer}
.pickbtn:hover{border-color:var(--accent)}
.preview{display:flex;justify-content:center}
.preview img{max-width:100%;max-height:240px;border-radius:10px;border:1px solid var(--line)}
.field{display:flex;flex-direction:column;gap:6px}
.field-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.field-hint{display:block;font-size:.72rem;color:var(--muted);text-transform:none;letter-spacing:0;margin-top:2px}
.field.check{flex-direction:row;align-items:flex-start;gap:10px;cursor:pointer}
.field.check input{width:auto;margin:2px 0 0;flex:0 0 auto}
.estimate{font-size:.82rem;color:var(--muted);line-height:1.5;min-height:1.2em;text-align:center}

/* Responsiv */
@media (max-width:480px){
  .composer{gap:7px;padding:9px 11px}
  .bubble{font-size:.95rem}
  #chatlog .meta{font-size:.7rem}
  .modal{padding:12px}
  .modal-foot .btn{min-width:0;flex:1}
}

/* SVG-Icons (stilistisch, currentColor) */
.ic{width:20px;height:20px;display:block;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic.fill{fill:currentColor;stroke:none}
.ic.xs{width:13px;height:13px;display:inline-block;vertical-align:-2px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px}
.btn .ic{width:16px;height:16px}
.icon{position:relative}

/* Weltkugel/Scope-Button mit Regions-Tag */
#btnGlobe.active{border-color:var(--accent);color:var(--accent)}
.scopetag{position:absolute;bottom:-3px;right:-3px;min-width:14px;height:14px;padding:0 4px;border-radius:7px;background:var(--btn-bg);color:var(--btn-fg);font-size:.56rem;font-weight:700;line-height:14px;text-align:center;border:1.5px solid var(--surface);text-transform:lowercase}

/* Transfer-Kopf mit Icon */
.xfer-head{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem}
.xfer-head .ic{width:18px;height:18px;flex:0 0 auto;color:var(--muted)}
.xfer-head .muted{font-weight:400}

/* Download-Links + Aktions-Buttons mit Icon */
.xfer a.dl{display:inline-flex;align-items:center;gap:6px}
.xfer a.dl .ic{width:15px;height:15px;flex:0 0 auto}

/* Badge + Stern als Icon */
.badge.img{gap:3px}
.badge .ic{width:12px;height:12px}
.starbtn .ic{width:20px;height:20px}

/* Kopfzeile: Titel kürzen, Icons mobil kompakter */
header.bar .title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header.bar{gap:8px}
@media (max-width:480px){
  header.bar{gap:5px;padding:12px 12px}
  header.bar .icon{width:36px;height:36px}
  header.bar .ic{width:18px;height:18px}
}

/* Composer: Kamera, Textfeld und Senden exakt auf einer Linie */
.composer{align-items:flex-end}
.composer textarea{flex:1;min-width:0;min-height:42px;max-height:120px;border-radius:12px;margin:0}
.composer .icon{width:42px;height:42px;flex:0 0 auto}
.composer .btn{height:42px;flex:0 0 auto}
#imgTools{flex:0 0 auto;display:flex;align-items:flex-end}
.charinfo{padding:3px 14px 4px;text-align:right;min-height:0}
.charinfo:empty{display:none}