@layer reset, base, components, utilities;

/* Meldestelle Public vNext */

:root,
:root[data-theme="dark"]{
  color-scheme: dark;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --bg: #10141a;
  --bg-alt: #161b23;
  --panel: #1a212b;
  --panel-soft: #202834;
  --card: #18202a;
  --card-2: #1d2631;
  --input-bg: #111821;
  --text: #ecf1f6;
  --text-soft: rgba(236,241,246,.82);
  --text-muted: rgba(236,241,246,.62);
  --line: rgba(236,241,246,.10);
  --line-strong: rgba(236,241,246,.16);
  --focus: #63c6b5;
  --focus-ring: 0 0 0 3px rgba(99,198,181,.24);
  --brand: #5bbcae;
  --brand-strong: #6bc7ba;
  --brand-ink: #08211d;
  --info: #7cb0ff;
  --ok: #62b884;
  --warn: #d7a14c;
  --danger: #d56a5d;
  --chip-bg: rgba(236,241,246,.04);
  --btn-pri-bg: var(--brand);
  --btn-pri-bg-hover: var(--brand-strong);
  --btn-pri-text: #081511;
  --btn-sec-bg: rgba(236,241,246,.04);
  --btn-sec-bg-hover: rgba(236,241,246,.08);
  --btn-sec-text: var(--text);
  --shadow-soft: 0 8px 24px rgba(0,0,0,.16);
  --radius-sm: 14px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --container: 1120px;
  --chat-in-bg: #121923;
  --chat-in-line: rgba(236,241,246,.10);
  --chat-out-bg: rgba(91,188,174,.12);
  --chat-out-line: rgba(91,188,174,.24);
  --chat-info-bg: rgba(236,241,246,.05);
  --chat-info-line: rgba(236,241,246,.08);
  --scrollbar: rgba(236,241,246,.18);
}

:root[data-theme="light"]{
  color-scheme: light;
  --bg: #f3f6f8;
  --bg-alt: #ebf0f3;
  --panel: #ffffff;
  --panel-soft: #f7fafb;
  --card: #ffffff;
  --card-2: #f8fbfc;
  --input-bg: #ffffff;
  --text: #15202a;
  --text-soft: rgba(21,32,42,.84);
  --text-muted: rgba(21,32,42,.64);
  --line: rgba(21,32,42,.10);
  --line-strong: rgba(21,32,42,.16);
  --focus: #238676;
  --focus-ring: 0 0 0 3px rgba(35,134,118,.18);
  --brand: #238676;
  --brand-strong: #2c9887;
  --brand-ink: #ffffff;
  --info: #2f6fdf;
  --ok: #2f8f58;
  --warn: #a56d1c;
  --danger: #b95246;
  --chip-bg: rgba(21,32,42,.035);
  --btn-pri-bg: var(--brand);
  --btn-pri-bg-hover: var(--brand-strong);
  --btn-pri-text: #ffffff;
  --btn-sec-bg: rgba(21,32,42,.04);
  --btn-sec-bg-hover: rgba(21,32,42,.07);
  --btn-sec-text: var(--text);
  --shadow-soft: 0 10px 28px rgba(20,33,43,.06);
  --chat-in-bg: #ffffff;
  --chat-in-line: rgba(21,32,42,.10);
  --chat-out-bg: rgba(35,134,118,.10);
  --chat-out-line: rgba(35,134,118,.20);
  --chat-info-bg: rgba(21,32,42,.04);
  --chat-info-line: rgba(21,32,42,.08);
  --scrollbar: rgba(21,32,42,.20);
}

