/* Shared CSS for the per-device UI. Served from both the Pi (sim800c-web)
   and the cloud (sim800c-cloud) at /static/device-ui.css so any styling
   tweak applies to both UIs without copy-paste. */
:root {
  --bg:#0f1419; --panel:#1a2028; --panel-2:#232a33; --fg:#e6edf3;
  --muted:#8b949e; --accent:#2f81f7; --green:#3fb950; --red:#f85149;
  --yellow:#d29922; --border:#30363d;
}
* { box-sizing: border-box; }
body {
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  margin:0; padding:0; line-height:1.45;
}
.container { max-width:720px; margin:0 auto; padding:16px; }
h1, h2, h3 { margin:0 0 12px; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
input, textarea, button, select {
  background:var(--panel); color:var(--fg);
  border:1px solid var(--border); border-radius:6px;
  padding:8px 10px; font:inherit; width:100%;
}
button { cursor:pointer; background:var(--accent); border-color:var(--accent);
         color:white; font-weight:600; }
button:disabled { opacity:0.55; cursor:not-allowed; }
button.danger { background:var(--red); border-color:var(--red); }
button.ghost { background:transparent; color:var(--fg); border-color:var(--border); }
button.inline { width:auto; display:inline-block; padding:6px 12px; }
.row { display:flex; gap:8px; margin-bottom:8px; align-items:center; }
.row > * { flex:1; }
.row > button.inline { flex:0 0 auto; }
.form { max-width:380px; margin:80px auto; padding:24px;
        background:var(--panel); border:1px solid var(--border); border-radius:10px; }
.form h1 { font-size:1.3rem; }
.form .field { margin-bottom:12px; }
.form .field label { display:block; color:var(--muted); font-size:0.85rem;
                      margin-bottom:4px; }
.error { color:var(--red); margin-bottom:12px; font-size:0.9rem; }
.muted { color:var(--muted); font-size:0.85rem; }
.topbar { display:flex; justify-content:space-between; align-items:center;
          padding-bottom:14px; border-bottom:1px solid var(--border);
          margin-bottom:18px; }
.topbar .who { color:var(--muted); font-size:0.85rem; }
.topbar form { display:inline; }
.topbar form button { background:transparent; color:var(--muted);
                       border:none; padding:0; font-size:0.85rem; width:auto; }
.topbar form button:hover { color:var(--fg); text-decoration:underline; }
.card { background:var(--panel); border:1px solid var(--border);
        border-radius:8px; padding:14px; margin-bottom:12px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%;
       background:var(--muted); margin-right:6px; vertical-align:middle; }
.dot.online { background:var(--green); }
.dot.offline { background:var(--muted); }
.empty { color:var(--muted); font-style:italic; padding:14px 0; }
.ok { color:var(--green); } .bad { color:var(--red); } .warn { color:var(--yellow); }
pre { background:var(--panel-2); border:1px solid var(--border);
      border-radius:6px; padding:8px 10px; white-space:pre-wrap;
      font-size:0.85rem; min-height:36px; color:var(--muted); }
code { font-family:ui-monospace,monospace; font-size:0.85rem;
       background:var(--panel-2); padding:2px 6px; border-radius:4px; }
.event-log { background:var(--panel-2); border:1px solid var(--border);
             border-radius:6px; padding:6px 10px; font-family:ui-monospace,monospace;
             font-size:0.78rem; max-height:200px; overflow-y:auto;
             color:var(--muted); margin-top:8px; }
.event-log .ev { padding:2px 0; }
.event-log .ev.sms_in, .event-log .ev.ring { color:var(--green); }
.event-log .ev.power_down, .event-log .ev.call_terminal { color:var(--yellow); }

/* --- Tabs --- */
.tabs { display:flex; gap:4px; margin:16px 0 0;
        border-bottom:1px solid var(--border); }
.tab { padding:8px 14px; background:transparent; border:none;
       color:var(--muted); cursor:pointer; font-size:0.95rem;
       border-bottom:2px solid transparent; width:auto; }
.tab:hover { color:var(--fg); }
.tab.active { color:var(--fg); border-bottom-color:var(--accent); }
.tab-panel { display:none; padding:16px 0; }
.tab-panel.active { display:block; }

/* --- SMS threads / conversation --- */
.thread-list .thread {
  padding:10px 12px; background:var(--panel);
  border:1px solid var(--border); border-radius:8px;
  margin-bottom:6px; cursor:pointer;
}
.thread:hover { background:var(--panel-2); }
.thread .peer { font-weight:600; }
.thread .preview { color:var(--muted); font-size:0.85rem;
                   white-space:nowrap; overflow:hidden;
                   text-overflow:ellipsis; }
.thread .ts { color:var(--muted); font-size:0.75rem; }
.chat-view {
  display:flex; flex-direction:column;
  max-height:65vh; min-height:280px;
  background:var(--panel); border:1px solid var(--border);
  border-radius:10px; margin-top:12px; overflow:hidden;
}
.chat-header {
  padding:10px 14px; border-bottom:1px solid var(--border);
  background:var(--panel-2);
  display:flex; justify-content:space-between; align-items:center;
}
.chat-header .peer { font-weight:600; }
.chat-header .close-thread {
  background:transparent; border:none; color:var(--muted);
  padding:2px 6px; font-size:1.1rem; cursor:pointer; width:auto;
}
.chat-header .close-thread:hover { color:var(--fg); }
.thread-messages {
  flex:1 1 auto; overflow-y:auto; padding:10px 14px 0;
  scroll-behavior:smooth;
}
.thread-composer {
  flex:0 0 auto; padding:10px 12px; border-top:1px solid var(--border);
  background:var(--panel-2);
}
.thread-composer textarea {
  width:100%; resize:none; min-height:38px; max-height:120px;
}
.thread-composer .composer-row {
  display:flex; gap:8px; align-items:center; margin-top:6px;
  color:var(--muted); font-size:0.78rem;
}
.thread-composer .composer-row .hint { flex:1; }
.thread-composer .composer-row button { width:auto; padding:6px 16px; }
.msg {
  margin:6px 0; padding:8px 12px; max-width:80%;
  border-radius:14px; word-wrap:break-word; line-height:1.35;
  animation:msg-in 180ms ease-out;
}
@keyframes msg-in { from { transform:translateY(6px); opacity:0; } }
.msg.in { background:var(--panel-2); border-bottom-left-radius:4px; }
.msg.out { background:var(--accent); color:white; margin-left:auto;
           border-bottom-right-radius:4px; }
.msg.out.optimistic { opacity:0.7; }
.msg.out.failed { background:var(--red); }
.msg .body { white-space:pre-wrap; }
.msg .ts { font-size:0.7rem; opacity:0.65; margin-top:4px; }
.day-sep { text-align:center; color:var(--muted); font-size:0.75rem;
           margin:16px 0 8px; }
.banner {
  background:var(--panel-2); border-left:3px solid var(--accent);
  padding:12px 14px; margin:12px 0; border-radius:4px;
}
.banner.ring { border-left-color:var(--green); }
.banner.power { border-left-color:var(--red); }
.banner-actions { margin-top:8px; display:flex; gap:8px; }
.banner-actions button { width:auto; padding:6px 12px; }

/* Dial pad */
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.keypad button { padding:14px; font-size:1.2rem; }
.dial-input { font-family:ui-monospace,monospace; font-size:1.3rem;
              text-align:center; }