:root{
  --blue:#123b6d;
  --brand-green:#1f6373;
  --brand-gold:#e5a12a;
  --light:#eef5fb;
  --accent:#e8b343;
  --ink:#182230;
  --muted:#667085;
  --line:#d8e2ec;
  --white:#fff
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:linear-gradient(180deg,#f5f9fd,#eef3f7);
  min-height:100vh;
  display:flex;
  flex-direction:column
}

/* Header / branding */
.topbar{
  background:var(--white);
  border-bottom:1px solid var(--line);
  padding:14px 24px
}

.brand{
  width:min(1320px,100%);
  margin:auto;
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(330px,1.2fr) minmax(260px,1fr);
  align-items:center;
  gap:34px;
  min-height:112px
}

.brand-logo-link,
.brand-logo-right{
  display:flex;
  align-items:center;
  min-width:0
}

.brand-logo-link{
  justify-content:flex-start;
  text-decoration:none
}

.brand-logo-right{
  justify-content:flex-end
}

.brand-logo{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain
}

.dde-logo{
  max-width:345px
}

.mathiteia-logo{
  max-width:330px
}

.brand-title{
  color:var(--brand-green);
  font-size:clamp(1.75rem,2.5vw,2.55rem);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.025em;
  text-align:center;
  padding:0 8px
}

.shell{
  width:min(1040px,calc(100% - 28px));
  margin:42px auto;
  flex:1
}

.intro{
  text-align:center;
  max-width:760px;
  margin:0 auto 24px
}

.eyebrow{
  color:var(--blue);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:.78rem
}

.intro h1{
  font-size:clamp(2rem,5vw,3.2rem);
  line-height:1.08;
  margin:.3em 0
}

.intro p{
  color:var(--muted);
  font-size:1.06rem
}

.chat-card{
  background:var(--white);
  border:1px solid var(--line);
  box-shadow:0 16px 45px rgba(18,59,109,.1);
  border-radius:18px;
  overflow:hidden
}

.role-row{
  display:flex;
  gap:14px;
  align-items:center;
  padding:16px 20px;
  background:#f9fbfd;
  border-bottom:1px solid var(--line)
}

label{font-weight:650}
select,textarea{font:inherit;border:1px solid #bac9d8;border-radius:10px;background:white}
select{padding:9px 12px}

.messages{
  min-height:330px;
  max-height:55vh;
  overflow:auto;
  padding:22px;
  display:flex;
  flex-direction:column;
  gap:14px
}

.message{
  max-width:82%;
  padding:12px 15px;
  border-radius:15px;
  white-space:pre-wrap;
  line-height:1.5
}

.message.assistant{align-self:flex-start;background:var(--light);border-bottom-left-radius:4px}
.message.user{align-self:flex-end;background:var(--blue);color:white;border-bottom-right-radius:4px}
.message.error{background:#fff1f0;color:#9b1c1c}
.loading{color:var(--muted);font-style:italic}

.sources{
  border-top:1px solid #cbdbe9;
  margin-top:12px;
  padding-top:10px;
  font-size:.9rem
}
.sources ul{margin:6px 0 0;padding-left:20px}
.sources a{color:var(--blue)}

.composer{
  display:flex;
  gap:10px;
  border-top:1px solid var(--line);
  padding:16px
}
.composer textarea{flex:1;resize:vertical;min-height:54px;padding:13px}
.composer button{border:0;border-radius:11px;background:var(--blue);color:white;font-weight:700;padding:0 22px;cursor:pointer}
.composer button:disabled{opacity:.55;cursor:wait}

.notice{margin:0;padding:0 18px 17px;color:var(--muted);font-size:.78rem}
footer{text-align:center;padding:22px;color:var(--muted);font-size:.85rem}

@media(max-width:900px){
  .topbar{padding:14px}
  .brand{
    grid-template-columns:1fr 1.2fr 1fr;
    gap:18px;
    min-height:92px
  }
  .dde-logo{max-width:285px}
  .mathiteia-logo{max-width:270px}
  .brand-title{font-size:clamp(1.35rem,3vw,1.9rem)}
}

@media(max-width:700px){
  .topbar{padding:14px}
  .brand{
    display:flex;
    flex-direction:column;
    gap:14px;
    min-height:0
  }
  .brand-logo-link,
  .brand-logo-right{
    width:100%;
    justify-content:center
  }
  .dde-logo{max-width:330px}
  .mathiteia-logo{max-width:320px}
  .brand-title{
    order:2;
    font-size:clamp(1.55rem,7vw,2rem);
    padding:2px 0;
    text-align:center
  }
  .brand-logo-left{order:1}
  .brand-logo-right{order:3}
  .shell{margin:24px auto}
  .role-row{align-items:stretch;flex-direction:column;gap:6px}
  .messages{padding:14px;min-height:300px}
  .message{max-width:92%}
  .composer{padding:12px;flex-direction:column}
  .composer button{padding:13px}
}


/* Πηγές κάτω από κάθε απάντηση */
.sources{
  border-top:1px solid #bfd2e2;
  margin-top:14px;
  padding-top:12px;
  font-size:.9rem;
  white-space:normal
}

.sources-heading{
  font-weight:800;
  color:var(--blue);
  margin-bottom:8px;
  letter-spacing:.01em
}

.sources-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px
}

.source-item{
  display:flex;
  align-items:flex-start;
  gap:8px;
  line-height:1.35
}

.source-badge{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:2px 7px;
  border-radius:999px;
  font-size:.72rem;
  font-weight:700;
  background:#ddeaf5;
  color:#18466f
}

.source-drive{background:#e4f3ea;color:#17643d}
.source-e-mathiteia{background:#fff1d9;color:#8a5a00}
.source-web{background:#e8eefb;color:#234d93}

.sources a{
  color:var(--blue);
  font-weight:650;
  text-decoration:underline;
  text-underline-offset:2px;
  overflow-wrap:anywhere
}

.sources a:hover{text-decoration-thickness:2px}
.sources-empty{color:#8a3b12;font-size:.84rem}

@media(max-width:700px){
  .source-item{flex-direction:column;gap:4px}
}