@layer reset{
  *,*::before,*::after{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
  body,h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
  body{min-height:100vh}
  img,picture,svg,video,canvas{display:block;max-width:100%}
  input,button,textarea,select{font:inherit}
  button{border:0;background:none}
}
@layer base{
  html,body{margin:0;padding:0}
  body.pub{
    font-family:var(--font);
    background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)), linear-gradient(135deg, var(--bg), var(--bg-alt));
    color:var(--text);
    line-height:1.5;
  }
  a{color:var(--brand);text-decoration:none}
  a:hover{text-decoration:underline}
  strong{font-weight:800}
  :focus-visible{outline:none;box-shadow:var(--focus-ring)}
  .hidden{display:none !important}
  .sr-only{position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
  body.pub.has-trial-bar{padding-top:44px}
}
@layer components{
  .trial-topbar{
    position:fixed; inset:0 0 auto 0; z-index:60;
    min-height:44px; display:flex; align-items:center; justify-content:center;
    padding:10px 14px; text-align:center;
    font-size:13px; font-weight:800;
    color:var(--text);
    background:rgba(47,111,223,.14);
    border-bottom:1px solid rgba(47,111,223,.28);
  }
  .pub-shell{width:min(100%, var(--container)); margin:0 auto; padding:16px}
  .pub-header{
    z-index:50; margin-bottom:14px;
    background:rgba(26,33,43,.94);
    border:1px solid var(--line); border-radius:20px;
    backdrop-filter:blur(8px);
  }
  :root[data-theme='light'] .pub-header{background:rgba(255,255,255,.94)}
  body.pub.has-trial-bar .pub-header{top:48px}
  .pub-header__row{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px}
  .pub-header__brand{display:flex; align-items:center; gap:12px; min-width:0; color:inherit; text-decoration:none}
  .pub-brand{display:flex; align-items:center; gap:10px}
  .pub-brand__logo{
    width:40px;height:40px;border-radius:14px; display:grid;place-items:center;
    background:rgba(91,188,174,.12);
    border:1px solid rgba(91,188,174,.22); color:var(--text); font-weight:900;
  }
  .pub-brand__text{display:flex;flex-direction:column;min-width:0}
  .pub-brand__title{font-size:14px;font-weight:900;line-height:1.1}
  .pub-brand__sub{font-size:12px;color:var(--text-muted);line-height:1.2}
  .pub-header__tools{display:flex; align-items:center; gap:8px}
  .pub-iconBtn,.pub-btn{min-height:44px; border-radius:14px; cursor:pointer; transition:background-color .18s ease,border-color .18s ease}
  .pub-iconBtn{
    min-width:44px; padding:0 12px; display:inline-flex; align-items:center; justify-content:center;
    color:var(--text); background:var(--btn-sec-bg); border:1px solid var(--line);
  }
  .pub-menuBtn{gap:8px; min-width:auto; padding:0 14px; font-weight:800; font-size:13px}
  .pub-header__panel{display:none; border-top:1px solid var(--line); padding:10px 12px 12px}
  .pub-header.is-open .pub-header__panel{display:block}
  .pub-nav{display:grid; gap:8px}
  .pub-nav a,.pub-nav button{
    display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%;
    min-height:44px; padding:10px 14px; background:var(--chip-bg); border:1px solid var(--line);
    border-radius:14px; color:inherit; text-decoration:none; font-weight:700;
  }
  .pub-nav a.is-active{border-color:rgba(91,188,174,.24); background:rgba(91,188,174,.10)}
  .pub-nav__hint{font-size:12px; color:var(--text-muted); font-weight:600}
  .pub-wrap{width:100%}
  .pub-hero{
    display:grid; gap:14px; margin-bottom:14px; padding:18px;
    border-radius:24px; border:1px solid var(--line);
    background:linear-gradient(180deg, var(--panel), var(--card-2)); box-shadow:var(--shadow-soft);
  }
  .pub-hero h1{font-size:clamp(24px,4vw,36px); line-height:1.1; font-weight:950; letter-spacing:-.02em}
  .pub-hero p{margin-top:10px; color:var(--text-soft); max-width:65ch}
  .pub-card{
    margin-top:14px; padding:18px; border-radius:22px; border:1px solid var(--line);
    background:linear-gradient(180deg, var(--card), var(--card-2)); box-shadow:var(--shadow-soft);
  }
  .pub-card h2{margin-bottom:8px; font-size:18px; line-height:1.2; font-weight:900}
  .pub-grid{display:grid; gap:12px}
  .pub-stack{display:grid; gap:12px}
  .pub-cluster{display:flex; flex-wrap:wrap; gap:10px}
  .pub-lbl{display:block; margin:0 0 7px; font-size:14px; font-weight:800; color:var(--text-soft)}
  .pub-inp,.pub-sel,.pub-ta{
    width:100%; min-height:48px; padding:12px 14px; border:1px solid var(--line-strong);
    border-radius:14px; background:var(--input-bg); color:var(--text); appearance:none;
  }
  .pub-sel{
    padding-right:42px;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
    background-size:5px 5px,5px 5px; background-repeat:no-repeat;
  }
  .pub-ta{min-height:150px; resize:vertical}
  .pub-inp::placeholder,.pub-ta::placeholder{color:var(--text-muted)}
  .pub-inp:focus,.pub-sel:focus,.pub-ta:focus{border-color:var(--focus)}
  .pub-pill,.pub-badge{
    display:inline-flex; align-items:center; gap:8px; min-height:32px; padding:7px 11px;
    border-radius:999px; border:1px solid var(--line); background:var(--chip-bg);
    color:var(--text-soft); font-size:12px; font-weight:800;
  }
  .pub-pill.isUrgent,.pub-badge.is-hot{border-color:rgba(185,82,70,.36); background:rgba(185,82,70,.10); color:var(--text)}
  .pub-pill.isAnon{border-color:rgba(47,143,88,.30); background:rgba(47,143,88,.10); color:var(--text)}
  .pub-confirm.isConfirm{border-color:rgba(47,143,88,.36)!important; background:rgba(47,143,88,.09)!important}
  .pub-btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    padding:11px 16px; border:1px solid transparent; font-weight:850; text-decoration:none;
  }
  .pub-btn--pri{background:var(--btn-pri-bg); color:var(--btn-pri-text); border-color:rgba(0,0,0,.14)}
  .pub-btn--pri:hover{background:var(--btn-pri-bg-hover); text-decoration:none}
  .pub-btn--sec{background:var(--btn-sec-bg); color:var(--btn-sec-text); border-color:var(--line)}
  .pub-btn--sec:hover{background:var(--btn-sec-bg-hover); text-decoration:none}
  .pub-btn[disabled]{opacity:.58;cursor:not-allowed}
  .pub-note,.pub-hint{color:var(--text-muted); font-size:13px}
  .pub-note{margin-top:12px}
  .pub-err{white-space:pre-wrap; color:var(--text); border-left:4px solid var(--danger); padding-left:12px; font-weight:700}
  .pub-alert-urgent{border-radius:18px; border:1px solid rgba(185,82,70,.36); background:rgba(185,82,70,.10)}
  .tf-switch{display:inline-flex; align-items:center; gap:10px; border:0; background:transparent; padding:0; cursor:pointer}
  .tf-track{width:54px; height:30px; position:relative; border-radius:999px; background:var(--btn-sec-bg); border:1px solid var(--line); transition:all .18s ease}
  .tf-thumb{position:absolute; top:50%; left:3px; transform:translateY(-50%); width:24px; height:24px; border-radius:999px; background:var(--text); transition:all .18s ease}
  .tf-switch.isOn .tf-track{background:rgba(91,188,174,.18); border-color:rgba(91,188,174,.38)}
  #urgentBox .tf-switch.isOn .tf-track{background:rgba(185,82,70,.18); border-color:rgba(185,82,70,.40)}
  .tf-switch.isOn .tf-thumb{left:calc(100% - 27px); background:var(--brand)}
  #urgentBox .tf-switch.isOn .tf-thumb{background:var(--danger)}
  .tf-native:focus + .tf-switch{box-shadow:var(--focus-ring);border-radius:999px}
  .pub-dz{
    border:2px dashed rgba(91,188,174,.30); background:rgba(91,188,174,.08); border-radius:20px;
    padding:18px 16px; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; cursor:pointer;
  }
  .pub-dz.isOver{border-color:rgba(91,188,174,.50); background:rgba(91,188,174,.12)}
  .pub-dz__icon{width:54px; height:54px; border-radius:18px; display:grid; place-items:center; background:var(--chip-bg); border:1px solid var(--line)}
  .pub-dz__headline{font-size:16px; font-weight:900}
  .pub-dz__sub{max-width:56ch}
  .pub-dz__or{display:flex; align-items:center; gap:10px; width:min(100%,520px); color:var(--text-muted); font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:.12em}
  .pub-dz__or::before,.pub-dz__or::after{content:''; flex:1; height:1px; background:var(--line)}
  .pub-bar{height:10px; margin-top:12px; overflow:hidden; border-radius:999px; border:1px solid var(--line); background:var(--chip-bg); display:none}
  .pub-bar > div{height:100%; width:0; background:var(--brand)}
  .pub-fileRow{
    display:flex; flex-direction:column; align-items:flex-start; gap:10px; margin-top:10px; padding:12px;
    border-radius:16px; border:1px solid var(--line); background:var(--chip-bg);
  }
  .pub-topbar{
    display:flex; flex-direction:column; gap:12px; padding:14px;
    border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg, var(--panel), var(--panel-soft));
  }
  .pub-topbar h1{font-size:20px; line-height:1.15}
  .pub-topbar__meta{display:flex; flex-wrap:wrap; gap:8px}
  .pub-actions{display:flex; gap:8px; flex-wrap:wrap}
  .pub-mail{display:grid; gap:14px}
  .pub-chat{display:flex; flex-direction:column; min-height:0}
  .pub-chat__scroll{
    min-height:320px; max-height:52vh; overflow:auto; margin-top:8px; padding-right:4px;
    display:flex; flex-direction:column; gap:10px; flex:1;
  }
  .pub-chat__composer{margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
  .pub-chat__row{display:grid; gap:10px}
  .pub-bubble{
    max-width:min(100%, 720px); padding:12px 14px; border-radius:18px;
    border:1px solid var(--chat-in-line); background:var(--chat-in-bg);
  }
  .pub-bubble.is-staff{align-self:flex-end; border-color:var(--chat-out-line); background:var(--chat-out-bg)}
  .pub-bubble.is-reporter{align-self:flex-start}
  .pub-bubble__meta{display:flex; justify-content:space-between; gap:8px; margin-bottom:6px; font-size:12px; font-weight:800; color:var(--text-muted)}
  .pub-bubble__body{white-space:pre-wrap}
  .pub-chatInfoWrap{display:flex; justify-content:center}
  .pub-chatInfo{
    max-width:min(100%, 720px); padding:9px 12px; border-radius:999px;
    border:1px solid var(--chat-info-line); background:var(--chat-info-bg); color:var(--text-muted); font-size:12px; font-weight:700; text-align:center;
  }
  .preview{margin-top:10px; display:grid; gap:10px}
  .pub-chatHeader{display:flex; align-items:flex-start; justify-content:space-between; gap:10px; margin-bottom:4px}
  .pub-chatHeader .pub-hint{margin-top:4px}
  .pub-mail--inbox{display:grid; gap:14px; align-items:stretch}
  .pub-chat--inbox{margin-top:0}
  .pub-chat--inbox .pub-chat__scroll{flex:1; min-height:260px}
  .pub-side{display:grid; gap:14px; align-content:start; order:-1; grid-template-rows:auto 1fr}
  .pub-casePanel,.pub-filesPanel{margin-top:0}
  .pub-filesPanel{display:flex; flex-direction:column; min-height:0}
  .pub-casePanel__head{display:grid; gap:4px}
  .pub-casePanel__eyebrow{font-size:12px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em}
  .pub-casePanel__head h2{margin:0; font-size:28px; line-height:1.05; letter-spacing:-.02em; word-break:break-word}
  .pub-casePanel__badges{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px}
  .pub-casePanel__actions{display:grid; gap:10px; margin-top:16px}
  .pub-copyNotice{margin-top:10px; font-size:13px; font-weight:700; color:var(--ok)}
  .pub-chat__scroll::-webkit-scrollbar{width:10px}
  .pub-chat__scroll::-webkit-scrollbar-thumb{background:var(--scrollbar); border-radius:999px; border:2px solid transparent; background-clip:padding-box}
}
@layer utilities{
  .u-mt-0{margin-top:0 !important}
  .u-mt-10{margin-top:10px !important}
  .u-mt-14{margin-top:14px !important}
  .u-full{width:100% !important}
}
@media (min-width:720px){
  .pub-shell{padding:22px}
  .pub-hero{padding:24px}
  .pub-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .pub-chat__row{grid-template-columns:minmax(0,1fr) auto; align-items:end}
  .pub-fileRow{flex-direction:row; align-items:center; justify-content:space-between}
}
@media (min-width:980px){
  .pub-header__panel{display:block !important; border-top:0; padding:0 12px 12px}
  .pub-nav{grid-template-columns:repeat(3, minmax(0,1fr))}
  .pub-menuBtn{display:none}
  .pub-mail--inbox{grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr); min-height:calc(100vh - 146px)}
  .pub-chat--inbox,.pub-side{height:100%}
  .pub-side{order:0}
  .pub-chat__scroll{max-height:none}
  body.pub.pub-mailbox .pub-shell{min-height:100vh}
}


