// src/utils/styles.js
const styles = {
  root: {
    fontFamily: "Segoe UI, Roboto, sans-serif",
    background: "#1F2933",
    color: "#E5E7EB",
    minHeight: "100vh",
    padding: 32,
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: 40,
  },
  header: {
    width: "100%",
    maxWidth: 1080,
    textAlign: "center",
  },
  headerTitle: {
    fontSize: "3rem",
    fontWeight: 700,
    marginBottom: 8,
  },
  headerSubtitle: {
    fontSize: "1.1rem",
    color: "#9CA3AF",
  },
  chatWrapper: {
    background: "#263238",
    borderRadius: 12,
    padding: 20,
    width: "95%",
    maxWidth: 1080,
    height: 480,
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
  },
  chatScroll: {
    flex: 1,
    overflowY: "auto",
    padding: "12px 18px",
  },
  controlBar: {
    textAlign: "center",
    width: "100%",
  },
  primaryBtn: (rec) => ({
    padding: "14px 40px",
    border: "none",
    borderRadius: 10,
    fontWeight: 600,
    fontSize: "1rem",
    cursor: "pointer",
    background: rec ? "#D13438" : "#107C10",
    color: "#fff",
  }),
  secondRow: {
    display: "flex",
    gap: 32,
    width: "100%",
    maxWidth: 1080,
  },
  card: {
    flex: 1,
    background: "#263238",
    borderRadius: 12,
    padding: 20,
    height: 300,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    color: "#9CA3AF",
    fontStyle: "italic",
  },
  logsWrapper: {
    width: "100%",
    maxWidth: 1080,
  },
  logsPre: {
    background: "#17202A",
    padding: 14,
    borderRadius: 10,
    fontSize: "0.9rem",
    maxHeight: 260,
    overflow: "auto",
    whiteSpace: "pre-wrap",
  },
  phoneWidget: {
    position: "fixed",
    right: 28,
    bottom: 28,
    width: 220,
    height: 275,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
  },
};

export default styles;