/* Inbox layout compact */
.pub-mail--inbox{
  display:grid;
  gap:16px;
  align-items:start;
}
.pub-mail--inbox > .pub-card{
  margin-top:0;
}
.pub-chat--inbox{
  min-width:0;
}
.pub-chat--inbox .pub-chat__scroll{
  min-height:260px;
}
.pub-chatHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.pub-chatHeader--case{
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}
.pub-chatHeader__main{
  min-width:0;
}
.pub-chatHeader__eyebrow{
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:4px;
}
.pub-chatHeader--case h2{
  margin:0;
  font-size:clamp(24px,3vw,34px);
  line-height:1.02;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.pub-chatHeader--case .pub-hint{
  margin-top:8px;
}
.pub-chatHeader__meta{
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  min-width:220px;
}
.pub-caseInlineBadges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}
.pub-filesPanel{
  display:flex;
  flex-direction:column;
  align-self:start;
}
.pub-filesPanel h2{
  margin-top:0;
}
.pub-filesPanel #uploadsList{
  display:grid;
  gap:10px;
}
.pub-filesPanel .pub-fileRow:first-child{
  margin-top:0;
}

/* Desktop should keep burger header compact */
@media (min-width:980px){
  .pub-header__panel{display:none !important;}
  .pub-header.is-open .pub-header__panel{
    display:block !important;
    border-top:1px solid var(--line);
    padding:10px 12px 12px;
  }
  .pub-menuBtn{display:inline-flex;}
  .pub-nav{grid-template-columns:1fr;}

  .pub-mail--inbox{
    grid-template-columns:minmax(0,1fr) 320px;
    min-height:calc(100vh - 150px);
  }
  .pub-chat--inbox{
    min-height:calc(100vh - 150px);
  }
  .pub-chat--inbox .pub-chat__scroll{
    max-height:none;
  }

}

@media (max-width: 979px){
  .pub-mail--inbox{
    grid-template-columns:1fr;
  }
  .pub-chatHeader{
    flex-direction:column;
    align-items:flex-start;
  }
  .pub-chatHeader__meta{
    min-width:0;
    width:100%;
    justify-content:flex-start;
  }
  .pub-caseInlineBadges{
    justify-content:flex-start;
  }
}

/* Upload styling fix (global, also for /melden) */
.pub-dz{
  width:100%;
  max-width:100%;
}
.pub-dz .pub-btn,
.pub-dz .pub-btn--sec{
  min-width:220px;
}
.pub-dz__icon svg,
.pub-dz__icon img{
  width:28px;
  height:28px;
}


/* Public i18n / language switcher */
.pub-langSwitch{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--btn-sec-bg);
}
.pub-langSwitch__btn{
  min-width:40px;
  min-height:36px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  color:var(--text);
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  letter-spacing:.04em;
}
.pub-langSwitch__btn.is-active{
  background:rgba(91,188,174,.14);
  border:1px solid rgba(91,188,174,.24);
}
@media (max-width: 820px){
  .pub-langSwitch{order:-1}
}


/* Premium upload area */
.pub-uploadWrap{display:grid;gap:14px}
.pub-uploadDrop{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:20px;border:1px dashed rgba(91,188,174,.34);background:linear-gradient(180deg, rgba(91,188,174,.08), rgba(91,188,174,.03));cursor:pointer;transition:border-color .18s ease,background-color .18s ease,transform .18s ease}
.pub-uploadDrop.isOver{border-color:rgba(91,188,174,.54);background:linear-gradient(180deg, rgba(91,188,174,.14), rgba(91,188,174,.06));transform:translateY(-1px)}
.pub-uploadDrop__icon{width:52px;height:52px;flex:0 0 52px;border-radius:16px;display:grid;place-items:center;background:var(--chip-bg);border:1px solid var(--line)}
.pub-uploadDrop__copy{min-width:0}
.pub-uploadDrop__title{font-weight:900;font-size:16px}
.pub-uploadActions{display:flex;flex-wrap:wrap;gap:10px}
.pub-uploadActions .pub-btn{min-width:220px}
.pub-uploadMeta{display:grid;gap:4px;color:var(--text-muted);font-size:13px}
.pub-uploadStatus{min-height:20px;color:var(--text-muted);font-size:13px;font-weight:700}
.pub-attachmentGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pub-attachmentGrid--sidebar {grid-template-columns:repeat(1,minmax(0,1fr));}
.pub-attachmentGrid--sidebar .pub-attachmentBody {padding:0;}
.pub-attachmentCard{overflow:hidden;border-radius:18px;border:1px solid var(--line);background:linear-gradient(180deg,var(--card),var(--panel-soft));box-shadow:var(--shadow-soft)}
.pub-attachmentCard.is-uploaded{border-color:rgba(91,188,174,.28)}
.pub-attachmentCard.is-error{border-color:rgba(185,82,70,.36)}
.pub-attachmentPreview{aspect-ratio:16/10;background:rgba(255,255,255,.03);display:flex;align-items:center;justify-content:center;overflow:hidden}
.pub-attachmentPreview img,.pub-attachmentPreview video{width:100%;height:100%;object-fit:cover;display:block}
.pub-attachmentPreview audio{width:100%;padding:14px}
.pub-attachmentFallback{display:grid;place-items:center;gap:8px;padding:20px;text-align:center;color:var(--text-muted)}
.pub-attachmentFallback__icon{display:inline-flex;align-items:center;justify-content:center;min-width:64px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line);background:var(--chip-bg);font-size:12px;font-weight:900;letter-spacing:.08em}
.pub-attachmentFallback__text{font-size:13px;max-width:26ch}
.pub-attachmentBody{display:grid;gap:10px;padding:12px 14px 14px}
.pub-attachmentName{font-weight:850;line-height:1.3;word-break:break-word}
.pub-attachmentMetaRow{display:flex;justify-content:space-between;gap:10px;color:var(--text-muted);font-size:12px}
.pub-attachmentFooter{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pub-statusBadge{display:inline-flex;align-items:center;min-height:30px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;border:1px solid var(--line);background:var(--chip-bg);color:var(--text-soft)}
.pub-statusBadge.is-pending{border-color:rgba(47,111,223,.28);background:rgba(47,111,223,.08)}
.pub-statusBadge.is-done{border-color:rgba(47,143,88,.28);background:rgba(47,143,88,.10)}
.pub-statusBadge.is-error{border-color:rgba(185,82,70,.34);background:rgba(185,82,70,.10)}
.pub-textBtn{padding:0;color:var(--brand);font-weight:800;cursor:pointer}
.pub-textBtn[disabled]{opacity:.45;cursor:not-allowed}
.pub-mobileOnly{display:none}
@media (max-width: 820px){
  .pub-desktopOnly{display:none !important}
  .pub-uploadActions .pub-btn{flex:1 1 100%;min-width:0}
  .pub-attachmentGrid{grid-template-columns:1fr}
  .pub-uploadWrap{gap:12px}
}


/* Premium upload mobile-first refinements */
@media (max-width: 580px){
  .pub-uploadDrop{display:none !important;}
  .pub-uploadMeta{font-size:12px;gap:6px;}
  .pub-uploadActions{display:grid;grid-template-columns:1fr;gap:10px;}
  .pub-uploadActions .pub-btn{min-width:0;width:100%;}
  .pub-mobileOnly{display:inline-flex !important;}
  .pub-attachmentGrid{grid-template-columns:1fr;gap:10px;}
  .pub-attachmentPreview{aspect-ratio:16/9;}
}
@media (min-width: 581px){
  .pub-mobileOnly{display:none !important;}
}


/* Compact sidebar uploads: mailbox */
.pub-filesPanel .pub-attachmentGrid--sidebar{
  grid-template-columns:1fr;
  gap:12px;
}
.pub-filesPanel .pub-attachmentCard--sidebar{
  display:grid;
  grid-template-columns:92px minmax(0,1fr);
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:18px;
}
.pub-filesPanel .pub-attachmentCard--sidebar .pub-attachmentPreview{
  width:92px;
  min-width:92px;
  height:72px;
  aspect-ratio:auto;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.pub-filesPanel .pub-attachmentCard--sidebar .pub-attachmentPreview audio{
  width:100%;
  padding:8px;
}
.pub-filesPanel .pub-attachmentCard--sidebar .pub-attachmentBody{
  min-width:0;
  padding:0;
  gap:6px;
}
.pub-filesPanel .pub-attachmentCard--sidebar .pub-attachmentTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px;
}
.pub-filesPanel .pub-attachmentCard--sidebar .pub-attachmentName{
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:15px;
}
.pub-filesPanel .pub-attachmentCard--sidebar .pub-attachmentMetaCompact{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  font-size:12px;
  color:var(--text-muted);
}
.pub-filesPanel .pub-attachmentCard--sidebar .pub-attachmentFooter{
  justify-content:flex-start;
  gap:14px;
}
.pub-filesPanel .pub-attachmentCard--sidebar .pub-linkBtn{
  color:var(--brand);
  text-decoration:none;
  font-weight:800;
  background:none;
  border:0;
  padding:0;
}
.pub-filesPanel .pub-attachmentCard--sidebar .js-upload-delete{
  color:#e78775;
}
@media (max-width: 640px){
  .pub-filesPanel .pub-attachmentCard--sidebar{
    grid-template-columns:72px minmax(0,1fr);
    gap:10px;
    padding:10px;
  }
  .pub-filesPanel .pub-attachmentCard--sidebar .pub-attachmentPreview{
    width:72px;
    min-width:72px;
    height:64px;
  }
}